1. Що таке безшовні текстури? Навіщо потрібні безшовні текстури і як їх використовувати?
2. Як зробити безшовну текстуру в Фотошопі. Підготовка зображення в Фотошопі
3. Зміщуємо зображення в Фотошопі, використовуючи фільтр Зсув ( «Offset»)

В даному уроці ви дізнаєтеся, як зробити безшовну текстуру в Photoshop. Даний урок підійде також тим, хто хоче дізнатися, як зробити безшовний фон для сайту (патерн для сайту, патерн для фону) або патерн для Фотошопа.

Що таке безшовні текстури? Навіщо потрібні безшовні текстури і як їх використовувати?

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

У ігрострой досить часто використовується техніка Тайлінг текстур або затайліванія текстур (від англ. Tile - плитка). Тайлінг дозволяє повторювати текстури на поверхні 3D моделі. Дуже часто затайленние текстури застосовуються на ландшафті, або для текстурування доріг, будинків і так далі. Про Тайлінг я вже розповідав в уроці Від Тайлінг і зміщення до атласу текстур на прикладах зміни обкладинки для книги і текстури одягу і шкіри персонажа .
Але для того щоб затайленная текстура добре виглядала на 3D моделі, необхідно щоб вона була безшовної.

На малюнку показана затайленная далеко не безшовна текстура, на якій видно стики між протилежними краями текстури.

Безшовна текстура являє собою зображення, елементи протилежних сторін якого збігаються.

Якщо протилежні сторони текстури НЕ будуть підходити один до одного, то при затайліваніі такої текстури ви отримаєте шви в місці їх стикування. Такі шви виникають внаслідок різких переходів між малюнками текстури на її протилежних краях.

На малюнку показана не безшовна текстура, розмножена в Фотошопі (двічі затайленная). Малюнок на краях зображення відрізняється.

Як ви можете бачити на малюнку вище таку текстуру не варто використовувати для затайліванія ландшафту або будь-якого іншого 3D об'єкта, так і просто для заливка фону сайту або полотна в Фотошопі. І для створення патерну для Фотошопа вона не підійде. Щоб накласти текстуру на 3D моделі без стиків (або залити фон сайту або полотна), помітних користувачеві, необхідно скористатися інструментами редакторів зображень.

Як зробити безшовну текстуру в Фотошопі. Підготовка зображення в Фотошопі

Завантажте текстуру, яку хочете зробити безшовної, в Фотошоп, відкривши файл текстури з Фотошопа або просто перетягніть файл з текстурою з папки, де вона у вас зберігається, в вікно Фотошопі (в цьому випадку нове зображення створювати не потрібно, воно буде створено автоматично). Для цього уроку я вибрав текстуру цегли (цегляної кладки) розміром 512 на 512 пікселів.

На малюнку показана текстура цегли, яка буде перетворена в безшовну текстуру.

Якщо ви не знайшли текстуру розміром 512 на 512 пікселів (1024 х 1024, 2048 х 2048 або 4048 х 4048 пікселів), а знайшли, наприклад, текстуру розмірі 1300 на 700, то обріжте зображення в Фотошопі до розміру в 512 х 512 пікселів за допомогою інструменту Рамки / Crop (в панелі інструментів зліва) або використавши інструмент зміни розміру полотна «Canvas Size», який ви можете знайти у вкладці «Image» головного меню.

На малюнку показані інструменти, що дозволяють обрізати зображення Canvas Size (A) і Crop (B).

Також ви можете використовувати інструмент вільної трансформації (Ctrl + T) або інструмент Scale, який ви знайдете в меню Transform вкладки Edit головного меню.

На малюнку показаний інструмент Scale для зміни масштабу зображення (в даному випадку, підгонки зображення) в Photoshop.

Якщо ви застосовували інструмент масштабування або переміщення текстури, необхідно виділити все видиме зображення на полотні (Ctrl + A) і скопіювати його на новий шар (Ctrl + C і потім Ctrl + V). Якщо цього не зробити, то що виступає за полотно зображення нам завадить. Альтернативою копіпаст може послужити згадуваний раніше інструмент обрізки зображення Crop. Далі ми будемо працювати з новим створеним шаром: виділіть його в панелі праворуч, клацнувши на ньому лівою кнопкою миші.

Зміщуємо зображення в Фотошопі, використовуючи фільтр Зсув ( «Offset»)

Отже, як зробити безшовну текстуру в Фотошопі ... Фотошоп надає вам відмінний інструмент, який підійде для створення безшовної текстури. Даний інструмент являє собою фільтр в Фотошоп і називається Зсув або «Offset«. Я вже розповідав про зміщення текстур на поверхні 3D моделей (а насправді в uv просторі), зокрема, використовуються в комп'ютерних іграх, в статті Ефекти в Unity3D. Частина III. Білборди (білборди), рядок, що біжить, неонова реклама, інформаційні щити, реклама, рекламні щити, банери. . Тут фільтр Зміщення також дозволяє рухати текстуру по горизонталі і вертикалі.

Щоб змістити зображення текстури, виберіть вкладку фільтрів «Filter» в головному меню і в розпочатому випадаючому меню виберіть вкладку «Other«, в якій, в свою чергу, виберіть вкладку «Offset ...».

На малюнку показано вікно налаштувань фільтра Зміщення ( «Offset»).

У вікні фільтра «Зсув» виставте значення для зміщення по горизонталі рівним 256 пікселям (Horizontal 256 pixels right) і зміщення по вертикалі рівним також 256 пікселям (Vertical 256 pixels down), щоб пересунути зображення текстури на 256 пікселів по горизонталі і вертикалі. Натисніть кнопку «OK«, щоб застосувати фільтр і змістити текстуру. Як ви можете бачити (і себе на полотні або на малюнку вище) в центрі зображення з'явилися шви, оскільки краї зображення не збігаються один з одним.
Для текстури 1024 на 1024 зсув по вертикалі і горизонталі можна виставити в 512 пікселів, для 2048 - 1024 пікселів, хоча і не обов'язково.
Дані значення зміщення служать лише рекомендаційними і можуть для зображення 512 на 512 пікселів (а також для 1024х1024, 2048 × 2048) складати 128 пікселів, 256 пікселів і так далі.

На малюнку показано зображення, до якого застосовано фільтр смеÑ