Про то, как создать бесшовную текстуру в Photoshop

Понадобилось создать бесшовную текстуру для своего сайта. Существует несколько вариантов из которых я выбрал наиболее подходящий для своих целей. Про него я расскажу в этой статье.

Этот вариант лучше всего подходит для бесшовной текстуры с повторяющимся текстом или картинкой.

Метод создания бесшовной текстуры предполагает хотя бы начальный уровень работы в Photoshop. Задача, которая стояла передо мной, была проста: нужно было сделать шапку сайта, на которой, при необходимости, можно разместить баннер и при этом не менять вид самой шапки.

Изначально я взял уже готовый логотип, который я создал для сайт. Файл в формате PSD, белый фон, три слоя с тестом. Т.к. слои не понадобятся, то сразу растрируем тест и объединяем слои (выделяем слои, правая кнопка мыши, выбираем «Растрировать» в выпадающем меню, точно так же объединяем слои (либо выделяем слои курсором при нажатой клавише Alt и затем нажимаем Ctrl+E)).

Исходный файл для создания текстуры

Теперь сдвигаем текстуру. Для этого заходим в меню «Фильтр/Другое/Сдвиг…». В появившемся окне выставляем значения равные половине стороны картинки. В моем случае картинка 400х400 пикселей, значит выставляем 200 и 200 пикселей (плюс или минус значения не имеет). И отмечаем «Вставить отсеченные фрагменты».

Сдвиг

Текстура в готовом виде

И это все! У вас готовая бесшовная текстура. Два варианта использования для моего случая:

• Создать в Photoshop документ необходимого размера и вручную замостить его текстурами
• Залить одну готовую текстуру непосредственно на сайт и замостить ей шапку с помощью css

Второй вариант предпочтительней.

Первый вариант — собираем все руками. Специально для наглядности я оставил незаполненные области

Точно так же можно создать текстуру из картинки:

Исходный файл

Созданная текстура

Добавил к предыдущей картинке

Если созданная бесшовная текстура нужна для постоянного применения, то можно создать «узор». Для этого заходим в меню «Редактирование» и выбираем «Определить узор…».

В ближайшее время результат моей работы появится на сайте http://buyandtell.net.

Так что создать бесшовную текстуру в Photoshop не просто, а очень просто. Буду рад, если моя статья кому-нибудь поможет!