Тестування, чи BG буде повторювати плитку належним чином у Photoshop?

9

Я часто працюю над створенням фонових текстур у Photoshop, які використовуються в Інтернеті. На жаль, мені зазвичай доводиться здогадуватися або просто використовувати халяви з інших веб-сайтів.

Я хотів би зібрати власні текстури у Photoshop і перевірити, чи правильно вони плитки, перш ніж експортувати зображення. Чи є спосіб зробити це швидко? Я пам’ятаю метод, що використовує офсет, але я не знайомий з інструментами.

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

плитка1

плитка2

— Острови долі
джерело

17

створіть свій образ. Наприклад, скажімо, це квадрат 200px
перейдіть до FILTERS> OTHER> OFFSET і введіть x і y числа, що наполовину перевищують розмір зображення (у цьому випадку 100px)
це змістить ваше зображення на стільки пікселів, а пікселі, які були переміщені з полотна, на іншу сторону. Тепер ви побачите шов, що біжить по середині зображення, де візерунок не повністю повторюється повністю.
торкніться цього шва, щоб зробити його гладкою сумішшю, використовуючи будь-який інструмент, який вам подобається (інструмент для клонування - поширений варіант).
збережіть новий імідж.

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

— DA01
джерело

Дякую, що це ідеально! Саме те, що я шукав

— Острови Долі

5

DA01 відповідає, як це зробити, але ваше питання полягає в тому, як його перевірити. Відповідь на це питання:

Виберіть шар шаблону
Редагувати> Визначити шаблон
Створіть новий шар
Вибрати все
Правка> Заливка> Шаблон> Виберіть шаблон
Добре натисніть і подивіться, чи добре це виглядає

— Райан
джерело

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

Існує також інший спосіб зробити це, але межа полягає в тому, що всі інші візерунки повинні бути однакового розміру, ви побачите чому.

Кроки:

Зробіть поле 200px на 200px.
Перетворіть його в розумний об’єкт.
Скопіюйте і вирівняйте його, щоб горизонтально було 3 коробки. Переконайтеся, що між ними немає пробілів або пробілів.
Скопіюйте три обрані поля в 3 вертикальних стовпчики.
Якщо це ще не ввімкнено, увімкніть плаваючі вікна в налаштуваннях.
Двічі клацніть і відкрийте розумний об’єкт.
Вирівняйте обидва вікна так, щоб ви могли бачити обидва файли.
Заповніть розумний об’єкт будь-яким малюнком, який ви хочете, і побачите його в дії в іншому вікні одночасно.

— Мухаммед Умер
джерело

1

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

— TaranQ
джерело

1

Я написав розширення для Chrome під назвою Tile View, яке дозволяє вам клацнути правою кнопкою миші зображення та побачити, як воно плитки.

— ткномад
джерело

Є також цей веб-інструмент, про який я нещодавно дізнався

— Thomas Guyot-Sionnest

0

Те, що я роблю, це просто зберегти плитку як jpg і встановити її на плитку на робочому столі. Досить швидко і легко.

— джилл
джерело