Главная » Adobe Photoshop, Веб-дизайн, Уроки » Как сохранить бесшовную текстуру с шумом для верстки сайта

Как сохранить бесшовную текстуру с шумом для верстки сайта

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

Обновлено: 13.02.2022

Одним из самых распространенных фильтров для текстурирования слоя с фоном является фильтр Шум (Noise). Я тоже люблю использовать его в своих работах, так как он делает фон более объемным и насыщенным. Но проблема состоит  в том, что это не бесшовный паттерн, который легко использовать во время верстки, а цельное изображение. И совершенно логично встает вопрос, как сохранить фон с шумом для верстки так, чтобы им можно было заполнить фон любого разрешения? Сейчас я покажу, как сама выхожу из данной ситуации.

Предположим у нас есть вот такой эскиз будущего дизайна. Здесь панель для меню с шумом и сам фон тоже с шумом.

Как сохранить бесшовную текстуру с шумом для верстки сайта

Сначала займемся фоном. Перейдите на слой фон, и выделите на нем небольшую квадратную область, например 25 на 25 пикселей. (Чтобы область выделения была квадратной, зажмите клавишу Shift во время выделения).

Как сохранить бесшовную текстуру с шумом для верстки сайта

Скопируйте выделенную область. Теперь создайте новый документ размером 50 на 50 пикселей и вставьте туда скопированный слой. Разместите его в левый верхний угол. Продублируйте слой и отразите его по горизонтали, сдвиньте в правый верхний угол. Затем продублируйте получившиемя 2 слоя, отразите их по вертикали и сдвиньте вниз, выровняв по нижней границе.

Как сохранить бесшовную текстуру с шумом для верстки сайта

Теперь нам нужно избавиться от швов в районе стыков наших слоев. Для этого сведите все слои и поработайте немного инструментом Штамп (у кисти штампа обязательно выберите жесткость – 100%).  Пройдитесь по зонам, обозначенным красным цветом:

Keep-background-noise-for-layout-4

Это и будет наш паттерн для заливки фона во время верстки. Сохраните файл с разрешением jpeg и назовите fon.

А теперь давайте проверим, как будет смотреться наш фон при многократном повторении, как это делается во время верстки сайта.

Перейдите в файл с фоном, который мы создавали, и выберите пункт меню «Редактирование – Определить Узор», назовите его fon.

Теперь создайте новый документ размером 600 на 200 пикселей. Создайте новый пустой слой с названием «шум». Выберите инструмент «Заливка», в параметрах инструмента выберите пункт «Регулярный», в списке найдите наш узор «fon», он должен быть в конце списка, и залейте слой «шум». Вот что получится.

Как сохранить бесшовную текстуру с шумом для верстки сайта

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

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

Как сохранить бесшовную текстуру с шумом для верстки сайта

Скопируйте содержимое слоя и поместите в отдельный документ, сохраните его по именем fon_header.

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

Как сохранить бесшовную текстуру с шумом для верстки сайта

Здесь нам не пришлось работать штампом и как-то сглаживать швы, потому что нам «помог» градиент, наложенный на слой с шапкой. Он смягчил эти самые швы.

Вот так я сохраняю фон с шумом для верстки. А какими методами пользуетесь вы? Делитесь в комментариях.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных уроков!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *