Vectorboom
Уроки / Векторные Иконки / Comments: 2

Как в Adobe Illustrator создать векторную иконку календаря

Ярослав Лазунов
11.06.2013
Цель Урока
Векторная иконка календаря для Iphone в Adobe Illustrator

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

В этом уроке мы научимся создавать векторную иконку календаря, используя простые геометрические формы, градиентные заливки, маски прозрачности и режимы смешивания в Adobe Illustrator.

Шаг 1

Берем инструмент иллюстратора Rounded Rectangle Tool и создаем прямоугольник. Заливаем его линейным градиентом от светло-синего к синему цвету.

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

Шаг 2

Выделяем прямоугольник, затем переходим Object > Path > Offset Path… и устанавливаем величину смещения.

Заливаем новый объект линейным градиентом от белого к светло-серому цвету.

Шаг 3

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

Этот прямоугольник должен иметь разные радиусы округления углов. Для этих целей я использую Dynamic Corners Tool (плагин VectorScribe)

Вы можете применять разные радиусы скругления углов, используя стандартные средства Adobe Illustrator. О том, как это делается, вы сможете узнать, прочитав этот урок.

Шаг 4

Создаем прямоугольник, размеры которого на несколько пикселей меньше предыдущего. Округляем у этого прямоугольника только верхние углы.

Создаем прямоугольник с высотой 2px, затем округляем его правый нижний угол и заливаем линейным градиентом из двух оттенков синего и черного цвета (R=0; G=0; B=0).

Прошу заметить, что мы создаем иконку в цветовом режиме RGB (File > Document Color Mode > RGB color). Применяем к этому прямоугольнику режим смешивания Screen в панели Transparency.

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

Шаг 5

Копируем прямоугольник со скругленными верхними углами, затем вставляем его вперед (Cmd /Ctrl + C; Cmd / Ctrl + F). Заливаем его вертикальным линейным градиентом от ярко-голубого к черному цвету. Применим к этому объекту режим смешивания Screen. Таким образом, мы создали блик на верхней части календаря.

Однако интенсивность этого блика должна убывать в направлении справа налево, в соответствии с положением источника света. Добиться этого эффекта нам поможет маска непрозрачности.

Шаг 6

Копируем прямоугольник и вставляем его вперед. Теперь заливаем новый объект горизонтальным линейным градиентом от белого к серому цвету и установим режим смешивания Normal в панели Transparency.

Выделяем два верхних объекта (это удобно сделать в панели Layers), затем выбираем Make Opacity Mask в сплывающем меню Transparency.

Шаг 7

Создадим тень от верхней части календаря. Рисуем новый прямоугольник, который заливаем вертикальным линейным градиентом от черного к белому цвету. Помещаем этот объект ниже элементов верхней части календаря, затем устанавливаем режим Multiply.

В этом случае белый цвет становится прозрачным.

Шаг 8

Создаем окружность при помощи Ellipse Tool (L), затем заливаем ее радиальным градиентом от черного к синему цвету так, как это показано на рисунке ниже.

Рисуем вертикальную линию при помощи Pen Tool (P), устанавливаем подходящую толщину и кликаем на опцию Round Cap в панели Stroke.

Шаг 9

Теперь переходим Object > Path > Outline Stroke, затем заливаем объект линейным градиентом, который состоит из чередующихся светлых и темных оттенков серого цвета.

Копируем форму и вставляем ее вперед. Заливаем новый объект радиальным градиентом от белого к черному цвету, затем устанавливаем режим Multiply. Таким образом, мы затемнили края металлического объекта.

Шаг 10

При помощи Pen Tool (P) рисуем форму тени, показанную на рисунке ниже. Заливаем форму синим цветом и устанавливаем режим смешивания Multiply.

Рисуем эллипс, который заливаем эллиптическим градиентом от белого к черному цвету, затем устанавливаем режим Screen. Таким образом, мы создали блик на металлической поверхности.

Шаг 11

Группируем объекты, созданные в 8-10 шагах, затем дублируем группу три раза, располагая новые группы вдоль верхнего края календаря.

Шаг 12

Создадим два эллипса и поместим их ниже всех созданных объектов. Верхний эллипс меньшего размера залит темно-серым цветом, больший эллипс залит белым цветом. Выделяем оба эллипса, затем используем комбинацию горячих клавиш иллюстратора Cmd / Ctrl + Option / Alt + B для создания бленд объекта. Для установки необходимого числа Specified Steps два раза кликните по иконке Blend Tool (W) в панели Tool.

Для того чтобы тень выглядела хорошо на фоне любого цвета, а не только на белом, установим для бленд объекта режим Multiply.

Шаг 13

При помощи Type Tool (T) создадим надписи на календаре. Выделяем цифры, затем переходим Type > Create Outlines. Теперь мы можем залить цифры линейным градиентом, в соответствии с общим освещением иконки.

Теперь иконка календаря готова.

 

 

Вы можете скачать исходный векторный файл к данному уроку

 

 

 

 

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.