Очки. Как превратить очки в прикольную иконку \ Pts. How to make glasses cool in the icon

В этом уроке вы узнаете, как создать крутые, или даже скажем немножко эксцентричные очки для иконки. Для выполнения урока вы должны немного владеть основными инструментами Иллюстратора. Вы научитесь создавать иллюстрацию на основе фотореференса, но отличающуюся немного своим финальным результатом от исходного фото.



Шаг 1
Начнём с выбора фото каких-нибудь очков. Убедитесь, что у фотографии достаточно высокое разрешение, чтобы не появлялась сильная пикселизация при большом увеличении во время работы над уроком.

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



Шаг 2
Открываем Иллюстратор, создаём новый документ и размещаем фото на первом слое File > Place(Файл > Разместить). Заблокируйте слой с фотографией, кликнув в маленьком пустом квадратике в палитре Слоёв Layers возле имени слоя. Создайте новый слой, на котором мы будем рисовать. Берём Перо Pen Tool (Р) и обводим оправу вокруг линз. Задайте для обводки толщину побольше. Прим. перев.: толщина обводки задаётся в палитре Stroke: Window > Stroke(Обводка: Окно > Обводка) или Ctrl+F10.

Позже мы сконвертируем обводку в фигуру. Это избавит нас от необходимости рисовать два прямоугольника для оправы.



Шаг 3
Обведите дужки очков. Задайте для обводки дужек в палитре Stroke скруглённые окончания (см. подсвеченную опцию на рисунке ниже).



После того, как вы обведёте обе дужки и оправу вокруг стёкол, выделите все элементы и преобразуйте обводку в контуры Object > Expand...(Объект > Разобрать...).



Шаг 4
Используя инструмент Прямое выделение Direct Selection tool (А) (белая стрелка) переместите точки дужек, чтобы сделать их потолще ближе к месту крепления к оправе.



Вы можете удалить лишние опорные точки, если они вам мешают в процессе редактирования.



Шаг 5
Т.к. я собирался создать своеобразные очки, то я решил сделать среднюю часть намного больше, чем на фото. Эта часть полностью создаёт внешний вид. Не пугайтесь, что вы отклоняетесь от исходного фото. Вы должны знать: когда нужно следовать правилам, а когда можно их нарушать Сейчас как раз тот случай, когда можно и нарушить их!



Сейчас ваша иллюстрация должна выглядеть приблизительно так:



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



Шаг 6
Чтобы придать оправе объём, скопируйте и немного сместите каждую её деталь. Удерживая Alt, кликайте и перемещайте контуры, чтобы создать их копию.



Шаг 7
Используя Перо Pen Tool (Р) нарисуйте слева часть, которая соединяет дужку с оправой.



Затем нарисуйте правую часть. Снова отмечу, что иллюстрация немного отличается от фото. Т.к. мы сделали дужки толще, то и деталь, которая их крепит к оправе должна быть намного больше, чем на исходнике. Также не забываем, что финальную картинку мы собираемся использовать, как иконку. Большинство иконок состоит из простых форм, поэтому не заморачивайтесь с тем ,чтобы точно следовать каждой детали на фотографии.



Шаг 8
Аналогичным образом как и на шаге 6, придайте объём для соединительной детали, скопировав и сместив копию.



Дорисуйте верхний кусочек и боковой, чтобы завершить соединительную часть оправы.



Обратите внимание: насколько наша основная форма оправы отличается от исходной фотографии.



Шаг 9
Перейдём к созданию линз. Для этого создайте копию части оправы, в которой должна располагаться линза. Затем нарисуйте любую форму, например, прямоугольник, который бы был больше по размеру, чем оправа. Разместите его ниже контура оправы (Прим. перев.: чтобы переместить контур на уровень ниже, используйте клавиши Ctrl+[). Выделите обе фигуры и в палитре Pathfinder: Window > Pathfinder выберите функцию Divide (Разделить). После того, как вы разделили прямоугольник на части, выберите пункт меню Object > Ungroup(объект > Разгруппировать), а затем удалите все лишние части, кроме области линзы.



Разместите созданные линзы на переднем плане Ctrl+Shift+].



Шаг 10
Выберите обе линзы и залейте их градиентом. Попробуйте поиграться с цветом и углом распространения градиента, пока вы не будете удовлетворены результатом. В палитре Прозрачность Transparency: Window > Transparency(Окно > Прозрачность) выставьте параметр Opacity (Непрозрачность) около 50%.



Чтобы настроить цвет линз, вы можете зайти в меню Edit > Edit Colors > Adjust Color Balance...(Редактирование > Редактировать цвета > Корректировать цветовой балланс) и измените цвет линз ещё больше, если захотите (см. рисунок).



Шаг 11
Теперь мы создадим кусочек белой ленты, которая намотана в середине оправы. Чтобы форма была более произвольной, используйте для рисования Карандаш Pencil Tool (N). Это придаст более естественный вид ленте. Чтобы замкнуть контур при рисовании карандашом, нажмите Alt и отпустите кнопку мыши.



Залейте ленту детальным градиентом (см. настройку маркеров градиента на рисунке).



Задайте для ленты тёмную внутреннюю подсветку Effect > Stylize > Inner Glow(Эффект > Стилизация > Внутренний свет).



И последний штришок: добавим ленте небольшую тень Effect > Stylize > Drop Shadow(Эффект > Стилизация > Падающая тень)



Шаг 12
Маленькие детали имеют большое значение, поэтому придадим глубину стёклышкам, добавив внутренний свет Effect > Stylize > Inner Glow(Эффект > Стилизация > Внутренний свет). Я решил выбрать тёмный сине-зелёный оттенок для этого эффекта, чтобы он лучше гармонировал с цветом линз.



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

Также придайте каждой детали, которые изображают объём оправы, небольшой внутренний свет Effect > Stylize > Inner Glow. Этот эффект должен быть очень мягким, чтобы не перебивать слишком градиентную заливку.



Шаг 14
Выделите следующую часть оправы и залейте её комплексным градиентом. Опять же, обратите внимание на те части оправы, которые должны быть максимально светлыми (см. выделение на рисунке ниже). Заметьте, что здесь область светов может быть составной. Как и на предыдущем шаге добавьте небольшой эффект внутреннего свечения.



Шаг 15
Добавьте также для детали, соединяющей оправу с дужками едва заметный градиент.



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



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



Шаг 17
Также необходимо добавить блики по краю линз. Но вместо того, чтобы заново рисовать область блика, используйте функцию Substract from Shape Area (Вычитание из области фигуры) палитры Pathfinder. Просто сделайте две копии контура линзы, затем одну из копий немного сместите вверх и в сторону, а затем кликнете на функции Substract from Shape Area. Прим. перев.: при работе с функциями палитры Pathfinder можно кликать на функцию, удерживая клавишу Alt, или после операции Subtract from Shape Area нажать кнопку Expand (Разобрать), чтобы удалить всё лишнее.



Шаг 18
Чтобы добавить ещё больше глубины стеклянной линзе, нарисуйте дугооюразную фигуру и размойте её края при помощи эффекта Effect > Blur > Gaussian Blur(Эффект > Размытие > Размытие по Гауссу). Если посчитаете необходимым, то можете подкорректировать прозрачность блика.



Шаг 19
Небольшая тень добавит законченности очкам. Тень состоит из двух фигур, которые повторяют контур дужек и горизонтальной линии оправы. Нарисуйте эти контуры (см. рисунок), а затем размойте их Effect > Blur > Gaussian Blur.



Вы заметите, что края дужек немножко загнуты вверх. Поэтому подкорректируйте инструментом Direct Selection tool (А) (белая стрелка) форму тени, чтобы обозначить, что дужки не прилегают плотно к столу.



Выберите всю тень и в палитре Transparency(Прозрачность) установите режим смешивания Blending Mode на Multiply, чтобы при добавлении фона к иллюстрации, тень выглядела реалистичнее.



Шаг 20
Создадим фон для иллюстрации. нарисуйте прямоугольник при помощи инструмента Rectangle tool (M) и залейте его мягким градиентом.



Скруглите углы у прямоугольника при помощи эффекта Effect > Stylize > Round Corners(Эффект > Стилизация > Скругление углов).



Добавьте немного внутреннего света Effect > Stylize > Inner Glow.



готово!
Ну вот у нас готова векторная иконка с очками! Как видите, финальный результат отличается от исходного фото. Но в этом-то и вся прелесть: нарисовать что-нибудь именно так, как хочется вам.



Источник: vector.tutsplus.com
Перевод: Vichka