Как сделать бесшовный фон. Создание бесшовных фонов

В данном уроке вы узнаете, как сделать бесшовную текстуру в 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

Урок №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. Если у вас возникли какие-то вопросы по уроку - опишите в комментарии подробно вашу проблему, мы обязательно поможем вам разобраться! И не забудьте подписаться на комментарии к уроку, если хотите получить ответ на свой вопрос как можно скорее .

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

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

Сегодня существует множество сервисов и инструментов для графического дизайна, которые в значительной степени могут упрощать жизнь дизайнерам. Есть много онлайн генераторов цветовой палитры , шрифтов, иконок и прочих инструментов, полезных для дизайнеров работающих над различными проектами. Аналогично существуют и инструменты для создания фоновых узоров и текстур , которые могут пригодиться каждому дизайнеру. Эти веб-приложения довольно просты в использовании и подойдут даже новичкам. Итак, приготовьтесь к этому замечательному списку 15 сервисов для создания цельных фоновых узоров и текстур.

Stripe Generator

Stripe Generator представляет собой веб-инструмент для создания цельного полосатого узора . Инструмент предлагает множество функций для создания пользовательских полосатых узоров на плитки, используя различные размеры, цвета и ориентации. Сервис позволяет использовать до 5 цветов, а также настраивать фона, стиль фона, отступы и тени. Полосатые плитки легко редактируются, к тому же можно проверить обширную коллекцию дизайнов, созданную другими участниками.

BG Patterns

BG Patterns представляет собой современный инструмент для создания красочных узоров , используя различные встроенные фигуры или пользовательские . Инструмент предлагает для различных тем, такие как цветы, вечеринки, животные и геометрические фигуры. Вы можете выбрать множество цветов для фона и фигур. Он также подразумевает вращение и масштабирование пользовательских изображений, настройку перекрытия для использования нескольких фигур. BG Patterns позволяет использовать картинки с разрешением, выше чем 300 × 300 точек в формате PNG и SVG.

Noise Texture Generator

Noise Texture Generator позволяет создать простую текстуру фона с использованием различных цветов и оттенков. Сервис позволяет устанавливать размеры текстуры, а также непрозрачность и плотность. Есть предпросмотр плитки и возможность загрузить её мгновенно.

Repper Patterns

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

Colour Lovers

Colour Lovers - современное приложение, которое позволяет создавать различные узоры , используя пользовательские палитры, изображения и встроенные стили. Сервис также предлагает Seamless Lite - инструмент на Flash для дизайна новых узоров, используя различные настройки для создания и редактирования, например, добавление фигур и текста, поворот и трансформирование фигур и многое другое.

Patternizer

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

Texture Generator

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

Trianglify Generator

Бесплатныйгенератор low poly фонов . Есть возможность настройки цвета и градиентов . После настройки можно скачать изображение в векторном формате SVG или растровый вариант в формате PNG.

Trianglify Background Generator

Еще один low poly генератор фонов , но в отличие от предыдущего, этот имеет другую текстуру и более интересные вариации переходов цветов.

Background Image Generator

Отличный сервис для генерации фонов для сайта . Имеет множество вариантов текстур, которые раскрашиваются в нужный нам цвет.

Plaid Maker

Plaid Maker – современный сервис для генерирования клетчатых узоров в различном стиле. Вы можете выбрать комбинацию цветов для создания узора или просто отредактировать встроенный узор. Клетчатые узоры могут быть использованы в блоге , для фона веб-сайта, либо как фон приложения для или Android.

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

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

Шаг 1.
Создаем в фотошопе новый документ размером 800х800 пикс.

Заливаем его цветом #80ac4b.

Шаг 2.
В новом документе создадим кисть с эффектом боке. Для этого выбираем большую жесткую кисть черного цвета. Создаем новый слой и щелкаем ей в центре документа. Задаем стилем слоя небольшое внешнее свечение тоже черного цвета. Потом отключаем задний фон и идем в меню «Редактирование» (Edit) > «Определить кисть» (Define Brush) и сохраняем нашу кисть.

Возвращаемся в наш основной документ. Нажимаем F5 и в настройках кисти устанавливаем следующие параметры: «Динамика формы» (Shape dynamics) > «Колебание размера» (Size Jitter) — 18%, «Рассеиваие» (Scatter) > «Рассеивание» (Scatter) — 789%, «Другая динамика» (Other dynamics) > «Колебание непрозрачности» (Opacity Jitter) — 100%.

Шаг 3.
Теперь выбираем инструмент «Кисть» (Brush) и белым цветом, аккуратными штрихами добавляем круги на зеленый фон. Должно получиться приблизительно так.

Шаг 4.
Теперь главное действие. В меню выбираем «Фильтр» (Filter) > «Другие» (Other) > «Сдвиг» (Offset). Выбираем значения, как на рисунке ниже.

Шаг 5.
На этом шаге выбираем жесткую кисть цвета фона #80ac4b и вручную аккуратно закрашиваем недоделанные круги. Должны остаться только целые круги. Смотрим рисунок ниже.

Шаг 6.
Теперь опять выбираем созданную нами кисть, настраиваем ее как в Шаге 2 (Динамика формы, Колебание размера и Рассеивание) и короткими, аккуратными штрихами добавляем кругов в центр документа. Следим за тем, чтобы круги не попадали на края квадрата, а добавлялись только в центре.

Шаг 7.
Наш бесшовный паттерн готов. Теперь можно уменьшить его до приемлемых размеров и в меню «Редактирование» (Edit) > «Определить узор» (Define Pattern) можно добавить новый узор и использовать его для заливки фона.