Как сделать бесшовную текстуру
В этом уроке узнаем, как сделать бесшовную текстуру в Фотошопе.
В интернете миллионы потрясающих текстур и узоров, которые ждут, пока вы их скачаете. Но бывает так, что размеры текстуры не соответствуют размеру нашего файла. Не беда. После прохождения этого урока вы сможете адаптировать любую текстуру под любой размер.
Для примера возьмем текстуру бумаги. Но данный урок подходит текстуры.
Как сделать бесшовное изображение
Вам периодически требуются качественные бесшовные текстуры и фоны, если вы занимаетесь веб-дизайном, 3D моделированием или другим творчеством. Найти нужную текстуру или фон в сети порой бывает очень не просто.
Поэтому решением данной проблемы может послужить вариант сделать бесшовную текстуру (фон) самостоятельно. При этом, вы сами сможете сделать текстуру нужного вам качества и оттенка.
Давайте самостоятельно сделаем бесшовную текстуру (фон) в программе фотошоп.
Итак, главной особенностью бесшовной текстуры (фона) является отсутствие границ, т.е. взяв данную текстуру и соединяя ее с копией с любой стороны мы в итоге получим бесшовное изображение, без каких либо разделений и границ.
В качестве примера посмотрите картинку ниже, где справа расположена текстура камня, а слева несколько данных текстур соединены.
Подобное бесшовное изображение, будь то текстура или фон для сайта, можно достаточно легко сделать в программе Photoshop с помощью специального плагина. Сейчас мы все это в подробностях рассмотрим.
Для начала работы нам потребуется сам фон или текстура который(ую) мы и будем «превращать» в бесшовный(ую). Естественно, что качество нашей будущей бесшовной текстуры или фона будет напрямую зависеть от качества исходного изображения или фото.
Допустим, вам необходимо сделать бесшовную текстуру асфальта, в таком случае вам потребуется фото данного асфальта. И чем качественнее данное фото будет, тем качественнее получится бесшовная текстура. Вы можете найти нужное вам изображение в интернете, либо сделать фото объекта самостоятельно, но фото должно быть качественным.
Возьмем для примера фото асфальта, найденное в сети, фото специально подберем побольше размерами, чтобы текстура получилась высокого качества. В нашем случае размер фото составляет 1300 x 864px, чего будет достаточно.
Данная картинка (фото) не является бесшовным и это легко проверить состыковав данное изображение с копией. По итогу мы видим, что стыки (швы) на общей картине видны.
Принцип создания бесшовного изображения заключается в отражении краев (стыков), что в результате дает идеальное соединение изображения, тем самым создавая вид единой поверхности, а не разных кусков изображения. Для легкого и быстрого «превращения» фото (изображений) в бесшовные текстуры существует специальный плагин для фотошопа, который автоматически выполняет указанные выше функции (отражение и подгонка швов изображения).
Скачиваем бесплатный плагин
Данный плагин разработан для фотошопа, начиная с CS3. Плагин является бесплатным и скачать его можно с нашего сайта:
- Плагин для Photoshop CS3
- Плагин для Photoshop CS5
- Плагин для Photoshop CS6
- Плагин для Photoshop СС
Скачайте плагин для вашей версии фотошоп и установите его. После установки плагина у вас в правой боковой панели программы фотошоп появится значок плагина:
Делаем фото квадратным
Чтобы создать бесшовное изображение (текстуру) с помощью данного плагина необходимо открыть нужное изображение (фото) программой фотошоп и сделать данное изображение квадратным — это обязательное требование данного плагина. Т.е. открываете необходимое изображение фотошопом, выбираете инструмент «Прямоугольная область» в левой панели программы и с его помощью (удерживая левую клавишу мыши) выделяете квадратную область из любой части вашего изображения.
Для того, чтобы область выделялась правильным квадратом, а не прямоугольником, необходимо в ходе выделения нужной области, помимо левой кнопки мыши удерживать клавишу «Shift».
После того, как нужная область выделена, выбираете в верхнем меню «Изображение» — «Кадрировать» и ваша выделенная область будет вырезана и обращена в квадратное изображение.
Теперь настало время воспользоваться «волшебным» плагином. При выделенном слое нашего квадратного изображения нажимаем на значок плагина и у нас открывается панелька.
Получаем бесшовную текстуру
В данной панельке мы указываем размер нашего изображения в пикселях (в нашем случае получилось 864px) и ставим галочку напротив «Difine Pattern», после чего просто выбираем способ создания бесшовного изображения нажатием на кнопку «Tile» или «Mirror». Если вы выберите способ «Tile», то ваше бесшовное изображение будет создано именно из вашей картинки в полном ее размере. Если же выберите способ «Mirror», то бесшовное изображение будет создано из 4-х ваших картинок, зеркально отраженных и уменьшенных под размер вашего квадрата. Вообщем просто попробуйте и все поймете сами.
Мы выбрали способ «Tile» и в результате получили текстуру высокого качества, размером 864 x 864 пикселя:
Бесшовную текстуру (фон) высокого качества, которою можно использовать в 3D max или фотошопе мы сделали. Но давайте еще придадим ей необходимый нам оттенок. Допустим нам нужна текстура потрескавшегося асфальта не светло-серого цвета, а темно-красного. Для начала мы объединим получившиеся слои в одну картинку, а первоначальное изображение просто удалим за ненадобностью. В правой панели слоев удаляем самый нижний слой с нашим исходным изображением, чтобы оно не мешалось и преобразуем все получившиеся слои из которых состоит бесшовная текстура в одно изображение.
Для этого правой кнопкой мыши кликаем по папке «tile pattern» и выбираем в появившемся меню «Преобразовать в смарт-объект». После данных действий все содержимое папки будет преобразовано в один слой изображения, с которым мы в дальнейшем и будем работать (менять ему цветовой тон).
Красим текстуру в нужный цвет
Выделяем наш слой с бесшовным фоном, кликнув в панели слоев по нему левой кнопкой мыши и в нижнем меню, под панелькой слоев кликаем на значок коррекции и в появившемся меню выбираем «Цветовой тон/насыщенность». После этого над нашим слоем с текстурой появится новый корректирующий слой и откроется окошко с настройками цветового тона и насыщенности. В данном окошке вы уже на свое усмотрение регулируете «ползунки» настроек цвета и тона, после чего применяете данные настройки.
Таким образом у вас получится бесшовная текстура с необходимым цветовым тоном. Остается сохранить данное изображение в высоком качестве, для этого в верхнем меню выбираем «Файл» — «Экспортировать» — «Сохранить для web» и в появившемся окне, в настройках качества выставляем 100%, после чего жмем кнопку «Сохранить».
После данных манипуляций получилась качественная бесшовная текстура с необходимым нам оттенком. И теперь, если мы приложим копии изображения друг к другу, то убедимся, что получается бесшовный фон, стыков (швов) уже нет.
Итак, наша бесшовная текстура готова!
Создание бесшовной текстуры в Photoshop CC 2017 / CC 2019
Бесшовные текстуры — штука незаменимая для тех, кто имеет дело с трехмерной графикой, будь то создание виртуальных миров компьютерных игр, архитектурная визуализация или дизайн интерьеров. Однако подобрать подходящую текстуру для своего проекта бывает весьма непросто, а бесшовную — и подавно. Зачастую гораздо проще, быстрее и дешевле сделать найденную картинку бесшовной самостоятельно. И в данном уроке представлено сразу несколько способов создания бесшовных текстур в Photoshop…
Основными методами получения текстур на сегодняшний день являются:
- фотографирование поверхностей;
- сканирование материалов;
- рисование текстур «с нуля» в графических редакторах.
Рисование «с нуля» — это отдельная история. В уроке же рассматриваются различные способы обработки в Photoshop текстур, полученных первыми двумя из перечисленных методов, которые, понятное дело, изначально бесшовными не являются.
Текстуры бывают очень разными, отсюда и способы их обработки могут потребоваться разные. Так, прием, прекрасно работающий на текстурах одного типа, может оказаться совершенно несостоятельным для текстур другого типа. Поэтому, чтобы на выходе получить качественную бесшовную текстуру, необходимо проанализировать исходное изображение и прикинуть, какой способ лучше использовать для его обработки. Урок состоит из пяти видео. Каждое видео — наглядный пример того, как можно сделать бесшовную текстуру в Photoshop тем или иным способом. Все показанные в видео исходные изображения, а также полученные из них бесшовные текстуры можно скачать по ссылкам из материалов к уроку.
Самостоятельное создание бесшовной гранжевой текстуры в Photoshop
В этом уроке я расскажу, как собственными средствами Phtoshop, используя корректирующие слои, различные фильтры и эффекты, создать гранжевую текстуру.
Затем мы рассмотрим два способа создания бесшовной текстуры из образца — первый с помощью бесплатного плагина для создания бесшовных текстур мы преобразуем полученную текстуру в бесшовную и определим её в качестве узора (Pattern) Photoshop, а второй — ручной, с помощью фильтра «Сдвиг» (Offset) и инструмента «Заливка с учётом содержимого» (Content-Aware Fill).
Вот что у меня получилось в итоге:
Шаг 1: Создание основы текстуры
Создаём документ размером 512 на 512 пикселей на белом фоне. Конвертируем фоновый слой в обычный и преобразуем его в смарт-объект.
Шаг 2: Добавление фильтров и корректирующих слоёв к первому смарт-объекту
Нажимаем клавишу D, чтобы привести основной и фоновый цвета цветовой палитры к умолчанию — чёрному и белому.
Идём Фильтр —> Рендеринг —> Облака с наложением (Filters —> Render —> Clouds Difference). Фильтр «Облака» применён к смарт-объекту в качестве смарт-фильтра. Фильтр «Облака» не имеет настроек, но в последствии его можно отключить и применить ещё один фильтр «Облака», а это уже будет другая визуализация фильтра, соответственно, вся конечная текстура примет другой вид. Вот как должен выглядеть документ:
Добавляем Фильтр —> Искажение —> Рябь (Filter —> Distort —> Ripple) и ставим следующие настройки:
Добавляем корректирующий слой «Постеризация» (Posterize) и ставим уровень от 10 до 15:
Добавляем корректирующий слой «Яркость/Контрастность» (Brightness/Contrast), уменьшаем яркость, увеличиваем контрастность:
Если на документе имеются ярко выраженные чёрные или белые области, примените корректирующий слой «Кривые» и опустите правый конец кривой и/или поднимите левый конец кривой:
Зажав клавишу Ctrl, выбираем все слои и преобразуем их в смарт-объект.
Шаг 3: Добавление фильтров и корректирующих слоёв ко второму смарт-объекту
Добавляем Фильтр —> Усиление резкости —> Резкость+ (Filter —> Sharpen —> Sharpen More). Можно ослабить действие фильтра, для этого дважды кликаем по фильтру в панели слоёв справа по иконке регулировки, в открывшеся диалоговом окне уменьшаем непрозрачность.
Добавляем Фильтр —> Шум —> Добавить шум (Filter —> Noise —> Add Noise) — введите значение Эффекта 15 пикселей, Распределение — Равномерная, поставьте галку у «Монохромный». Значение Эффекта можно будет отрегулировать позже:
Общий вид заготовки текстуры у меня получился в средне-серых тонах, поэтому я добавляю корректирующий слой «Уровни» (Levels) и сдвигаю белый ползунок влево, а чёрный — немного вправо:
Шаг 4: Создание бесшовного шаблона с помощью плагина
Теперь из этой заготовки мне необходимо сделать бесшовный шаблон. Для этого я воспользуюсь бесплатным плагином Seamless Textures Generator, скачать который и прочитать описание можно на этой странице.
Плагин корректно работает только с одним слоем. Поэтому необходимо преобразовать все имеющиеся слои в один смарт-объект и дублировать этот объект (Ctrl+J), чтобы у нас сохранился нетронутый оригинал. После этого открываем плагин через Окно —> Расширения —> Seamless Textures-Generator (Window —> Extensions —> SeamlessTextures-Generator), не забываем поставить галку у опции Define Pattern, чтобы документ автоматически определился как узор Photoshop и нажимаем кнопку Tile. Результат:
А вот как выглядит эта текстура, наложенная на документ размером 1280 на 800 пикселей:
Шаг 4: Создание бесшовного шаблона с помощью вручную
Можно сделать бесшовную текстуру и вручную. Возвращаемся к смарт-объекту, который мы сохранили в качестве оригинала, дублируем его, и растрируем дубликат в обычный слой.
Идём Фильтр —> Другое —> Сдвиг (Filter —> Other —> Offset). Т.к. сторона нашего документа 512 пикселей, задаём величину сдвига 256 и нажимаем ОК:
Если Вы присмотритесь повнимательнее, то увидите горизонтальный и вертикальный швы ровно по осевым линиям документа. Их необходимо удалить. Инструментом «Прямолинейное лассо» обводим швы, особая точность не нужна:
Затем идём Редактирование —> Выполнить заливку (Edit —> Fill), в диалоговом окне выбираем «С учётом содержимого» (Content-Aware) и нажимаем ОК. В данном случае этот инструмент Photoshop прекрасно справится со сглаживанием швов. Результат:
А вот как выглядит большой документ, залитый этой текстурой:
На этом всё, надеюсь, урок был полезен.