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

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

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

Рекламный постер короткометражного фильма «Архитип» Арона Симса, главную роль в котором «играет» персонаж, полностью созданный средствами трехмерной компьютерной графики.

Copyright © 2012 Aaron Sims

Общая информация

Прежде чем трехмерная модель появится на экране кинотеатра, телевизора или монитора, ее должны создать. Как правило, под термином «создать модель», подразумевают поочередное прохождение следующих этапов производства:

1. Создание образа будущей модели.
2. Создание геометрической формы трехмерной модели.
3. Создание набора текстур для модели и настройка материалов.
4. Настройка скелета и оснастки трехмерной модели.
5. Анимация модели.

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

Создание образа модели выполняет художник по концептам

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

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

Пример трехмерной модели механического солдата будущего. Левая часть — чистая трехмерная модель, правая часть — законченная модель с назначенными материалами.
Copyright 2011 © Mike Jensen
Источник: http://eat3d.com/zbrush_hardsurface

Создание и настройка материалов

Что же такое «материалы», которые так нужны трехмерным моделям? Под этим термином подразумевается описание набора свойств поверхности. То есть материал хранит внутри себя описание того, какими свойствами (параметрами) обладает поверхность. Это такие свойства, как: цвет поверхности, глянцевитость или матовость, наличие или отсутствие рельефа, отражение, прозрачность, свечение и т.п.

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

Материалы создают художники по текстурам (texture artist), а так же могут создавать моделеры или же специалисты по настройке рендера (lighting/shading artist). В крупных компаниях процесс создания геометрической формы трехмерной модели и создание материалов для нее могут выполнять разные специалисты. В небольших компания всю работу по полному циклу производства модели, чаще всего, выполняет моделер.

Пример внешнего вида различных материалов, которые используются для назначения трехмерным моделям.
Источник: http://www.vray-materials.de

А вот создают и настраивают материалы обычно в тех же программах, в которых и создается геометрическая форма трехмерной модели. Это такие пакеты, как: Maya, Softimage, 3dsMax, LightWave 3D, Cinema 4D, Blender, Houdini, Modo и многие другие. Как правило все эти программы предоставляют удобный интерфейс для работы с материалами. А сам процесс работы сводится к тому, что художнику нужно подобрать правильное значение того или иного параметра в конкретном материале для того, чтобы он точнее соответствовал нужной поверхности.

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

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

Пример настройки материалав ПО Autodesk Maya.
Источник: http://www.polycount.com/forum/showthread.php?t=94077

Использование текстур

Текстуры во всех пакетах занимающихся работой с трехмерной графикой делятся на два типа:

• растровые текстуры;
• процедурные текстуры.

Растровые текстуры — это обычные растровые изображения, которые можно получить любы способом: фото, видео технику, сканирования изображений, самостоятельное создание в редакторах растровой графики, таких как Adobe Photoshop, Gimp и др.

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

Чаще художники по текстурам используют именно растровые изображения для создания материалов трехмерных моделей. И тут очень важно помнить об одной особенности растра. Она заключается в том, что качество растрового файла ограничено его размером. Чем больше ширина и высота картинки (изображения), тем выше вероятность того, что материал будет отображаться в качестве при любой степени приближения камеры к поверхности модели. Поэтому современные модели обычно используют текстуры размером минимум 2k (2048 пикселя), а в идеале, хотя бы 4k (4096 пикселя) и даже больше.

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

Развертка текстурных координат

Для создания трехмерных моделей существует огромное количество инструментов и каждый пакет для моделирования обладает своим инструментарием для выполнения этой задачи. Есть моделирования на базе сплайнов, моделирование с помощью NURBS-кривых, полигональное моделирование, моделирование Sub-D поверхностями, но обычно в самом конце, модель преображают в полигональную сетку. И одна из причин такого конвертирования кроется в том, что для полигонального каркаса не так сложно можно создать развертку текстурных координат.

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

Для создания разверток можно использовать как программы, занимающиеся моделированием объектов, так и специализированные программы, которые выполняют исключительно создание разверток. Примерами программ второго типа являются программы: headus UVLayout, Ultimate Unwrap 3D, UVMapper, Unfold 3D.

Есть несколько требований к развертке текстурных координат:

1. Размер полигонов на сетке текстурных координат должен соответствовать или приближаться к размеру полигона на трехмерной геометрии. Иначе текстура на поверхности модели может быть искажена (сжата или растянута).
2. Нужно попытаться как можно эффективнее занят пространство текстурного квадрата (места, где расположена развертка текстурных координат), иначе это приведет к ухудшению качества отображения текстуры.
3. В большинстве случает запрещены наслоения (наложения) одних текстурных координат с другими. Исключением являются только симметричные, а порой и одинаковые части модели.
4. Нужно стараться делать как можно меньше швов (мест разделения текстурных координат) на видимых частях модели.

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

Пример развертки текстурных координат (справа) для трехмерной модели пистолета (слева).
Источник: http://www.polycount.com/forum/showthread.php?t=80947

Создание текстур для трехмерной модели

В данный момент существует два основных способа создания текстур для материала, который в будущем будет назначен трехмерной модели.

Способ первый — это создание текстур в редакторах растровой графики (Adobe Photoshop, Gimp, Painter и т.п.) с нуля или же используя готовые растровые изображения (фотографии, рисунки и т.п.).

Способ второй — создание текстур в специализированных программа для рисования текстур сразу на поверхности трехмерной модели.

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

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

Пример трехмерной модели «дрона» (слева) и набора текстур (справа) созданного в Adobe Photoshop.

Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.

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

Умение создавать текстуру в Photoshop — полезный навык, особенно для работающих с 3ds Max. Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения, которая делается по фотографиям реальных фактур. В этом уроке я расскажу как создавать бесшовные текстуры из фотографий. В английском языке их обычно называют patterns или seamless textures .

Данный урок — первый в серии, посвященной подготовке текстур.

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

В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева. В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop .

Для 3D текстур желательно чтобы кусочек был квадратным. Это позволит в дальнейшем легче назначать координаты проецирования в программе трехмерного моделирования. Получился вот такой вот кусочек. С ним и будет идти вся дальнейшая работа.

Проверим выбранный кусок в качестве текстуры.
Командой Select > All выделяем все изображение целиком.
Вызываем в нем команду Edit > Define Pattern , которая определяет изображение как шаблон для заливки.
Теперь создаем новый документ большого размера, скажем 1024х768.
Вызываем команду Edit > Fill и выбираем образец для заливки.

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

Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset . В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда загнать стыки в середину изображения.

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

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

3ds Max неверно интерпретирует CMYK-файлы текстур помещенные в слоты растровых карт материалов!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое бесшовная или тайловая текстура?

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

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

Как правильно снять фотографию

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

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

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

В случае, если вы все-таки отважитесь на то, чтобы сфотографировать нужную текстуру, необходимо помнить о нескольких важных моментах.

Во-первых, необходимо встать параллельно объекту, на который нельзя смотреть под углом. Необходимо сфотографировать этот объект максимально прямо.

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

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

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

Создание бесшовной текстуры

Итак, фотография готова. Пришло время открыть ее в Photoshop и обрезать квадратом. Например, 1024×1024 или 2048×2048.

После этого с помощью инструмента Selection или команды Layer Via Copy необходимо выделить правую или левую часть изображения и перетянуть новую копию в противоположную часть изображения.

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

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

Избавление от швов с помощью инструмента Patch

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

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

Создание текстуры в фотошопе. Как сделать бесшовную текстуру из фотографии. Что такое бесшовные текстуры? Зачем нужны бесшовные текстуры и как их использовать

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

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

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

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

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

Теперь необходимо узнать размер изображения, для этого в верхнем меню переходим в «Изображение» — «Размер холста», либо нажимаем комбинацию клавиш Alt + Ctrl + С.

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

Нам необходимо убедиться, что размеры изображения имеют четные значения, потому что нам нужно будет разделить значения длины и ширины изображения ровно пополам. В моем случае и ширина изображения (596px) и высота (380px) делятся на 2, поэтому менять ничего не нужно. Если же у вас одно из значений или оба не четные числа, то необходимо изменить размеры холста, прописав уменьшив число на единичку до четного и нажав кнопку «Ок». При этом, при изменении размеров холста имейте в виду, что стороны холста не должны быть закреплены, т.е. скрепка указанная на картинке выше не должна быть активирована, иначе вы измените, к примеру высоту на четное число, а ширина станет нечетной.

Запоминаем размеры нашего холста (изображения), делим их на 2 и получаем следующее: ширина — 298px и высота — 190px. Теперь переходим в верхнем меню в «Фильтр» — «Другое» — «Сдвиг».

Во всплывающем окне вводим наши полученные методом деления на 2 значения ширины и высоты изображения, а так же выбираем пункт «Вставить отсеченные фрагменты».

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

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

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

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

Как видите, теперь швов (стыков) не видно, что и требовалось сделать, у нас получилась бесшовная текстура для 3D max или фотошопа. Еще раз напомню, если хотите получить текстуру высокого качества, то необходимо использовать большое изображение и чем больше, тем лучше.

Не всегда можно найти уже готовые текстуры нужных материалов для 3ds max. Часто дизайнерам приходится создавать их самостоятельно. Например, из фотографий, предоставленных заказчиком. В данном уроке рассмотрим, как своими руками сделать бесшовную текстуру в Photoshop.

Открываем исходное изображение в Фотошопе. У нас фотография кусочка кирпичной кладки.

Для 3d текстур нужно брать квадратное изображение. Это облегчит в будущем работу с текстурой при ее наложении на объект. Подогнать исходную картинку можно через редактирование размера холста. Изображение → Размер холста → Новый размер, Ширина, Высота.

Подгоняем края

Переходим во вкладкуФильтр → Другое → Сдвиг.В появившемся окне вводим значения, равные примерно половине размера картинки. Жмем ОК. Теперь швы находятся посередине изображения, левый и правый край текстуры автоматически сходятся.

Ретушируем стыки

Выделяем места стыков. Жмем Shift+F5. В появившемся окне выбираем «С учетом содержимого». Жмем ОК.

Дорабатываем штампом или заплаткой некрасивые участки. Мы будем работать Штампом при помощи Alt+ЛКМ.

Следует кропотливо обработать все места швов. Особое внимание обращаем на ритмично повторяющиеся объекты (пятна, сучки). Чем их больше, тем более искусственно будет выглядеть текстура при наложении. Следовательно, удаляем их по возможности.

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

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

Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание текстур в Photoshop. Бесшовная текстура

Если вы занимаетесь веб-дизайном, 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%, после чего жмем кнопку “Сохранить”.

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

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

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

Что такое бесшовная или тайловая текстура?

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

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

Как правильно снять фотографию

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

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

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

В случае, если вы все-таки отважитесь на то, чтобы сфотографировать нужную текстуру, необходимо помнить о нескольких важных моментах.

Во-первых, необходимо встать параллельно объекту, на который нельзя смотреть под углом. Необходимо сфотографировать этот объект максимально прямо.

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

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

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

Создание бесшовной текстуры

Итак, фотография готова. Пришло время открыть ее в Photoshop и обрезать квадратом. Например, 1024×1024 или 2048×2048.

После этого с помощью инструмента Selection или команды Layer Via Copy необходимо выделить правую или левую часть изображения и перетянуть новую копию в противоположную часть изображения.

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

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

Избавление от швов с помощью инструмента Patch

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

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

Умение создавать текстуру в Photoshop — полезный навык, особенно для работающих с 3ds Max. Для 3D графики текстуры играют очень важную роль. От качества текстур напрямую зависит качество визуализации 3D-сцены. Можно сказать, что 90% свойств материала несет в себе карта диффузного отражения, которая делается по фотографиям реальных фактур. В этом уроке я расскажу как создавать бесшовные текстуры из фотографий. В английском языке их обычно называют patterns или seamless textures .

Данный урок — первый в серии, посвященной подготовке текстур.

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

В качестве исходного материала возьмем такое изображение. На нем неплохая текстура дерева. В качестве образца я взял кусок в левом нижнем углу и кадрировал его инструментом Crop .

Для 3D текстур желательно чтобы кусочек был квадратным. Это позволит в дальнейшем легче назначать координаты проецирования в программе трехмерного моделирования. Получился вот такой вот кусочек. С ним и будет идти вся дальнейшая работа.

Проверим выбранный кусок в качестве текстуры.
Командой Select > All выделяем все изображение целиком.
Вызываем в нем команду Edit > Define Pattern , которая определяет изображение как шаблон для заливки.
Теперь создаем новый документ большого размера, скажем 1024х768.
Вызываем команду Edit > Fill и выбираем образец для заливки.

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

Для того чтобы получить возможность ретушировать стыки применим к кадрированному квадратику фильтр Filter > Other > Offset . В поля диалогового окошка вводим примерно половину размера картинки, хотя если просто подергать ползунки, то не составит труда загнать стыки в середину изображения.

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

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

3ds Max неверно интерпретирует CMYK-файлы текстур помещенные в слоты растровых карт материалов!

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

Не всегда можно найти уже готовые текстуры нужных материалов для 3ds max. Часто дизайнерам приходится создавать их самостоятельно. Например, из фотографий, предоставленных заказчиком. В данном уроке рассмотрим, как своими руками сделать бесшовную текстуру в Photoshop.

Открываем исходное изображение в Фотошопе. У нас фотография кусочка кирпичной кладки.

Для 3d текстур нужно брать квадратное изображение. Это облегчит в будущем работу с текстурой при ее наложении на объект. Подогнать исходную картинку можно через редактирование размера холста. Изображение → Размер холста → Новый размер, Ширина, Высота.

Подгоняем края

Переходим во вкладкуФильтр → Другое → Сдвиг.В появившемся окне вводим значения, равные примерно половине размера картинки. Жмем ОК. Теперь швы находятся посередине изображения, левый и правый край текстуры автоматически сходятся.

Ретушируем стыки

Выделяем места стыков. Жмем Shift+F5. В появившемся окне выбираем «С учетом содержимого». Жмем ОК.

Дорабатываем штампом или заплаткой некрасивые участки. Мы будем работать Штампом при помощи Alt+ЛКМ.

Следует кропотливо обработать все места швов. Особое внимание обращаем на ритмично повторяющиеся объекты (пятна, сучки). Чем их больше, тем более искусственно будет выглядеть текстура при наложении. Следовательно, удаляем их по возможности.

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

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

Все гениальное — просто!

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

1. Выразительность материала – что это такое?

Понятие выразительности материала я буду использовать очень часто.

Демонстрация НЕ(!)выразительности материала.

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

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

Но если работаешь над современными материалами или материалами нового поколения (NextGen materials), то это не всегда возможно. Тем не менее, если все же можно распознать материал, то это отличный шанс, что материал будет отлично выглядеть и на модели. Но если материал распознать не удается, то большая вероятность того, что вы будете смотреть на набор случайных цветов и пикселей, но на самом деле это будет должно было быть металлом.

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

Помимо хорошей диффузной карты (diffuse map ) также большое значение имеет качество карты отражений (specular map ). Существует множество инструментов, которые создадут карту отражений за вас, но они не дают нужного контроля. Особенно когда вы работаете над разными материалами, размещенными на одной текстуре, или с ярким текстом.

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

Выше приведена картинка, где показано, как можно создать карту отражений для простой текстуры с двумя материалами: бетон и металл. Каждый материал имеет свою собственную коррекцию уровней (Levels 1 и 2) с маской. Вы также можете вместо коррекции уровней использовать регулировку яркости/контраста (Brightness/Contrast), но использование уровней дает побольше контроля над картинкой. А сверху корректирующих слоев (Levels 1 и 2) лежит Hue/Saturation для того чтобы карта отражений стала черно-белой.

2. Базовый материал

Хорошим тоном при создании текстуры считается старт работы с базового материала. Если вы создаете материал металла, то сначала создайте равномерную (желательно повторяющуюся — tiled) текстуру, сплошь заполненную металлом. Если металл нужен поврежденный, то повреждения можно дорисовать поверх базового материала.

Обязательно сохраняйте базовые текстуры. Таким образом, если вам опять понадобится создать материал металла, то вы берете базовый материал и создаете на его основе новый.

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

3. Вся красота в невидимых на первый взгляд деталях.

Качественная текстура на low-poly модели.

Это то, что множество людей пропускают при создании текстур – мелкие детали . Они не видны при беглом просмотре, но очень сильно увеличивают интересность и живость текстуры.

В зависимости от стилистики и тематики вы можете использовать как минимализм в деталях, так и экстремально насыщенные деталями текстуры.

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

Но основной момент – это сделать все это незаметным/неброским. Если с этим переборщить, то эффект будет противоположным и картинка испортится.

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

4. Делайте ваши текстуры четче.

Будьте осторожны. Некоторые любят четкие (sharp ) и резкие (crisp ) текстуры, а другие – оставляют их немножко размытыми.

Лично я предпочитаю четкие текстуры, поэтому я всегда финальным шагом применяю фильтр четкости (Unsharp mask в Photoshop) ко всей текстуре.

По существу, я просто делаю копию всей своей текстуры и делаю эту копию самым верхним слоем. Потом применяю к этому слою фильтр Unsharp mask (несмотря на свое противоречивое название, этот фильтр сделает вашу текстуру именно четче).

Я предпочитаю вместо Sharpen использовать фильтр Unsharp mask — с ним вы 100% не испортите текстуру. К тому же Unsharp mask дает дополнительный контроль над финальной картинкой.

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

Первая картинка (normal) – это оригинальная текстура. Так она выглядит в Photoshop без каких-либо коррекций.

Вторая картинка – это оригинал с примененным фильтром Unsharp mask на 70%. Очень хорошо выступили детали на краске и царапины.

Правда теперь очень выразительным стал блик на горизонтальном ребре, но его можно немного притушить. (Сделать это нужно на оригинальной текстуре и заново применить фильтр Unsharp mask. В таком случае вы будете иметь на выходе полностью четкую текстуру и сохраните в идеальном порядке ваш.psd файл).

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

5. Будьте осторожны, используя фотографии.

Тщательно избегайте использовать фотографии при создании своих текстур. О причине этого читайте в одном отличном . Очень редко выпадает возможность использовать часть фотографии непосредственно в текстуре без добавления/убирания деталей или подгона фото под UV-развертку.

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

6. Используйте фотоналожение (Photo overlays).

Даже с учетом совета №5, использование фотографий – это не всегда плохо.

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

Лучший способ продемонстрировать, о чем сейчас идет речь — это показать текстуру с и без фотоналожения.

Лучший способ получить хороший эффект – это пройтись по всем режимам смешивания (blending modes ) в Photoshop»е и выбрать наиболее подходящий для пары: базовый материал + фото.

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

Эти маленькие детали должны быть совсем неброскими.

Еще одна вещь, которую нужно всегда держать в уме – это масштаб деталей .

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

Для лучшего эффекта наложения советую уделить немного времени опции Blend if (Смешать если) для каждого слоя.

Это опция чрезвычайно полезна, если у вас на картинке есть очень светлые или темные участки, которые портят всю красоту. С помощью Blend if вы значительно можете их сгладить. А если зажать Alt и потянуть ползунок , то он расщепится и получиться сглаженный переход между тем, что смешивается и тем, что не будет смешиваться.

Подпишитесь на обновление блога (вот ).

Введите ваш e-mail:

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

Бесшовная текстура / Creativo.one

Бесшовная текстура / Creativo.one

Фильтры

ГлавнаяУрокиПрактикаБесшовная текстура

Бесшовная текстура

В этом уроке Вы овладеете таким полезным навыком, как создание бесшовных текстур.

Сложность урока: Средний

Умение создавать бесшовные текстуры в Фотошоп – полезный навык.  Часто, необходимо, чтобы текстура повторялась, образовывая сплошное покрытие. Бесшовные  текстуры еще называют «тайловыми» (от английского слова Tile – плитка).   Мы рассмотрим, как создать текстуру из исходного фонового изображения без шва. Это полезная техника, которая всегда пригодится. Очень важно правильно подобрать размер исходных фотографий, грамотно настроить переходы света и тени, да еще и сохранить результат в нужном формате.

В этом уроке создадим бесшовный фон из травы. 

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

Шаг 1. Инструментом «Рамка» (Crop) выделим участок травы в центре, где нет тёмных участков.

Шаг 2. Получился участок главным образом равномерно освещённым, но придётся поработать над освещением краёв, поскольку небольшие различия станут весьма явными, когда фон покроется текстурой. Инструментом «Осветлитель» (Dodge Tool) (О), выберем большую мягкую кисть, и мягко пройдёмся по левому и правому краям изображения, чтобы осветлить.

Шаг 3. Теперь наша трава выглядит более однородной. Но в верхнем левом углу есть небольшой лист, и если мы зальём такой текстурой, то лист будет повторяться снова и снова, таким образом, мы должны избавиться от него. Выберите инструмент «Заплатка» (Patch Tool) (J) и выделите участок вокруг листа, переместите полученное выделение на любой участок травы (в настройках инструмента «Заплатка» должен быть установлен «Источник» (Source)).

Шаг 4. Будем работать над стыками краёв друг с другом. Дублируйте слой с травой (Ctrl+J), переместите первый слой налево, а второй направо (инструментом «Перемещение» (Move)).

Шаг 5. На изображении ниже вы видите два слоя, касающихся друг друга. Соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E).

Шаг 6. Теперь мы снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.

Шаг 7. Инструмент  «Заплатка» (Patch Tool) делает этот вид работы  легким, особенно с таким трудным фоном, как трава (если вас не устраивают мелкие детали, то вы можете инструментом «Штамп» (CloneStampTool) клонировать отдельные травинки).

Шаг 8. Повторим процесс по вертикали. Дублируйте слой (Ctrl+J) и переместите один слой вверх, другой вниз, соедините их таким образом, чтобы не было видно белого участка между ними и слейте оба слоя в один (Ctrl+E). Снова используем инструмент «Заплатка» (Patch Tool) – выделите область соединения двух слоёв и перетащите выделение на соседнюю область.

Шаг 9. Наша текстура готова,

осталось сохранить наше изображение, как образец для дальнейшей работы. Нажимаем  Ctrl+A (выделим всё изображение) , заходим в меню Редактирование\Определить узор (Edit\Define pattern), присваиваете вашей текстуре имя и сохраняете.

Теперь к любому слою вы можете применить стиль слоя «Перекрытие узора» (Pattern Overlay) и из списка текстур выбрать нашу траву. Ниже приведён пример использования фона с травой для web-сайта.

Не забудьте сохранить документ в формате PSD или JPG.
Примечание автора: на финальном изображении всё-таки заметны повторяющиеся тёмные участки, вы можете избавиться от них с помощью инструмента «Штамп» (CloneStampTool), но так как автор использовал это изображение для заливки фона вебсайта, то они не очень ему мешают.

Есть ещё один способ ретуширования стыков – это применить к кадрированному квадратику текстуры фильтр Фильтр\Другие\Сдвиг (Filter\Other\Offset).

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

Автор: Сollis

Источник: design.tutsplus.com

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры

Смотреть все работы

---

Хотите взять максимум?

Активируй Premium подписку и получи 15 преимуществ на Creativo

Premium-контент

110 видеоуроков только для Premium-пользователей.

Закрытые трансляции

Регулярные трансляции с профессионалами, обычным аккаунтам они доступны платно.

Приоритет в проверке работ

Все работы в вашем портфолио рассматриваются в приоритетном порядке.

Статистика переходов в соцсети

Сколько человек перешли по ссылкам из вашего профиля

Возможность
скачивать видеоуроки

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

Premium-статус
на аватаре

На вашей аватарке будет отображаться значок, обозначающий Premium-статус.

Короткая именная ссылка

Получите именную ссылку на профиль вида https://creativo.one/sasha

Возможность отложенной
публикации постов

Вы сами решаете, в какое время пост появится в ленте.

Светлая / темная
тема сайта

Меняйте тему оформления сайта под свое настроение.

Расширенные возможности опросов

Голосования с прогрессивным рейтингом, создание викторин

Поддержка от кураторов

Напрямую получайте поддержку от кураторов команды Creativo.

Поддержка в телеграм-чате

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

Подарки, призы, розыгрыши

Получите возможность выиграть ценные призы и подарки от команды Creativo и партнеров.

Разбор работ от авторов

Ежемесячные тренировочные интерактивы по разным направлениям для отточки мастерства и разбора работ.

Активировать Premium

---

---

Хотите узнавать

обо всех событиях?

Выберите, куда хотите получать уведомления

---

---

---

---

---

---

Скопировать ссылку

Работа скрыта

Войти, чтобы проголосовать

title»/> {{percent(index)}}

{{(index + 1)}}.

Изображение удалено

{{percent(index)}}

Всего проголосовало: {{total}}

Вы можете выбрать до {{max_variants}} вариантов. Голос будет распределён равномерно между всеми выбранными.

{{item.title}}

Изображение удалено

Создать опрос

Сделать мультиголосование

Можно выбрать несколько вариантов. Максимум {{lex(‘response’, max_variants)}}

Название опроса

Ответ {{(index + 1)}} Удалить ответ

Добавить ответ

Прогрессивный подсчет результатов

Автоматически завершить опрос 0″> через {{lex(‘days’,closeday)}}

{{lex(‘feed_type_’ + tp)}} {{counts[tp]}}

Сортировка:

По релевантности По дате По популярности

Показывать превью

subtitle»>{{item.subtitle}}

Закреплен

Опрос

По вашему запросу ничего не найдено

Попробуйте изменить критерий поиска, или сбросить фильтры.

Не удалось загрузить работу. Возможно она была удалена.

= 0}»> GIF {{work.bite}} Мб Загрузить

Редактировать Удалить

18+

Работа имеет содержимое для 18+ лет

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

1. Название и описание 2. Миниатюра 3. Исходник 4. Тэги 5. Прочие настройки

Название работы

Описание работы (необязательно)

Комментарий

Скрывать в портфолио (доступ по ссылке)

Ваша миниатюра:

Название:

{{name}}

Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:

#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Стиль работы Тематика Ятаквижу

Стиль работы:

#{{tag.label}}

Тематика:

#{{tag.label}}

Ятаквижу:

#{{tag.label}}

Не более десяти тэгов на одну работу

Работа 18+

Отключить комментарии

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:

Автоматически перейти в портфолио
Остаться на текущей странице

Запланировать публикацию

{{pub_dates[pub_date] || pub_dates[0]}}

Отменить планирование

Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее

Создание стилизованной тайловой текстуры — Gamedev на DTF

Andrew Harrington показывает процесс создания стилизованной тайловой текстуры при помощи ZBrush, Photoshop, и Substance Painter.

8168 просмотров

Введение

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

Блокинг

Мой первый шаг при создании любой текстуры окружения — это либо нарисовать ее в Photoshop, либо сделать плоский блокинг геометрии в 3ds Max или Maya. Если я рисую текстуру в Photoshop, то обязательно позабочусь о том, чтобы она была бесшовной.А затем использую ее в качестве ориентира, чтобы сделать плоский блокинг. Обычно я работаю на плоскости 8m х 8m, потому что в большинстве случаев она обеспечивает соответствующую плотность текселей для использования в игре. Это разрешение позволяет лучше судить о детализации в текстуре в сравнении с размером персонажа.

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

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

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

Наконец, все, включая плоскость 8×8, экспортируется в ZBrush одним .obj.

Добавление деталей

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

Сначала я использую функцию «Auto Group» на вкладке «Polygroup». Каждый элемент получает свою собственную Group ID, что позволит разделить их на сабтулы.

Во вкладке «Subtool» нажимаю «Groups Split» для разделения на отдельные сабтулы. Затем я применяю DynaMesh для ретопологии сабтулов,делаю 4-5 дивайдов. Это должно обеспечить достаточное разрешение для добавления хорошей детализации.

Существует много способов добавления детализации на поверхности, которые придадут им стилизованный вид. Основная цель, которую я преследую при добавлении деталей — дать достаточно информации, для понимания из какого материала сделан объект, но не слишком много, чтобы избежать лишнего «шума». Как говорил мне один из моих арт-директоров: «Иногда меньше значит больше». В данном случае я использовал метод добавления множества деталей, с дальнейшим удалением лишнего. Я начал с кисти ClayBuildup, чтобы добавить детали, а затем использовал Planer Brush, чтобы убрать их.

Примечание: использование квадратной альфы с Planer Brush даст вам хорошие острые края. Затем используется кисть TrimSmoothBorder для большей конкретизации.

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

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

На этом этапе я готов выложить свою текстуру в ZBrush в плоскости 2. 5D.

Тайлинг в ZBrush

Первое, что я делаю, когда готовлюсь сделать бесшовной геометрию в ZBrush — проверяю, чтобы размер моего документа соответствовал размеру будущей текстуры. Я делаю это для карты высот с корректным размером в 2.5D. В разделе «Document» я установил размер 2048 × 2048.

Затем я рисую Ztool на холсте и выбираю сабтул с плоскостью 8×8, который я экспортировал из Max с базовой геометрией. Выбрав его, я проверяю, чтобы Dynamic Perspective была выключена и размещаю сабтул в кадре. ZBrush будет кадрироваться в соответствии с любым выбранным вами сабтулом, поэтому я использовал плоскость. Таким образом, мой Ztool идеально вписывается в размер документа.

С кадрированным Ztool я теперь могу дублировать сабтулы по краям, а затем сделать офсет по сторонам. Если смещения не идеальны по пикселям, это нормально, я исправлю швы на следующем шаге.

Затем я перехожу в режим 2.5D. Вы можете прокрутить текстуру, удерживая тильду (`). Либо можете более точно сместить холст, перейдя на вкладку «Layer» и отрегулировав ползунки «Displace Н» и «Displace V».

Так как я знаю, что мой холст имеет размер 2048 × 2048, то если я смещу H и V на 1024 × 1024, все швы будут в центре холста.

Когда шов размещен посередине я «захватываю» карту высот холста с помощью инструмента «RGBZGrabber» в разделе «SimpleBrush», а затем очищаю холст, нажав «Ctrl + N».

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

Карта высот назначается как «Current Alpha», в параметрах маскирования применяется «Mask by Alpha». Альфа-маска проецируется на мою плоскость 8х8m.

Во вкладке Deformation Options настраивается офсет геометрии. Обычно я корректирую смещение только до 5 или 6, поскольку не хочу сверхсильного смещения.

Теперь я могу очистить маску и отполировать швы. Я буду повторять шаги в режиме 2.5D, пока швы не будут полностью удалены. Как только это будет сделано, я экспортирую геометрию в качестве моей высокополигональной модели и буду использовать исходную плоскость 8mx8m в качестве моей низкополигональной для запекания.

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

Для меня процесс текстурирования — это этап, на котором я, вероятно, трачу наименьшее количество времени. Мне нравится сохранять вещи довольно простыми при работе со стилизованными формами, так как я считаю, что это делает их более читабельными в игре.

В ходе текстурирования я предпочитаю сохранять все упорядоченным и для этого использую устаревший плагин DDO для Photoshop для организации слоев. Я загружаю только базовую карту нормалей в плагин и заменяю карты AO и Curvature.

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

Крайне важно то, что я устанавливаю все свои значения цвета для работы с Linear Rendering (Unreal Engine 4, CryEngine, Marmoset и т. Д.). В Liner Rendering среднее значение серого цвета (в RGB — пер.) не 127/127/127, а больше похоже на 187/187/187. Слишком часто я вижу слишком темные текстуры, которые нужно компенсировать, подавляя освещение в сцене. Темная текстура плохо воспринимает свет, поэтому окажите себе услугу и сохраняйте цветовые диапазоны в верхних значениях.

Пришло время наложить несколько мазков и тонких цветовых вариаций. Для этого я беру простую кисть с узором. В свойствах кисти я включаю настройки Color Dynamics, отключаю «Apply Per Tip» и задаю небольшие значения для оттенка, насыщенности и яркости. Теперь каждый раз, когда я делаю мазок кисти, он выбирает цвет в пределах диапазона.

Еще одна вещь, которую стоит отметить — я проверяю, чтобы flow и opacity кисти были установлены на 50%. Таким образом, я могу получать разные цвета.

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

Последний шаг — использовать полученный результат в качестве текстуры основного цвета в Substance Painter, наложить некоторые эффекты и сгенерировать карты «Metall/ Roughness». В Painter я стараюсь все делать просто, так как я не хочу добавлять «шумы». Мне нужно лишь добавить немного гранжа и слегка детализировать карту Roughness. Мне нравится использовать «Bone Stylized» для этой цели, а затем добавлять немного цвета на карту грязи AO, чтобы поиграть с ней. Вот, наверно, и все. Как я уже говорил, иногда меньше значит больше.

Рендер

Я использую довольно простые настройки рендера в Marmoset. Используется трехточечный источник света, настроенный с помощью Child Lights на одной из Enviornment-карт. Поскольку при текстурировании я использовал высокие диапазоны в значениях цвета, я могу получить гораздо больше от освещения, не увеличивая его. Как уже было сказано, очень важно использовать правильные значения цвета.

Заключение

Надеюсь, что вам понравилось заглянуть внутрь моего процесса создания стилизованных текстур. Мои знания и навыки — это сочетание обучения, наблюдения за другими и МНОГО проб и ошибок. Самое замечательное в стилизованном искусстве заключается в том, что на самом деле нет универсальных ответов. Просто получайте от этого удовольствие. Спасибо!

Интервьюировал Kirill Tokarev

Оригинал статьи здесь.

Перевод подготовил: Rafael Ter-Sargsyan

Подписывайтесь на нас в Facebook, Telegram, Vkontakte, Pinterest.

#long

Подробное создание бесшовных PBR текстур: Albedo, Normal Map, Specular

В данном уроке будут затронуты важные темы, касающиеся текстурных карт: способы создания бесшовной текстуры, коррекция цвета, создание Albedo, Normal Map, Specular и других карт. Описание и скриншоты будут приведены только для Photoshop, но по аналогии можно создать текстуры в Gimp и других редакторах. Урок в большей степени рассчитан на новичков, но некоторые методы могут показаться интересными и профессионалам этого дела.

Этап 1. Поиск текстуры.

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

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

1. Откройте текстуру в Photoshop. Для удобства мы поменяем размеры текстуры с 6000х4000 до 3000х2000.

2. Во вкладке Слои дважды нажмите на фон. Нажмите ОК в появившемся окне. После этого, выделив данный слой, нажмите Ctrl+J для создания дубликата слоя.

3. Выделив нижний слой, перейдите в Фильтр > Размытие > Среднее. (Русифицированный Фотошоп, перевести на английский не составит никаких проблем).

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

5. Также перейдите в Изображение > Коррекция > Цветовой фон/Насыщенность. Добейтесь идеального результата.

Сравните две получившиеся текстуры.

Этап 2. Создание бесшовной текстуры.

Процесс создания бесшовной текстуры сводится к следующему: из существующего изображения выделяется тот участок, который наилучшим образом будет смотреться при тайлинге. После этого при помощи сдвига выявляются все швы текстуры. И последнее — с использованием Штампа или Заполнения с учётом содержимого (Выделение + Shift+F5) удаляются швы.

1. Открываем текстуру в Photoshop. В нашем случае применим инструмент Кадрирование перспективы. Также сразу стоит почистить текстуру от ненужных элементов с помощью Штампа, как показано на картинке.

2. С помощью рамки выделите участок текстуры. По краям оставьте «пробел» между камнями.

3. Зайдите в Фильтр > Другое > Сдвиг. Сдвиньте текстуру на 1/2 по вертикали и горизонтали (ровно половина пикселей по ширине и высоте изображения)

4. Чтобы устранить появившиеся швы, используйте 2 инструмента: Штамп и Заполнить с учетом содержимого. Последнее не всегда помогает, всё зависит от самой текстуры. Инструмент штамп копирует выделенную область (Зажмите Alt и нажмите на нужный участок).

5. Посмотрите полученный результат. 

Этап 3. Создание текстуры Albedo в 4 шага.

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

1. Откройте бесшовную текстуру, полученную с предыдущего этапа. Дважды нажмите на слой фона, создайте Новый слой. Нажмите Ctrl+J для создания дубликата.

2. Выбрав верхний слой, используйте сочетание клавиш Ctrl+Shift+U для обесцвечивания изображения. Нажмите Ctrl+I для инвертирования цвета. Должно получиться следующее:

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

4. Сравните два изображения. (На итоговом изображении осталось 2-3 темных участка, чего у вас получиться не должно)

Этап 4. Простой способ создания текстуры Specular.

1. Перейдите в Изображение > Коррекция > Цветовой тон/Насыщенность (Сtrl+U), выставите значение Насыщенности = -100. 

2. Нажмите сочетание клавиш Ctrl+I для инвертирования цвета.

3. Перейдите в Изображение > Коррекция > Уровни. Настройте значения таким образом, чтобы темные области стали четкими и был виден явный переход между черными и белыми точками.

4. Настройте резкость текстуры, перейдя в Фильтр > Усиление Резкости > Умная резкость. Подберите нужные значения для необходимого результата.

Этап 5. Создание Normal Map.

На данный момент существует огромное количество софта, с помощью которого можно создать карту нормалей. Вот только малая часть: Quixel Suite, PixPlant, CrazyBump, AwesomeBump... Также можно скачать плагин Normal Map Filter для фотошопа отсюда.

После установки в папку с программой он будет доступен в Фильтр > Nvidia Tools > Normal Map Filter. Параметр Scale задаёт масштаб по высоте. Параметр Filter Type отвечает за детализированность.

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

Как создать бесшовный узор в Photoshop — CatCoq

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

Зачем использовать бесшовный узор?

• Для дизайнеров поверхностей бесшовные узоры являются профессиональным стандартом.

• Бесшовные узоры являются ключом к созданию дизайнов, которые работают на:

Из этого руководства вы узнаете:

• Как упорядочить элементы в бесшовный блок шаблона

• Как протестировать блок шаблона и при необходимости внести коррективы

• Как дублировать блок для создания шаблона

Вам потребуется:

• Adobe Photoshop (подпишитесь на бесплатную пробную версию здесь )

• Иллюстрации/каракули для создания бесшовного узора здесь . )

Примеры бесшовных узоров:

Самая сложная часть создания бесшовного шаблона — правильно подобрать блок шаблона, чтобы он повторялся бесшовно. Но не волнуйтесь! Это именно то, что я расскажу вам в этом уроке. Слева — пример не бесшовного узора, а справа — пример одинаковых элементов, расположенных на квадратном блоке таким образом, чтобы их можно было бесшовно повторять.

Если на вашем компьютере установлена ​​новейшая версия Photoshop, есть новый инструмент под названием «Предварительный просмотр узора», который делает весь процесс создания узора очень простым. Я бы порекомендовал прочитать этот пост, чтобы познакомиться с основами узоров в Photoshop, а затем перейти к этому новому посту, чтобы узнать, как использовать инструмент предварительного просмотра узоров!

А если вы больше визуальный ученик, концепция бесшовных шаблонов может быть немного проще для изучения в видео-форме. Я преподаю эту же концепцию в своих Класс Skillshare — Бесшовные узоры, нарисованные вручную в Photoshop . Вы узнаете весь мой процесс от создания элементов, нарисованных вручную, до их оцифровки и компоновки в бесшовный узор! Этот курс — все, что я хотел бы знать о создании шаблонов, когда только начинал свою карьеру в дизайне поверхностей, поэтому я так рад поделиться этим с вами.

И самое приятное? Новые пользователи Skillshare могут получить один месяц бесплатно , чтобы опробовать платформу и пройти курсы! Skillshare — это невероятный творческий центр с тысячами классов на выбор. Я постоянно выхожу с новыми классами, так что всегда есть что-то новое, чтобы узнать!

Посмотреть полный курс Skillshare

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

Готовы создать свой бесшовный узор? Откройте новый файл в Photoshop и приступим!

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

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

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

Начните с создания нового слоя. Нажмите в правом нижнем углу панели слоев, где написано «Создать новый слой».

Чтобы добавить фоновый цвет к вашему квадрату, выберите темный или контрастный цвет и возьмите инструмент Заливка ( сочетание клавиш: G ). Нажмите на свой квадрат, чтобы заполнить его этим цветом. Теперь снимите выделение с квадрата с помощью сочетания клавиш cmd + D .

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

Организуйте свои элементы

Убедитесь, что ваши элементы находятся на своем слое, чтобы вы могли перемещать их по отдельности. Если вы еще этого не сделали, вы можете сделать это, выбрав инструмент «Лассо» (сочетание клавиш : L ). Мне нравится использовать для этого Polygonal Lasso . Выберите каждый элемент своим лассо, вырежьте его с помощью сочетания клавиш cmd + X и вставьте на место с помощью сочетания клавиш cmd+shift+V . Это вставит элемент точно туда, где он был раньше, но на своем собственном слое! Когда вы закончите, сгруппируйте все слои элементов, щелкнув первый слой, удерживая Shift, щелкнув последний слой, а затем используя сочетание клавиш cmd + G , чтобы сгруппировать их.

В моем примере я дал каждому отдельному слою имя и сгруппировал их в папку под названием «Бесшовные». Это помогает мне оставаться организованным во время работы.

Как расположить элементы так, чтобы они плавно повторялись

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

Если вы чувствуете себя потерянным, у меня есть вы! Вот наглядный пример. Слева — первый шаг создания блока шаблона. У меня части элементов нависают над левым и верхним краями. Те части, которые нависают над краем, будут вырезаны и перемещены к противоположному краю, где я обвел эти пустые места. Справа показано, как будет выглядеть блок шаблона, когда он будет завершен. Куски, которые свисали за край, были вырезаны и перемещены, и области, которые я обвел, теперь заполнены этими кусочками.

Расположите свои элементы

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

Вы можете перемещать элементы с помощью инструмента «Перемещение» ( сочетание клавиш: V ). Мне также нравится вращать и изменять размер элементов, чтобы придать узору больше визуального интереса. Вы можете сделать это с помощью инструмента Transform ( сочетание клавиш cmd + T ). Вы также можете дублировать свои элементы, выбрав элемент и используя сочетание клавиш cmd + J .

Проверка блока выкройки

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

Начните с копирования элементов, которые вы расположили. Это позволит нам протестировать паттерн и вернуться к исходным элементам и внести необходимые изменения. Сделайте копию группы слоев, выделив ее и воспользовавшись сочетанием клавиш cmd + J . Затем щелкните правой кнопкой мыши новую группу и выберите Merge Group .

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

Сделайте его бесшовным

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

Начните с того, что скройте исходную группу слоев элементов, щелкнув глазное яблоко слева от нее на панели слоев.

Затем, убедившись, что вы находитесь на слое с плоской копией, возьмите инструмент Marquee ( сочетание клавиш: M ). Выберите все элементы, которые свисают с левой стороны вашего квадрата.

Используйте инструмент перемещения ( сочетание клавиш: V ) и удерживайте нажатой клавишу Shift , чтобы элементы оставались зафиксированными. Перетащите выступающие элементы в правую часть квадрата. Убедитесь, что вы делаете их прямо на краю, потому что, если что-то не так, даже на пиксель или два, это может испортить бесшовный вид узора.

В этом примере слева и справа все хорошо выстроилось. Теперь, используя тот же процесс, опустите выступающие элементы сверху вниз к низу квадрата.

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

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

Если вам нужно внести коррективы, вы можете следовать этому шагу вместе со мной. Самый простой способ внести коррективы в эти элементы — сделать это в исходной группе слоев элементов.

Для этого отобразите исходный слой, щелкнув слева от него на панели слоев. Затем уменьшите непрозрачность объединенного рабочего слоя, щелкнув слой и уменьшив непрозрачность на панели слоев. В этом примере я снизил свой показатель примерно до 60%. Заблокируйте этот слой, выбрав его и щелкнув значок блокировки на панели слоев.

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

После того, как вы внесли все необходимые корректировки, вы можете удалить объединенный слой. Мы использовали это как визуальное руководство, но теперь, когда все на месте, оно нам больше не нужно.

Теперь, когда вы протестировали узор и все элементы на месте, вам нужно воссоздать блок узора. Вернитесь и повторите шаг 3 теперь, когда все элементы находятся на своих местах.

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

Чтобы создать шаблон, сделайте копию слоя блока и фонового слоя, используя сочетание клавиш cmd + J . Теперь вы можете просто потянуть за эту копию блока, удерживая клавишу Shift, чтобы повторить шаблон! Поскольку мы настроили их на повторение, вы можете сложить их сверху, снизу, слева и справа, чтобы продолжить рисунок.

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

Я надеюсь, что это руководство по созданию бесшовных узоров было полезным! Если у вас есть какие-либо вопросы, задавайте их в комментариях! Когда вы будете создавать свои узоры, я буду рада, если вы поделитесь ими в Instagram и отметите меня @catcoq, чтобы я мог видеть, что вы делаете!

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

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

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

Посмотрите эти занятия по созданию узоров и цифровому искусству!

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

Бесшовные узоры, нарисованные вручную в Photoshop

Учить больше

Вам нравится приложение Procreate для iPad? В этом классе вы узнаете, как создавать бесшовные узоры в своем любимом приложении для рисования.

Это забавный дополнительный класс к этому уроку Photoshop!

Рисование бесшовных узоров в Procreate

Учить больше

Хотите узнать, как добавлять новые текстуры, управлять своими рисунками в цифровом виде и менять их цвет всего за несколько кликов? Присоединяйтесь ко мне на моем фирменном уроке цифрового искусства!

Оцифруйте свое искусство для продажи в Интернете

Учить больше

Ресурсы для художников, Учебники по искусству, Учебники по PhotoshopCatCoq 17 мая 2021 г. фотошоп, трюки с фотошопом, методы фотошопа, учебник по фотошопу, основы фотошопа, фотошоп для художников, хаки для фотошопа, изучить фотошоп, редактировать в фотошопе, Adobe Photoshop, изучить фотошоп онлайн, искусство, художник, ресурсы художника, кот, catcoq, cat coq, cat coquillette, навыки художника, создание моделей, современные узоры, цифровые узоры, узор, узоры, бесшовные узоры, бесшовный узор, бесшовные, геометрический узор, цветочный узор, цветочный узорКомментарий

0 лайков

Бесшовные текстуры в Photoshop

Введение

Предварительные условия

Нет.

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

Photoshop

Настройка документа

Создавая любую текстуру, вы хотите убедиться, что она остается квадратной. Размерность должна быть равнодействующей 2 в любой степени. То есть: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048 или 4096.
Вы также хотите убедиться, что параметр DPI вашего файла установлен на 72. Единственный раз, когда вы хотите изменить DPI, когда вы производите что-то для печати, и в этом случае он будет установлен на 300. Все остальное можно оставить в покое.

Подготовка текстуры для мозаичного покрытия

При создании любой текстуры, которая будет мозаичной, вы должны убедиться, что в ней нет очевидных узоров. Взгляните на свою текстуру и посмотрите, есть ли какие-то пятна, которые действительно выделяются среди остальных. Они выдадут шаблон, поскольку вы сможете определить их повторение. Вся наша текстура должна иметь одинаковый уровень детализации и цвета. Это не значит, что вся текстура должна быть пресной, просто убедитесь, что ни одна часть не привлекает внимание больше, чем другая. Еще кое-что, на что вам нужно обратить внимание, — это блики и тени. Если есть какие-либо тени, которые слишком темные, вы можете осветлить их с помощью 9.0039 Инструмент Dodge ( alt+shift+d ). В качестве альтернативы вы можете затемнить блики с помощью инструмента Burn ( alt+shift+b ). Текстура, которую я хотел, также была немного темнее, поэтому я пошел дальше и отрегулировал общую яркость текстуры. После того, как вы удалили все выдающиеся детали из своей текстуры, мы рассмотрим, как создать несколько пользовательских кистей, которые позволят нам добавить менее очевидные повторяющиеся детали.

Создание пользовательских кистей

Мы создаем пользовательские кисти, потому что хотим, чтобы процесс клонирования выглядел максимально естественно. Эти кисти будут созданы из элементов нашей текстуры и помогут скрыть швы, которые создаст смещение текстуры. Наш первый шаг — захватить наши 9Инструмент 0039 Magic Wand и используйте его, чтобы выбрать часть нашей текстуры. Выбранное выделение будет основой для нашей кисти. Размер выбора зависит от вас, как и то, что вы выбираете. Старайтесь, чтобы выделение было меньше, чтобы, если использовать его несколько раз поверх создаваемых деталей, не было слишком много узора. Если вы обнаружите, что ваш выбор слишком велик или слишком мал, вы можете изменить «Допуск» в настройках инструмента поверх Photoshop. Чем выше допуск, тем больше выберет инструмент. Сделайте выбор, которым вы довольны, и выберите Инструмент выбора ( клавиша «v» ) из меню инструментов. Теперь перейдите к Edit> «Define Brush Preset», выберите его и дайте имя своей кисти. Вот и все, теперь вы можете делать свои собственные кисти. Не стесняйтесь сделать несколько разных пользовательских кистей для вашей текстуры. Чем больше у вас будет, тем менее очевидным будет тайлинг 🙂

Смещение

Мы хотим использовать фильтр Смещение , чтобы выровнять границы нашей текстуры. Единственным недостатком использования смещения является то, что оно оставляет 2 основных шва, которые пересекают нашу текстуру в центре. Вы можете увидеть это на картинке слева. Фильтр «Смещение» можно найти в меню «Фильтр»> «Другое». Когда вы используете фильтр «Смещение», вам нужно изменить два параметра. Вертикальные и горизонтальные ползунки позволяют выбрать соответствующие расстояния в пикселях. Мы хотим установить оба значения равными половине ширины нашей текстуры в пикселях. Для квадратной текстуры размером 512 пикселей это означает, что для них обоих нужно установить значение 256. Примените фильтр «Смещение» к слою с текстурой. Мы почти закончили, но что мы можем сделать с этими швами?

Clone Stamp

Ваша текстура теперь смещена, но мы должны избавиться от этих швов. Давайте начнем с выбора Clone Stamp (клавиша s), а затем выбора пользовательской кисти, которую мы создали в меню кистей ( клавиша «F5» ). Наведите указатель мыши на часть текстуры, удерживая нажатой клавишу Alt, а затем щелкните, чтобы установить эту область в качестве источника клонирования. Теперь вы сможете щелкнуть в любом месте холста и отпечатать часть этого изображения в форме вашей пользовательской кисти. Сделайте это, чтобы покрыть все швы в вашей текстуре. Старайтесь делать это ровно столько, сколько вам нужно, и не штампуйте края изображения, за исключением тех мест, где швы пересекают край. Вы также должны выбирать разные источники клонирования, чтобы не клонировать одну и ту же область снова и снова.

Наш последний шаг в удалении швов — это копирование пикселей из четырех точек, где швы пересекают края нашего документа. Мы хотим, чтобы эти точки были зеркальными копиями друг друга. Для этого мы собираемся сделать полукруглое выделение вверху, Скопировать ( ctrl+c ) пикселей, Вставить ( ctrl+v ) их на Новый слой ( ctrl +shift+n ), отразите их по вертикали (Редактирование > Трансформировать > «Отразить по вертикали») и переместите их вниз к нижнему краю. То же самое будет сделано, отражая пиксели левого края вправо, но мы будем отражать пиксели по горизонтали. Как только это будет сделано, используйте Ластик ( клавиша «e» ) с помощью пользовательской формы кисти, чтобы смешать края вставленных слоев с базовой текстурой. Когда это будет сделано, убедитесь, что ваш слой с рисунком кисти скрыт и Merge Visible Layers ( ctrl+e ), чтобы получить один слой. Если вы немного запутались в процессе, посмотрите на схему слева. Мы просто копируем пиксели более темных оттенков, отражаем их и помещаем вместо соответствующих более светлых оттенков.

Определение шаблона

Чтобы протестировать нашу текстуру. Мы превратим его в шаблон, а затем заполним новый файл большего размера нашим пользовательским шаблоном. Чтобы создать наш шаблон, мы будем Select All ( ctrl+a ), убедитесь, что наш Select Tool ( клавиша «v» ) активен, и перейдите в меню Edit и выберите «Define Pattern». Дайте вашему шаблону имя и создайте новый документ, который как минимум в два раза больше вашего текущего холста. В новом файле создайте New Layer 9.0040 ( ctrl+shift+n ) и снова перейдите в меню «Правка» и нажмите «Заполнить». В появившемся диалоговом окне под свитком «Использовать» выберите «Шаблон», выберите свой шаблон и нажмите «ОК». Ваш документ должен быть мозаичным с вашей пользовательской текстурой, как в нашем примере выше. Найдите минутку, чтобы просмотреть это и убедитесь, что вы не можете заметить никаких швов. Если вы заметили какие-либо, вернитесь и исправьте их; смотреть вблизи. Если их нет, вы закончили и добавили новый навык в свой набор инструментов: D

Заключение

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

Дополнительная литература

Hourences – трюки с текстурами (http://www NULL. hourences NULL.com/tutorials-texture-tricks)

Используемые ярлыки программ

Photoshop
Инструмент выделения выделения (клавиша «m»)
Burn Tool (alt+shift+b)
Dodge Tool (alt+shift+d)
Отменить выбор (ctrl+shift+d)
Clone Stamp (клавиша s)

4

4 Вставить (ctrl+v)
Копировать (ctrl+c)
Инструмент выбора (клавиша v)
Выделить все (ctrl+a)
Новый слой (ctrl+shift+n)
Объединить видимые слои (ctrl+e)
Контекстное меню (клавиша «F5»)

Как создавать повторяющиеся и бесшовные узоры в Photoshop

Мраморные узоры

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

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

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

Что такое бесшовные узоры?

Бесшовный узор — это бесконечно повторяющийся узор. Он повторяется без каких-либо видимых швов или прерывания рисунка.

Что такое повторяющиеся узоры?

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

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

Зачем вам создавать повторяющийся бесшовный узор?

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

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

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

В чем разница между бесшовным узором и бесшовной текстурой?

Бесшовные узоры и бесшовные текстуры создаются одинаково. Оба также имеют повторяющиеся качества. Существует четкая разница между узорами и текстурами.

Еще сообщения на эту тему

Шаблон использует графику в определенном макете который повторяется в определенном направлении или макете. Бесшовная текстура – ​​это общее «ощущение» применительно к дизайну, оно может быть грубым, мягким, гладким, и т.д.

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

Создание шаблонов для брендинга

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

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

Другие способы использования шаблонов узоры в дизайне

• Поверхностные узоры для текстиля и упаковки
• Плакаты и другие широкоформатные принты
• Веб-дизайн

Создание бесшовных узоров в Photoshop

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

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

Популярные стили узоров

Вот самые популярные узоры стили. Ну, по крайней мере, самые популярные, исходя из того, что продается на Creative Market. и рынок Envato.

Не ограничивайтесь этими примерами. Этот список — отправная точка, выкройку можно сделать из чего угодно.

Pattern Design Styles:

Геометрические узоры

Этот пример геометрического узора предоставлен Curly Pat на Creative Market. Нажмите на изображение ниже, чтобы увидеть всю коллекцию.

Цветочные и ботанические узоры

Эти нежные цветочные узоры представлены Laras Wonderland на Creative Market. Красивые линии в этом узоре делают заявление, не перегружая дизайн. Посмотреть всю коллекцию можно нажав на изображение ниже.

Пейсли и дамаски

Пейсли и дамасские узоры несколько женственны, но их можно использовать и в мужском дизайне. Это более традиционный дизайн, но в этом примере дизайнер добавил шестеренки и другие элементы, чтобы создать элемент стимпанка. Узоры пейсли принадлежат Angelp, а дамасские узоры — Avenie Digital, оба представлены на Creative Market.

Шаблоны для иллюстраций

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

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

Точки и пятна

Этот пример наиболее похож на тот, который вы изучите в моем уроке. Точки — это гибкий стиль, который вы можете сделать маленькими и тонкими или огромными и бросающимися в глаза. Посмотрите пример ниже и нажмите на изображение, чтобы увидеть еще больше из этой коллекции от Pattern Supply Co. на Creative Market.

Линии и полосы

Пример ниже взят из набора рисунков линий, нарисованных вручную YouandIGraphics на Creative Market. Нажмите на изображение ниже, чтобы увидеть всю коллекцию.

Abstract

Абстрактные узоры состоят из случайных форм и рисунков, это не обязательно идентифицируемые объекты, а скорее идеи, случайные формы. Нажмите на изображение ниже, чтобы увидеть всю коллекцию абстрактных узоров от Eskimo Family на Creative Market.

Получите бесплатную цифровую бумагу с фольгой в магазине PrettyWebz!

• Узор в полоску из розового золота
• Узор из многослойной фольги

Советы по дизайну узора

Масштаб

Сохраняйте масштаб вашего готового дизайна спереди и по центру. Убедитесь, что вы видите свои узоры с высоты птичьего полета. Легко увлечься деталями дизайна и размещением, когда вы находитесь слишком близко к дизайну.

Цвет

Обратите внимание на цвета и на то, как они выглядят в меньшем масштабе. Цвет отвлекает от рисунка? Ваши тона слишком похожи, не потеряются ли они в меньшем масштабе?

Flow

Подходит ли ваш рисунок для больших дизайн? Вы должны осознавать общую атмосферу ваш дизайн.

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

Ваш дизайн плавный?

Шаблон проектирования должен проходить в определенном способ, который сразу ясен. Глазу должно быть легко следить за шаблон.

Уважайте свободное пространство в дизайне

Слишком легко впихнуть что-то в каждый угол, чтобы «заполнить» узор. Но пустое пространство может усилить поток и помочь глаза следуют шаблону с меньшей нагрузкой на глаза

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

Планируйте

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

Мгновенное создание узоров

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

Вы можете создавать собственные узоры из изображений. Используйте подключаемый модуль «Генератор бесшовных текстур» от The Orange Box, чтобы мгновенно получать узоры и текстуры.

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

Возьмите любую фотографию и превратите ее в бесшовный узор с помощью плагина. Этот плагин работает с CS3 вплоть до CC+. Плагин Photoshop лучше всего использовать с изображениями объекта. Кластеры объектов, которые охватывают все изображение, также хорошо работают. Цветы, дерево и тому подобное отлично подходят для этого.

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

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

Другие публикации, которые могут вам понравиться

Что дальше?

Надеюсь, вам понравились советы и принципы дизайна, изложенные в этом посте.

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

Также присоединяйтесь ко мне на Youtube и посмотрите списки воспроизведения, которые я создал для Photoshop, PowerPoint и других программ, которые вы можете использовать для создания своей онлайн-графики.

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

Вы нашли эту информацию полезной и хотите сохранить ее на потом или поделиться ею с другом? Закрепите это изображение!

Как сделать бесшовную текстуру в фотошопе? – Измерьте 4 меня в 3D

Перейти к содержимому

Автор: Arthurin 3D Software, Бесплатные текстуры

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

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

Содержание

• Внимательно посмотрите на изображение
• Обрезать по размеру окна
• Смещение текстуры
• Исправление соединений
• Сохранить и протестировать

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

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

Внимательно посмотрите на изображение

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

Обрезать по размеру окна

После того, как вы выбрали текстуру и обрезали ненужные области, вам нужно обрезать изображение, чтобы оно поместилось в окне Photoshop. Без этого шага изображение может свисать с холста, что нам не нужно.

 

 

Рекомендуется использовать инструмент обрезки, который не удаляет пиксели изображения. Теперь выберите «Выбрать все» и создайте из него новый слой. Этот новый слой теперь будет ограничен размерами окна.

Смещение текстуры

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

• Откройте изображение для редактирования
• Щелкните параметр «Фильтр» в главном меню
• Выберите «Другое» в параметрах фильтра
• Теперь выберите «Смещение» из «Другого».

Когда откроется окно «Смещение», вы можете внести необходимые изменения. Окно «Смещение» содержит три раздела:

• По горизонтали 
• По вертикали
• Неопределить области

По горизонтали и по вертикали вам придется увеличить пиксели. Для неопределенных областей выберите Wrap Around. На этом этапе правый край оборачивается вокруг левого, а нижний — вокруг верхнего. Это приведет края к центру окна, что облегчит удаление.

Смещение за счет повторяющейся текстуры

Еще один способ свести края к середине — повторить текстуру на окне. Сначала вы помещаете изображение в нижний левый угол окна, а затем используете инструмент «Перемещение», чтобы повторить текстуру по вертикали сверху. Ярлык для перемещения изображения с помощью Alt + Shift. Затем используйте CTRL+E, чтобы объединить эти два. Затем скопируйте текстуру и перетащите ее в правый верхний угол. Снова используйте Alt+Shift, чтобы перетащить текстуру в правый нижний угол. Объедините все ребра. Выполнив этот шаг, вы получите все края посередине, хорошо видимые для глаз и легко поддающиеся коррекции.

Исправление соединений

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

Применение инструмента «Штамп»

В окне «Инструменты» вы найдете эту опцию. Еще проще: просто нажмите кнопку «S», и ваш инструмент «Штамп» активируется. Этот инструмент создает копию некоторой части изображения, а затем закрашивает ею другую область изображения. Следующим важным шагом является выбор правильной кисти. Выбор кисти зависит от того, насколько шероховатая или гладкая у вас текстура.

Не рекомендуется использовать стандартную круглую кисть или что-либо с мягкими краями при попытке залатать стыки. Эти кисти с закругленными краями не очень эффективны, когда дело доходит до скрытия этих краев. Итак, куда вы смотрите? Natural Brushes 2 может быть хорошим выбором. Здесь есть 3 кисти для мела, которые отлично работают. Вы также можете выбрать любую кисть из раздела Natural Brushes.

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

С выбранной кистью вам нужно будет сделать следующее:

 

 

• Установить размер кисти
• Установить обычный режим
• Установить непрозрачность где-то в диапазоне 50-85%. Более низкие значения обычно предпочтительны для мягких текстур, в то время как более высокие значения хорошо подходят для грубых текстур.
• Make the Flow 100%

 

 

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

Применение инструмента Spot Healing Tool

Это еще один инструмент, который вы можете использовать, чтобы избавиться от этих краев. На панели инструментов появится точечная восстанавливающая кисть. Как и в случае с инструментом «Штамп», вам нужно будет выбрать правильную кисть в инструменте «Точечная коррекция». Затем установите нужный размер кисти и жесткость в зависимости от текстуры, с которой вы имеете дело. Проведите кистью по горизонтальным и вертикальным краям и удалите их. Этот инструмент позволяет удалить все нежелательные объекты, видимые на шаблоне. Таким образом, вы можете переместить кисть на все части, которые хотите удалить, и получить бесшовную текстуру. Это также потребует некоторой практики, прежде чем вы освоите технику. Теперь с этим инструментом есть шанс, что текстура будет иметь неровные участки. Таким образом, вы можете использовать инструмент «Штамп», чтобы удалить эти пятнистые области и добиться однородности по всему изображению.

Сохранить и протестировать

После того, как вы удалили все края, вам нужно убедиться, что ваша текстура бесшовная для дальнейшего использования. Сначала перейдите в главное меню и выберите «Изменить». Выберите «Определить шаблон» здесь. Назовите новую текстуру и нажмите OK, чтобы сохранить ее в списке текстур, доступных в Photoshop. Время протестировать свое творение! Лучший способ проверить — создать новый пустой слой с помощью параметра «Создать новый слой» на панели «Слои». Вы также можете нажать кнопку F7, чтобы создать новый слой. Теперь выберите любой цвет и залейте новый слой. Вы можете сделать это, используя опцию Paint Bucket на панели инструментов.

Затем перейдите к Слою в главном меню. Выберите «Стиль слоя», а затем «Наложение узора». Созданная вами текстура будет в самом конце списка. Выберите его. Это заполнит новый слой. Теперь перетащите слой, чтобы проверить, является ли он бесшовным. Также проверьте области, где текстура повторяется. Уменьшите размер для лучшего просмотра.

На этом ваша работа завершена. Теперь ваша бесшовная текстура готова к работе с любыми вашими заданиями Photoshop.

Недавнее содержимое

ссылка на Создание плоскости на склоне в Autodesk Inventor — Easy

Создание плоскости на склоне в Autodesk Inventor — Easy

Иногда требуется создать эскиз на склоне в Autodesk Inventor. Лучший способ сделать это — создать эскиз на наклонной плоскости. Вот простой рецепт, как это сделать за несколько простых шагов…

Продолжить чтение

ссылка на значки меню зависимостей Autodesk Inventor. Объяснение значков меню

. Объяснение значков меню зависимостей Autodesk Inventor

Совпадение. Коллинеарный Концентрический Исправить Параллельно Перпендикуляр Горизонтальный Вертикальный Тангенс Гладкий; плавный Симметричный Равно

Продолжить чтение

сообщить об этом объявлении

Как создать бесшовный фоновый узор в Photoshop

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

Что вам понадобится для выполнения миссии

1. Adobe Photoshop. Если вы наткнулись на это руководство, велика вероятность, что у вас уже есть эта программа. Однако на всякий случай вот ссылка для скачивания бесплатной тестовой версии.
2. Icons8 для рабочего стола. Это бесплатное приложение, содержащее множество значков и хорошо работающее с Photoshop.
3. Иконки или другие изображения, которые вы хотите использовать в своей выкройке. Для этого урока мы использовали наши значки природы. К вашему сведению, они бесплатны в формате PNG любого размера, поэтому вы можете сохранить их в своей учетной записи и использовать для шаблона.

8 шагов по созданию узора в Photoshop

1. Создайте основу для узора

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

2. Добавьте значки

Перетащите значки из Icons8 для рабочего стола (или любые другие значки) в файл Photoshop. Мы выбрали краба, рыбу, рыбу-клоуна и морского конька.
Если вы используете монохромные значки, они могут быть разных цветов. Вот как можно перекрасить иконки PNG в Photoshop.

3. Разместите каждый значок на отдельном слое

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

В итоге должно получиться так:

Теперь каждая иконка находится на отдельном слое в вашем файле.

4. Настройка первого слоя

Выберите один слой на панели слоев и перейдите к Filter > Other > Offset :

Установите параметры Horizontal и Vertical равными половине длины стороны файла. Помните ширину и высоту вашего квадрата? Это две настройки, которые вам нужны.
Размер нашего файла 200x200px, поэтому мы устанавливаем 100px для обоих параметров. Не забудьте проверить 9Опция 0725 Wrap Around в нижней части всплывающего окна. Нажмите «ОК». Первый слой готов:

5. Настройка второго слоя

Выберите другой слой на панели слоев. Теперь снова перейдите к Filter > Other > Offset .

Затем установите Horizontal на 0px и нажмите OK:

6. Настройте третий слой

Выберите еще один слой и перейдите к Filter > Other > Offset . Теперь переверните Horizontal и Вертикальные значения . Для нашего случая по горизонтали будет 100px, а по вертикали 0px. Нажмите «ОК».

Теперь плитка с узором готова.

7. Объединить слои

Выберите все слои, кроме Background на панели слоев и используйте комбинацию горячих клавиш Ctrl+E . Выбранные слои будут объединены.

8. Создайте свой шаблон

Сначала используйте еще одну комбинацию горячих клавиш Ctrl+A (выбрать все).

Затем перейдите к Edit > Define Pattern :

Назовите его и нажмите OK. Та-да! Ваш узор готов!

Как применить шаблон

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

1. Создайте новый файл

Чтобы увидеть результат, сделайте его больше плитки шаблона. У нас 800x600px.

2. Выберите наложение узора

Дважды щелкните фон на панели слоев. Нажмите OK во всплывающем окне.

Перейдите к Слой > Стиль слоя > Наложение узора :

Выберите вновь созданный узор во всплывающем окне и нажмите OK.

3. Наслаждайтесь своим узором!

Исходники с текстурами для Photoshop

• Fixthephoto.com

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

Дополнительная литература

• Создание новогоднего фонового узора в Adobe Illustrator
• Как перекрасить значок PNG в Photoshop

Попробуйте бесплатные инструменты для авторов от команды Icons8

Icons8 , библиотека из более чем 120 000 бесплатных иконок и картинок

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

Fugue , музыка без лицензионных отчислений для видео любого типа

Pichon , настольное приложение для загрузки значков и картинок и их использования в автономном режиме

Icons8 Photos , большая коллекция бесплатных стоковых фотографий, предназначенных для работать вместе

Ой! , библиотека бесплатных клипартов и векторных иллюстраций

Кроме того, получите списки бесплатных векторных программ и бесплатных программ для редактирования фотографий.

 

создатели контента контент-стратегия дизайн процесс проектирования + 22

Учебное пособие. Как создать бесшовную текстуру в GIMP

Часто нам нужен текстурированный фон или текстура для наложения других объектов. Большую часть времени нам нужна бесшовная плитка, чтобы она могла повторяться бесконечно.

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

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

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

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

Шаг 1: Создайте случайную текстуру

Откройте новый документ

Создайте новый документ

Откройте GIMP. Выберите «Файл»> «Создать». Введите размер, который вы хотите, чтобы ваша плитка была; Я выбрал 200×200 пикселей. Нажмите «ОК».

 

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

 

Если это не так, щелкните маленький черно-белый значок образца рядом с образцами фона и переднего плана.

 

Применить фильтр

Выберите фильтр «Пламя»

В строке меню выберите «Фильтры»> «Рендеринг»> «Природа»> «Пламя». В появившемся диалоговом окне вы можете изменить настройки, если хотите, и увидеть небольшой предварительный просмотр.

Пламя очень изменчивый фильтр — каждый раз вы будете получать что-то совершенно новое. Вы можете найти все варианты, нажав кнопку «Изменить» вверху.

Нажмите OK.

 

Результаты фильтра

Результат фильтра пламени

Вот что у меня есть; у вас будет что-то еще в зависимости от того, как работал фильтр пламени. Давайте посмотрим, как это выглядит мозаично:

 

Когда мозаично, это изображение выглядит довольно прерывистым.

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

 

Однако сначала давайте сохраним изображение.

Сохранить документ как .xcf

Выберите «Файл»> «Сохранить», перейдите к папке, в которой вы хотите сохранить изображение, и введите имя.

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

Я выбрал «texture_flame_200». GIMP сохранит его как файл .xcf.

 

Шаг 2.

Сделайте плитку бесшовной Сделайте так!

Снова перейдите в «Фильтры» и выберите «Фильтры»> «Карта»> «Сделать бесшовным».

 

Бесшовная плитка

Готово.

Да, это так просто. Почему в Photoshop нет такой возможности, я понятия не имею.

Продолжайте читать, чтобы увидеть мозаику!

 

Попробуйте в веб-браузере

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

Сохранить изображение как PNG
Выберите «Файл» > «Сохранить копию». Вверху, где находится имя файла, измените расширение на .png. В открывшемся диалоговом окне нажмите ОК.

Создайте файл .html
Откройте Блокнот или TextEdit. Убедитесь, что вы находитесь в режиме обычного текста (а не в формате Rich Text). Скопируйте и вставьте следующий код (вставьте свое имя файла вместо «texture_flame_200. png»):

 

Сохраните это как файл .html в той же папке, что и фрагмент текстуры.

Откройте файл .html
Откройте Finder (или проводник Windows), перейдите в папку, в которой сохранен файл .html, и дважды щелкните его.

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

Гораздо лучше – краев не видно.

Вот мой результат.

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

Вот некоторые другие текстуры и то, как я их получил:

Фильтры>Рендеринг>Облака>Разностные облака

Фильтр разностных облаков

Текстура мозаичная прямо в диалоговом окне.

См. плитку здесь.

 

Фильтры>Художественный>Применить холст

Фильтр холста

Настройки по умолчанию. Отображается после применения фильтра «Сделать бесшовным».

См. здесь.

 

Фильтры>Лава

Плитка лавы

Настройки по умолчанию. Так как это дало мне цветное изображение, а мне нужна была черно-белая текстура, я выбрал «Цвета»> «Обесцветить». Я выбрал вариант «Среднее» и нажал «ОК». Затем я запустил фильтр «Сделать бесшовным».

См. плитку здесь.

Если вы хотите, чтобы черные и белые области текстуры поменялись местами, выберите «Цвета»> «Инвертировать».

 

Добавить немного цвета

Лучше всего делать текстуры черно-белыми и накладывать их поверх цвета.

Переименовать слой текстуры

Сначала переименуйте слой текстуры.

Сначала переименуйте слой с текстурой на панели «Слои».

Дважды щелкните имя и измените текст с «Фон» на «Текстура».

Щелкните значок «Создать новый слой» на панели «Слои» (значок листа бумаги внизу слева).

 

Создать новый слой

Создать новый слой на панели «Слои»

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

Перетащите новый слой под слой с текстурой на панели «Слои».

Залейте новый слой цветом
Дважды щелкните основной цвет на панели инструментов и выберите новый цвет. Я выбрал загар. Затем перейдите в Edit>Fill With FG Color.

Изменить режим наложения слоя текстуры

Выберите Multiply для цветового режима.

Ваше изображение не изменится. Это потому, что ваша черно-белая текстура покрывает цветной слой. Нам нужно изменить режим наложения слоя Текстура.

No related posts.