Учимся создавать собственные векторные 3D иконки

Часто мне встречался вопрос, как выполнить 3D иконки в векторе, многим они приглянулись, есть и темостроители, что делают такие иконки.
Хорошо отрисованная иконка, хорошего качества, четкая и яркая, да и еще объемная, кому же это не понравится? А ведь на самом деле процесс создания таких иконок очень прост, и каждый из Вас смог бы нарисовать для себя свою иконку, для понравившегося приложения сам.
А если темостроитель, создавая свою тему, сделает такой иконпак, то, на мой взгляд, многим пользователям он приглянется, т.к. он необычен, не часто мы видим такие иконки в темах, а только лишь в отдельных приложениях, которые переупаковывают пользователи, используя иконки от именитых авторов.

Давайте научится создавать такие иконки! Процесс создания очень прост! Вес файла на выходе мал, ибо я не использую никаких спец. эффектов в Adobe Illustrator CS2, а просто отрисовываю все вручную. Посмотрите, как это делаю я, и вы поймете, что все очень просто!


Создаем авторские 3D иконки.


1. Представьте свою будущую иконку в трехмерном объеме. Для наглядности нарисуйте ее на бумаге, только контуры, чтобы видеть грани, примерный угол расположения, параллельность линий. Сделайте набросок на бумаге, он в последствии подскажет вам, как изменять грани. Со временем Вы сможете и без набросков сразу работать в Adobe Illustrator CS2.

2. Давайте создадим круглую 3D иконку.

• Рисуем овал. Если требуется чуть наклонить овал по задумке иконки, то используйте Поворот.
• Теперь рисуем прямоугольник со скругленными углами. Перемещаем его на задний план Монтаж - Переместить на задний план, даем ему контрастную заливку, чтобы Вы могли четко работать с двумя фигурами.





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





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

3. Теперь приступаем к самой ответственной части работы, нам надо создать объем. Его мы получим, положив правильный градиент на деталь, с которой мы только что работали.
Представьте, как выглядит ваша иконка, если она находится в объеме, как ее будет освещать свет, и где будет тень. Вот именно простым градиентом мы сейчас и добьемся освещения, что придаст нашей иконке объем.

• Пример моего градиента Вы видите. Обратите внимание, что важно задать угол, под каким будет накладываться градиент, он зависит от того, насколько сильно развернута ваша иконка.
• Создаем контур для серебристой части, который будет сзади и будет тоже немного подчеркивать объем, создавая видимость того, что там темная боковая грань ребра.
  Выполняется это просто. Создаем дубль любой их частей, я взяла здесь серебристую. Я кадрированием создала небольшой контур, что будет идти сзади, как боковая грань ребра. Заливку дала в тон "серебра", чуть темнее, чтоб подчеркнуть, что это острое ребро.
• У овала (красной детали) сменила цвет контура на серебристый, и сделала его шире, такого размера, какое ребро я бы хотела видеть здесь.

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

• Копируем наш овал, контур для которого мы только что создавали. Вставляем как дубль в рисунок. Убираем заливку, оставив только заливку контура.
• Используем инструмент Контур - Преобразовать обводку в кривые. Получаем нашу переднюю боковую грань, которую и совмещаем с рисунком. Даем ему более темный контур в цвет серебра, чтобы подчеркнуть грань. У красного овала можно пока убрать контур.
• Опять копируем красный овал и вставляем. Монтируем его так, чтоб он оказался под нашим овалом, это у нас будет деталь, придающая объем уже передней части нашей иконки. Совмещаем с рисунком.
• Чуть уменьшаем в размере наш красный овал, и смещаем влево, чтобы та часть, что мы только что создали, как бы выступала сейчас. Подбираем цвет заливки, чтобы имитировать темную боковую грань. Представляйте все время вашу иконку в объеме, тогда Вы не ошибетесь в расположении теней и граней.
• И заключительным штрихом я создала выпуклость нашей передней части. Достичь можно этого двумя способами: либо просто изменить градиентную заливку овала, от белого к темно красному (там, где падает тень). Либо так, как сделала я - создала дополнительный элемент, и залила его градиентом от белого к красному. Форма элемента создавалась так, чтобы подчеркнуть объем и спрятать грань этого элемента, чтобы не был заметен переход в цветах.

Вот и получилась у нас круглая 3D иконка. Это может служить хорошей заготовкой для нанесения различных рисунков на внешнюю овальную часть.


Теперь по аналогии создадим кубический шаблон.

1. Рисуем прямоугольник со скругленными углами.

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



2. Выделяем все четыре наших детали и используем инструмент Трансформация - Наклон. Добиваемся нужного эффекта поворота наших деталей.

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

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



Теперь поработаем отдельно с градиентом. Подчеркнем все грани, покажем объемность, осветим выступающие части, и затемним те части, куда свет попадает минимально. Пример моего градиента вы видите на скриншоте.

4. Далее выполняем все по аналогии, как мы работали с круглой иконкой, создаем заднюю грань затемненную, переднюю грань, создаем, если требуется, объем на передней части иконки.

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




Совет:

• Все, что я сейчас тут выполнила, по своем наклону не будет красиво смотреться в телефоне. Я выбрала этот наклон, чтобы нагляднее Вам показать, как работают с боковой частью. Поэтому, не стоит сильно "разворачивать" вашу иконку, она лишь немного должна быть повернута.
• То, что здесь сейчас показано на рисунках будет довольно блекло отображаться на телефоне. Помните о том, что телефон из-за подсветки экрана обесцвечивают картинку, поэтому, создавая свою иконку делайте ее более насыщенной по цветовой гамме, используйте более контрастные цвета, создавайте четкие грани, и не менее 1 пикселя в ширину. Тогда ваша иконка будет красиво отображаться на телефоне, будет четкая и яркая, и главное, объем ее будет подчеркнут.

Моя же работа выполнялась для того, чтобы Вам продемонстрировать примерные скриншоты того, что Вы будете видеть на телефоне. Для получения такого цветового насыщения на самом телефоне - Вам необходимо использовать более контрастные и яркие цвета, как для градиента, так и для обводки и контуров граней.

Каждый образец моей иконки занял всего от 5 до 8 КБ. Это чистый SVG формат, не сжатый!
Вот и весь секрет объемных иконок, нарисованных в векторе.

Copyright © 2004-2012 AllNokia.RU - Все для телефонов Nokia