Эффект текста с 3D-текстурой

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

Окончательный результат

044

Пособие по созданию в Photoshop текста с 3D-текстурой

Шаг 1

Откройте Illustrator и с помощью инструмента «Текст» введите букву или текст, я ввела букву «C«. Для нее я использовала шрифт Adobe Caslon Pro. Вы можете использовать любой, который вам нравится. Просто старайтесь применить более-менее толстый шрифт, для него эффект будет выглядеть лучше.

Я установила размер шрифта на 400 пунктов и растянула его горизонтали и по вертикали на 150% через опорные точки. Хотя особого значения размер шрифта не имеет, так как мы будем вставлять его в качестве смарт-объекта в Photoshop.

Поэтому мы можем отрегулировать размер в любой момент времени. Цвет шрифта я использовала #8CC63F:

clip_image004

Шаг 2

Теперь перейдите в Эффекты> 3D> Экструзия. Используйте настройки, показанные на рисунке. Кроме значений поворота по осям X, Y и Z, я выбрала «Вытянутый круг» из выпадающего меню «Скос». Эти настройки зависят от шрифта, так что если вы использовали другой шрифт, немного поэкспериментируйте.

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

006

Шаг 3

После того как вы завершили с 3D, пора перейти в Photoshop. Откройте в Photoshop новый документ. Скопируйте из Illustrator 3D текст / букву и вставьте его как смарт-объект, нажмите Enter. Теперь Вы можете изменить размер текста, как вам нужно. На самом деле, чем больше, тем лучше, но я буду использовать небольшой холст:

008

Полезный совет: Если по какой-либо причине, вы хотите отредактировать вставленный 3D смарт-объект, просто дважды щелкните на иконке векторного смарт-объекта в палитре слоев, нажмите OK на появившемся окне. После чего смарт-объект автоматически откроется в Illustrator. После этого произведите изменения, которые вам нужны, и затем перейдите в меню Файл> Сохранить и закройте файл. И вуаля, изменения будут отображены в файле Photoshop.

Шаг 4

010

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

Откройте текстуру, которую вы хотели бы использовать. Для первого слоя я использовала текстуру из texture pack, которую назвала «Текстура 1». Перейдите в Выделить> Все, а затем Правка> Копировать, чтобы скопировать всю текстуру.

Сейчас нам нужно вставить это изображение в нашу букву, но вы должны указать Photoshop, где его вставить. Поэтому вернитесь к документу 3D текста и, удерживая Ctrl / Cmd, кликните по иконке векторного смарт-объекта. Таким образом, мы выделим весь текст / букву. В нашем случае, букву «С«.

Теперь перейдите в Правка > Вставить в (Shift + Ctrl / Cmd + V), чтобы вставить изображение текстуры в букву «C«. Измените режим смешивания слоя с текстурой на «Наложение»:

Теперь, ваше изображение и палитра слоев должна выглядеть так:

012

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

Если Вы используете разные изображения, поэкспериментируйте немного с режимами смешивания, «Наложение», «Мягкий свет», «Жесткий свет», «Умножение», пока не получите желаемый результат.

Шаг 5

Повторите процедуру, описанную в пункте 4, но с другой текстурой. Я использовала текстуру из этого пакета:

014

Если кратко, откройте текстуру, «Выделить все» (Ctrl / Cmd + A), скопируйте ее (Ctrl / Cmd + C) и вернитесь к исходному документу. Кликните, удерживая Ctrl / Cmd, по миниатюре векторного смарт-объекта, чтобы выбрать букву / текст, и перейдите Правка, Вставить в (Shift + Ctrl / Cmd + V), чтобы вставить текстуру в букву «C«. И измените режим смешивания на «Умножение»:

016

Шаг 6

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

018

Вот как мое изображение и палитра слоев выглядят после шага 6.

Полезный совет: Если вам нужно изменить текстуру или вам не нравится, как она выглядит на букве, вы можете ее изменить! Просто выберите инструмент «Перемещение (V)» и перетащите текстуру из выбранного слоя. Кроме того, если вам необходимо изменить размер изображения текстуры, перейдите в Правка > Трансформация.

Шаг 7

Теперь, выберите фоновый слой и залейте его с помощью инструмента «Градиент» (G). Я использовала линейный градиент и переходы цветов, приведенные на скриншоте. Задайте переход градиента по диагонали снизу вверх:

020

Шаг 8

Нажатие клавишу Shift, выберите все слои в палитре слоев, кроме фонового, и свяжите их. Также проверьте, чтобы маски были связаны с соответствующими слоями:

022

Шаг 9

Теперь мы создадим отражение буквы «C«. Для этого, выберите все связанные слои и продублируйте их:

024

Шаг 10

Объедините все дублированные слои в один слой и назовите его Reflection:

026

Шаг 11

При активном слое Reflection перейдите в Правка >Трансформация >Поворот по вертикали и поместите слой под буквой «C«. Отрегулируйте перспективу, если это необходимо:

028

Шаг 12

Далее нам нужно добавить маску для дублированного слоя. Для этого просто нажмите в палитре слоев кнопку «Добавить маску слоя»:

030

Теперь выберите инструмент «Градиент» (G) и нарисуйте градиент (от черного к белому) с переходом снизу до середины верхней буквы:

032

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

Шаг 13

Наконец, с помощью инструмента «Текст» я написала слова “for creativity”, настройки приведены на рисунке ниже:

034

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

036
038

Шаг 14

И наконец, последним штрихом я добавила «Внешнее свечение», чтобы слой векторного смарт-объекта выглядел, как показано на рисунке:

040

Вот, как в конце выглядят моя палитра слоев и изображение:

042
044

Это еще один пример изображения, созданный по той же методике:

046

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

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

Перевод статьи «3D Textured Text Effect» был подготовлен дружной командой проекта Сайтостроение от А до Я.