Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2011 » Сентябрь » 18 » Очки. Как превратить очки в прикольную иконку
17:05
Очки. Как превратить очки в прикольную иконку

Очки. Как превратить очки в прикольную иконку

Очки. Как превратить очки в прикольную иконку \ 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
Т.к. я собирался создать своеобразные очки, то я решил сделать среднюю часть намного больше, чем на фото. Эта часть полностью создаёт внешний вид. Не пугайтесь, что вы отклоняетесь от исходного фото. Вы должны знать: когда нужно следовать правилам, а когда можно их нарушать smile.gif Сейчас как раз тот случай, когда можно и нарушить их!

Очки. Как превратить очки в прикольную иконку

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

Очки. Как превратить очки в прикольную иконку

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

Очки. Как превратить очки в прикольную иконку

Шаг 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.

Очки. Как превратить очки в прикольную иконку

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

Очки. Как превратить очки в прикольную иконку

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

***


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[02.04.2019][Lessons PHOTOSHOP]
Создаём сырный текст в Adobe Photoshop (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[13.02.2015][Plugins Photoshop]
AKVIS AirBrush 2.5.300.11214 (x86/x64) (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[22.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Beauty (0)
[22.10.2015][Lessons PHOTOSHOP]
Мастер-класс photoshop Oil Retouch (0)
[18.11.2015][Brushes Photoshop]
Rons Deviney Cyborg Circuitry 75 Brushes (0)
[12.02.2015][video futage]
Awards Pack II - Project for After Effects (Videohive) (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[19.11.2015][Lessons PHOTOSHOP]
Повышение практики мастерства в фотошоп (2015) (0)
[19.11.2015][Lessons PHOTOSHOP]
Ретушь и цветокоррекция от Гавра (2015) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Womans Retouch (2015) (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
[12.02.2015][rastER KLipardy]
Фото младенцев \ Newborns, 25 x JPG (0)
 

Прикрепления:
Категория: Lessons Adobe Illustrator | Просмотров: 1207 | Добавил: zanchi | Теги: с каких деталей состоит очки, Очки. Как превратить очки в приколь, как превратить фото в иконку, очки, как, прикольные оправы для очков фото
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск






[12.02.2015][Plugins Photoshop]
AlphaPlugins Engraver III - плагин для Adobe Photoshop (0)
[23.10.2010][rastER KLipardy]
Group of young people (0)
[18.07.2013][DesiGn bLOg]
Мифы и легенды брендов. Красивые сказки, в которые мы хотим верить (0)
[19.09.2011][Veb DeSiGn]
Шаблон флеш сайта #0515 (1)
[29.05.2010][Lessons PHOTOSHOP]
Эффект прожектора (2)
[24.10.2010][PSD-files, исходники]
Клипарт - Черешня (PSD) (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[13.09.2010][Lessons PHOTOSHOP]
Гранжевое фото, обработка фото (1)
[30.12.2012][DesiGN SofT]
Animated Screensaver Maker 3.1.5 + Rus (0)

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Пятница
30.10.2020
19:40


Copyright artpost and semantic product zanchi 2010-2011 © 2020