Отправляет email-рассылки с помощью сервиса Sendsay

Mediasapiens.tv.Motiondesign news

  Все выпуски  

Mediasapiens.tv.Motiondesign news Глянцевый 3D Текст


Create Super Glossy 3D Typography in Illustrator and Photoshop

 

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

1a819939b633 Глянцевый 3D Текст masterklass

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

Шаг 1.

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

0cae9d3b41fa Глянцевый 3D Текст masterklass

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

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

Шаг 2.

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

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

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

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

78a888d55292 Глянцевый 3D Текст masterklass

Шаг 3.

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

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

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

6416f183ef2c Глянцевый 3D Текст masterklass

Шаг 4.

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

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

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

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

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

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

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

получаем:

5d5d7c7fb5a2 Глянцевый 3D Текст masterklass

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

Шаг 5.

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

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

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

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

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

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

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

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

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

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

53ed075f09f9 Глянцевый 3D Текст masterklass

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

53ed075f09f9 Глянцевый 3D Текст masterklass

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

6352df0114d5 Глянцевый 3D Текст masterklass

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

Шаг 6.

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

450375f66937 Глянцевый 3D Текст masterklass

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

Шаг 7.

Итак, перед тем, как мы придадим объем тексту и созданному контуру, убедитесь, что все линии плавные и вы довольны полученным результатомsmile Глянцевый 3D Текст masterklass

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

4d2d82912b52 Глянцевый 3D Текст masterklass

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

получаем:

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

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

9992323f4a1e Глянцевый 3D Текст masterklass

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

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

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

3196337f769f Глянцевый 3D Текст masterklass

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

761ff8a340b8 Глянцевый 3D Текст masterklass

Шаг 8.

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

4052a44aeaa3 Глянцевый 3D Текст masterklass

Выделите все видимые элементы объема и нажмите кнопку 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".

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

93c626057973 Глянцевый 3D Текст masterklass

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

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

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

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

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

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

Шаг 10.

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

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

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

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

Итак, мы получили 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) (градиент у вас будет слева-направо: от серого (цвет переднего плана, который мы только что установили) до прозрачного), проведите градиентом сверху вниз, чтобы получилось следующее:

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

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

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

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

Шаг 12.

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

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

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

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

Получаем:

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

Шаг 13.

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

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

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

Результат:

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 14.

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

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

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

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

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

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

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

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

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

Шаг 15.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 16.

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

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

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

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

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

Шаг 17.

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

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

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

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

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

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

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

Шаг 18.

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

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

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

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

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

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

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

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

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

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

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

Шаг 19.

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

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

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

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

Шаг 20.

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

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

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

Шаг 21.

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

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

Шаг 22.

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

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

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

Шаг 23.

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

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

Шаг 24.

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

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

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

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

Шаг 25.

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

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

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

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

получим:

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

Шаг 26.

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

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

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

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

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

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

101qz Глянцевый 3D Текст masterklass

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

И вот, наконец, финальный результат:smile Глянцевый 3D Текст masterklass

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

------

Здесь можно полностью прочитать статью. www.mediasapiens.tv


В избранное