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

9

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

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

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

tile1

tile2

— Острова Судьбы
источник

17

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

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

— DA01
источник

Спасибо, это прекрасно! Именно то, что я искал

— Острова Судьбы

5

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

Выберите ваш шаблон слоя
Edit> Define Pattern
Создать новый слой
Выбрать все
Edit> Fill> Pattern> Выберите свой шаблон
Хит хорошо и посмотреть, хорошо ли это выглядит

— Райан
источник

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 и устанавливаю ее на свой рабочий стол. Довольно быстро и просто.

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