Как сделать текстуру без швов

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

Чтобы сместить изображение текстуры, выберите вкладку фильтров «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 модели sci-fi плитки пола в Blender. Превращаем 3D модель в sci-fi текстуру через запекание карт. Создание текстуры сетки для забора или пола для Unity3D, поскольку оставляет по краям затайленной 3D модели половинки текстур.

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

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

Используем инструмент Осветлитель (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.

Также если заменить черный фон прозрачным фоном и изменить режим получившейся бесшовной текстуры на 8 бит или 16 бит в градациях серого (Grayscale, оттенки серого), то можно использовать получившуюся текстуру в качестве кисти для изменения формы/создания ландшафта в Unity3D. О создании кисти и использовании ее в Unity3d для редактирования ландшафта более подробно рассказывается в статье Террейн в Unity 3D. Часть Вводная – для затравки. Создание лабиринтов и подземелий в Unity3D.

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов На рисунке показан процесс создания паттерна для Фотошопа из изображения.

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Автор: Максим Голдобин aka MANMANA

Источник

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

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Источник

Repetitor3d.ru

3d графика и дизайн

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Создаем бесшовную текстуру в Adobe Photoshop

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

Подготавливаем изображение

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

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

Источник

Уроки фотошопа. Бесшовная (тайлящаяся) текстура

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Из скетча в Блендер и Фотошоп / Процесс с комментариями

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Кот и магическая бабочка. Видеоурок

Когда-то давно первая версия этого арта очень сильно завирусилась, так что спустя 3 года я решил сделать по ней детальный видеоурок. Приятного просмотра!

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Из скетча в фотоарт с Фотошопом и Блендером / Процесс с комментариями

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Photoshop. Режимы наложения Subtract (Вычитание) и Divide (Разделение).Вырезание объекта и замена фона, сохраняя тени и блики

Пиридупреждение: ОЧЕНЬ длиннопост.

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Вообще, в интернете хватает уроков «вырезать объект, сохранив тени на поверхности», но обычно там объект сфотографирован на белом фоне и тени можно поставить в другом режиме наложения, обычно Multiply (Умножение). Но если от объекта на поверхности не только тени, но и светлые и/или цветные рефлексы, то всё уже не так просто.

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Даже если мы фотографировали со штатива, но пол не бетонный, то сдвиг возможен. Насколько двигается ламинат, можно узнать, если на штатив вместо фотоаппарата поставить лазерный уровень и просто походить вокруг. Глядя на дёргающиеся линии лазера на стенах, начинаешь понимать всю бренность бытия. Ставим верхнему слою режим наложения Difference (Разница). В режиме Difference одинаковые цвета становятся чёрными, так что задача – двигая верхний слой, сделать так, чтобы фон стал максимально чёрным. При этом, если фотоаппарат хоть на несколько миллиметров наклонится вперёд или назад, то придётся ещё и изменять размеры слоя на какие-то доли процента.

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Когда добились максимально чёрного фона, режим можно поменять обратно на Normal (Обычный).

Примечание. Способы выравнивания слоёв есть разные (включая автоматическое выравнивание). Например, можно верхнему слою поставить прозрачность 50% и двигать. Я ставил Difference просто потому, что так меньше приглядываться: как картинка почернела, значит, нормально.

Также можно попробовать использовать автоматическое выравнивание Edit/Auto-Align Layers, но мне всё равно пришлось размер слоя подгонять вручную, штатив, видимо, всё-таки вперёд-назад немного качался.

Можно приступать к вырезанию бликов и теней из фона.

Вариант 1. Более простой. Неплохо работает на нейтральном фоне, белом или сером, но вообще можно применять на любом фоне.

Копируем оба слоя, из них будем доставать блики. Я буду называть их 1 (фон) и 2 (с объектами). Чтобы получить блики, нужно взять картинку с объектом и вычесть значения каналов RBG картинки без объекта. Тогда останутся только те места, которые стали светлее, остальное станет чёрным. То есть, сверху слой 1 без объектов, снизу слой 2 с объектами, у верхнего слоя режим наложения Subtract (Вычитание). Остаются только те места, которые стали светлее от добавления объекта. Удобно то, что если блики цветные, то цвет блика останется.

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Потом слои слить. Я назвал слитые слои Lights и пока что спрятал.

Теперь задача – получить слой с тенями. Опять копируем слои 1 и 2. Снизу слой 1 без объектов, сверху слой 2 с объектами, у верхнего слоя режим Subtract (Вычитание). Получаем инвертированные тени.

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Сливаем слои, можно для удобства назвать слитый слой Shadows.

Тени оставляем инвертированными, светлые на чёрном фоне.

Объект вырезаем любым методом, который нравится, и переносим на самый верхний слой.

Итак, в верхнем слое у нас объект, под ним два слоя: с бликами (lights), ему ставим режим наложения Linear Dodge (Линейный осветлитель) и инвертированными тенями (shadows) в режиме Subtract (Вычитание).

Примечание (можно не читать). Простое сложение каналов A+B называется Linear Dodge (Линейный осветлитель), но Linear Burn (Линейный затемнитель) – это не простое вычитание, это «A плюс B минус 1» (в случае 8-битного цвета это «минус 255»), обычное вычитание A-B называется Subtract. Если инвертировать слой с тенями, то можно поставить ему режим Linear Burn, результат аналогичен. Но, если вы работаете в режиме 32 бита, то из-за формулы с «минус 1» Linear Burn не работает, в 32 бита нет чёткого «потолка» яркости, так что Subtract тут более универсален.

Теперь подо всем этим можно добавить другой фон или просто слой с цветом. Конечно, если просто растянуть текстуру одной яркости, то будет видно, что что-то не так:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Но если даже на такой фон добавить градиент, а объектам подкрутить яркость, то всё уже не так плохо:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

На новом фоне сохраняется даже радужная дисперсия, которую в обычных условиях было бы не так просто перенести:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Один из основных плюсов этого способа – работает на любом фоне. Можно сделать две фотографии на фоне текстуры дерева, повторить действия и получить отдельные тени и блики. Ну, может блики будут с желтовато-оранжевым оттенком, но и их, и объект можно сделать менее жёлтыми через Hue/Saturation (Цветовой Тон/Насыщенность), убрав насыщенность из жёлтого цвета.

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

Вариант 2. Более правильный, режим Divide (Разделение), но чуть сложнее.

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Но видны и минусы: в тенях, где много шумов, яркость этих шумов получается очень высокой, а справа внизу совсем «светится»:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

В принципе, мы делаем то же самое, что и в первом варианте, но режим ставим не Subtract (Вычитание), а Divide (Разделение). Этот режим делит значения RGB нижнего слоя на значения RGB верхнего.

Пример: на нижнем фоне яркость серого цвета 0.1 (10%), а на верхнем серый 0.5 (50%), результирующий будет 0.1/0.5=0.2, итоговая яркость серого цвета 20%. Если верхний слой темнее нижнего, то результат всегда белый (при делении на меньшее число мы всегда получаем значение больше 1). Если цвета одинаковые, то итоговый цвет тоже белый, этот эффект мы и будем использовать: там, где блики и тени не добавились, результат будет белый.

Тени: сверху слой 1 без объектов, снизу слой 2 с объектами, у верхнего слоя режим Divide, получаем тени:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

В тенях из-за шума остаются куски, которые должны быть белыми

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Примечание. Теория, можно не читать. Если у картинки в целом яркость достаточно высокая, то даже при наличии шумов, поделив одну яркость на другую, мы не сильно отойдём от некоего среднего значения. Например, у нас два почти одинаковых слоя, но есть шум в 0.01 (1%). В нижнем слое серый цвет 0.5, в верхнем из-за шумов 0.51, результат деления 0.98, почти белый. А если у нас в нижнем слое очень темно, например, значение 0.01, а в верхнем из-за шумов 0.02, то итоговое значение 0.5, вместо белого средний серый. То есть, разница в 0.01 при низкой и при высокой яркости в режиме Divide даёт итоговый результат, отличающийся в разы, в первом случае ошибка 2%, во втором 50%.

В общем, чем темнее картинка, тем в данном варианте всё хуже. Но. Если мы на нижнем слое увеличим яркость самых чёрных кусков, то шум резко уменьшится. К нижнему слою применяем Levels (Уровни), нижний левый ползунок сдвигаем на 1 или 2. Это действие делает самые чёрные части чуть-чуть светлее, но в режиме Divide этого хватает, чтобы «уйти» в белый, нижний правый угол стал белым:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Сливаем слои, результат инвертируем:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Блики: сверху слой 2 с объектами, снизу слой 1 без объектов, у верхнего слоя режим Divide:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Опять шумы в тенях, которые затемняют углы. К нижнему слою применяем Levels (Уровни), нижний левый Output Levels меняем на 2 или 3 (добавили яркости в самые чёрные части), тёмные углы стали белыми:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Получаются инвертированные блики, после сливания слоёв инвертируем через Image/Adjustment/Invert (Изображение/Коррекция/Инверсия):

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

После чего так же блики ставим в режиме Linear Dodge, а тени в Subtract. Фон подкладываем любой:

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

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

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Есть вариант собирать это всё в режиме 32 бита, там пересветы можно убирать корректирующим слоем экспозиции, но в 32 бита своих заморочек хватает, поэтому так.

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

Как сделать текстуру без швов. Смотреть фото Как сделать текстуру без швов. Смотреть картинку Как сделать текстуру без швов. Картинка про Как сделать текстуру без швов. Фото Как сделать текстуру без швов

Режим Divide (Разделение), поэтому яркость теней не зависит от цвета фона.

Примечание. На телефоне программа удалённого управления фотоаппаратом, потому что техногенный пафос, сразу смотрю, что получается.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *