Как закрасить текстурой в фотошопе
Здравствуйте, меня зовут Евгений Булатов, я работаю художником в студии 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 за помощь в создании урока. Конечно, это были самые начала в создании текстур. Надеюсь, с вашей помощью, я продолжу этот рассказ.
Для редактирования содержащихся в 3D-файле текстур или создания новых текстур можно использовать рисование Photoshop и инструменты коррекции. Текстуры импортируются вместе с 3D-моделью в виде 2D-файлов. Они отображаются в виде элементов на панели «Слои», вложенной в «3D-слой» и группируются по типу карты: «Диффузия», «Выпуклость», «Глянцевитость» и так далее.
Для просмотра миниатюры определенного файла текстуры наведите указатель на название текстуры на панели «Слои». Вместе с миниатюрой также показываются сведения о размере изображения и цветовой модели.
A. 3D-слой B. Типы текстурных карт C. Название текстурной карты
Если выбрать материал, то в нижней части панели 3D отображаются текстурные карты, используемые в нем. См. раздел Параметры 3D-материалов.
Редактирование 3D-текстур в Photoshop осуществляется одним из следующих способов:
Редактирование текстуры в 2D-формате. Текстура открывается в качестве смарт-объекта в отдельном окне.
Редактирование текстуры непосредственно на модели. При необходимости можно временно вырезать необходимую область модели для рисования. См. раздел 3D-рисование.
Выполните одно из следующих действий.
Дважды щелкните текстуру на панели «Слои».
На панели «Материалы» выберите материал, используемый в текстуре. В нижней части данной панели щелкните значок меню текстуры редактируемой текстуры и выберите «Открыть текстуру».
Для рисования на текстуре или ее редактирования можно использовать все доступные инструменты Photoshop.
Активируйте окно с 3D-моделью, чтобы увидеть результат редактирования ее текстуры.
Закройте документ текстуры и сохраните изменения.
Для определения области модели, на которую наложена текстура, текстуры можно скрывать или отображать вновь.
Щелкните значок глаза напротив необходимого слоя «Текстура». Чтобы скрыть или отобразить все текстуры, щелкните значок глаза напротив самого верхнего слоя «Текстуры».
Фоновый файл диффузии, использующийся несколькими материалами 3D-модели, может совмещать в себе несколько областей содержимого, накладываемого на различные поверхности данной модели. Этот процесс, называемый Отображение UV, согласовывает координаты из 2D-текстурной карты с определенными координатами на 3D-модели. UV-наложение обеспечивает корректное наложение 2D-текстуры на 3D-модель.
Что касается 3D-содержимого, созданного не в Photoshop, этот процесс осуществляется в той программе, где это содержимое создавалось. Однако в Photoshop можно создать UV-перекрытия, которые облегчают контроль наложения 2D-текстуры на поверхности 3D-модели. Эти перекрытия играют роль направляющих при редактировании текстуры.
Дважды щелкните текстуру на панели «Слои», чтобы открыть ее для редактирования.
Создание UV-перекрытий возможно только в том случае, если текстурная карты открыта, а содержащее ее окно является активным.
Выберите «3D» > «Создать UV-перекрытия», затем выберите вариант перекрытия.
Показывает границы UV-отображения
Показывает области модели в режиме рендеринга с использованием сплошного цвета.
Отображает геометрические нормали, переведенные в значения RGB, где R=X, G=Y, а B=Z.
UV-перекрытия добавляются в качестве отдельных слоев фонового файла на панели «Слои». UV-перекрытие можно отобразить, скрыть, переместить или удалить. Эти перекрытия отображаются на поверхности модели при закрытии и сохранении фонового файла или переключении с фонового файла на связанный 3D-слой (сохранение фонового файла происходит автоматически).
Перед проведением финального рендеринга UV-перекрытия нужно удалить или скрыть.
Иногда на сетке открываемой 3D-модели текстуры отображаются не совсем точно. Некорректное наложение текстур может привести к тому, что на поверхности модели станут заметны значительные искажения, например, швы или области с вытянутыми или сжатыми узорами текстуры. Также это может привести к непредсказуемым результатам при непосредственном рисовании на модели.
Чтобы проверить параметризацию, откройте текстуру для редактирования, затем используйте UV-перекрытие для осмотра качества наложения текстуры на поверхности модели. См. раздел Создание UV-перекрытий.
Команда «Повторно параметризовать» устраняет все изъяны для корректного отображения текстуры на поверхностях модели.
Откройте 3D-файл с ошибками в наложении текстуры диффузии, затем выберите 3D-слой, в котором содержится данная модель.
Задайте параметры повторной параметризации:
«Низкое искажение» обеспечивает наименьшее искажении узора текстуры за счет возможного увеличения числа швов на поверхности модели.
«Уменьшение числа швов» уменьшает число швов на стыках текстур модели. В зависимости от модели этот процесс может привести к увеличению случаев растяжения или сжатия текстуры.
(Необязательно) Если выбранный способ повторной параметризации не позволяет добиться желаемого результата, выберите «Редактирование» > «Отменить» и попробуйте второй вариант.
Команду «Повторно параметризовать» также можно использовать для повышения качества отображения текстуры по умолчанию при создании 3D-моделей из 2D-слоев. См. раздел Создание 3D-объектов из 2D-изображений.
Текстура с повторяющимся узором состоит из одинаковых повторяющихся фрагментов изображения, напоминающих мозаику. С помощью таких текстур можно воссоздать более реалистичный внешний вид модели. Они не занимают много места на диске, а уровень производительности при их использовании возрастает. Любой 2D-файл можно превратить в мозаичный рисунок. После предварительного просмотра взаимодействия участков мозаики на рисунке вы можете сохранить один из них в качестве повторяющейся текстуры.
Чтобы создать сетку для текстуры с повторяющимся узором, воспользуйтесь 3D-редактором, в котором была создана модель.
В Photoshop имеется несколько методов для замены цвета объектов. Применение корректировки «Цветовой тон/Насыщенность» к выделенным объектам обеспечивает большую гибкость и лучшие результаты. Для диалогового окна «Заменить цвет» характерна меньшая гибкость, но более удобная группировка параметров. Более быструю, но менее точную замену обеспечивает инструмент «Замена цвета».
В большинстве случаев для замены цветов этот гибкий метод подходит лучше всего. Поскольку использование масок и корректирующих слоев относится к обратимым методам редактирования, впоследствии у вас будут все возможности точно настроить результаты. Уникальный параметр «Тонирование» позволяет выполнять абсолютные, а не относительные изменения цветов, избавляя от необходимости тонирования на основе исходных цветов.
Выделите объект, который необходимо изменить. Как правило, хороший результат дает использование инструмента «Быстрое выделение» . Другие способы описаны в разделах Выбор цветового диапазона и Выделение и маска.
На панели «Коррекция» нажмите значок «Цветовой тон/Насыщенность». Выделенный фрагмент становится маской для данного корректирующего слоя.
Чтобы заменить цвет объекта, измените настройки «Цветовой тон» и «Насыщенность» на панели «Свойства». Если исходный цвет создает оттенок для нового цвета, выберите «Тонирование» и исправьте настройки. (См. раздел Коррекция тона и насыщения.)
Чтобы сохранить контраст, оставьте нулевое значение настройки «Яркость». Чтобы сохранить и контраст, и насыщенность, выберите для корректирующего слоя режим наложения «Цветовой тон».
При необходимости можно увеличить или уменьшить область изменения путем рисования на маске черным или белым цветом. (См. раздел Редактирование слоя-маски.)
Дополнительные сведения см. в разделе Описание панели «Коррекция».
Диалоговое окно «Заменить цвет» содержит инструменты, предназначенные для выделения цветового диапазона, и шкалу модели HSL для замены этого цвета. Цвет замены также можно выбрать в палитре цветов.
В окне «Заменить цвет» отсутствует параметр «Тонирование», который есть у корректировки «Цветовой тон/Насыщенность» и который может потребоваться для полного изменения цвета. Кроме того, для изменения отдельных объектов метод с использованием корректирующего слоя может оказаться более простым. Тем не менее, команда «Заменить цвет» хорошо подходит для глобальной замены цвета, особенно для изменения цветов, выходящих за пределы цветового охвата, при подготовке к печати.
Давайте научимся перекрашивать текстуры. В Фотошопе это делать очень просто.
Для примера я выбрала текстуру эльфийских сапог из игры Skyrim:
Способов перекраски существует несколько, какие-то универсальны, какие-то подходят лишь в определённых случаях. Очень удобны и гибки в настройке способы окрашивания с использованием масок .
Для начала, давайте попробуем сделать сапоги не жёлтыми, а серыми. Создадим новый Adjusment слой, для этого в свитке Layers нажмём на соответствующую пиктограму, выглядящую как чёрно-белый круг и выберем из выпадающего списка Hue/Saturation :
У нас появился новый слой, который можно гибко настраивать в свитке Adjustments, не затрагивая исходное изображение (если свитка у вас в палитре нет, то откройте его из меню Windows -> Adjustments)
Hue - оттенок, Saturation - насыщенность, Lightness - яркость (не очень востребованная лично мной опция, ибо яркость лучше изменять в Exposure).
Теперь поговорим о сером цвете. Есть тупо серый, он некрасивый и красноватый, а есть серый с оттенками. Я вам покажу, как это выглядит вживую:
Разница кажется незначительной, но в игре она будет ощутимо видна. Серебро, мифрил, адамантин, сталь - это всё серые металлы, но оттенки у них разные. Поэтому возьмём за правило - обесцвечивать до упора не следует, хорошо оставлять немного цветности.
В своём примере я остановилась на среднем, чуть голубоватом варианте. Но, ой-ой, серой стала вся текстура и это мне не нравится. И тут на помощь приходят маски . Маска работает как и альфа-канал: белый - да, чёрный - нет, серый - так себе. Для Adjustment слоёв маски создаются автоматом сами и изначально полностью белые, то есть настройка применяется на всё изображение. Наша задача проковырять в белой маске дырки. Выделим маску, щёлкнув на неё (не где попало на слое Hue/Saturation, а именно на белом квадрате, изображающем маску, в этом случае маска будет обрамлена уголками), проверим цвета Foreground и Background, они должны быть белым и чёрным соответственно
Если вы железный человек и руки у вас не трясутся, то смело берите ластик, настраивайте его и трите по маске там, где, на ваш взгляд, серый цвет неуместен. Поскольку я не располагаю такой уверенностью на счёт собственных рук, то, для больших областей, я использую Полигональное лассо. Им я аккуратно, короткими отрезками, выделила нужную мне область изображения - ту часть текстуры, которая изначально была красноватой и, нажав Delete, удалила эту область из маски. Затем я, всё же, взяла ластик и вернула прежний цвет заклёпкам и двум загогулинам. Вот, что у меня получилось:
И, теперь, мне не нравится красноватый цвет. Поэтому я создала ещё один слой Hue/Saturation и изменила его настройки, чтобы красноватый цвет превратился в сиреневатый (Hue -120, Saturation -50), а, затем, отредактировала маску так, чтобы эти изменения касались только нужного мне куска текстуры.
Здесь я отойду немного вбок и поведаю вам, что абсолютно все слои, маски, каналы и векторные контуры можно выделять, щёлкнув по нужному элементу с зажатым Ctrl , в этом случае стандартный курсор-рука обретёт поверх себя пиктограму небольшой прерывистой рамки, призванной изображать то, что в простонародье называется муравьями, а, по-умному, контуром выделения. Учтите, что, если таким образом выделять каналы и маски, то срабатывает принцип белый - да, чёрный - нет. К тому же, к полученному выделению возможно добавлять другие маски, каналы или векторные контуры. Для этого, не снимая выделения, надо зажать Ctrl+Shift и щёлкнуть на необходимом элементе, при этом в пиктограме муравьёв на руке-курсоре появится + . Таким же образом можно вычесть выделение, если, вместо Ctrl+Shift зажать Ctrl+Alt (вместо + в рамке появится - ). Вообще, сочетание любого оператора выделения (рамки выделения, лассо, волшебный жезл, выделение масок и т. п.) с кнопками Shift или Alt, позволяют редактировать существующее выделение, добавляя или вычетая из него соответственно.
Вернёмся к нашим баранам. Чтобы не мучаться, повторно выделяя то, что уже было выделено, я, сделав активной маску нового слоя Hue/Saturation и зажав Ctrl, щёлкнула по маске первого слоя Hue/Saturation и получила уже готовое выделение, требующее лишь небольшой редакции, а именно - исключить из выделения заклёпки и загогулины. Для этого подойдёт абсолютно любой инструмент выделения, точность тут не нужна - все элементы выделения находятся далеко друг от друга. Поэтому я взяла обычное прямоугольное выделение и, помня о том, что, раз я выделяла маску, то сейчас у меня выделено то, что там было белым, зажала Shift (добавить выделение к существующему, Alt - вычесть, определяется по плюсу или минусу соответственно рядом с курсором) и выделила все ненужные мне в маске детали и нажала Delete. В итоге, я получила, что и хотела - серую текстуру сапог, с золотыми заклёпками и сиреневатой вставкой:
Можно сливать слои и сохранять текстуру в DXT1 формате.
Так же, для изменения цвета исходного изображения, можно использовать дублирование и изменения цветности исходного слоя, с маскированием лишних деталей. Цветность можно изменить из Image -> Adjustments -> Hue/Saturation. (клавиатурный эквивалент - Ctrl+U ), настройки аналогичны корректирующему слою Hue/Saturation. Маска к слою добавляется нажатием соответствующей пиктограммы, расположенной внизу панели Layers и вылядящей как японский флаг. Если, на момент добавления маски к слою, у нас уже активно какое-нибудь выделение, то маска будет создана соответственно этому выделению.
Читайте также: