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

Много раз меня спрашивали, и вот я решила выделить время и сделать таки урок по созданию бесшовного узора в Фотошопе. Возможно есть методы намного проще и удобней, но я изобрела вот такой велосипед, на нем и катаюсь.

Итак, приготовьтесь, сейчас я буду очень подробно показывать, как я сделала такой цветочный фон. Картинки большие и их больше десяти штук, хотя по правде сказать можно было бы уложиться и в две, зафиксировав лишь основные моменты. Но раз я пообещала пошаговый процесс, то его и буду демонстрировать. Если что, я предупредила))

Создаем документ 4500х4500 пикселей, с разрешением 300.

Вставляем в наш документ заранее приготовленные элементы. В моем случае, это 3 вот таких цветочных заготовки (все они аккуратно вырезаны по контуру и размещены в разных слоях).

Дублируем наши цветочки и в произвольном порядке заполняем ими верх и левую сторону холста. Как видите элементы в разной степени выступают за край. Теперь выделяем все цветы, что пересекают левую границу холста и дублируем их. *не забываем периодически сохранять документ

Выделив наши дубли, щелкаем по маркеру трансформационной области. Теперь у нас стала активной панелька сверху под главным меню. Выбираем точку отсчета левый верхний угол в "Reference point location". Сейчас мы видим координаты нашей группы объектов относительно верхнего левого угла. Их мы и будем менять.

Поскольку мы работаем с левой стороной, то соответственно и двигать объекты будем относительно оси Х. Сейчас у меня там -1018. Итак, достаем калькулятор и додаем до этой цифры 4500 (ширину нашей рабочей области). В итоге у нас получается 3482, это число мы и вводим в графу Х. Наши цветочки переместились, готово.

Аналогично дублируем весь верхний ряд вниз, вычислив координаты нашей группы объектов по оси Y.*не забываем периодически сохранять документ

Если нужно подвигать наши элементы, то не забываем, что теперь противоположные стороны взаимосвязаны. Так что, для перемещений выделяем объект и его дубль и тогда смещаем.

Всю пустую область заполняем цветочками так, чтобы это было гармонично и красиво. Следим за тем чтобы наши объекты не пересекали границ рабочей области. Вот в принципе, наш бесшовный узор и готов. Но поскольку я параноик, которому надо все перепроверить, то у меня есть еще несколько шагов))

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

Дублируем наш слой с цветочным узором. Перемещаем его на 4500 пикселей вправо. Выделяем узор и его дубль и двигаем так чтобы было видно шов, где они соединяются. Для чего я это делаю? Проверяю все ли сошлось)) Иногда, когда слоев очень много, то можно напутать с верхними нижними дублями и какой-то листик в одной части паттерна уйдет под цветочек, а с другой стороны уже будет сверху. Но в нашем случае все замечательно. *не забываем периодически сохранять документ

Если фон вашего сайта не монотонного цвета или градиента, а вы хотите наложить определенную текстуру на ваш бекграунд, то далее расскажу как практически из любой картинки сделать бесшовный фон. Возможно для кого-то этот способ сделать бесшовный фон уже давно известен, но думаю будет интересно узнать об одной небольшой особенности. Ниже будет приведен пример как сделать фон из достаточно крупной фотографической картинки. Для нашего фона нам понадобится Photoshop .

Возьмем для примера фото цветов.

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

Если фон нашего сайта просто замостить такой картинкой получится вот так:

Получилось некрасиво и видны швы

В Photoshop"е есть такая замечательная функция как Сдвиг (Фильтр / Другое / Сдвиг). Мы могли бы воспользоваться этой функцией для получения бесшовного фона, но рисунок достаточно непростой и не хотелось бы терять качество фотографии. Потому я делю картинку на 4 равные куска (для этого наверное лучше брать изначально картинку квадратной формы или обрезать ее до квадрата).

Получается вот так:

Далее мы разрезаем эту картинку на 4 части и каждую часть помещаю на отдельный слой. Это можно сделать при помощи Прямоугольного выделения (выделяем ровно четверть, в нашем случае картинка 580 на 580 пикселей, значит четверть равна 290 на 290 пикселей), далее выделенную область копируем Ctrl+C и вставляем тут же Ctrl+V. Также этого можно добиться при помощи инструмента Раскройка , но тогда наши 4 части сохранятся в отдельную папку и потом их надо будет перенести в один документ для создания 4х слоев.

И перемещаем наши 4 куска следующим образом:

Такого же эффекта можно достичь, как я говорила ранее, используя функцию Сдвиг (Фильтр / Другое / Сдвиг), сдвигая картинку на половину ее высоты и ширины, в данном случае на 290px и 290px. Конечно же это в разы проще, но чтобы сделать качественный бесшовный фон на сайте этого будет недостаточно. Так как если взглянуть на фото выше, мы видим что эффект Размытия сделает картинку банально некрасивой, а дорисовывать цветы очень трудоемкое занятие.

Эта картинка по сути основа для нашего бесшовного фона. Если ваша текстура достаточно не сложная, то достаточно просто замаскировать швы в центре картинки, по периметру стыковка будет идеальная и бесшовная. Без такого перемещения было бы невозможно идеально угадать место стыка, а так мы видим все наши швы в центре.

Убираем стыки на будущем бесшовном фоне

Сейчас наш холст занимает 580х580px. Мы будет сдвигать каждый слой (каждую четверть) в сторону центра на 40px по очереди. Таким образом у нас слои будут накладываться друг на друга. Это можно сделать простым перетаскивание на 40px, либо использовать тот же самый Сдвиг на 40px по вертикали и горизонтали. У нас получится такая картинка, уже с размером холста 500х500px.

Далее будет самый творческий процесс. Берем инструмент Ластик , самый обычный, можно взять с мягкими краями. Выставляем непрозрачность на 50%. Нам нужно будет пройтись по тем слоям, которые расположены сверху, т.е. нетронутым останется у нас только нижний слой. Нам нужно будет пройтись по краям, где у нас наложение слоев, убирая обрезки цветов, те что полностью не поместились. На их месте будут просвечиваться целые цветы нижних слоев. Процесс творческий, потому надо будет поэксперементировать).

У меня получилось вот так:

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

Посмотрим что у нас получилось в итоге, если замостить фон на сайте:

Вот такой у нас получился бесшовный фон для нашего сайта.

Урок №1. Зеркальный фон

Урок №2. Полосатый фон

Урок №3. Фон с сохранением изначальной текстуры

Урок №4. Фон - калейдоскоп

Урок №1 .

Зеркальный фон.

Результат:

1. Открываем нашу картинку в Photoshop:
(«File - Open...» - «Файл - Открыть...»)

2. Создаем новый чистый документ («File - New...» - «Файл - Новый документ...»)

3. Вырезаем из нашей картинке тот участок , который пойдет в основу фона. Для тех, кто не знает как это сделать, можно воспользоваться уроком " "

4. Теперь с помощью инструмента Move tool (V) переносим этот фрагмент на наш чистый лист. Для этого просто зажимаем левой кнопкой мыши нашу картинку и тащим ее на новый документ. Потом отпускаем:

6. Теперь снова перетскиваем его на чистый слой и ставим рядом с уже присутствующим там изображением.

7. Снова поворачиваем наш фрагмент , но уже по вертикали. Жмем Image - Rotate canvas - Vertical (Изображение - Повернуть - Вертикально):

8. И снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

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

11. И последний раз жмем на фргменте Image -Rotate canvas- Vertical (Изображение - Повернуть - Вертикально). И снова видим что наш фрагмент перевернулся. теперь снова его перетаскиваем на чистый слой и ставим рядом с уже присутствующими там изображениями.

Теперь мы будем работать только с чистым слоем и наложенными на него фрагментами.

12. Обрезаем лишнее. Если у вас есть на слое «пустое» место - то есть то, где нет фрагментов, то давайте его обрежем, чтобы остался только наш будущий фон. Для этого пользуемся уроком " "

И получаем результат:

Урок №2 .

Полосатый фон.

Результат:

1. Для этого открываем любую понравившуюся вам картинку в Фотошопе
А делаем это так File - open... (Файл -открыть…). Я выбрала вот эту:

2. Находим на панели инструментов инструмент single row marquee tool:

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

Нажимем в центре нашей картинки и появляется вот такая горизонтальная пунктирная линия:

3. Трансформируем линию. Выбираем команду "Edit - Free transform (Редактировать - свободная трансформация) и (сочетание клавиш ctrl + T) видим, что наша пунктирная линия стала просто линией, а на концах ее образовались маленькие квадратики:

Осторожно надвигаем нашу мышку на один из квадратиков и появилась масенькая черная стрелочка и вот этой стрелочкой двигаем вниз и видим что наша картинка уже вовсе не картинка а сплошные полоски:

Я думаю что на этом можно остаовиться, нет смысла дотягивать до конца всей картикни, можно взять всего лишь часть - кусочек ведь узор линии не изменится:

4. Вырезаем наш кусочек, чтоб обрезать изображение пользуемся инструментом "Crop tool" (обрезка). У меня получилось вот так:

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

Ну вот и все, наш фон готов.

Урок №3 .

Бесшовный фон с сохранением изначальной текстуры.

Результат:

1. Открываем любую картинку (желательно с похожими краями) в ФотоШопе.

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

2. Установите направляющие линии View - Rulers (Просмотр - Направляющие), по которым вы планируете работать (они и будут границами готовой текстуры). Убедитесь, что активирована функция View > Snap to Guides (Просмотр - Вспомогательные элементы). Двигайте направляющие по рисунку так, чтобы они проходили по середине предметов (конечно, насколько это возможно). Это делается для того, чтобы вы мысленно представили свой будущий фон, наметили границы так сказать.

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

3. Выбираем инструмент Rectangular Marquee Tool (Прямоугольное выделение):

и выделяем нижнюю часть, ту, что под номером 4. Вокруг нее образовывается пунктирный квадратик:

4. Копируем выделение на отдельный слой, нажимая на клавиатуре "ctrl + j"

5. Перетаскиваем инструментом Move tool (Перемещение) или стрелочками на клавиатуре скопированный кусок вверх части 2, как это показано на рисунке:

Примечание: у вас эта часть не должна светиться. Я применила ей свойства сияния, чтобы наглядно вам показать (чтобы картинка не сливалась и вы видели границы).

6. Так же копируем часть №1 и перетаскиваем копию в правый край части 2:

Левый нижний угол под номером 3 не используется.

7. Прячем слой №4, активизируем 1 , основной слой должен оставаться видимым (на примере основной слой убран для наглядности).

8. Выбираем инструмент Eraser Tool (резинка), кисть hard (жесткая). Начинаем стирать вокруг зерен так, чтобы это смотрелось наиболее естественно на фоне основного слоя.
Должно получиться так:

Без основного слоя -

С основным слоем -

9. Аналогично поступаем и с другим слоем , тем что копия части №4:

С основным -

Красная линия показывает, как правильно убирать границы в углах. В правом нижнем углу тоже надо стереть кусочек части №1 под углом примерно 45 градусов, как и в верхних углах:

10. Сливаем эти три слоя (слой с верхом, с правой частью и основной) при помощи горячих клавиш ctr+E

11. И теперь самое интересное!!! Отрезаем части 1,3,4:

И наш фон готов:

Урок №4

Фон - калейдоскоп.

1. Берем любую понравившуюся картинку. У меня такая:

И сразу же делаем из слоя Background (Задний план) обычный слой. Это важно! Для этого достаточно дважды кликнуть по нему в палитре слоев.

2. Вырезаем интересный квадратный кусочек. (Кто не умеет обрезать, тот смотрит урок " "). Если кусочек окажется великоват по размеру, то можно его уменьшить (урок " ")

Я взяла такой кусочек картинки и сделала его размером 100х100:

3. Теперь основная фишка . Поворачиваем наш рисунок на 45 градусов.

Для этого идем в Image-Rotate canvas-Arbitrary (Изображение-Повернуть холст-Произвольно):

получаем:

4. Нам весь получившийся ромбик не нужен. Наш фон мы будем формировать только из одной четвертинки этого ромбика. Поэтому опять берем инструмент Crop tool , зажимаем Shift и делаем обрезку:

Подготовительные работы закончены.

5. Начнем "склеивать" фон.

а) Увеличиваем ширину холста вдвое. Идем Image-Canvas size (Изображение-Размер холста) и устанавливаем такие настройки:

получаем:

б) Удваиваем треугольник. Дублируем слой Layer-Dublicate layer (Слой-Дублировать слой). Полученный новый слой отражаем по горизонтали Edit-Transform-Flip Horizontal (Редактирование-Трансформирование-Отразить по горизонтали) и сдвигаем стрелочкой так, чтобы получилось такое:

Объединяем эти два слоя (Ctrl+E).

в) Увеличиваем высоту холста вдвое:

г) Дублируем слой и опять отражаем копию, но теперь уже по вертикали. Получаем "бантик":

Опять объединяем слои (Ctrl+E).

д) Снова дублируем слой. И поворачиваем копию "бантика" на 90 градусов. Для этого идем Edit-Transform-Rotate 90 (Редактирование-Трансформирование-Поворот на 90). Здесь не важно будете вы поворачивать по часовой стрелке или против неё.

Вот такая красота у меня получилась

Совсем как в детском калейдоскопе! И фон из таких кусочков получается оригинальный и совершенно бесшовный:

Приятного вам творчества !

P.S. Если у вас возникли какие-то вопросы по уроку - опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .

Лучшее "спасибо" за урок - ваш комментарий! :)

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

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

Щелкните мышью на значке Default Foreground and Background Colors (D)

(Цвета фронтального плана и фона по умолчанию) на панели инструментов (Tools) программки Adobe Photoshop, чтобы установить цвета по умолчанию.

Поменяйте местами цвета фронтального плана и фона, щелкнув мышью на значке Switch Foreground and Background Colors (X) (Переключатель цветов фронтального плана и фона) на панели инструментов (Tools). Цвет фона на образчике станет черным.

Изберите команду меню File - New (Файл - Новый). На дисплее появится диалог New (Новый).

В полях ввода Width (Ширина) и Might (Высота) введите значения ширины и высоты документа - 100 пикселов.

В открывающемся перечне Color mode (Цветовой режим) изберите RGB Color (Цвет RGB).

В открывающемся перечне Background Contents (Содержимое фона) изберите Background Color (Цвет фона).

Нажав кнопку ОК, закройте диалог New (Новый). В рабочем окне программки Adobe Photoshop появится окно нового документа с размерами 100х100 пикселов и черным цветом фона.

При помощи фильтров Clouds (Облака) и Difference Clouds (Облака с наложением) сделаем мягенький узор в виде «облаков». Эти фильтры генерируют узор при помощи случайных величин, которые меняются в спектре от основного цвета к фоновому, в нашем случае от белоснежного к черному.

Изберите команду меню Filter - Render - Clouds (Фильтр - Рендеринг - Облака). Фильтр будет использован, и на изображении появится узор в виде «облаков».

Сейчас применим к изображению фильтр Difference Clouds (Облака с наложением).

Изберите команду меню Filter - Render - Difference Clouds (Фильтр - Рендеринг - Облака с наложением). Узор на изображении поменяется.

Повторное неоднократное применение этого фильтра делает эффект «прожилок», который припоминает текстуру мрамора. Для повторного внедрения последнего использовавшегося фильтра довольно надавить комбинацию кнопок Ctrl+F.

Нажмите пару раз комбинацию кнопок Ctrl+F. При каждом нажатии этой композиции кнопок фильтр будет применяться повторно, а изображение в окне документа - изменяться.

Дальше применим к изображению фильтр Glowing Edges (Свечение краев) из группы фильтров Stylize (Стилизация). Все фильтры этой группы делают ярко выраженные эффекты очерчивания за счет смещения пикселов и увеличения контрастности изображения и в особенности полезны при обработке черно-белых изображений. Фильтр Glowing Edges (Свечение краев) ищет границы цветовых областей и добавляет свечение, схожее неоновому.

Изберите команду меню Filter - Stylize - Glowing Edges (Фильтр - Стилизация - Свечение краев). На дисплее появится диалог Glowing Edges (Свечение краев), в каком следует найти характеристики эффекта.

Переместите ползунковый регулятор Edge Width (Ширина границ) налево так, чтобы в поле ввода над ним появилось значение 1.

Ползунковый регулятор Edge Brightness (Яркость границ) переместите к правому краю так, чтобы значение этого параметра стало равно 20.

Для параметра Smoothness (Сглаженность) установите значение 1.

Закройте диалог Glowing Edges (Свечение краев), нажав кнопку ОК.

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

командой Brightness/Contrast (Яркость/Контраст) для роста яркости и контраста.

Изберите команду меню Image - Adjustments - Brightness/Contrast (Изображение - Корректировки - Яркость/Контраст). На дисплее появится диалог Brightness/Contrast (Яркость/Контраст).

Переместите ползунковый регулятор Brightness (Яркость) на право так, чтобы в поле ввода над ним отобразилось значение +50.

Переместив ползунковый регулятор Contrast (Контраст) на право, установите значение этого параметра +30.

Нажав кнопку ОК, закройте диалог Brightness/Contrast (Яркость/Конграст).

Сейчас наше изображение, состоящее пока из цветов сероватого, нужно тонировать либо окрасить.

Изберите команду меню Image - Adjustments - Hue/Saturation (Изображение - Корректировки - Цветовой тон/Насыщенность). На дисплее появится диалог Hue/Saturation (Цветовой тон/Насыщенность).

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

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

Установите флаг Colorize (Тонирование). В диалоге поменяется положение ползунковых регуляторов, а в окне документа изображение будет тонировано - приобретет красноватый колер.

Чтобы лучше осознать закономерности опции цветовых компонент, следует представить для себя, что все видимые человечьим глазом цвета диапазона, размещаются на цветовом круге. Каждый цвет на этом круге характеризуется тремя базисными параметрами: цветовым тоном (Hue), насыщенностью (Saturation) и яркостью (Lightness). Такое представление соответствует уже рассмотренной нами ранее цветовой модели HSB.

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

Насыщенность - это степень чистоты цвета, которая определяется соотношением сероватого цвета и данного цветового тона. Насыщенность выражается в процентах от 0% - сероватый - до 100% - стопроцентно насыщенный. На цветовом круге насыщенность возрастает от центра к краю.

Яркость охарактеризовывает относительную освещенность либо затемненность цвета и измеряется в процентах в спектре от 0% - темный - до 100% - белоснежный.

На цветовом круге главные цвета моделей RGB и CMYK находятся в определенной зависимости: каждый цвет размещен против дополняющего его цвета и находится между цветами, из которых он получен. К примеру, сложение зеленоватого и красноватого дает желтоватый. Чтобы усилить какой-нибудь цвет, необходимо ослабить дополняющий его - расположенный напротив него на цветовом круге. Так, чтобы поменять общее цветовое решение в пользу голубых тонов, следует понизить содержание красноватого. По краю цветового круга размещаются так именуемые спектральные цвета, либо цветовые тона. Эти цвета характеризуются наибольшей насыщенностью.

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

Перемещайте ползунковый регулятор Saturation (Насыщенность) на право и наблюдайте в окне документа, как при всем этом увеличивается насыщенность красноватого цвета. Напомним, что на цветовом круге это соответствует движению от центра к краю. Установите значение этого параметра -100%.

Изменим цветовой тон изображения на голубой.

Перемещайте ползунковый регулятор Hue (Цветовой тон) на право и наблюдайте, как меняется цветовой тон изображения в окне документа. Изменяющееся при всем этом числовое значение в поле ввода над ползунковым регулятором отражает угол поворота на цветовом круге относительно начального красноватого цвета.

Установите значение параметра Hue (Цветовой тон) - 210. Такое значение отражает тот факт, что на цветовом круге голубой цвет, которым тонировано изображение, сдвинут относительно красноватого на 210°.

Нажав кнопку ОК, закройте диалог Hue/Saturation (Цветовой тон/Насыщенность). Установленные цветовые характеристики будут закреплены.

Сохраните документ в папке WEB, в файле Fon.psd в формате Adobe Photoshop.

На этом создание фоновой текстуры можно считать законченным. Но, потому что набросок

будет повторен на WEB страничке много раз, между кусками фона будут видны швы.

В Adobe ImageReady имеется особый фильтр - Tile Maker (Конструктор повторений), который позволяет удалить швы, создавая таким способом бесшовный фон.

Нажмите кнопку Edit In ImageReady (Shift+Ctrl+M) (Редактировать в ImageReady (Shift+Ctrl+M)) в нижней части панели инструментов (Tools). Будет запущена программа Adobe ImageReady, и в ее рабочем окне раскроется документ Fon.psd.

Изберите команду меню Adobe ImageReady Filter - Other - Tile Maker (Фильтр - Другие - Конструктор повторений). На дисплее появится диалог Tile Maker (Конструктор повторений).

Данный фильтр смешивает пикселы на краях изображения для сотворения бесшовного фона. При установленном переключателе Blend Edges (Размытие краев) будет производиться размытие краев рисунка для исключения швов между плитками при повторении изображения на WEB страничке.

В поле ввода Width (Ширина) следует указать ширину полосы у края изображения, в границах которой должен происходить плавный переход. Обычно употребляются значения от 5% до 15%, максимум до 20%. Воспользуемся значением этого параметра, предлагаемым по умолчанию, - 10 процентов.

При установленном флаге Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения), размер плиток подгоняется под размер изображения. Если данный флаг скинуть, то плитки будут меньше размера изображения на величину, определенную параметром Width (Ширина), и на WEB страничке они не будут впритирку прилегать друг к другу.

Установка переключателя Kaleidoscope Tile (Калейдоскоп) создаст фон в виде калейдоскопа, в каком изображение отражается по горизонтали и вертикали, создавая таким способом уникальный узор.

Установите флаг Resize Tile to Fill Image (Поменять размер плитки для наполнения изображения).

Закройте диалог Tile Maker (Конструктор повторений) нажатием кнопки ОК. Установленные характеристики будут использованы.

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

Изберите команду меню File - Output Settings - Background (Файл - Характеристики вывода - Фон). На дисплее появится диалог Output Settings (Характеристики вывода).

Установите переключатель Background (Фон), чтобы использовать активное изображение в качестве фона WEB странички.

Закройте диалог Output Settings (Характеристики вывода), нажав кнопку ОК.

Сейчас можно просмотреть фон в .

Изберите команду меню File - Preview in (Файл - Подготовительный просмотр в) и в показавшемся подменю - программку просмотра WEB страничек. Будет запущен избранный браузер, и в его окне вы увидите сделанный бесшовный фон.

Для пуска браузера, установленного по умолчанию, вы сможете надавить кнопку Preview In Default Browser (Ctrl+Alt+P) (Подготовительный просмотр в браузере по умолчанию (Ctrl+Alt+P)) на панели инструментов (Tools).

Не считая фонового рисунка в окне программки просмотра выводится информация о формате изображения (Format), его размерах (Dimensions), размере файла (Size) и параметрах оптимизации (Settings), а ниже - HTML код автоматом сгенерированного файла.

Закройте окно браузера, нажав кнопку в правом верхнем его углу.

Чтобы сделанное изображение можно было использовать как фон WEB странички, его нужно улучшить и сохранить в WEB формате.

Щелкните мышью на ярлычке 2-Up (2 варианта) в высшей части окна документа. Будет выполнена оптимизация с последними установленными параметрами, и вы увидите оригинальное и оптимизированное изображения.

Подберите лучшие, с вашей точки зрения, характеристики оптимизации в формате GIF.

Сохраните оптимизированный документ в папке WEB под именованием Fon.gif, выбрав команду меню File - Save Optimized (Файл - Сохранить оптимизированный документ).

Закройте программку Adobe ImageReady без сохранения документа Fon.psd, нажав кнопку в правом верхнем углу ее окна.

Поглядим сейчас, как будет смотреться сделанный фон на WEB страничке other.html.

Откройте файл other.html из папки WEB в программке Блокнот (Notepad) и воткните в открывающий тег атрибут background=Fon.gif.

Откройте в браузере файл other.html.

Видите ли, WEB страничка с сделанным фоном смотрится существенно увлекательнее, чем с однородным. Направьте внимание также, что швы между плитками фактически неприметны.

Закройте программку просмотра WEB страничек.

Удалите из HTML кода файла other.html вставленный атрибут background=Fon.gif.

Закройте программку Блокнот (Notepad).

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

Шероховатость

В программке Adobe Photoshop сделайте новый документ размером 100 x 100 пикселов с белоснежным цветом фона и черным цветом фронтального плана.

Залейте изображение черным цветом.

Примените фильтр Add Noise (Добавить шум), выбрав команду меню Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 400.

Примените фильтр Emboss (Рельеф), воспользовавшись командой меню Filter - Stylize - Emboss (Фильтр - Стилизация - Рельеф), с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=30.

Тонируйте изображение, выбрав команду меню Image - Adjustments - Hue/Saturation (Изображение - Корректировки - Цветовой тон/Насыщенность).

Шлифованная плитка

Сделайте новый документ размером 100 x 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Gaussian (По Гауссу), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 125.

Примените фильтр Motion Blur (Размытие в движении), воспользовавшись командой меню Filter - Blur - Motion Blur (Фильтр - Размытие - Размытие в движении), с параметрами: Angle (Угол)=-45, Distance (Расстояние)=100. Последний параметр должен быть не меньше размера изображения.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=2, Amount (Эффект)=35. Направьте внимание, что параметр Angle (Угол) должен отличаться от такого же параметра фильтра Motion Blur (Размытие в движении).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/Насыщенность), применив последующие характеристики: флаг Colorize (Тонирование) - установлен, Hue (Цветовой тон)=180, Saturation (Насыщенность)=10, Lightness (Яркость)=+20.

Облицовочная плитка

Сделайте новый документ размером 100х 100 пикселов и с белоснежным цветом фона.

Примените фильтр Add Noise (Добавить шум) с установленным переключателем Uniform (Равномерное), флагом Monochromatic (Сохранить цвета) и параметром Amount (Эффект) равным 120.

Примените фильтр Emboss (Рельеф) с параметрами: Angle (Угол)=45, Height (Высота)=1, Amount (Эффект)=30.

В гамме Channels (Каналы) сделайте новый канал Alpha 1, нажав кнопку Create new channel (Сделать новый канал).

Выделите изображение альфа-канала в окне документа командой Select - All (Выделение - Все) и сделайте рамку выделения шириной 3 пиксела командой Select - Modify - Border (Выделение - Модификация - Граница).

Инвертируйте выделение командой Select - Inverse (Выделение - Направить выделение) и залейте выделенную область белоснежным цветом. Отмените выделение.

Примените к альфа-каналу фильтр Gaussian Blur (Размытие по Гауссу), воспользовавшись командой меню Filter - Blur - Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу) с параметром Radius (Радиус)=2.0 пиксела, чтобы размыть границу.

В гамме Layers (Слои) выделите слой Background (Фон) и сделайте эффект трехмерности при помощи фильтра Lighting Effects (Эффекты освещения), воспользовавшись командой меню Filter - Render - Lighting Effects (Фильтр - Рендеринг - Эффекты освещения).

Тонируйте изображение, воспользовавшись диалогом Hue/Saturation (Цветовой тон/ Насыщенность).

Для сотворения фоновых текстур, не считая обрисованных фильтров, попытайтесь использовать фильтры Colored Pencil (Магический карандаш), Sponge (Губка), Grain (Зерно), Craquelure (Кракелюры), Chalk & Charcoal (Мел и уголь), Mezzotint (Меццотинто), Mosaic (Мозаика), Halftone Pattern (Полутоновой узор), Note Paper (Почтовая бумага), Polntillize (Пуантилизм), Reticulation (Ретикуляция), Glass (Стекло), Texturizer (Текстуризатор), Texture (Текстура), Ink Outlines (Тушь) и Mosaic Tile (Цветная плитка). Заметим, что применение неких фильтров, к примеру, Glass (Стекло), к сплошному цвету дает очень малозначительный либо нулевой эффект.

В данном уроке вы узнаете, как сделать бесшовную текстуру в 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 пространстве), в частности, использующихся в компьютерных играх, в статье . Здесь фильтр Смещения также позволяет двигать текстуру по горизонтали и вертикали.

Чтобы сместить изображение текстуры, выберите вкладку фильтров «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 пикселей и так далее.

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

Главное, чтобы вам было удобно работать в процессе удаления швов текстуры.

Используем инструмент клонирования Штамп («Clone Stamp Tool»), чтобы скрыть швы на изображении

Чтобы удалить швы на текстуре, в Фотошопе существует несколько инструментов. Одним из таких инструментов является «Штамп » («Clone Stamp Tool «), иногда еще называемый кистью клонирования или клонирующей кистью.

На рисунке показан инструмент Штамп в Фотошопе.

Инструмент «Штамп » в Фотошопе позволяет создавать клоны участков изображения и вставлять их в указанное место холста. Чтобы указать место на изображении, с которого будет клонироваться часть изображения, удерживайте клавишу ‘Alt’ и кликните Левой Клавишей Мыши в точке изображения, которая станет точкой отсчета клонирования участка-донора.

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

На рисунке показана результирующая бесшовная текстура кирпичной кладки.

А вот так выглядит получившаяся текстура в Unity3D.

На рисунке показана затайленная бесшовная текстура кирпичной стены в Unity3D.

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

Вместо Штампа или в качестве дополнения к нему вы можете использовать инструменты «Заплатка» (Patch Tool), Healing Brush Tool, Spot Healing Brush Tool

Возвращаем текстуру на место

Теперь, когда вы удалили все швы на изображении, превратив ее в бесшовную текстуру, необходимо вернуть её на место. Конечно, вы можете не возвращать ее, а использовать в том виде, в котором она сейчас есть — со смещением. Так можно поступить для бесшовной текстуры травы или бесшовной текстуры камней, каменной или кирпичной кладки. Однако такое смещение и результирующая текстура практически неприемлемы для текстур деталей, например, sci-fi стены или sci-fi плитки пола, создание которой рассматривается в , поскольку оставляет по краям затайленной 3D модели половинки текстур.

Проверка бесшовности текстуры и коррекция швов текстуры

Чтобы проверить, насколько «бесшовной» получилась ваша текстура, вы можете, если сместить текстуру не на 256 пикселей по вертикали и горизонтали, а например на +128 и +128 пикселей, или на -128 и +128 пикселей, или на +128 и 0 пикселей и так далее. Только не забывайте (а лучше записывайте) на сколько пикселей и в какую сторону каждый раз смещали текстуру, чтобы иметь возможность вернуть ей изначальное нулевое смещение. Если подобное смещение выявило нарушение бесшовности, то подредактируйте стыки текстур, как было описано выше, чтобы избавиться от швов на текстуре (смещенной). Не забывайте, что не стоит залезать на края изображения, чтобы опять не пришлось править несовпадения краев текстур.

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

Используем инструмент Осветлитель (Dodge Tool) и Затемнитель (Burn Tool) для осветления изображения в Фотошопе

Если текстура неоднородно освещена, то при затайливании текстуры, например, в игровом движке Unity3d, Unreal Engine, Amazon Lumberyard, Cryengine и других, или в 3D редакторах 3ds MAX, Cinema4D, Blender и т.д., такие затенения образуют повторяющийся узор. На небольших расстояниях камеры или точки наблюдения такой эффект не особо заметен. Чем больше камера будет удаляться от поверхности с такой затайленной текстурой, тем сильнее будет заметен эффект паттерна.

Чтобы избежать подобного эффекта, необходимо, чтобы все участки текстуры были одинаково осветлены/затемнены. Для осветления текстуры (отдельных ее участков) вы можете воспользоваться инструментом «Dodge Tool «, работа с которым более подробно описана в ///уроке про осветление карты высот для создания ландшафта.

На рисунке показаны инструменты осветления и затемнения изображения Dodge Tool и Burn Tool.

Как и где еще используются затайленные текстуры

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

Получившуюся бесшовную текстуру можно использовать для раскрашивания ландшафтов или 3D моделей в Unity3d.

На рисунке показан 3D ландшафт, созданный в Unity3D в одном из уроков по созданию террейнов в Unity3D.

Результирующую бесшовную текстуру можно также сохранить в качестве паттерна или кисти для Фотошопа.

На рисунке показан процесс создания паттерна для Фотошопа из изображения.

В следующем уроке я расскажу, как сделать бесшовную текстуру в GIMP.

[email protected]

Post Views: 31 327