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

С помощью программы Photoshop CS6 и данного руководства вы сможете не просто избавиться от всех этих недостатков, но и реализовать красивый бесшовный фон!

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

Сначала мы должны выделить на картинке участок при помощи инструмента Photoshop «Рамка» . Возьмем, к примеру, центр полотна. Заметьте, что выбор должен падать на фрагмент с более ярким и в тот же момент равномерным освещением (обязательно, чтобы на нем не было темных участков).

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

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

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

Получаем 2 фрагмента, которые в месте состыковки осветлены. Теперь нам нужно соединить их таким образом, чтобы от светлых участков не осталось и следа. Сливаем их в единое целое (CTRL+E ).

Здесь мы опять применяем инструмент «Заплатка» . Выделяем нужный нам участок (область, в которой будет состыковка двух слоев) и перемещаем выделенный фрагмент на соседний.

С Инструментом «Заплатка» наша задача становится значительно проще. Особенно данным инструментом удобно пользоваться с травой – фоном из разряда далеко не самых лёгких.

Теперь перейдем к вертикальной линии. Все делаем точно так же: дублируем слой и перетаскиваем его наверх, другую копию располагаем снизу; состыкуем два слоя таким образом, чтобы между ними не оставалось белых участков. Сливаем слой и с помощью инструмента «Заплатка» действуем таким же образом, как делали это ранее.

Вот мы в прицепе и сделали нашу текстуру. Согласитесь, это было довольно легко!

Убедитесь, что на вашей картинке нет затемненных участков. При данной проблеме используйте инструмент «Штамп» .

Остается сохранить наше отредактированное изображение. Для этого выделяем все изображение (CTRL+A ), далее идем в меню «Редактирование/Определить узор» , присваиваем имя этому творению и сохраняем его. Теперь его можно использовать в качестве приятного фона в ваших последующих работах.

Мы получили оригинальную зеленую картинку, которая имеет массу применений. Например, вы можете использовать её в качестве фона на вебсайте или использовать как одну из текстур в Photoshop.

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

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

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

Текстурирование при помощи фильтров

Многие пользователи (в основном начинающие) по-прежнему воспринимают фильтры, как ненужные трюки, которые не имеют никакого реального применения. Но это совсем не так. Фильтры – это очень мощные и разносторонние инструменты, которые, при правильном использовании, дают удивительные результаты. Если, работая в Фотошоп, вы не используете фильтры, то я вас призываю еще раз взглянуть на эти недооцененные инструменты.

Применение нескольких фильтров

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

В Фотошоп имеется галерея фильтров, где вы можете просмотреть результат взаимодействия тех или иных фильтров. На изображении ниже видно, что фильтр Craquelure (Кракелюры) становится гораздо интересней, если применить его после фильтра Reticulation (Ретикуляция) при помощи галереи фильтров.

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

А теперь посмотрите, как она создается. Для начала создаем новый документ с белым холстом. Далее применяем к нему фильтр Add Noise (Добавить шум), для этого перейдите в меню Filter > Noise (Фильтр - Шум).

Данный фильтр создает хорошую основу для следующего фильтра. Чтобы получить желаемый результат, важно сохранять последовательность применения фильтров. Теперь примените фильтр Emboss (Тиснение), перейдя во вкладку Filter > Stylize (Фильтр - Стилизация). Результате смотрите на третьем рисунке справа.

Кроме того, некоторые фильтры дают лучшие результаты, когда применяются более одного раза. Рассмотрим пример с фильтром Spherize (Сферизация) на сетке, для этого зайдите в меню Filter > Distort (Фильтр - Искажение). Применив его один раз эффект получится слабый. Применив его во второй раз эффект станет более заметным.

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

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

Фильтры для создания текстуры дерева

На создание текстуры дерева уходит много времени и усилий, почему бы не позволить Фотошоп сделать за вас большую часть работы? Некоторые фильтры, например облака или шум, подходят для её создания, документ желательно брать таких размеров 256х256, 512х512 и даже больше 1024х1024.

Если вы возьмете один из перечисленных фильтров в качестве основы и скомбинируете с другим фильтром, то у вас получатся сложные деревянные текстуры без применения дополнительных усилий. На изображении ниже показан пример создания текстуры, в которой в качестве основы использовался фильтр Clouds (Облака).

А теперь рассмотрим это на примере. Как уже говорилось к белому холсту размером 1024х1024 пикселей нужно применить Фильтр Clouds (Облака), для этого перейдите в меню Filter > Render (Фильтр - Рендеринг). Подобно Noise (Шум) фильтр Облака обеспечивает некую хаотичность, которая хорошо комбинируется с другими фильтрами.

Вы свободно можете регулировать размер изображения, не влияя на примененный фильтр. Регулировать размер можно перейдя во вкладку Image > Image Size (Изображение – Размер изображения).

Теперь, если мы добавим эффект Posterize (Постеризация), перейдя в меню Image > Adjustment (Изображение - Коррекция), текстура разделится на несколько оттенков серого цвета с более очерченным рисунком.

И в заключении, чтобы обозначить края добавим фильтр Find Edges (Выделение краев), зайдя во вкладку Filter > Stylize (Фильтр - Стилизация). В результате текстура превратится в древесину.

Текстурирование с помощью стилей слоя

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

Режимы наложения

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

Совет: Работу с полутоновыми текстурами (т.е. оттенки серого) при использовании режимов наложения гораздо легче контролировать, цвет можно добавить позже. Сложные текстуры создаются в несколько этапов. Рассмотрим текстуру столешницы на четырех изображения ниже. Каждое изображение представляет собой простую текстуру, которые при смешивании образуют сложную текстуру.

Дополнительные параметры

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

В нижней части окна находится раздел Blend if (Наложение если) с ползунками. При помощи этих ползунков можно с легкостью создавать сложные эффекты наложения.

Посмотрите на изображение ниже. Глянцевая текстура краски была создана при помощи того самого раздела Blend if (Наложение если).

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

Прежде чем передвигать ползунки, зажмите клавишу Alt, тем самым ползунки разделятся на два части, придавая плавность эффекту.

Дублирование стилей слоя

Иногда, чтобы добиться более сложного эффекта, необходимо применить сразу два одинаковых стиля с различными настройками. Достичь этого в Фотошоп более ранних версиях без каких-либо последствий было бы трудно. Благодаря смарт-объектам, появилась возможность добавления стилей к группе слоев (с версии CS6) и повторное использование стилей на одном слое. Данный метод используется для создания жидкости или стекла. Смотрите изображение ниже.

Давайте рассмотрим, как создается жидкость. Начинаем мы с создания общей формы на отдельном слое (изображение слева). Далее добавляем стили Внутренняя тень и Наложение градиента (рисунок в центре). Затем слой преобразуется в смарт-объект, именно он позволит в будущем редактировать стили слоя. Впоследствии те же два стиля были применены повторно, но уже к смарт-объекту и с другими настройками, для достижения более сложного эффекта.

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

Текстурирование при помощи кисти

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

Панель кистей

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

Для создания реалистичных бликов, я обратился к настройкам в разделах Shape Dynamics (Динамика формы) и Scattering (Рассеивание) в панели кистей. Изменяя параметры, я создал ряд различных мазков кисти, которые выглядят довольно естественно.

Совет: Ещё одна полезная особенность панели кистей в том, что в процессе редактирования каких-либо параметров мазок кисти сразу же отображается в предварительном просмотре.

Пользовательские формы кистей

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

Царапины были созданы при помощи простой формы, как на изображении ниже слева. Я добавил полученную форму в набор кистей, перейдя во вкладку Edit > Define Brush Preset (Редактирование – Определить кисть). Найдите эту кисть в наборе, подкорректируйте настройки в разделах «Динамика формы» и «Рассеивание» и у вас получится форма кисти, которая создает царапины.

Использование кисти и стилей слоя

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

Метод работает лучше, если вы используете форму кисти, которая имеет несколько вариаций. Это может быть как пользовательская кисть, так и стандартная кисть Фотошоп, например Charcoal 59.

После того, как вы определитесь с кистью, отрегулируйте те же параметры «Динамика формы» и «Рассеивание». Перед использованием кисти создайте новый слой и примените к нему стиль Тиснение, затем для заливки установите 0%, в результате цвет скроется, а стиль тиснение проявится. Теперь можете применять текстуру для работы.

Текстурирование с изображениями

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

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

Заключение

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

Как сделать бесшовную текстуру (фон)

Если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством, связанным с 3D max или Photoshop, то вам периодически требуются качественные бесшовные текстуры и фоны. Найти нужную текстуру или фон в сети порой бывает очень не просто, поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.

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

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

Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем “превращать” в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото. Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта и чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.

Возьмем, для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.

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

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

Данный плагин разработан для фотошопа, начиная с CS3 и заканчивая последней на сегодняшний день версией CC. Плагин является бесплатным и скачать его можно с нашего сайта:

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

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

Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу “Shift”.

После того, как нужная область выделена, выбираете в верхнем меню “Изображение” – “Кадрировать” и ваша выделенная область будет вырезана и обращена в квадратное изображение.

Теперь настало время воспользоваться “волшебным” плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.

В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив “Difine Pattern”, после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку “Tile” или “Mirror”. Если вы выберите способ “Tile”, то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ “Mirror”, то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.

Мы выбрали способ “Tile” и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:

Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали, но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.

Для этого правой кнопкой мыши кликаем по папке “tile pattern” и выбираем в появившемся меню “Преобразовать в смарт-объект”. После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).

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

Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем “Файл” – “Экспортировать” – “Сохранить для web” и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку “Сохранить”.

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