Привет, ребята! На днях рылся в буржунете в поисках вдохновения и наткнулся на крутой урок от PSHero, который мне очень понравился, в результате чего я открыл свои графические пакеты и начал пробовать сам забацать эту крутизну. Ну, я думаю Вы уже заметили по картинке выше, что у меня получилось) Разве не круто?) Эмейзинг, блин!)
Если хотите создать такое же, не останавливайтесь, продолжайте читать эту статью. А если Вы больше любите уроки на буржуйском, ссылку я привел выше
Сразу скажу, что я немножко делал по-своему, но идея и смысл те же, что и задумал автор.
Итак, начнем! Для исполнения данного урока нам понадобится Adobe Photoshop и Adobe Illustrator.
Для начала, качаем замечательный шрифт Ballpark.
.01 Открываем Photoshop и создаем новый документ (размеры я брал 580х300). Жмем T и пишем желаемое слово, над которым будем работать.
Конечно же, шрифт не понимает кириллицу, так что придумывайте что-то на инглише)
Я написал адрес своего сайта. А че б и нет?)
.02 Далее правой кнопочкой по вашему тексту (Type Tool должен быть активным) и выбираем Create Work Path. Далее жмем A (Path Selection Tool), зажимаем телочку левую кнопку мыши возле текста и выделяем весь текст. Получим вот такое:
.03 Поднимаем глаза к Главному Меню и там должна быть кнопка Combine, жмем её. Далее копируем наш текст - Ctrl+C.
Теперь открываем Adobe Illustrator и создаем новый документ (картинка кликабельная):
.04 В новом документе в Иллюстраторе вставляем скопированные нами в буфер обмена "пути" (paths). Иллюстратор предлагает опции вставки, выбираем Compound Shape и жмем OKай!
Далее задаем цвет текста, автор предлагает #E5E5E5, я не против (картинка кликабельная):
.05 Теперь делаем наш текст 3D-шный!) В Главном Меню выбираем: Effect → 3D → Extrude & Bevel, выставляем все, как показано на скриншоте:
Жмем OKай. Вот что получилось (картинка кликабельная):
В Главном Меню выбираем Object → Expand Appearance. Это мы сконвертили кривые из Иллюстратора, чтобы Фотошоп их понял.
.06
Автор говорил и я повторюсь: не закрывайте пока Иллюстратор, его миссия еще не окончена на сегодня
![]()
Копируем все, что натворили в Иллюстраторе (Ctrl+C) и вставляем в наш документ в Фотошопе (Ctrl+V). Внимательный Фотошоп спросит в каком виде Вы хотите вставить объект? Ессесьна нужно выбрать Smart Object и нажать "OKай, братюня", а еще Enter не забудьте нажать после всего этого.
Старый свой текст с "путями" можете удалить.
Еще я согласился с хорошей идеей автора и переименовал слой в 3D, что и Вам советую, чтобы в будущих шагах не запутаться в слоях).
.07 Вот он, момент, когда нам нужно возвращаться к любимому Иллюстратору! Сейчас нам нужно скопировать только сам текст. Нам нужно изолировать верхний слой текста, поэтому жмем по нашему темно-серому тексту двойными щелчками мыши 3 раза и 1 раз 1 щелчок, чтобы выделить текст. Вот, что должно получиться (картинка кликабельная):
Далее копируем (Ctrl+C) и вставляем (Ctrl+V) в нашем документе в Фотошопе текст (не забывайте выбирать Smart Object при вставке).
Как видите, у меня не одно слово + еще точки отдельно, поэтому мне нужно с каждым слоем проделать 7-й пункт)
Если у Вас так же, возьмите на заметку ;)
.08 Скопировали текст и аккуратно наложили его поверх слоя 3D (Ctrl + и Ctrl - Вам в помощь). Теперь задаем цвет нашему тексту, правой кнопочкой по слою и выбираем Blending Options (или с правой стороны слоя двойной клик левой кнопкой мыши), выбираем Color Overlay и устанавливаем цвет #323232, далее везде Ok. Еще не мешало бы переименовать слой, я написал 2D.
Так как у меня не одно слово, манипуляции с 8-го пункта применяю к каждому слову и точке. В итоге:
.09 Теперь нам нужно продублировать слой 2D с текстом, для этого достаточно выделить данный слой и нажать Ctrl+J. Желательно переименовать, я его назвал 2D #2 (он должен быть выше слоя 2D). Теперь выбираем Move Tool (V) и сдвигаем текст на 1 пиксель вверх и влево.
Далее заходим в свойства слоя 2D (правой кнопочкой по слою и выбираем Blending Options или двойной клик по буквах "fx" с правой стороны слоя), выбираем Color Overlay и устанавливаем цвет #FFFFFF и везде Ok. Получаем:
Как Вы помните, у меня не одно слово и 9-й пункт я проделываю с каждым словом и точкой.
.10 Теперь надо добавить тень к тексту. Для начала нажимаем D, чтобы сбросить текущие цвета на цвета по умолчанию. Далее Ctrl+клик на иконке слоя 2D #2, чтобы загрузить выделение данного слоя. Теперь создаем новый слой и перемещаем его ниже слоя 3D. Далее заливаем новый слой черным цветом, который стоит по умолчанию (помните манипуляцию с кнопочкой D?), для этого жмем Alt+Backspace. Еще я этот слой переименовал на Shadow #1.
В моем случае, я повторил пункт 10 к каждому слову и точке.
А вот сейчас и добавление самой тени. Выбираем слой с тенью Shadow #1 и в Главном Меню идем в: Filter → Blur → Gaussian Blur и в поле Radius выставляем 0,5 pixels, далее Ok.
Теперь на клавиатуре навигационными кнопками опускаем вниз данный слой так, чтобы он вылез на 1 пиксель (по вкусу, можно и на больше пикселей) за пределы текста. Вот, как должно выглядеть:
.11 Создадим теперь более мягкую тень. Продублируем (Ctrl+J) наш слой Shadow #1 и переименуем его в Shadow #2. Далее нужно убедится, что данный слой активный и в Главном Меню выбираем опять: Filter → Blur → Gaussian Blur, только на этот раз ставим значение 3 pixels (автор ставит 2), далее Ok.
А сейчас нужно немного растянуть тень, для этого жмем Ctrl+T (или жмем M, далее правой кнопкой по полигону и выбираем Free Transform) и немного растягиваем края влево и вверх (буквально на несколько пикселей, только не переборщите). Результат:
Вот и все, ребятки!) Автор еще применяет непрозрачность (Opacity) слоя Shadow #2 и выставляет значение 60% (так как в 11 пункте он поставил Радиус 2 пикселя), но я решил этот момент пропустить, мне такой результат больше нравится. Еще автор советует добавить на фон вкусных цветов, чтобы выглядело красиво, я так и сделал
Добавил вот такой вот градиентик:
Я раньше мечтал создать подобный эффект, и вот наступило это время!) Спасибо еще раз pshero.com за отличную наводку!
Надеюсь, данный урок Вам понравился и все получилось! Если есть "осечки", буду рад помочь в комментариях!
[...] This post was mentioned on Twitter by Anna Volkova and Oleg Mykhailenko, Hunak. Hunak said: Создаем красивый 3D текст: Привет, ребята! На днях рылся в буржунете в поисках вдохновения и наткнулся на крутой … http://bit.ly/dsTqqU [...]
Отличный результат! Видела этот урок на инглише, облизнулась и не стала пробовать, поскольку с иллюстратором не дружу. А сейчас посмотрела, как у тебя здорово получилась и сразу умная мысль пришла. Заменила иллюстратор встроенным 3d плагином и далее все по твоему уроку и вот, вуаля, сижу любуюсь названием своего сайта в 3d стиле. Сенкс за урок
хэх, и плагин смог сделать все шаги, которые нуна в Илле? Тогда круто!)
Тебе сенкс, что попробовала сделать!
Ага, у Алиен Скин есть плагин Eye Candy с функцией extrude, правда там настройки уж больно жесткие и есть разница в результате, у тебя все светотени помягче, но меня выручает когда надо 3д сделать. А до иллюстратора все руки не доходят
Надо, чтобы дошли) гг)
почему низя было слои обьеденить? О_о, т.е. что не белать отдельно однотипные манипуляции с точками и словом “михайленко” и “ком”? О_О
И еще , там хде выбирается “Create Work Path”, то кликать надо непосредственно по слою во вкладке “layers” (если не ошибаюсь), ато по описанию кажется что можно кликунть по тексту в документе.
ЗЫ. Знаю, это твоя болючая тема, но автор с тенями получше тебя справился. Но все равно ты красавчег
А я, кста, такие фичи 3дешные просто в шопе делал всегда, дублирование слоя со смещением, а тени ручками додж тулом и бурн тулом. Но как ты показал намного легче (: но не так интересно :Р
Со слоями не додумался
По поводу “Create Work Path” – вот именно, я кликал по тексту
З.Ы. Та да, но, мне кажется, что на этот раз лучше всего получились у меня тени
З.Ы.Ы. Когда-то тоже практиковал делать тени с бёрн/додж тулом, но вчера понял, что этот способ реально круче
Да, хороший урок. Спасиба. Как раз искал как 3д сделать!
Не за что!
Главное, чтобы пригодилось!)
05 Теперь делаем наш текст 3D-шный!) В Главном Меню выбираем: Effect → 3D → Extrude & Bevel, выставляем все, как показано на……
У меня вот какой вопрос, я застрял на 05 – том, так как ни в 10 не в CS2 – ом в Adobe Illustrator. не смог найти Effect → 3D → Extrude & Bevel, там его вообще нету… как быть подскажите.
Поставить более свежую версию Illustrator-а
Не понимаю как выделить “пути”. Кнопка “Объединить” не активна.
можно на русском более подробно?
Просто выделите мышкой текст. Когда выделите, кнопка “Combine” (Объединить) станет активной.
спасибо Олег. все так и делал но кнопка не активна, буду искать причину неполадок.
Привет. Не нашла PSD исходника вашего урока, помогите мне найти
Все, конечно, круто, но зачем метаться между Фотошопом и Иллюстратором, когда всё можно сделать в одном лишь Иллюстраторе?