Текст для Санты в Adobe Illustrator

14 декабря 2013 | Опубликовано в Уроки | 2 Комментариев »

Из этого урока мы узнаем как создать рождественский типографический эффект в Adobe Illustrator. Мы будем использовать инструмент «Переход» (Blend Tool), Сетчатый Градиент (Gradient Mesh), скрипт скругляющий углы и объектные кисти (Art brushes), чтобы добавить тексту бликов и создать глянцевый эффект.

Финальный результат

Работаем с текстом

1. Для начала создайте новый документ. Выберите Инструмент Текст/Type Tool (T) и введите надпись (к примеру, “SANTA”). Используйте шрифт Becker Black NF размером в 138 pt. Укажите в параметре расстояния между буквами (tracking for the selected characters) 30. Далее в меню Объект/Object выберите Разобрать/Expand, а затем Разгруппировать/Ungroup. Теперь каждая буква находится отдельно.

2. Теперь нам нужно избавиться от треугольника, который служит перегородкой в букве «А», потому что он будет нам мешать при применении инструмента Переход /Blend Tool. Возьмите Инструмент Перо/Pen Tool (P) и нарисуйте фигуру между ножек буквы «А», которая полностью накроет треугольник, но не затронет остальные части буквы. Выделите букву и только что нарисованную фигуру и нажмите кнопки Вычитание/Subtract, затем Разобрать/Expand в палитре Обработка контуров/Pathfinder. Проделайте то же со второй буквой “A”.

3. Выделите все буквы и в меню выберите Эффект > Стилизация > Скругленные углы / Effect > Stylize > Round Corners. Укажите радиус в 5 px. Теперь в меню Объект сначала выберите Разобрать оформление / Expand Appearance, затем Разгруппировать / Ungroup.

4. Снова выделите все буквы и в меню выберите Объект > Контур > Создать параллельный контур / Object menu > Path > Offset Path. Задайте смещение в -6 px. У вас получатся буквы меньшего размера. Залейте их сиреневым цветом. Примените эффект по скруглению углов (Rounded Corners) к сиреневым буквам, указав радиус в 2 px. В меню Объект/Object выберите Разобрать оформление/Expand, затем Разгруппировать/Ungroup.

Перед тем, как продолжить работу, сделайте несколько копий букв. С ними нам предстоит работать позже. Для этого выделите необходимые объекты, Копируйте/Copy (Ctrl+C) и Вставьте на передний план/Paste in front (Ctrl+F). На время скройте копии.

Создаем стиль подарка

5. Залейте большие (черные) буквы градиентом, который указан ниже. А сиреневые буквы — красным цветом, кроме второй буквы “A”, которая будет зеленой.

6. Теперь выделите букву “S” (обе буквы — и большую и поменьше) и вменю выберите Объект > Переход > Параметры перехода / Object menu > Blend > Blend Options. Выберите Заданное число шагов / Specified Steps = 30 и нажмите OK. Снова в меню выберите Объект > Переход > Создать / Object > Blend > Make. Повторите процедуру с каждой из букв.

7. Для следующего шага нам понадобятся созданные нами ранее копии маленьких букв. Поместите их поверх всего остального. Мы создадим текстуру для букв при помощи Сетчатого градиента/Gradient Mesh.

8. Начнем с первой буквы. Выделите черную “S” и в меню выберите Объект > Создать сетчатый градиент / Object > Create Gradient Mesh. В появившемся окне укажите 3 Ряда/Rows и 4 Колонки/Columns, затем нажмите OK. К сожалению результат далек от совершенства, и нам нужно это исправить, редактирую положения линий сетки. Выберите инструмент Прямое Выделение/Direct Selection (A) и переместите в нужные места точки сетки, при необходимости редактируя и манипуляторы. Когда результат ваших усилий будет походить на то, что вы видите на картинке ниже, смените цвет для некоторых точек. Точкам, обозначенным синим задан белый цвет, а красным — серый.

Теперь займемся второй буквой. Так же создайте сетчатый градиент через меню, только на этот раз укажите 4 ряда и 7 колонок. Результат получается хорошим и нам не нужно ничего править. Только задаем цвета определенным точкам. Те что на картинке ниже отмечены синим, окрашиваем в белый цвет, те что красным — в серый.

Повторяем процесс со следующей буквой:

Теперь с буквой “T”:

И последняя:

9. На этом этапе наша работа должна выглядеть как на картинке ниже. Теперь смените режим наложения для каждой буквы на Перекрытие и укажите непрозрачность в 100% всем буквам кроме двух “A”.

Работаем с узорами

10. Теперь мы будем работать с копиями больших букв. Поместите их поверх всего. Теперь займемся буквами «А» и «N».

11. Выделите копию первой буквы «A» и залейте ее Узором под названием Borneo, который вы найдете в Библиотеке образцов > Узоры > Декоративный > Декоратив_простейшая / Swatch Libraries > Patterns > Decorative > Decorative_Primitive. Не снимая выделения, зайдите в меню Объект > Трансформировать > Масштабирование / Object > Transform > Scale. В появившемся окне укажите трансформацию только для узора, введите 30% и нажмите OK. Finally, Затем смените режим наложения на Перекрытие/Overlay и укажите непрозрачность в 40%.

12. Залейте копию буквы «N» узором Floral Vines (Библиотека образцов > Узоры > Природа > Природа_листва / Swatch Libraries > Patterns > Nature > Nature_Foliage). Вновь в меню выберите Объект > Трансформировать > Масштабирование / Object > Transform > Scale. Укажите трансформацию только для узора, введите 60%. Смените режим наложения на Затемнение основы/Color Burn и снизьте непрозрачность до 25%.

13. Для последней буквы мы используем узор 6 lpi 60% (Библиотека образцов > Узоры > Базовая графика > Базовая графика_линии / Swatch Libraries > Patterns > Basic Graphics > Basic Graphics_Lines). На этот масштабируйте узор до 60%, затем в меню выберите Объект > Трансформировать > Поворот/ Object > Transform > Rotate, укажите трансформацию только для узора и введите 45 градусов, после чего нажмите OK. Смените режим наложения на Осветление/Screen.

Добавляем блики

14. Нам снова понадобятся копии маленьких букв. Поместите их поверх всего. Мы будем работать с белым контуром. Для этого возьмите инструмент Ножницы / Scissors Tool © и начните с буквы “S”.

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

15. Продолжаем со следующими двумя буквами:

И еще две:

16. Теперь, когда вы закончили, работаем с указанными ниже отрезками (остальные пока скройте). Выделите их и примените к ним объектную кисть /Art brush под названием Tapered-Sharp (Библиотеки кистей > Художественный > Худож_чернила / Brush Libraries > Artistic > Artistic_Ink). В качестве цвета обводки выберите белый. Откройте палитру Оформление / Appearance Panel (Окно > Оформление / Window > Appearance) и двойным кликом откройте окно Параметры обводки / Stroke Options. Укажите Ширину/Width в 10%.

17. Выделите все отрезки и в меню выберите Объект > Разобрать оформление / Object > Expand Appearance. Как результат обводка превратиться в заливку и вы сможете применить к ней градиент, который указан ниже. Смените режим наложение на Осветление/Screen для всех отрезков и выставите непрозрачность на 80-100%.

18. Теперь работаем с остальными отрезками. Сделайте их видимыми и примените к ним ту же кисть. Также укажите те же параметры, что мы использовали в шаге 16.

19. Укажите режимы наложения и степени непрозрачности как показано ниже. Те отрезки, что не показаны ниже выставите в режим Перекрытие/Overlay и на 100% непрозрачности.

Рисуем ленточки

20. Для начала выделите большую букву “S” и в меню выберите Объект > Контур > Создать параллельный контур / Object menu > Path > Offset Path, укажите 2 px. Вы получите большую букву. Давайте укажем ей синий контур для удобства. Поместите букву поверх всего. Нарисуйте Прямоугольник / Rectangle Tool (M) размером 100 х 10 px. Дублируйте его и поверните на 50 градусов. Разместите прямоугольники как показано на картинке ниже и сгруппируйте их (Ctrl+G). Теперь выделите синюю букву “S” и прямоугольники и кликните кнопке Пересечение/Intersect и потом Разобрать/Expand в палитре Обработка контуров/Pathfinder Panel. В результате вы получите составной контур. Чтобы разделить прямоугольники зайдите в меню Объект > Составной контур > Отменить / Object menu > Compound Path > Release.

21. Возьмите инструмент Перо/Pen Tool (P) и нарисуйте небольшую фигуру как показано ниже. Разместите ее как на картинке и расположите на самом заднем плане. Размножьте фигуру и используйте ее во всех местах загибания ленты.

22. На этом этапе нам понадобится скрипт под названием Round Any Corner. Зайдите сюда и скачайте его, затем установите, руководствуясь инструкцией. Перезапустите Illustrator и вы найдете его в меню Файл > Сценарии/File > Scripts. Теперь возьмите инструмент Прямое выделение/Direct Selection Tool (A), выделите только указанные ниже опорные точки и запустите скрипт, выбрав радиус 2. У вас получатся скругленные углы.

23. Копируйте (Ctrl+C) и вставьте на передний план (Ctrl+F) ленточки. Инструментом Прямоугольник / Rectangle Tool (M) нарисуйте прямоугольник размером 100 x 0.5 px (нет, это не линия :). Залейте его любым цветом, затем поверните на 50 градусов. Дублируйте линии несколько раз и разместите поверх ленточек, как показано ниже. Сгруппируйте каждую пару прямоугольников. Теперь выделите копию первой ленточки и прямоугольники ей соответствующие. В палитре Обработка Контуров/Pathfinder нажмите кнопку Пересечение/Intersect, затем Разобрать/Expand. Вы получите составной контур, который на этот раз не нужно отменять. Только залейте полученные полосочки указанным ниже градиентом и смените режим наложения на Перекрытие/Overlay.

24. Пришло время заняться тенями. Копируйте (Ctrl+C) и Вставьте на задний план (Ctrl+B) верхнюю ленточку. Возьмите инструмент Прямое выделение / Direct Selection Tool (A) и выделите только точки, показанные на картинке ниже. Переместите их немного вперед, как показано в примере. Залейте фигуру градиентом от белого к черному и укажите угол градиента в зависимости от расположения ленты. Смените режим наложение на Умножение / Multiply (белый цвет становится прозрачным). Повторите процедуру со второй лентой. Буква “S” готова.

25. Продолжим со следующей буквой. Здесь все то же. Создаем параллельный контур на 2 px больше, получаем синюю «А», рисуем поверх прямоугольники, повторяем шаг 21, чтобы получить линии сгиба ленточек, используем скрипт, чтобы скруглить углы.

26. Копируйте (Ctrl+C) и вставьте на передний план (Ctrl+F) полученные три ленточки и поверх них нарисуйте тонкие прямоугольники. Примените к ним Пересечение, залейте тем же градиентом и в конце добавьте тени.

27. Примерно это же делаем с буквой “T”. Создаем ленточки , скругляем углы и заливаем указанным градиентом.

28. На этот раз размещаем тонкие прямоугольники по краям ленточки и заливаем градиентом красных оттенков.

29. Выберите инструмент Перо/Pen Tool (P) и нарисуйте четыре прямые линии вдоль ленточек, немного отступая от края. Укажите им толщину в 0.75 pt и красный цвет. Теперь в палитре Обвдока/Stroke выберите Линию-пунктир/Dashed. Параметры частоты точек и дырок между ними настройте как показано ниже. Если некоторые точки вышли за контур ленточки, подредактируйте их при помощи Прямого Выделения/ Direct Selection Tool (A).

30. Добавьте теней и буква готова.

31. С буквой “N” проделываем то же самое, только градиент и расположение ленточек иные.

32. Снова создаем тонкие прямоугольники и заливаем золотым градиентом. Режим наложения меняем на Осветление основы/Color Dodge и снижаем непрозрачность до 80%.

33. Создаем маленькие кусочки загибов лент, добавляем тени.

34. Последняя буква “A”. Инструментом Перо/Pen Tool (P) нарисуйте треугольник как на картинке ниже. Копируйте его (Ctrl+C) и вставьте на передний план (Ctrl+F). Затем нарисуйте тонкий прямоугольник и расположите в основании треугольника, выделите его и копию треугольника и примените к этим двум фигурам Пересечение, затем разберите получившуюся фигуру. Залейте фигуру линейным градиентом как показано ниже и смените режим наложения на Осветление основы/Color Dodge. Также немного приберите непрозрачность.

35. Инструментом Прямое выделение/Direct Selection Tool (A) выделите верхнюю точку треугольника (1) затем примените к ней скрипт Round Any Corner. На этот раз укажите радиус 3. Нарисуйте и расположите на задний план маленькие фигуры-сгибы (2) и залейте их указанным градиентом. И наконец добавьте тень (3).

36. Теперь инструментом Перо/Pen Tool (P) нарисуйте кусочек волнистой ленты, как показано ниже (1). Продолжайте рисование второй частью ленты, которую нужно расположить на заднем плане (2). Также нарисуйте конец ленточки с раздвоением. (3). Укажите обводку светло-оранжевого цвета и сделайте ее пунктирной, как показано в шаге 27. То же сделайте с остальными составляющими ленточки. Затем нарисуйте маленькую фигуру сгиба (4) и добавьте тень (5). Буква “A” готова.

Рисуем карточку

37. Возьмите инструмент Прямоугольник со скругленными углами / Rounded Rectangle и кликните в любом месте вашего документа, чтобы открыть окно настроек. Введите указанные ниже размеры. Получившийся прямоугольник залейте любым цветом. Инструментом Эллипс/Ellipse Tool (L) нарисуйте небольшой круг и расположите его в правой верхней части карточки. Теперь дублируйте карточку. Верхней копии укажите отсутствие заливки и черную обводку толщиной в a 2 pt. Затем выделите нижнюю карточку и маленький круг и в палитре Обработка контуров/Pathfinder выберите Вычитание/Subtract, затем Разобрать/Expand.

38. Сгруппируйте все составляющие карточки, вместо выбранного в предыдущем шаге цвета заливки, укажите белый. В меню выберите Эффекты > Стилизация > Тень / Effect > Stylize > Drop Shadow.

39. Пером нарисуйте две волнистые линии-ниточки, на которой будет висеть карточка. Укажите черную заливку толщиной в 0.5 pt, затем сделайте линию пунктирной, указав параметры как видите ниже.

40. При помощи инструмента Текст/Type Tool (T) наберите “Merry Christmas!”, разберите надпись (меню Объект > Разобрать/ Object > Expand). Разместите ее как показано ниже.

Рисуем бантик

41. Бантик полностью рисуем Пером/Pen Tool (P). Нарисуйте фигуры как показано ниже и залейте их указанными градиентами.

42. Нарисуйте неидеальный круг фигуру между двух фигур бантика (1). Копируйте (Ctrl+C) и вставьте на задний план (Ctrl+B) левую часть бантика. Опустите ее немного ниже. То же сделайте и с правой частью (2). Вновь копируйте (Ctrl+C) и вставьте на задний план (Ctrl+B) левую часть бантика, и на этот раз поднимите фигуру немного выше. То сделайте с правой стороной (3).

43. Пером/Pen Tool (P) нарисуйте концы ленточки на бантике (1). Теперь повторите предыдущую процедуру по созданию тонких краев (2). Нарисуйте черные фигуры как на картинке ниже. Копируйте и вставьте на передний план «крылья» бабочки. (3) Выделите черную фигуру и «крыло», на котором она лежит и примените к ним Пересечение из палитры обработки контуров. Затем нажмите Разобрать/Expand. То же сделайте с правой стороны. Залейте полученный результат показанным ниже градиентом и смените режим наложения на Перекрытие/Overlay (4).

44. Повторите процедуру с концами ленточки (1). Пером/Pen Tool (P) нарисуйте три тонкие фигуры и залейте их указанным цветом (2).

45. Зеленые бантики делаются тем же способом.

46. Сгруппируйте элементы каждого бантика, и расположите бантики как на картинке ниже. В меню выберите Эффект > Стилизация > Тень / Effect > Stylize > Drop Shadow. Введите параметры как на картинке ниже.

Добавляем блеск

47. Для начала нарисуйте два овала как на картинке ниже инструментом Эллипс/Ellipse Tool (L). Затем дублируйте их, поверните на 45 градусов и масштабируйте до 75%. Залейте все овалы первым градиентом. Нарисуйте посредине круг и залейте его вторым градиентом.