Как сделать фаску в фотошопе
Здравствуйте, меня зовут Евгений Булатов, я работаю художником в студии Extreme Developers.
Я расскажу вам о том, как просто и качественно делать сходящиеся (т.е. повторяющиеся без швов) текстуры. Зачастую, необходимо, что бы текстура повторялась, образовывая сплошное покрытие, это удобно к тому же сильно экономит память. Особенно интенсивно такие текстуры используются в геймдеве. Там где нужно экономить каждый байт, художники должны отлично владеть методами создания красивых но экономичных текстур.
Интересно так же фотографировать текстуры самому. Вот несколько рекомендаций. Поверхность должна быть равномерно освещена рассеянным светом. Для этого подойдет пасмурная погода, или тень. Желательно что бы поверхность занимала всю площадь кадра и была под прямым углом к объективу. Переключите баланс белого фотоаппарата на облачно или пасмурно, в зависимости от ваших условий. Ну и конечно тщательно сортируйте фотографии, иначе спустя год вы ничего не найдете в своей коллекции.
Итак, фотография найдена…
Часть I
Ниже, я покажу один из способов создания сходящейся текстуры. Но сначала, сделайте простую вещь. Запустите Photoshop и нажмите Ctrl+K
В окне настроек на вкладке Performans в поле History States поставьте 100. Photoshop будет запоминать последние 100 операций которые вы сможете отменить в палитре истории. Вот теперь можно работать.
Для примера я выбрал фотографию кирпичной стены. Создадим из нее квадратную текстуру в разрешении 512 x 512.
Открываем снимок в Photoshop. И инструментом Crop (Обрезка ) вырезаем нужный участок. При вырезании зажмите Shift что бы наша область была квадратной. Перед отсечением вы можете повернуть рамку, добейтесь того, что бы ряд кирпичей был параллелен одной из сторон рамки. (для поворота переместите курсор за ее границы, он изменится на двойную изогнутую стрелку, теперь можно вращать).
Для этого, дважды щелкните по слою Background и в появившемся окне нажмите ОК (вы разблокировали слой). Затем, с помощью свободной трансформации выровняйте ряды кирпичей. Или более гибким инструментом для точной подгонки Edit –
Transform – Warp (Редактирование – Трансформация – Деформация)
При использовании свободной трансформации нажмите Ctrl так вы будете двигать каждый узелок независимо. Отпустите Ctrl и вы будете перемещать всю сторону.
Вот что у вас должно получиться:
(обратите внимание как ряды кирпичей примыкают к нижней и верхней кромкам)
После того, как вы выровняли картинку, вновь обрежьте ее что бы удалить пиксели зашедшие за края. Иначе, при следующем шаге вы рискуете получить странный результат. (при трансформации пиксели могут попасть за границы документа).
Затем воспользуйтесь фильтром Offset.
Filter – Other – Offset (Фильтр – Другие – Смещение)
Этот фильтр сдвигает изображение по горизонтали и вертикали. Сначала, сдвиньте текстуру по вертикали на половину.
(Если у вас текстура 512, смещайте на +256) Можете сдвигать и приблизительно, на глаз. После применения фильтра, вы сразу увидите, как стыкуются ряды кирпичей. Если что то вам не нравится вернитесь назад и вновь подправьте изображение.
После того как с вертикальной сходимостью закончено, сдвиньте текстуру влево (фильтром Offset). Здесь придется поработать штампом (инструмент Clone Stamp ). В зависимости от текстуры, я выбираю штамп или лечащую кисть (Healing Brush).
Штамп, как и лечащая кисть, копирует участки изображения с одного места на другое. Что бы указать редактору откуда брать фрагмент нажмите Alt и кликните мышкой. Затем рисуйте штампом там, где вы хотите убрать шов. (отличие лечащей кисти заключается в том что она подбирает яркость на исправленном участке. Пользуйтесь тем или иным инструментом в зависимости от ситуации). Кирпич за кирпичом аккуратно «заклонируйте» шов.
После того как швы убраны, осталось только подогнать текстуру под нужный размер. Примените команду Image – Image Size и поставьте нужное значение высоты и ширины в пикселях (в этом примере 512 х 512). Текстура готова!
Часть II
Но зачастую, после наложения такой текстуры заметно, что она повторяется. Небольшие перепады яркости, какие-то пятна, и мы сразу улавливаем ритм.
Можно проверить, как повторяется текстура, не выходя из редактора. В меню Edit, выберете Define Pattern. Появится окно для добавления текстуры в коллекцию пресетов. Нажмите ОК. Затем создайте новый документ в несколько раз больший чем ваша текстура, например в 5 раз. И нажмите Shist+F5, что равносильно команде заливка
Выберете тип заливки - текстура (паттерн). Выберете ваш паттерн, он будет последним. Нажмите ОК, и вы увидите как ваша текстура повторяясь заполнила изображение.
Если повторения слишком заметны, текстуру можно доработать. Убрать какие-то неоднородные детали, или перепады по яркости. Долгое время я исправлял текстуры вручную, пока не догадался, что перепад по яркости можно выровнять автоматически.
Рядом с фильтром Offset, в Photoshop, есть фильтр High Pass (высокий проход).
Если углубиться в теорию то выясниться, что это фильтр низкой частоты. Что это значит на практике? На практике это означает, что он сглаживает большие по площади колебания яркости, оставляя не тронутыми колебания которые имеют мелкую фактуру.
Поясню с другой стороны. Всем известный фильтр Gaussian Blur (Размытие по Гауссу), можно рассматривать как фильтр высокой частоты. Он сглаживает высокочастотные колебания, оставляя нетронутыми плавные изменения яркости. Таким образом, можно например, избавить фотографию от мелкого, случайного, цифрового шума. Конечно, при этом фотография потеряет в четкости, но большинство контуров останется. Фильтр High Pass действует противоположным образом, оставляя мелкую фактуру, он убирает общие пятна. А это именно то, что нужно для выравнивания текстур!
Вот небольшая иллюстрация действия этих фильтров на изображение:
Посмотрите, как меняется текстура в первом и втором случае. Радиус действия фильтров одинаков, и все становиться очевидно!
После применения фильтра High Pass фактура кирпичей, швы, трещины остались, а большие темные пятна внизу исчезли.
После фильтра Gaussian Blur, исчезли все мелкие детали, и проявились те пятна которые убрал High Pass! Примечательно что если объединить эти два слоя в в режиме Overlay, мы получим исходное изображение.
Из за того, что High Pass действует сразу во всех каналах, цвета искажаются. Но это не страшно. Этим фильтром очень удобно выравнивать яркостную составляющую текстуры, и в большинстве случаев это работает, делая повторения текстуры не такими заметным.
На этом с теорией закончим, на практике все очень просто:
1. Скопируйте слой с текстурой
2. Обесцветьте его
3. Смените режим смешивания этого слоя на Luminosity (Яркость)
4. Примените фильтр Hight Pass (Высокий проход) с подходящим радиусом.
Для текстуры из урока подойдет радиус в пределах 15-30 пкс.
Если текстура кажется вам слишком плоской, увеличьте радиус в настройках фильтра, так же можно уменьшить степень непрозрачности слоя.
Когда, результат вам понравится, можете откинутся на спинку кресла и насладится плодами своих трудов. Вы сделали качественную текстуру. А главное узнали способ создавать их в неограниченном количестве. Для этого, вам всего лишь, потребуется побродить с фотоаппаратом)
Когда вы освоите Photoshop и запомните горячие клавиши, создание такой текстуры будет занимать у вас минут пятнадцать. И главным вопросом будет где найти или как сфотографировать ту текстуру, которая нужна в вашей работе. Особенно если на дворе лето, а вам нужен снег!
В заключении хочу поблагодарить Яшу известного как Snork, Елену aka Porcelana и Евгения ksi2 за помощь в создании урока. Конечно, это были самые начала в создании текстур. Надеюсь, с вашей помощью, я продолжу этот рассказ.
В этом материале я отвечу на многочисленные вопросы посетителей сайта - я расскажу, как создать кисть, имитирующую швейный стежок .
С помощью такой кисти можно имитировать стежки, получаемые с помощью швейной машинки, на каком-либо тканевом материале.
Урок подходит доя всех версий Photoshop, начиная с CS3.
Пример стежка на фетре:
Применение кисти - стежка.
Итак, начнём. Создайте новый Photoshop-документ (PSD-файл) шириной 25 и 4 высотой пикселей. Залейте холст черным цветом. Перейдите по вкладке главного меню Редактирование --> Определить кисть (Edit --> Define Brush Preset). В открывшемся окне задайте имя кисти ( я задам имя "stitch") и нажмите ОК:
Создание документа и определение кисти.
На панели инструментов выберите инструмент "Кисть" (Brush Tool) и нажмите на кнопку в левом верхнем углу окна Photoshop`а для того, чтобы открылась панель выбора кистей, где выберите созданную кисть, у меня она называется "stitch":
Выбор вновь созданной кисти.
Нажмите клавиатурную клавишу F5, чтобы открыть панель кистей. В первом окне панели (название окна - "Форма отпечатка кисти", англ. - "Brush Tip Shape") измените параметр "Интервалы" (Spacing) до 750 - 850 процентов:
Изменение интервала кисти
Затем нажмите на вкладку "Динамика формы" (Shape Dynamic), в окне в разделе "Колебание угла" (Angle Jitter) измените параметр "Управление" (Control) на "Направление" (Direction):
Изменение параметров кисти.
Нажмите на квадратик, расположенный в правом верхнем углу окна, в открывшемся меню кликните по строке "Новый набор параметров кисти" (New Brush Preset):
Сохранение параметров кисти в новом наборе.
Откроется новое окно, где введите имя нового набора, я ввёл stitch2.
Создание кисти на этом закончено.
Создайте в Photoshop новый документ с светлым фоном. Создайте в документе новый пустой слой. Выберите stitch2 в панели выбора кистей и попробуйте провести инструментом "Кисть" волнистую линию, если вы всё сделали правильно, то должно получиться что-то вроде этого:
Линия, нарисованная при помощи кисти-стежка.
Но на стежок нити на ткани пока мало похоже, не так ли? Чтобы было всё хорошо, необходимо добавить стили слоя к фону и к слою со стежком. Дважды кликните по фоновому слою в панели слоёв для его разблокировки и примените к нему стили "Наложение узора" (узор Photoshop(файл pattern_felt.pat) для этого стиля можно здесь) и "Наложение цвета" со следующими параметрами:
К слою со стежком примените следующие стили слоя:
Со следующими параметрами:
И вот как выглядит документ после добавления стилей:
Добавление стилей слоя к фону и слою со стежком.
Обводка стандартной произвольной фигуры Photoshop кистью stitch2.
Привет! Мы продолжаем цикл статей по пайплайну разработки стилизованных персонажей. Сегодня расскажем, что такое этап запечки, и как перенести детализацию с высокополигональной модели (high poly) на низкополигональную (low poly).
Запечка (Bake) — четвёртый этап ААА-пайплайна. На прошлом мы сделали развёртку, а сейчас будем её использовать для создания Normal Map, AO и Color ID.
Примечание: нам часто говорят, что правильнее писать «запекание», а не «запечка». Мы пишем «запечка», потому что это устоявшийся термин в индустрии.
Гугл на слово запечка показывает то, что нам нужно, а на слово запекание предлагает запечь курочку
Что такое запечка
Взглянем на low poly модель, которую сделал наш студент Leon.
Низкополигональная модель, созданная на этапе ретопологии
В ней минимум полигонов и чистая сетка. Эта модель будет загружаться в игровой движок.
Есть ещё high poly модель с высокой детализацией и скульпт.
Хайполи модели под сабдив и скульпт
Технология запечки позволяет нам перенести все детали с high poly и скульпта на low poly-модель.
В итоге, в игровом движке будет low poly модель с минимальным количеством полигонов, но выглядеть она будет так, как будто на ней есть все эти детали:
Для внимательных: ID Map никак не влияет на вид модели, в отличие от нормала и АО, но она пригодится при текстурировании, поэтому эту карту тоже будем печь.
Как это работает?
Мы берём low poly модель и добавляем на неё запечённые карты Нормала и АО. А эти карты обманывают поведение игрового света. Модель начинает бликовать так, как будто на ней есть все эти фаски, вырезы и прочие детали.
Для тех, кто не понимает, о чём речь: мы очень подробно писали про вертекс нормали и принцип работы нормала в статье про сетку.На этом этапе пайплайна — запечке, наша задача: запечь 3 карты.
1) Normal map — карту неровностей
2) Ambient Occlusion (AO) — карту затенения
3) Color ID — цветные маски
В Marmoset можно запечь гораздо больше карт, про это будет дальше.
Мы добавим эти карты на нашу low poly модель, на ней появится вся детализация с high poly и скульпта, а благодаря карте Color ID модель будет легче разбить по материалам и текстурировать.
Все карты создаются на основе развёртки, которую мы сделали на прошлом этапе пайплайна. Без развёртки карты не запекутся. Если есть ошибки на развёртке или low poly модели, то мы столкнёмся с кучей проблем.
Ссылки на теорию
Вот несколько наших статей, прочитав которые ты точно поймёшь, как работает «магический» трюк с обманом вертекс нормалей.
Какие карты будем печь
Нет смысла запекать карты, если не знаешь, что они делают и как работают.
1. Normal Map
Normal Map переводится как «карта нормалей»
Она изменяет направление блика на геометрии.
Карта создаёт виртуальные вертекс нормали в каждой точке low poly модели и искажает поведение света. Если наложить запечённый нормал на модель, то она будет выглядеть почти как high poly.
Вот хороший пример: low poly модель с включенным Нормалом и без него.
Модель с включенным нормалом и без него
Новые полигоны не создаются, это лишь иллюзия формы:
Приглядись, видишь low poly сетку? Все детали и затенения, которые ты видишь — иллюзия.
Чтобы создать нормал, нужно взять развёртку, которую мы делали ранее, взять high poly и скульпт, загрузить в программу для запечки и нажать кнопку «bake».
Там много нюансов, но мы обо всём расскажем.
Из чего печётся Normal map
Что нужно знать о Нормале
Небольшие чёрные полосы на нормале — это нормально.
Никто не будет разглядывать нашу модель под микроскопом.
Чёрные полоски на нормале
Почему не стоит сильно волноваться о чёрных полосах?
Игрок почти всегда видит модель в игре на расстоянии. Поэтому не нужно тратить несколько часов, чтобы убрать чёрные полоски на нормале:
Та же модель, но на расстоянии. Чёрные полосы не режут глаза, — значит, всё окей.
Из чего состоит карта нормалей
Normal map создает иллюзию объёма благодаря трем картам в каналах текстуры: красный, зелёный, синий.
Чтобы переключаться между каналами, откроем файл с нормалом в Photoshop и зайдём во вкладку Channels.
Красный канал показывает искажение вертекс нормалей по горизонтали. Чем светлее пятно на красном канале — тем сильнее виртуальная поверхность наклонена вправо, а чем темнее — тем больше «поверхность» бликует влево.
Красный канал нормала
Зелёный канал — работает так же, но искажает шейдинг по вертикали.
Светлый-блик поворачивается наверх, а тёмный — вниз.
Зелёный канал Нормала
Чтобы лучше понять разницу между этими двумя каналами, посмотрим на эту часть модели:
У бочки на high poly есть фактура дерева.
Затемнение идёт только по одной из осей.
Так как красный канал нормала показывает искажение вертекс-нормалей только по горизонтали, а скосы между досками как раз и отклоняются влево или вправо, то на нём будет много информации.
А зелёный канал — показывает искажения по вертикали. Так как виртуальные плоскости не отклоняются вверх/вниз, то затемнений почти нет, то информации на нормале в этом канале почти не будет:
Зелёный и красный канал нормала на примере бочки
Красный и зелёный каналы — основные для нас (как моделлеров).
Но у Нормала есть ещё синий канал.
Синий канал имитирует углубления в объекте.
В играх он практически не используется.
За счет изменения синего цвета на нормале создаются искажения на плоской поверхности.
Если на синем канале есть артефакты, можно просто выключить этот канал, т.е. отключить синий цвет у нормал мапа в фотошопе. Или просто их замазать артефакты кисточкой.
Синий канал нормал
Больше про три канала Нормала — в этой статье.
Нейтральный цвет Нормала
128х128х255 — нейтральный цвет нормала.
Если добавить полностью нейтральный нормал, то особой разницы видно не будет. Модель будет шейдить так же, как обычная лоуполи.
В каком формате лучше хранить нормал
После запечки, скорее всего, придётся вносить изменения в нормал, используя фотошоп.
Поэтому файл лучше сохранять в форматах Targa или TIF.
При сохранении есть выбор, сохранять в 24 или 32 bit.
Если есть Альфа-канал — сохраняем с 32 bit.
Если Альфа-канала нет — в 24 bit.
2. Карта АО
Так выглядит запечённая карта АО
Карта Ambient occlusion (AO) — это карта затенения.
Она показывает самые глубокие тени, которые есть в объекте.
В основном это тени в углублениях и на пересечениях. Эту карта используют игровые движки для корректного освещения. Она также очень полезна в текстурировании.
Отличный пример того, что сложно сделать без АО — это грязь. Она забивается в самые глубокие места модели, — карта АО поможет легко сгенерировать маску углублений, чтобы забить их грязью.
Если добавить на low poly модель карту АО, на модели появятся самые глубокие тени
Также как и нормал, карта АО печётся на развёртку модели из high poly и скульпта.
Карта AO создаётся из highpoly и скульпта
При запекании по-умолчанию эта карта чёрно-белая, но на этапе текстурирования её можно покрасить.
С картой АО разобрались, последняя карта, которая нам нужна — Color ID
3. Карта Color ID
У наша модель состоит из разных материалов: металла, камня, дерева и ткани.
Во время текстурирования нам нужно быстро выделять геометрию, которая будет, например, металлом или деревом.
Чтобы это можно было сделать в один клик внутри Substance Painter, нам нужно запечь карту Color ID. Она позволяет быстро выделять большие куски. А в программе для текстурирования эту группу объектов можно легко затекстурить.
Вот так, с помощью этой карты мы в считанные секунды красим модель в разные цвета:
Быстро красим модель в Substance Painter, используя карту Color ID
Для того, чтобы создать карту Color ID, нам нужно покрасить high poly-модель в разные цвета. Один цвет — это одна группа объектов, как правило разбитая по материалам. Например, всё дерево на Color ID оранжевое, вся кожа —розовая, ржавый металл — синий, шерсть — голубая, а новый и чистый метал —зелёный.
Это не цвета будущей модели — здесь они могут быть любыми. Главное, чтобы они были контрастными.
Дополнительные карты
В мармосете куча карт, которые можно запечь.
Их в разных пайплайнах используют разные художники для текстурирования:
Position map с помощью градиентов помогает накладывать текстуры в разных плоскостях модели.
Сurvature выделяет все края на модели и упрощает создание затёртостей и повреждений. Очень полезная карта на ряду с АО.
Thickness запекает толщину, что необходимо для имитации подповерхностного рассеивания.
Часто для hand paint текстур пекут свет прямо на текстуру. Иногда необходимо запечь альфу — карту прозрачности.
Еще мармосет умеет печь цвета и материалы с других моделей и текстур, это иногда помогает не переделывать много текстур с нуля.
При помощи эффекта Bevel and Emboss (Фаска и Чеканка) мы можем добавить иллюзию рельефности тех или иных элементов. Выделите слой с какими-либо элементами, например с разными формами, затем раскройте список эффектов и выберите здесь пункт Bevel and Emboss (Фаска и Чеканка).
Параметры данного эффекта делятся на две основные группы: Structure (Структура) и Shading (Тени) (рис. 8.15).
Рис. 8.15. Параметры Bevel and Emboss (Фаска и Чеканка)
В первой группе параметров — Structure (Структура) – мы можем настроить следующие.
• Style (Стиль) – фактически опция, отвечающая за тип действия эффекта. Здесь имеются варианты: Outer Bevel (Внешняя фаска), Inner Bevel (Внутренняя фаска), Emboss (Чеканка), Pillow Emboss (Вдавленная чеканка), Stroke Emboss (Резкая чеканка) (рис. 8.16).
Рис. 8.16. Список типов фаски
Внешний вид элемента, в отношении которого применяется данный эффект, зависит от выбранного здесь типа.
• Technique (Метод) – параметр, позволяющий указать метод осуществления фаски и чеканки. Здесь доступны три варианта придания эффекта рельефа элементу: Smooth (Сглаженный), Chisel Hard (Высекать глубоко), Chisel Soft (Высекать поверхностно) (рис. 8.17).
Рис. 8.17. Варианты метода фаски
• Depth (Глубина) – параметр, отвечающий за глубину создаваемого рельефа, за насыщенность добавляемых элементов, например тени.
• Direction (Направление) – при помощи данной опции можно указать направление рельефа – Up (Вверх) или Down (Вниз).
• Size (Размер) – параметр, определяющий размер формируемой тени при создании иллюзии объема.
• Soften (Смягчение) – параметр, позволяющий сделать добавляемый элемент более сглаженным.
Далее в группе параметров Shading (Тени) расположены следующие.
• Angle (Угол), Altitude (Высота), Use Global Light (Использовать глобальный свет) позволяют настроить общее направление тени (рис. 8.18).
Рис. 8.18. Параметры направления тени
• Gloss Contour (Контуры глянца) – опция, при помощи которой можно указать какой-либо из предложенных вариантов контуров создаваемого глянца (рис. 8.19).
Рис. 8.19. Варианты контуров создаваемого глянца
• Highlight Mode (Режим подцветки) и Shadow Mode (Режим тени) – две опции, дающие возможность переключать режимы смешивания цветов подцветки и теней с общим изображением.
Параметры Opacity (Прозрачность) в обоих случаях позволяют настроить прозрачность элементов подцветки и тени.
На рисунке 8.20 показаны образцы разнообразных элементов с эффектом фаски.
Рис. 8.20. К каждому элементу добавлен эффект Bevel and Emboss (Фаска и Чеканка), что значительно подчеркивает их форму и добавляет объем
Итак, эффект Bevel and Emboss (Фаска и Чеканка) позволяет в значительной степени подчеркнуть форму элемента за счет придания ему эффекта рельефа. Действие Фаски и Чеканки помогает наиболее удобно избежать применения трехмерной графики для передачи легкого объема изображения.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРес
Boss Emboss (Барельеф)
Boss Emboss (Барельеф) Является альтернативой стандартному фильтру Emboss (Барельеф). Преобразует изображение в трехмерную поверхность и добавляет на нее освещение, создавая иллюзию гравировки (рис. 7.1). Рис. 7.1. Исходное изображение (вверху) и пример использования фильтра Boss Emboss
Читайте также: