Create Super Glossy 3D Typography in Illustrator and Photoshop

 

Вот результат, который мы получим в итоге:

Глянцевый 3D Текст *

В этом уроке используются программы Adobe Photoshop/Illustrator CS3+

Шаг 1. 

Открываем Illustrator и создаем новый RGB файл : 1000px на 800px, 72 DPI:

Глянцевый 3D Текст *

Теперь напишем текст, автор использовал шрифт Marketing Script размером 234pt:

Глянцевый 3D Текст *

Шаг 2. 

Выделите текст и нажмите Object > Expand, в появившемся меню нажмите ОК. Теперь вы уже не сможете отредактировать сам текст, т.к. он превратился в несколько путей (Paths), которые мы будем редактировать, используя direct selection tool.

Глянцевый 3D Текст *

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

Для этого используем кнопку Unite на вкладке Pathfinder. Если вам не видна вкладка Pathfinder, выберите Window > Pathfinder и затем нажмите кнопку Unite:

Глянцевый 3D Текст *

Шаг 3. 

Выберите инструмент Pen Tool (P) и нарисуйте контур, как показано на рисунке (вы также можете изменить цвет букв на серый, чтобы вам был лучше виден новый контур):

Глянцевый 3D Текст *

На вкладке Stroke измените толщину (Weight) вашего контура, чтобы она совпадала с толщиной шрифта (в данном Weight = 12pt):

Глянцевый 3D Текст *

Шаг 4. 

Продублируйте этот контур, перетащив иконку группы (на панели слоев) на кнопку New Layer. Отключите изображение продублированного контура, нажав на "глаз" слева от названия слоя на палитре слоев.

Возьмите инструмент Direct Selection Tool (A) и выберите 2 последние узловые точки вашего контура (они показаны на рисунке) и нажмите Delete, далее назовите полученный контур "swirl 1".

Глянцевый 3D Текст *

вот что должно получиться:

Глянцевый 3D Текст *

Теперь отключим изображение слоя "swirl 1" и включим слой, который мы продублировали в начале шага smile.gif назовем его "swirl 2" и удалим узловые точки, показанные на рисунке:

Глянцевый 3D Текст *

получаем:

Глянцевый 3D Текст *

Это делается для того, чтобы контуры не пересекались, когда мы переведем изображение в режим 3D

Шаг 5. 

Теперь включим изображение всех групп, визуально у нас получился 1 контур, разбитый на 2 части (2 группы). Выберите обе группы, нажмите Object > Expand и в появившемся окошке нажмите ОК. Теперьу толстим наш контур в некоторых местах, для этого приблизьте изображение и при помощи узловых точек проделайте следующее:

- сдвиньте указанную точку вправо:

Глянцевый 3D Текст *

- удалите указанные точки:

Глянцевый 3D Текст *

- сдвиньте указанные точки друг к другу:

Глянцевый 3D Текст *

Теперь создадим утолщение вот тут:

Глянцевый 3D Текст *

Приблизьте этот участок и добавьте 2 узловые точки как показано на рисунке:

Глянцевый 3D Текст *

Теперь сдвиньте добавленные точки немного вверх и вправо:

Глянцевый 3D Текст *

Выберите инструмент Convert Anchor Point Tool (Shift + C) и "сгладьте" полученные острые углы:

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Шаг 6. 

"Подчистим" место состыковки нашего контура с текстом, для этого приблизьте место состыковки и растяните конец контура как показано на рисунке:

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Шаг 7. 

Итак, перед тем, как мы придадим объем тексту и созданному контуру, убедитесь, что все линии плавные и вы довольны полученным результатом smile.gif

Итак, проверьте, чтобы все части были одного и того же серого цвета , выделите весь объект и нажмите Effect > 3D > Extrude & Bevel

Глянцевый 3D Текст *

Глянцевый 3D Текст *

получаем:

Глянцевый 3D Текст *

Не сбрасывая выделения всех объектов, нажимаем Object > Expand Appearance

Глянцевый 3D Текст *

После проделанных действий, вы заметите, что объекты не совсем состыковываются между собой, поэтому придется состыковать их вручную :

[ скрытый текст ]

Глянцевый 3D Текст *

Глянцевый 3D Текст *

в итоге получаем:

Глянцевый 3D Текст *

Шаг 8. 

Откючим изображение слоев "swirl 1" и "swirl 2", так, чтобы видимым остался только текст. Выделите текст -> правый клик > Ungroup, затем еще раз -> правый клик > Ungroup. Теперь выделите верхний слой текста и отключите его изображение, теперь мы видим только "объем" текста.

Глянцевый 3D Текст *

Выделите все видимые элементы объема и нажмите кнопку Unite на вкладке Pathfinder, назовите группу "3d 1" (если вам не видна вкладка Pathfinder, выберите Window > Pathfinder). Объединяя эти элементы, мы получим один составной контур, это также позволит нам избавится от маленьких белых линий.

Повторите этот шаг для контуров "swirl 1" и "swirl 2" и назовите полученные слои соответсвенно "3d 2" и "3d 3".

Шаг 9.

Мы получили 6 групп: "text", "3d 1", "swirl 1", "3d 2", "swirl 2" and "3d 3".

А вот и промежуточный результат:

Глянцевый 3D Текст *

Перед тем, как экспортировать изображение в Фотошоп, снова "подчистим" места состыковки. Приблизьте участок, на котором текст состыковывается с контуром "swirl 1", выберите инструмент Direct Selection Tool (A) и отредактируйте место состыковки при помощи узловых точек и их напрвляющих:

Глянцевый 3D Текст *

получим ровный контур:

Глянцевый 3D Текст *

Теперь наше изображение готово для экспорта в Фотошоп. Выберите File > Export и убедитесь, что бывран формат Photoshop-PSD:

Глянцевый 3D Текст *

Шаг 10. 

Открываем наше изображение в Фотошопе и выбираем Image > Canvas Size -> установите значение 3000 x 2000px и нажмите ОК.

Подгоните экспортированные слои под размер документа (растяните их, удерживая Alt + Shift), используя опцию Free Transform (Ctrl + T).

Расположите слои следующим образом:

Глянцевый 3D Текст *

Итак, мы получили 3 "базовых" слоя и 3 слоя с элементами объема. Теперь сгруппируем (Ctrl + G) попарно "базовые" слои с соответствующими им элементами объема: получим 3 группы, к примеру группа "1" будет содержать слои “base 1" and “3d 1", группа "2" - слои “base 2" и “3d 2", группа "3" - слои “base 3" и “3d 3":

Шаг 11.

Создайте новый слой, поместите его под всеми группами, назовите его "bg" (это будет фон)и залейте его белым цветом. Далее создайте еще один новый слой, назовите его "bg2" и поместите его над слоем "bg". Измените цвет переднего плана на серый #767676, выберите инструмент Gradient Tool (G) (градиент у вас будет слева-направо: от серого (цвет переднего плана, который мы только что установили) до прозрачного), проведите градиентом сверху вниз, чтобы получилось следующее:

Глянцевый 3D Текст *

Установите Opacity слоя "bg2" на 30%

Создайте новый слой, поместите его над слоем "bg2" и назовите его "bg 3". Выберите инструмент Gradient Tool (G) и нажмите D, чтобы сбросить цвета. Проведите черно-белым градиентом снизу вверх, не доходя до середины изображения (черный цвет должен быть снизу) и установите Opacity этого слоя на 10%:

Глянцевый 3D Текст *

Шаг 12. 

Выберите слой “base 1? -> меню Blending Options -> Gradient Overlay и установите значения как на картинке (в градиенте используются цвета #c81d61(левое значение) и #d3347b(правое значение)):

Глянцевый 3D Текст *

Далее правый клик на слое "base 1" на палитре слоев - > Copy Layer Style. Теперь выберите слой "base 2", далее Ctrl + клик на слое "base 3", чтобы выделить оба слоя, правый клик на выделенных слоях -> Paste Layer Style. Теперь выберите меню Blending Options у слоя "base 3" -> Gradient Overlay и поставьте галочку у "Reverse":

Глянцевый 3D Текст *

Получаем:

Глянцевый 3D Текст *

Шаг 13. 

Теперь добавим цвета всем слоям серии "3d" smile.gif Выберите слой “3d 1? -> Blending Options -> Color Overlay и установите цвет #797979.

Глянцевый 3D Текст *

Скопируйте этот стиль слоя (правый клик по слою на палитре слоев -> Copy Layer Style) и добавьте (Paste Layer Style) этот стиль слоям “3d 2" и “3d 3".

Результат:

Глянцевый 3D Текст *

Создадим новый слой в группе "1" и назовем его “shine”:

Глянцевый 3D Текст *

Перейдите на слой “shine” (теперь мы будем работать с этим слоем), измените цвет переднего плана на белый, выберите Gradient Tool (G) и проведите им, начиная с середины изображения вверх (градиент от белого к прозрачному):

Глянцевый 3D Текст *

Далее загрузите выделение слоя “base 1" (Ctrl + клик на иконке слоя “base 1" на палитре слоев) -> Select > Modify > Contract и установите значение = 2px.

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Установите Opacity слоя "shine" = 30%. Не сбрасывая выделения слоя “base 1" и находясь на слое "shine", добавьте маску слоя, нажав на иконку "Add Layer Mask":

Глянцевый 3D Текст *

Получим следующее:

Глянцевый 3D Текст *

Шаг 14. 

Установите цвет переднего плана на черный и перейдите на только что созданную маску слоя "shine". Возьмите жесткую кисть среднего размера и "замаскируйте" нижнюю часть слоя "shine" :

Глянцевый 3D Текст *

Создайте новый слой “shine” в группе "2" и проведите градиентом (от белого к прозрачному) по диагонали как показано на рисунке:

Глянцевый 3D Текст *

Теперь загрузим выделение слоев "base 2" и "base 3" (Ctrl + shift+ клик на изображениях этих слоев на палитре слоев) -> Select > Modify > Contract > 2px. Теперь добавьте маску слою “shine”, как мы делали в Шаге 13. Получим что-то вроде этого:

Глянцевый 3D Текст *

Установите Opacity слоя “shine” = 50%. Далее мягкими и жесткими кистями "скройте", находясь на маске слоя “shine”, участки, показанные на рисунке:

Глянцевый 3D Текст *

(использованные кисти слева направо: жесткая, мягкая, жесткая)

Шаг 15. 

Создайте новую группу внутри группы "1", назовите ее “3d shading” и расположите ее между слоями “3d 1" и “base 1". Загрузите выделение слоя “3d 1", выберите группу “3d shading” и добавьте группе маску слоя “3d shading” :

Глянцевый 3D Текст *

Создайте новый слой в группе “3d shading” и назовите его “shading 1". Выберите мягкую маленькую кисть (цвет - 80%-ный черный) и затемните участки, которые находятся в тени, согласно вашему источнику света:

Глянцевый 3D Текст *

Получаем следующее:

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Измените Blend mode слоя “shading 1" на Overlay, и Оpacity = 50%.

Глянцевый 3D Текст *

Создайте новый слой над слоем “shading 1" и назовите его “shading 2". Возьмите маленькую мягкую кисть белого цвета (Opacity кисти = 50%) и закрасьте те участки, на которые падает свет, согласно источнику света:

Глянцевый 3D Текст *

Blend Mode слоя “shading 2" = Overlay, Opacity = 50%.

Глянцевый 3D Текст *

Создайте еще один новый слой в этой группе, назоите его "shading 3". Возьмите мягкую маленькую кисть черного цвета (Opacity кисти = 100%) и нарисуйте тени в указанных на скрине местах:

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Шаг 16. 

Повторяем Шаг 15 для группы "2".

Участки, которые нужно затемнить - слой “shading 1":

Глянцевый 3D Текст *

Участки, которые нужно осветлить - слой “shading 2":

Глянцевый 3D Текст *

Шаг 17. 

Повторяем Шаг 15 для группы "3" до момента создания слоя “shading 2".

Итак, создаем стой “shading 2". Большой мягкой белой кистью, закрашиваем участок как показано на рисунке:

Глянцевый 3D Текст *

и изменяем Blend Mode слоя на Overlay:

Глянцевый 3D Текст *

Вот как должна выглядеть ваша палитра слоев на данном этапе:

Глянцевый 3D Текст *

Шаг 18. 

Продублируйте слой "base 1" (правый клик на слое "base 1" на палитре слоев - Duplicate Layer). Далее правый клик на продублированном слое ("base 1 copy") ->Blending Options -> уберите галочку у строки Gradient Overlay, перейдите в меню Inner Shadow и установите следующие настройки:

Глянцевый 3D Текст *

Теперь нажмите правой кнопкой на самом эффекте Inner Shadow на палитре слоев и выберите Create Layer. Таким образом эффект превращается в отдельный слой, назовем его "highlight 1".

Глянцевый 3D Текст *

Теперь можете удалить слой "base 1 copy".

Выберите инструмент Move Tool и перейдите на слой "highlight 1" - нам нужно его сдвинуть на 1 рх, для этого нажмите стрелочку "влево" на клавиатуре. Далее Ctrl+ клик на иконке слоя "base 1", следайте это выделение маской слоя "highlight 1", нажав Add Layer Mask внизу панели слоев. Перейдите на слой "highlight 1", выберите инструмент Move Tool и сдвиньте его при помощи стрелочек на 1 рх вверх и на 2 рх влево (1 нажатие клавиши=1 рх). У вас должно получится что-то вроде этого:

Глянцевый 3D Текст *

Теперь создайте группу (Ctrl + G) для слоя "highlight 1", назовите ее "highlight". Добавьте группе маску, нажав на Add Layer Mask внизу панели слоев.

Глянцевый 3D Текст *

Перейдите на маску группы "highlight" и мягкой черной кистью среднего размера скройте скройте участки, которые не находятся на верхних левых гранях, вот что должно получиться:

Глянцевый 3D Текст *

Шаг 19. 

Повторите Шаг 18 для групп "2" и "3".

Теперь добавим цветов нашему изображению. Создайте новую группу поверх всех остальных групп и назовите ее "color overlay". Создайте новый слой в этой группе и назовите его "overlay 1". Установите цвет переднего плана - #7c21c8, выберите Gradient Tool (G) (градиент от цвета переднего плана до прозрачного, стиль градиента - Radial) и проведите им как показано на рисунке:

Глянцевый 3D Текст *

Измените Blend Mode слоя "overlay 1" на Color.

Шаг 20. 

Создайте еще один новый слой и назовите его “overlay 2". Создайте градиент, как и в предыдущем шаге, только измените цвет на желтый (#fee409) и расположение, как на рисунке:

Глянцевый 3D Текст *

Измените Blend Mode слоя "overlay 2" на Color.

Шаг 21. 

Теперь нам нужно загрузить выделение все "основных" слоев. Для этого жмем Ctrl+Shitf и кликаем по иконкам соев "base 1", "base 2" и "base 3". Сделаем это выделение маской группы "color overlay", не снимая выделения, кликнув на группе на панели слоев и на иконке Add Layer Mask :

Глянцевый 3D Текст *

Шаг 22. 

Теперь добавим цвета всем "3d"-слоям. Создайте новый слой в группе "1", назовите его "color 1" и поместите его над группой "3d shading 1". Выберите инструмент Gradient Tool (G) и создайте трехцветный градиент, испольуя цвета #a53c3d, #c52366 и #b22d9d:

Глянцевый 3D Текст *

Глянцевый 3D Текст *

Шаг 23. 

Теперь нам нужно частично скрыть только что созданный градиент. Сейчас мы будем загружать выделения слоев , при этом необходимо соблюдать следующую последовательнось (не забываем,что кликать нужно по иконкам слоев) : Ctrl + клик на "3d 3", Ctrl + alt+клик на "base 2",Ctrl + Shift+клик на "3d 2", Ctrl + Shift+клик на "3d 1", Ctrl + Alt+клик на "base 1". Сделаем полученное выделение маской слоя "color 1":
(у меня не получилось сделать, как описывает автор, поэтому я сделала следующее:
Скопировала слой с градиентом в каждую группу и поместила его под всем слоями в группе, но над слоем "3d ". Затем загрузила выделение слоя "3d" и добавила эту маску слою с градиентом)

Глянцевый 3D Текст *

Шаг 24. 

Создайте новый слой в группе "2" и назовите его "shadow". Загрузите выделение слоя "base 2" и "3d 2" и сделайте это выделение маской слоя "shadow". На этом слое, используя мягкую маленькую черную кисть (Opacity кисти = 30% ) нарисуйте тень на "завитушке", которая скравыется за текстом:

34813784

Теперь создайте новый слой в группе "3" и назовите его "shadow 2". Загрузите выделения слоев "base 3" и "3d 3" и сделайте это выделение маской слоя "shadow 2". На этом слое, используя средню мягкую черную кисть (Opacity кисти = 30% ) нарисуйте тень на "завитушке", которая находится ниже(под пересечением):

Глянцевый 3D Текст *

Шаг 25. 

Сверните все группы, чтобы не запутаться в слоях, потому что сейчас нам нужно продублировать группы smile.gif Выделите 5 основный групп на панели слоев и продублируйте их. Слейте в один слой все продублированные группы (выделите их и нажмите Ctrl + E). Назовите этот слой "reflection". Перейдите на слой "reflection" -> Ctrl + T -> правый клик по изображению -> Flip Vertical. Сместите этот слой как показано на рисунке и добавьте ему маску слоя:

Глянцевый 3D Текст *

Перейдите на маску слоя "reflection" и проведите черно-белый градиент как показано на рисунке (черный цвет снизу):

Глянцевый 3D Текст *

получим:

Глянцевый 3D Текст *

Шаг 26. 

Ну и наконец, создадим новый слой над группой “background”, назовем ее “shadow”. Выберите инструмент Gradient Tool (G), с настройками:

цвет - от черного к прозрачному, тип- Radial) и проведите им как показано на рисунке:

Глянцевый 3D Текст *

При помощи Free Transform (Ctrl + T) сужаем тень до вот такого размера:

Глянцевый 3D Текст *

Но перед тем, как применить трансформацию, нажмите правой кнопкой на изображении, выберите Perspective и придайте тени следующую форму:

Глянцевый 3D Текст *

Установите Opacity слоя “shadow” = 30%.

И вот, наконец, финальный результат: smile.gif 

Глянцевый 3D Текст *

------