Проверка того, будет ли BG правильно повторять плитку в Photoshop?

9

Я часто работаю над созданием фоновых текстур в Photoshop для использования в Интернете. К сожалению, мне обычно приходится догадываться или просто использовать халяву с других сайтов.

Я хотел бы создать свои собственные текстуры в Photoshop и проверить правильность их мозаики перед экспортом изображения. Есть ли способ сделать это быстро? Я помню метод, использующий смещение, но я не знаком с инструментами.

Ниже приведено несколько примеров фоновых плиток, чтобы вы могли видеть, о чем я говорю:

tile1

tile2

adobe-photoshop website-design background tiles Острова Судьбы
источник

Ответы:

17
  • создать свой образ. Например, скажем, это квадрат 200px
  • перейдите в ФИЛЬТРЫ> ДРУГОЙ> СМЕЩЕНИЕ и введите числа x и y, которые в два раза меньше размера вашего изображения (в данном случае 100px)
  • это сместит ваше изображение на столько пикселей и поместит пиксели, которые были перемещены с холста, на другую сторону. Теперь вы увидите шов, проходящий по середине вашего изображения, где рисунок не полностью повторяется.
  • подправьте этот шов, чтобы сделать его гладким, используя любые инструменты, которые вам нравятся (распространенным вариантом является инструмент клонирования).
  • сохраните ваше новое изображение.

Для более сложных изображений вам может понадобиться сделать окончательное смещение, скажем, 1/4 размера в пикселях, чтобы подправить края, которые вы, возможно, пропустили в первый раз, когда упали около края холста.

DA01
источник
Спасибо, это прекрасно! Именно то, что я искал
Острова Судьбы
5

DA01 отвечает, как это сделать, но ваш вопрос - как это проверить. Ответ на этот вопрос:

  1. Выберите ваш шаблон слоя
  2. Edit> Define Pattern
  3. Создать новый слой
  4. Выбрать все
  5. Edit> Fill> Pattern> Выберите свой шаблон
  6. Хит хорошо и посмотреть, хорошо ли это выглядит
Райан
источник
2
тьфу. Я совершенно неправильно понял вопрос! Хороший совет. Другой вариант - просто создать тестовый файл HTML с повторяющимся фоном. Затем просто продолжайте повторно сохранять файл и перезагружать браузер.
DA01
1
Да, я знал, как это сделать в HTML / CSS, но не знал, что Photoshop также может тестировать. Спасибо за совет!
Острова Судьбы
2

Я традиционно сохраняю изображение в формате jpg или png, а затем использую базовый html для проверки листов.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Откройте его в браузере, и вы сможете увидеть тайлинг, просто повторно сохраните «image.jpg» и обновите веб-страницу, чтобы проверить ревизии.

Скотт
источник
1

Есть и другой способ сделать это, но ограничение состоит в том, что все остальные шаблоны должны быть одинакового размера, вы поймете, почему.

шаги:

  • Сделайте коробку 200 на 200 пикселей.
  • Преобразуйте его в смарт-объект.
  • Дублируйте и выровняйте его так, чтобы было 3 прямоугольника по горизонтали. Убедитесь, что между ними нет перекрытий или пробелов.
  • Дублируйте три выбранных прямоугольника в 3 вертикальных столбца.
  • Если он еще не включен, включите плавающие окна в настройках.
  • Дважды щелкните и откройте смарт-объект.
  • Выровняйте оба окна так, чтобы вы могли видеть оба файла.
  • Заполните смарт-объект любым шаблоном, который вы хотите, и одновременно увидите его в действии в другом окне.
Мухаммед Умер
источник
1

Существует отличный (бесплатный для личного использования) инструмент под названием AMP Tile Viewer, который позволяет очень быстро проверить, является ли изображение мозаичным и как оно будет выглядеть мозаичным. Я использую его все время, и он просто отлично работает. Нет необходимости создавать шаблоны в Photoshop, которые вы никогда не будете использовать или впоследствии будете удалять.

TaranQ
источник
1

Я написал расширение для Chrome под названием Tile View, которое позволяет щелкнуть правой кнопкой мыши изображение и посмотреть, как оно отображается.

tknomad
источник
Есть также этот веб-инструмент, который я недавно обнаружил: tile.toyls.com
Thomas Guyot-Sionnest
0

Для этого я просто сохраняю плитку в формате jpg и устанавливаю ее на свой рабочий стол. Довольно быстро и просто.

Джил
источник