Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Стильная векторная надпись в Adobe Illustrator

9 июля 2012 | Опубликовано в Уроки | 25 Комментариев »

Всегда удобно использовать вектор для создания того или другого элемента дизайна, в тоже время всегда наше внимание привлекают красивые работы с типографики. Что ж, почему бы не использовать возможности типографики и не создать красивую векторную текстовую надпись в Adobe Illustrator. Собственно этим сегодня мы и займемся. Текстовая надпись будет необычной,  а с помощью создания эффекта «волосы» для типографической надписи.  Такая надпись чрезвычайно стильная и ассоциируется с ретро-стилем. 

 Требования:

  • Программа: Adobe Illustrator CS5
  • Уровень сложности: Средний
  • Затраченное время: 2 часа

Шаг 1

Для начала стоит определиться со шрифтом для создание нашей надписи. Для такого текстового эффекта лучше всего подойдет рукописный шрифт. Следующим немало важным моментов является выбор букв для надписи. Ежели мы собираемся использовать эффект «волосы», то необходимо учитывать текстуру волос. Форма букв должна быть плавной. Соответственно нам не подойдут буквы, которые имеют острые углы, скажем, буквы: М, N, V, W и Z в латинском алфавите, и М, Г, Ж — в русском. Таким образом, требование одно  - это должны быть буквы, которые в рукописном шрифте имеют петли и кривые.

По всем параметрам неплохо подходит слово «Style». Далее выбираем сам шрифт. Выбор пал на "Edwardian Script ITC".  Используя Type Tool (T), вставляем текст на холст, а размер шрифта изменяем до  300pt, а AV (расстояние между буквами) ставим 100.

Шаг 2

Уменьшаем непрозрачность текста до 10% и используем текст в качестве шаблона, чтобы начать рисовать собственно надпись с помощью волос. Для начала нарисуем дополнительные штрихи, по которым после будем располагать «волосы». В данном сучае использововали 10pt  для Stroke Weight  и  Width Profile — 1. Если же не используете версию Adobe Illustrator CS5, то можно создать подобные штрихи с помощью кисти Paintbrush Tool (B). Лучше всего это делать с использованием графического планшета. Ежели такой возможности у вас нет, то тогда следует создать штрихи при помощи инструмента Paintbrush Tool (B), так как вы получите значительно больше возможностей контроля над мышкой и соответственно кривыми надписи.

После того как вы нарисовали основные штрихи добавьте еще штрихи поверх надписи. Добавьте несколько дополнительных штрихов, при этом линии должны полностью повторять контур букв, и быть несколько оборванными на концах. Экспериментируйте с толщиной кисти.

Шаг 3

Выберите все штрихи (Ctrl + A) и перейдите в Object> Expand Appearance, чтобы изменить форму штрихов и залить заливкой.   Затем выберите панель Unite in the Pathfinder. Вы заметите, что, возможно, на этом этапе вы получили несколько различных форм вместо одной. В этом случае вам нужно создать Compound Path, выбрав все формы (Selecting All) и потом применив Object > Compound Path > Make (Ctrl + 8).

Шаг 4

Чтобы надпись действительно была плавной и аккуратной, можно добавить лишние волосы, которые как бы случайно будут выбиваться с общей надписи. Толщину кисти на этот раз выбираем 3pt.  Помимо этого меняем цвет на промежуточный серо-коричневый  (C = 55 M = 60, Y = 65, К = 40). 

Шаг 5

А теперь пришло время вспомнить, как именно мы писали буквы, в каком направлении. Это поможет нам выяснить, как именно накладывать эффект «волосы» и  какие области будут пересекаться, соответственно — какая область будет поверх, а какая внизу:

Используя базу коричневого цвета (C = 55 M = 60, Y = 65, К = 40), создаем прозрачный линейный градиент и обращаем формы, чтобы выяснить, где появится тень после наложения волос.  Затем устанавливаем  Multiply Blending Mode с непрозрачностью 100%. После этого, группируем все градиент формы (Ctrl + G).

Шаг 6

Создаем дубликат «стиля» форм  и используем  группу градиента для создания Clipping Mask (Ctrl + 7). Также перетаскиваем  первоначальную форму, находящуюся ниже слоя с градиентами и объединяем их в одну группу. Таким образом, получаем надпись в коричневом цвете с тенями в местах, где наслаиваются буквы одна на другую.

Шаг 7

Именно здесь и начинается самое интересное, так как мы приступаем к фазе наложения прядей волос на надпись. Прежде всего, создадим своеобразность зернистость волос, так как волосы неоднотонные и не однотипные по структуре. Для этого используем более светлый оттенок коричневого как цвет обводки (C = 50 M = 50, Y = 60, К = 25).  Выставляем  - Width Profile 1, 3pt Stroke Weight,  смешивания Multiply Mode и Opacity 30%. После этого, группируем штрихи (Ctrl + G) и перетаскиваем в группу Clipping Mask.

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

Шаг 8

Теперь мы знаем. где будут тени, а где наслоение волос. Обычно на изгибе волоса  присутствует наиболее интенсивный блеск. Этим сейчас и займемся. Что ж, создадим светло-коричневый прозрачный радиальный градиент (C = 25 M = 25, Y = 40, К = 0) и используем его в качестве заливки с помощью Ellipse Tool (L), чтобы сделать несколько светлых кругов на изгибах прядей волос. Для этого слоя установим  режим наложения Overlay и Opacity 15%. Затем группируем слои и (Ctrl + G) и размещаем в  в группу Clipping Mask.

Шаг 9

Теперь я собираюсь добавить несколько штрихов на изгибах прядей волос с помощью Paintbrush Tool (B). Делается это для того, чтобы выделить изгибы. Выставляем:  Width Profile 1, 2pt Stroke Weight со светло-коричневым цветом обводки (C = 40 M = 45, Y = 50, K = 5). Также устанавливаем  Blending Mode Screen and Opacity 20%.

Я собираюсь добавить еще несколько штрихов, используя те же настройки, но выставив режим смешивания Color Dodge, а Opacity 20%. После этого, группируем все штрихи  (Ctrl + G) и перетаскиваем из в группу Clipping Mask. 

Шаг 10

Основные штрихи уже добавлены, теперь пришло время проработать тени и темные пряди. Теперь используем другой профиль. На этот раз выставляем Width Profile 5.  Цвет выставляет смешенный коричневый (C=50, M=50, Y=60, K=25), а  Stroke Weight устанавливаем на 3pt.  Также выставляем смешивание  Blending Mode Color Burn  и Opacity 30%. Прорабатываем все пряди волос. После опять группируем (Ctrl + G) и помещаем в группе Clipping Mask.

Шаг 11

Можно еще добавить блеска волосам. Для этого установим (C=40, M=45, Y=5),  Stroke Weight - 5pt, Blending Mode Color Dodge и Opacity 30%.

Я собираюсь использовать те же цвета и кисти, но на этот раз  установив предварительно Stroke Weight на позиции 1pt.  Также выбираем Blending Mode Lighten и Opacity 20%. После этого, группируем все шаги (Ctrl + G) и перетаскиваем в группу Clipping Mask.

Шаг 12

После проделанных шагов волосы выглядят немного размытыми и бледными, поэтому мы перекроем некоторые цвета, чтобы повысить контрастность.  Рисуем прямоугольник (Rectangle (M)) с помощью текста, а затем помещаем в группу Clipping Mask. Выставляем цвет объекта - C = 50 M = 70, Y = 80, К ​​= 70. Выбираем режим смешивания Soft Light с   Opacity 100%.

Что ж, теперь пришло идеально время, чтобы изменить цвет волос на любой другой. Все зависит от вашего вкуса и желаний. Ежели вы хотите изменить цвет надписи на, скажем, розовый или синий. Вам достаточно изменить заливку Rectangle (М) на любой другой цвет, который вы желаете.  Затем измените режим смешивания (Blending Mode) на Overlay, и поиграйтесь немного с непрозрачностью надписи (Opacity), чтобы получить наиболее оптимальную насыщенность изображения. 

Шаг 13

Теперь, чтобы добавить некоторые дополнительные волоски вокруг основания дабы создать эффект некой небрежности вам нужно разместить эти волосы ниже группы Clipping Mask, чтобы они не перекрывались уже существующие тени волос. Используем смешенный золотисто-коричневый цвет (C = 40 M = 70, Y = 100, K = 50),   Width Profile 4, а  Stroke Weight устанавливаем на 2pt.

Шаг 14

Следующий шаг, который нам необходимо сделать, это отшлифовать букву «L», создав более четкие очертания петли. Сделать это можно легко  и просто — вырезать необходимую нам фигуру из слоя Compound Path, который используется для создания группы Clipping Mask, с Pathfinder> Minus Front.

Шаг 15

Теперь, необходимо  добавить эффект тени. Итак, сначала необходимо продублировать Compound Path, так как только что мы внесли изменения в группу  Clipping Mask. Затем стоит перетащить слой ниже слоев всех прядей волос. 

На внешней панели  создаем четыре штриха с черной обводкой и устанавливаем на них наложения Blending Mode Multiply с прозрачностью (Opacity) 5% . Буквы получили более округлые углы, а также более плавные переходящие линии на местах соединения букв. Затем используя манипулятор на клавиатуре просто сдвигаем фигуру вправо и вниз, чтобы создать тень для вектора 100%. 

Шаг 16

Эффект «состаренная надпись» мы можем легко и просто добавить с помощью светло-серого фона для надписи. Используем параметры:  (C = 5, M = 1, Y = 5, K = 9), с векторной текстурой «шум». С помощью градиента обесцвечиваем фоновое изображение по краям.  

Добавляем белый цвет. Создаем штрихи с помощью с помощью параметров 40pt Stroke Weight “Chalk – Scribble”. Настраиваем смешивание  (Blending Mode Screen) с непрозрачностью  Opacity 10%. В результате вы увидите на фоновом холсте своеобразный эффект «грязный монитор» — искажение цвета на белой поверхности.  Это как раз то, что нам необходимо 

Шаг 17

Наконец, добавим золотисто-коричневый прямоугольник (Rectangle M) и коричневую виньетку поверх всего изображения, чтобы добавить еще один ретро-эффект.

Результат

Автор — Vector Tutsplus 
Перевод — Дежурка



Комментарии

  1. Анастасия
    Thumb up Thumb down 0

    Бесит что не все подробно расписано! И самостоятельно надо думать что слои а что не слои и куда градиент и блаблабла.

    Много времени ушло в никуда

  2. Анатолий Мухин
    Thumb up Thumb down 0

    Спасибо, обязательно использую в одном из своих вебсайтов.

    На этом уже не успел:

    www.webdesignadaptive.com

[an error occurred while processing the directive]


[an error occurred while processing the directive]