{{notification.text}}

MirGames

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

Для начала необходимо знать, что в играх в основном используются текстуры (да и вообще прочая графика) с размерами, равными степени двойки. Т.е., например, 128x64, 256x256, 512x1024 и т.п. Это связано с облегчением работы видеокарты с графикой. Поэтому на выходе нам необходимо получить текстуру именно такого размера (в данном уроке – 512x512).

Создание текстуры

  1. Для начала создаем новый файл (File -> New) с размерами 562x512. Почему именно 562? Ведь только что речь шла о размерах, равных степени двойки… Это связано с тем, что после применения эффекта Blur на границах рисунка возникнут некрасивые «зазубрины», поэтому впоследствии мы его обрежем (хотя, как вариант, мы сможем использовать этот артефакт, но обо всем по порядку).
  2. Photoshop. GIMP. Создание текстуры деревянной поверхности.Далее выберем два «деревянных» оттенка по своему вкусу (зависит от того, насколько яркую текстуру хочется получить в результате). В данном случае выбраны цвета #7f694c и #604326 (чисто произвольным образом).
  3. Photoshop. GIMP. Создание текстуры деревянной поверхности.Далее применяем любимый многими фильтр Clouds (Filter -> Render -> Clouds). Я обычно стараюсь применить его так, чтобы не было особо выделяющихся областей определенного цвета.









  4. Далее «зашумляем» изображение (Filter -> Noise -> Add Noise).
    Photoshop. GIMP. Создание текстуры деревянной поверхности.Степень зашумления выбираем по вкусу. Слишком малое зашумление даст лишь слабый эффект волокон древесины, слишком сильное зашумление может в последствии дать слишком заметные различия в цвете между волокнами (хотя может и такое пригодится – зависит от ситуации). В данном уроке предлагаю выбрать значение степени шума (Amount) равным 20%, распределение (distribution) – Uniform, и не забываем поставить галочку у Monochromatic (а не то волокна древесины могут разноцветными получиться). В результате должно получиться нечто типа ДВП или ДСП в разрезе.
  5. Далее применяем сглаживание (Filter -> Blur -> Motion Blur) в горизонтальном направлении. Photoshop. GIMP. Создание текстуры деревянной поверхности.
    Дистанцию сглаживания (Distance) выбираем на свой вкус. Слишком малая дистанция не создаст ощущения волокон дерева, Слишком большая дистанция даст размытый некачественный результат. В данном уроке дистанция сглаживания взята в 20 пикселей (pixels). Для облегчения подбора величины дистанции используем возможность предварительного просмотра (галочка около Preview) и наглядно оцениваем качество эффекта. Должно получиться нечто наподобие того, что изображено на рисунке.

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


  7. Далее выделяем овалом участок, который хотим исказить и вызываем Filter -> Distort -> Twirl.
    Photoshop. Filter -> Distort -> Twirl

    Желательно не делать слишком сильных завихрений, иначе может получиться не очень правдоподобно. Хотя зачастую это зависит больше от ситуации. Операцию «скручивания» волокон желательно провести как можно в больших местах для придания некоторого хаоса структуре (однако общее направление волокон должно оставаться горизонтальным).
    На данном этапе при желании можно добавить еще немного шума на текстуру для создания некоторой потертости, изношенности, необработанности (урок все же называется «создание текстуры плохо обработанной деревянной поверхности»). Однако теперь особо усердствовать не стоит, 1-4 % вполне достаточно. Также можно добавить резкости цветам (Filter -> Sharpen -> Sharpen), но это уже по вкусу (либо если изображение слишком сглаженное получается).
  8. Следующий шаг наиболее ответственный.
    Photoshop. GIMP. Создание текстуры деревянной поверхности.Сейчас мы постараемся придать объема волокнам. Для этого выделяем все изображение (Ctrl + A), копируем его (Ctrl + C), затем создаем на вкладке Channels новый канал (вторая иконка справа внизу) и помещаем туда наше изображение (Ctrl + V).









  9. Возвращаемся обратно на вкладку Layers и выделяем наш слой в списке слоев. Далее переходим Filter -> Render -> Lighting Effects. На рисунке ниже представлены настройки, которые я использовал в данном уроке на своем примере:
    Photoshop. GIMP. Создание текстуры деревянной поверхности.
    Красным обведены обязательные параметры. Все остальные свойства можно регулировать самостоятельно в зависимости от ситуации. Удаленность источника (регулируется на рисунке слева) влияет на освещенность и направление теней от волокон. Intensity также влияет на степень освещенности. Еще стоит обратить внимание на параметр Height – он регулирует высотный коэффициент считываемой карты поверхности. Короче говоря, чем он больше, тем более объемными становятся волокна. Ниже несколько примеров:


    • Photoshop. GIMP. Создание текстуры деревянной поверхности.Слегка изношенная древесная поверхность доски (при настройках, указанных на рисунке выше).









    • Photoshop. GIMP. Создание текстуры деревянной поверхности.Кора дерева (Gloss = -100; Material = 100; Height = 100; остальные настройки аналогичны предыдущему варианту).
      При желании в этом случае можно применить освещение еще раз при тех же настройках, чтобы получить более выраженный результат. Также может помочь копирование этого нового слоя (с высокой степенью объемности) в созданный ранее канал во вкладке Channels. Это даст более объемную карту поверхности, что поможет в «огрублении» поверхности.


    • Photoshop. GIMP. Создание текстуры деревянной поверхности.Испачканная / потрескавшаяся фанера (те же настройки, что и в случае с корой дерева, но обе точки отрезка, указывающего направление падения света, находятся в одной точке в центре изображения).







    Можно получить и другие интересные варианты, если хорошенько поиграться с настройками освещения. Лично я остановился на таком варианте:
    Photoshop. GIMP. Создание текстуры деревянной поверхности.
    Результат:
    Photoshop. GIMP. Создание текстуры деревянной поверхности.

Создание текстуры пола

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

Собственно, переходим к «укладке пола». Для начала выделяем на нашем изображении прямоугольный кусок по всей ширине текстуры. Высоту выделения выбираем по желанию, исходя из того, что хочется получиться в итоге (насколько крупные доски будут). Копируем (Ctrl + C) и вставляем выделенный элемент как новый слой (Ctrl + V). Теперь для нового слоя делаем кромки (Layer -> Layer Style -> Bevel and Emboss):
Photoshop. Layer -> Layer Style -> Bevel and Emboss

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

Далее переносим свежесозданную доску к верхней границе изображения и повторяем операцию снова. При этом желательно «нарезать» доски из разных мест текстуры (неплохо бы даже применять модификатор отражения Edit -> Transform -> Flip …, чтобы избежать случайного совпадения рисунка). Размеры досок тоже не должны обязательно совпадать по высоте (но все же не стоит слишком большого разброса делать тоже). Для автоматизации процесса можно щелкнуть правой кнопкой мыши по уже готовой «доске» и выбрать Copy Layer Style (копирование стиля слоя), а затем применять эти настройки сразу же ко всем новым слоям (так же правой кнопкой, Paste Layer Style). После состыковки нескольких досок, возможно, придется уменьшить величину кромок (Size), чтобы обеспечить более качественный вид (далее я так и сделал – уменьшил Size с 2 до 1).

В результате должно получиться нечто вроде этого:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

При желании некоторые доски можно немного осветлить или затемнить для разнообразия (Image -> Adjustments -> Brightness/Contrast).

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

Способ первый. Активируем нужный нам слой с доской в списке слоев. Затем выделяем часть изображения (например, всю правую треть доски), вырезаем ее (Ctrl + X) и вставляем как новый слой (Ctrl + V). После вставки нового слоя, передвигаем его на место образовавшейся от вырезания пустоты и применяем стиль кромок. В результате получаем следующее: Поскольку в итоге у нас два слоя, то каждый из них по бокам имеет свою кромку, что дает ощущение, что это стык двух досок. Примерный результат:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

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

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

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

Теперь переходим непосредственно к реализации бесшовности текстуры (с этого места нужно продолжать тем, кто пропустил реализацию досок). Для начала необходимо обрезать изображение до нужных нам размеров (512x512 в моем случае). Для этого: Image -> Canvas Size. Затем делаем выделение оставшейся видимой части (Ctrl + A), вырезаем ее (Ctrl + X) и вставляем в качестве нового слоя (Ctrl + V). Старый слой с остатками удаляем.

Теперь необходимо видеть шов, который получается на стыке, чтобы исправить его. Выбираем Filter -> Other -> Offset. В качестве параметров смещения ставим половинные размеры изображения (т.е. 256 и 256 в моем случае), и выбираем способ Wrap Around. Теперь мы можем видеть наш шов (кстати, если изначально были выбраны цвета, мало отличающиеся по оттенку, то вполне вероятно, что шва видно не будет). Однако рассмотрим случай, когда шов все же есть:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

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

Перед его использованием найдите такой вертикальный кусок рисунка (шириной примерно 60-70 пикселей), на котором не встречается ни одного стыка досок. Далее выберите размер инструмента клонирования (я выбрал 50 пикселей). Зажмите кнопку Alt (курсор изменит свой вид) и укажите на верхнюю часть найденного вертикального куска (после этого Alt отпускаем). Затем постарайтесь поставить курсор на шве так, чтобы он (курсор) был на одном уровне по горизонтали с установленной меткой (метка исчезнет, поэтому надо запомнить ее положение, либо ориентироваться по краю рисунка). После этого зажмите левую кнопку мыши и ведите курсор строго вертикально вниз вдоль шва. Если вам удалось установить курсор точно напротив метки клонирования, то в результате шов должен будет сгладиться с помощью вставки части изображения из выбранной вертикали:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

На рисунке прямоугольником выделена сглаженная область. Если же курсор не будет находиться на одном уровне с меткой, то может получиться искажение:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Однако в этом случае никто не мешает отменить операцию и повторить ее заново.

При «затирании» шва могут получиться небольшие участки сглаживания. Чтобы избавиться от них, можно воспользоваться инструментом контраста:
Photoshop. GIMP. Создание текстуры деревянной поверхности. Инструмент контраста.

Для большего скрытия затирания можно вручную выделить некоторые доски и применить Filter -> Other -> Offset со смещением по горизонтали (без вертикального смещения).

После выполнения всех описанных выше действий я получил вот такой результат:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Поскольку это урок создания лишь текстуры дерева, а не пола, то описывать рисование гвоздей для добавления реалистичности я не стану – это вы и сами сможете сделать…

Созданную текстуру также можно использовать и для заливки поверхности изображений, когда будете работать в Photoshop'е. Для этого сначала сохраняем его: Edit -> Define Pattern, а в последствии «заливаем» с его помощью нужную нам фигуру с помощью Edit -> Fill (в настройках выбираем Use = Pattern) либо Layer -> Layer Style -> Pattern Overlay. Пример с использованием текстуры на тексте (возможно, вариант с досками не лучший в данном случае, и стоило бы использовать сплошную текстуру):
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Доводим текстуру пола до «потребительского» вида

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

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

Для этого создаем новый слой (Shift + Ctrl + N или Layer -> New -> Layer). Выбираем два близких оттенка серого (в данном примере используются цвета #5a5a5a и #717171, но выбраны они абсолютно случайно).
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Затем применяем над новым слоем фильтр облаков (Filter -> Render -> Clouds). На этот раз в отличие от первой части урока нам не нужно обязательно получать однородную картинку, поскольку из сделанного изображения впоследствии нам понадобятся лишь небольшие кусочки. Далее накладываем шум на изображение (Filter -> Noise -> Add Noise). Степень шума (Amount) возьмем в районе 10%, способ – Gaussian. В результате должна получиться вот такая картинка:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

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

Далее с помощью круглого инструмента (Elliptical Marquee Tool) выделяем небольшую область для шляпки гвоздя (в моем случае это будет окружность диаметром 3-4 пикселя; в общем это зависит от размера досок и желаемого результата; при выделении постарайтесь захватить в область как темные, так и светлые пиксели), копируем ее (Ctrl + C) и вставляем новым слоем (Ctrl + V). Слой с текстурой «шершавого металла» можно сделать невидимым, поскольку нам он пока не нужен (для этого необходимо нажать по значку в виде глаза напротив слоя в списке слоев).

Теперь перенесем слой со шляпкой на нужное место в угол доски (не слишком близко и не слишком далеко; в моем случае – примерно 4-5 пикселей от ближайших краев доски). Затем применим эффект кромок для большего качества (Layer -> Layer Style -> Bevel and Emboss) с приблизительно такими настройками:
Photoshop. GIMP. Создание текстуры деревянной поверхности. Layer style

Красным отмечены необходимые настройки, зеленым – те, которыми можно поиграться для создания желаемого эффекта. Technique отвечает за стиль кромки; для создания резкой кромки (фаски) можно изменить значение на Chisel Hard. Depth и Soften отвечают за резкость и сглаженность кромки соответственно (слишком резкой кромку делать не нужно – получится больше похожим на винт в металле; слишком сильное сглаживание так же не рекомендуется, иначе получится эффект «резиновости» материала доски (т.е. материал слишком сильно «прогнется» в этом месте)). Size – размер кромки (большое значение ставить не стоит, разве что если гвозди и доски довольно большого размера). Прозрачность (Opacity) Влияет на видимость кромки – желательно не ставить выше половины, поскольку будет смотреться ненатурально.

Вот такой результат получил я:
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Далее можно просто копировать этот слой со шляпкой гвоздя и вставить его на другие концы досок. Однако лучше вручную повторить операцию с самого начала (с момента вырезания шляпки), чтобы гвозди были менее похожими друг на друга. Для облегчения процесса можно не настраивать постоянно стиль каждого слоя, а просто скопировать его (правой кнопкой на слое, Copy Layer Style) и вставлять его на каждый новый слой (правой кнопкой на слое, Paste Layer Style).

Также не обязательно «вбивать» все гвозди абсолютно симметрично относительно краев доски – некоторая «небрежность» может придать натуральности изображению. Если гвозди будут слишком сильно выделяться, то, чтобы не переделывать все изображение заново, можно уменьшить видимость слоя со шляпкой гвоздя.
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Все слои со шляпками можно объединить в один (выделяем все нужные слои в списке слоев, нажимаем правой кнопкой и Merge Layers). Также можно объединить его с текстурой дерева.
Photoshop. GIMP. Создание текстуры деревянной поверхности. Merge layers

Теперь необходима не только визуальная реалистичность, но и логическая. Т.е. в действительности пол не стелют досками как попало. Доски кладут поперек балок, находящихся на расстоянии примерно полуметра друг от друга. Соответственно, гвозди должны забиваться именно в эти балки, а не в пустоту. Поэтому сначала наметим приблизительное расположение этих балок. Создаем новый слой (Shift + Ctrl + N либо Layer -> New -> Layer) и проводим на нем несколько равноотстоящих линий (не забываем про цикличность текстуры). Способ проведения линий не важен – они лишь для ориентирования, и впоследствии мы их удалим.
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Активируем слой с текстурой дерева. Теперь необходимо с помощью инструмента прямоугольного выделения (Rectangular Marquee Tool) выделить каждую доску и пододвинуть ее стык до одной из линий. Движение балок удобно выполнять с помощью горизонтального смещения Filter -> Other -> Offset. Абсолютная точность положения стыка досок относительно линий тоже не обязательна, поскольку в реальности не всегда стараются подгонять размеры идеально. Для большей правдоподобности можно «заколотить» гвозди и в середины досок «для прочности» (но только на уровне условных балок) – но это не обязательно.
Photoshop. GIMP. Создание текстуры деревянной поверхности.

Аналогичным образом можно создать текстуру и для стены. Но тогда расстояние между балками нужно будет взять побольше (хотя бы в два раза).
28.01.08 12:52