You are here
Основы Полезное Уроки Уроки фотошопа 

Бесшовные текстуры в фотошопе

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

Часто бесшовные текстуры применяются для заливки фона в так называемых «резиновых сайтах».

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

Сегодня один из заказчиков захотел по-новогоднему украсить свой сайт, добавив на задний фон снежинки, при этом прислал картинку, которую пожелал увидеть на своем сайте.

Картинка сама по себе очень маленькая, само собой, вставлять ее на сайт в первоначальном виде смысла не было никакого, ведь ее не хватило бы для заполнения монитора даже с маленьким разрешением.

Я решила сделать бесшовную текстуру, чтобы в дальнейшем заполнить ей задний фон.

Итак, делаем бесшовные текстуры в фотошопе.

Приступаем к работе

Открываем картинку Ctrl+O. Вызываем панель слоев – F7. Разблокируем первоначальный слой, дважды щелкнув по нему в панели слоев.

Бесшовные текстуры

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

Бесшовные текстуры

Идем в меню «Image» – «Image Size» («Изображение» – «Размер изображения»)(Alt+Ctrl+I).

Бесшовные текстуры

Смотрим ширину и длину изображения, делим пополам. Запишите значения на листочке, чтобы не забыть.

Бесшовные текстуры

Заходим в меню «Filter» – «Other» — «Offset» («Фильтр» — «Другое» — «Сдвиг»).

Бесшовные текстуры

Вводим значения, равные половине от 100% ширины и высоты изображения.

Бесшовные текстуры

После применения фильтра, изображение сдвинется таким образом, чтобы были видны резкие переходы на границах изображений.

Бесшовные текстуры

При помощи инструмента «Восстанавливающая кисть» маскируем стыки изображений.

На всякий случай еще раз применяем фильтр «Ctrl+F»(повторяет предыдущий фильтр).

Смотрим, чтобы стыки уже не были видны.

Далее создаем паттерн. Заходим в меню:

«Edit» – «Define pattern»(Редактирование» – «Определить узор»).

Бесшовные текстуры

Создаем новый документ, например 1920х1080px.

Выбираем инструмент Paint Bucket (G) (Заливка), меняем в настройках заливки Foreground (Цвет переднего плана) на «Pattern»(Регулярный).

Бесшовные текстуры

Если вы все сделали правильно, слой должен заполнится однородной бесшовной текстурой.

Итак, в этом уроке мы посмотрели как можно сделать бесшовные текстуры в фотошопе. Надеюсь, урок оказался для вас полезен.

До встречи!

Related posts

Leave a Comment

88 запросов. 0,546 секунд. 23.9447860717772 Мб