Практикум: создание бесшовной текстуры в Adobe Photoshop.

Очень часто дизайнер, в том числе и веб дизайнер, сталкивается с необходимостью создать бесшовную текстуру (например, для фона сайта). Многие мои коллеги знакомы с этим простым методом, поэтому данный практикум адресован новичкам.

Бесшовная текстура – это текстура, не имеющая швов на стыках. Очень часто у нас имеется исходная картинка, которую нужно преобразовать в бесшовную (чаще всего это текстура дерева, кожи, металла, либо другого материала). В этом примере я опишу создание бесшовной текстуры кожи, все остальное можно сделать тем-же способом.

1. В случае, если есть возможность выбрать текстуру либо ее сфотографировать для создания бесшовной текстуры лучше всего использовать равномерно освещенное изображение исходной текстуры, иначе в дальнейшем потребуется немало усилий, чтоб убрать блики и сделать ее равномерной на стыках.
Например:

Это изображение нам не подходит, так как верх картинки имеет блик, при том что низ находится в тени.






А вот это в самый раз! Его и возьмем для примера.





2. Выбрав нужное изображение, приступаем к работе. Прежде чем начать, замечу, что чем больше по размеру вы возьмете изображение и чем мельче при этом будут на нем детали, тем более неоднородной получится наша текстура, и тем сложнее будет догадаться о периодичности повторов ее элементов. Итак, в фотошопе выбираем меню Filter затем подменю Other и, наконец, Offset. В этом меню можно настроить сдвиг каритнки по горизонтали (линейка Horizontal) и вертикали (линейка Vertical). Не забудьте отметить чекбокс Preview что позволяет нам сразу просмотреть результат наших действий, а также Wrap Around для Undefined Areas (повтор текстуры при сдвиге). Двигая ползунок линейки добейтесь того чтоб горизонтальный и вертикальный стыки находились приблизительно по центру картинки.


3. Используя Clone Stamp Tool с кисточкой мягкостью приблизительно 50% либо Patch tool (хотя это как правило дает худший результат), добейтесь однородности текстуры на стыках – т.е. сделайте так, чтоб стыки не были заметны. Прищурьтесь и оцените, действительно ли однородна текстура, нет ли на ней явно заметных пятен или следов ретуши. Еще раз используйте фильтр Offset и подвигайте текстуру, чтобы убедиться что все стыки замазаны. Наша текстура готова.



4. Осталось лишь сохранить текстуру чтобы использовать ее для заливки. Это делается с помощью меню Edit и подменю Define Pattern. В дальнейшем применить заливку этой текстурой можно с помощью Paint Bucket с опцией Pattern, а для использования на веб-страничке, просто сохраните получившееся изображение в нужном формате.