Создаем красивый 3D текст

19
Июль
2010

Создаем современный 3D текст

Привет, ребята! На днях рылся в буржунете в поисках вдохновения и наткнулся на крутой урок от PSHero, который мне очень понравился, в результате чего я открыл свои графические пакеты и начал пробовать сам забацать эту крутизну. Ну, я думаю Вы уже заметили по картинке выше, что у меня получилось) Разве не круто?) Эмейзинг, блин!)

Если хотите создать такое же, не останавливайтесь, продолжайте читать эту статью. А если Вы больше любите уроки на буржуйском, ссылку я привел выше ;)

Сразу скажу, что я немножко делал по-своему, но идея и смысл те же, что и задумал автор.

Итак, начнем! Для исполнения данного урока нам понадобится Adobe Photoshop и Adobe Illustrator.

Для начала, качаем замечательный шрифт Ballpark.

.01 Открываем Photoshop и создаем новый документ (размеры я брал 580х300). Жмем T и пишем желаемое слово, над которым будем работать.

Конечно же, шрифт не понимает кириллицу, так что придумывайте что-то на инглише)

Я написал адрес своего сайта. А че б и нет?)

3D текст

.02 Далее правой кнопочкой по вашему тексту (Type Tool должен быть активным) и выбираем Create Work Path. Далее жмем A (Path Selection Tool), зажимаем телочку левую кнопку мыши возле текста и выделяем весь текст. Получим вот такое:

3D text effect

.03 Поднимаем глаза к Главному Меню и там должна быть кнопка Combine, жмем её. Далее копируем наш текст - Ctrl+C.

Теперь открываем Adobe Illustrator и создаем новый документ (картинка кликабельная):

3D text

.04 В новом документе в Иллюстраторе вставляем скопированные нами в буфер обмена "пути" (paths). Иллюстратор предлагает опции вставки, выбираем Compound Shape и жмем OKай!

3D tutorial

Далее задаем цвет текста, автор предлагает #E5E5E5, я не против :)  (картинка кликабельная):

Как создать 3D текст

.05 Теперь делаем наш текст 3D-шный!) В Главном Меню выбираем: Effect → 3D Extrude & Bevel, выставляем все, как показано на скриншоте:

Рисуем 3D текст в Photoshop

Жмем OKай. Вот что получилось (картинка кликабельная):

Создаем 3D текст в Photoshop

В Главном Меню выбираем Object Expand Appearance. Это мы сконвертили кривые из Иллюстратора, чтобы Фотошоп их понял.

.06

Автор говорил и я повторюсь: не закрывайте пока Иллюстратор, его миссия еще не окончена на сегодня :)

Копируем все, что натворили в Иллюстраторе (Ctrl+C) и вставляем в наш документ в Фотошопе (Ctrl+V). Внимательный Фотошоп спросит в каком виде Вы хотите вставить объект? Ессесьна нужно выбрать Smart Object и нажать "OKай, братюня", а еще Enter не забудьте нажать после всего этого.

Старый свой текст с "путями" можете удалить.

Еще я согласился с хорошей идеей автора и переименовал слой в 3D, что и Вам советую, чтобы в будущих шагах не запутаться в слоях).

Уроки 3D в Photoshop

.07 Вот он, момент, когда нам нужно возвращаться к любимому Иллюстратору! Сейчас нам нужно скопировать только сам текст. Нам нужно изолировать верхний слой текста, поэтому жмем по нашему темно-серому тексту двойными щелчками мыши 3 раза и 1 раз 1 щелчок, чтобы выделить текст. Вот, что должно получиться (картинка кликабельная):

Уроки Photoshop Illustrator

Далее копируем (Ctrl+C) и вставляем (Ctrl+V) в нашем документе в Фотошопе текст (не забывайте выбирать Smart Object при вставке).

Как видите, у меня не одно слово + еще точки отдельно, поэтому мне нужно с каждым слоем проделать 7-й пункт)

Если у Вас так же, возьмите на заметку ;)

.08 Скопировали текст и аккуратно наложили его поверх слоя 3D (Ctrl + и Ctrl - Вам в помощь). Теперь задаем цвет нашему тексту, правой кнопочкой по слою и выбираем Blending Options (или с правой стороны слоя двойной клик левой кнопкой мыши), выбираем Color Overlay и устанавливаем цвет #323232, далее везде Ok. Еще не мешало бы переименовать слой, я написал 2D.

Как создать 3D текст

Так как у меня не одно слово, манипуляции с 8-го пункта применяю к каждому слову и точке. В итоге:

Как создать 3D

.09 Теперь нам нужно продублировать слой 2D с текстом, для этого достаточно выделить данный слой и нажать Ctrl+J. Желательно переименовать, я его назвал 2D #2 (он должен быть выше слоя 2D). Теперь выбираем Move Tool (V) и сдвигаем текст на 1 пиксель вверх и влево.

Далее заходим в свойства слоя 2D (правой кнопочкой по слою и выбираем Blending Options или двойной клик по буквах "fx" с правой стороны слоя), выбираем Color Overlay и устанавливаем цвет #FFFFFF и везде Ok. Получаем:

Уроки Photoshop

Как Вы помните, у меня не одно слово и 9-й пункт я проделываю с каждым словом и точкой.

.10 Теперь надо добавить тень к тексту. Для начала нажимаем D, чтобы сбросить текущие цвета на цвета по умолчанию. Далее Ctrl+клик на иконке слоя 2D #2, чтобы загрузить выделение данного слоя. Теперь создаем новый слой и перемещаем его ниже слоя 3D. Далее заливаем новый слой черным цветом, который стоит по умолчанию (помните манипуляцию с кнопочкой D?), для этого жмем Alt+Backspace. Еще я этот слой переименовал на Shadow #1.

В моем случае, я повторил пункт 10 к каждому слову и точке.

А вот сейчас и добавление самой тени. Выбираем слой с тенью Shadow #1 и в Главном Меню идем в: Filter → Blur → Gaussian Blur и в поле Radius выставляем 0,5 pixels, далее Ok.

3Д

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

3Д текст

.11 Создадим теперь более мягкую тень. Продублируем (Ctrl+J) наш слой Shadow #1 и переименуем его в Shadow #2. Далее нужно убедится, что данный слой активный и в Главном Меню выбираем опять: Filter → Blur → Gaussian Blur, только на этот раз ставим значение 3 pixels (автор ставит 2), далее Ok.

Пишем 3D текстом

А сейчас нужно немного растянуть тень, для этого жмем Ctrl+T (или жмем M, далее правой кнопкой по полигону и выбираем Free Transform) и немного растягиваем края влево и вверх (буквально на несколько пикселей, только не переборщите). Результат:

Модный 3D текст

Вот и все, ребятки!) Автор еще применяет непрозрачность (Opacity) слоя Shadow #2 и выставляет значение 60% (так как в 11 пункте он поставил Радиус 2 пикселя), но я решил этот момент пропустить, мне такой результат больше нравится. Еще автор советует добавить на фон вкусных цветов, чтобы выглядело красиво, я так и сделал ;)

Добавил вот такой вот градиентик:

Красивый 3D текст

Я раньше мечтал создать подобный эффект, и вот наступило это время!) Спасибо еще раз pshero.com за отличную наводку!

Надеюсь, данный урок Вам понравился и все получилось! Если есть "осечки", буду рад помочь в комментариях! :)

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (16) к “Создаем красивый 3D текст”

  1. [...] This post was mentioned on Twitter by Anna Volkova and Oleg Mykhailenko, Hunak. Hunak said: Создаем красивый 3D текст: Привет, ребята! На днях рылся в буржунете в поисках вдохновения и наткнулся на крутой … http://bit.ly/dsTqqU [...]

  2. Natasha Klever пишет:

    Отличный результат! Видела этот урок на инглише, облизнулась и не стала пробовать, поскольку с иллюстратором не дружу. А сейчас посмотрела, как у тебя здорово получилась и сразу умная мысль пришла. Заменила иллюстратор встроенным 3d плагином и далее все по твоему уроку и вот, вуаля, сижу любуюсь названием своего сайта в 3d стиле. Сенкс за урок ;)

    • Oleg Mykhailenko пишет:

      хэх, и плагин смог сделать все шаги, которые нуна в Илле? Тогда круто!)
      Тебе сенкс, что попробовала сделать! :)

      • Natasha Klever пишет:

        Ага, у Алиен Скин есть плагин Eye Candy с функцией extrude, правда там настройки уж больно жесткие и есть разница в результате, у тебя все светотени помягче, но меня выручает когда надо 3д сделать. А до иллюстратора все руки не доходят :)

  3. galaxy пишет:

    почему низя было слои обьеденить? О_о, т.е. что не белать отдельно однотипные манипуляции с точками и словом “михайленко” и “ком”? О_О
    И еще , там хде выбирается “Create Work Path”, то кликать надо непосредственно по слою во вкладке “layers” (если не ошибаюсь), ато по описанию кажется что можно кликунть по тексту в документе.

    ЗЫ. Знаю, это твоя болючая тема, но автор с тенями получше тебя справился. Но все равно ты красавчег ;)

    А я, кста, такие фичи 3дешные просто в шопе делал всегда, дублирование слоя со смещением, а тени ручками додж тулом и бурн тулом. Но как ты показал намного легче (: но не так интересно :Р

    • Oleg Mykhailenko пишет:

      Со слоями не додумался :-D

      По поводу “Create Work Path” – вот именно, я кликал по тексту :)

      З.Ы. Та да, но, мне кажется, что на этот раз лучше всего получились у меня тени :-D

      З.Ы.Ы. Когда-то тоже практиковал делать тени с бёрн/додж тулом, но вчера понял, что этот способ реально круче :)

  4. Vadim пишет:

    Да, хороший урок. Спасиба. Как раз искал как 3д сделать! 8)

  5. metrofasad пишет:

    05 Теперь делаем наш текст 3D-шный!) В Главном Меню выбираем: Effect → 3D → Extrude & Bevel, выставляем все, как показано на……
    У меня вот какой вопрос, я застрял на 05 – том, так как ни в 10 не в CS2 – ом в Adobe Illustrator. не смог найти Effect → 3D → Extrude & Bevel, там его вообще нету… как быть подскажите.

  6. dimanenasitniy пишет:

    Не понимаю как выделить “пути”. Кнопка “Объединить” не активна.
    можно на русском более подробно?

  7. dimanenasitniy пишет:

    спасибо Олег. все так и делал но кнопка не активна, буду искать причину неполадок.

  8. Liana пишет:

    Привет. Не нашла PSD исходника вашего урока, помогите мне найти :)

  9. Стас пишет:

    Все, конечно, круто, но зачем метаться между Фотошопом и Иллюстратором, когда всё можно сделать в одном лишь Иллюстраторе?