Рисуем коллекцию иконок в Иллюстраторе

Сегодня мы пройдем через процесс созданий ваших собственных, нарисованных в векторе Иконок. А дополнение к уроку приятный бонус — бесплатная коллекция иконок с Envato™ Marketplace для вашего веб сайта.

Автор этого урока Orman Clark  живет в Великобритании и занимается веб дизайном. Специализируется на пиксельной графике и разработке шрифтов под ключ. Большую часть времени он проводит создавая дизайн тем под Вордпрес и бесплатную графику для PremiumPixels.com Пообщаться с Орманом Кларком можно в его Twitter, на Dribbble  или в Forrst. Перевод подготовлен специально для Хронофаг.ру

Организация слоев

Откройте Adobe Illustrator и создайте новый документ с размерами 800×600 пикселей, 72dpi и режиме RGB. Размеры в пикселях, фон белый.

При открытом документе откройте панель слоев, которую можно найти в Window > Layers, если она у вас не открыта. Далее создайте там 4 новых слоя. Назовите их “base” (основа), “icon” (иконки), “light” (свет) и “overlay” (лого). Overlay — наложение, графика, которая будет накладываться поверх.

Создаем основу

Для создания основы иконки нарисуйте прямоугольник с овальными краями инструментом Rounded Rectangle Tool. Сделать это нужно на слое “base”, залейте фигуру серым цветом. Чтобы нарисовать такую фигуру кликните этим инструментом по рабочей области. В диалоговом окне введите 42px по высоте и ширине, радиус угла 10px.

Контур внутреннего света

Переключитесь на слой света “light”, выберите инструмент Rounded Rectangle Tool. Цвет темно серый и кликните по рабочей области. Размеры на этот раз будут меньше на 4 пикселя. Ширина и высота 38px, радиус углов 8px. Кликаем ОК

Оставайтесь на слое свет “light” , выберите Rounded Rectangle Tool, создайте новую фигуру с размерами 34 на 34px и радиусом угла 6px. Нажимте ОК.

Зажмите SHIFT и кликните по двум внутренним фигурам, чтобы выделить обе. Не теряя выделение зайдите в панель Pathfinder. Если у вас её нет, откройте Window > Pathfinder. На этой панели выберите функцию Minus Front, чтобы получить ободок от двух фигур.

Выберите оставшуюся деталь и откройте панель градиента Gradient palette (Window > Gradient). На этой панели выберите линейный градиент, от белого к белому. Установите 90 градусов. Один из якорей градиента сведите до 0% невидимости. Другой к 80% невидимости. После откройте другую панель Transparency palette (Window > Transparency) и поставьте режим наложения Soft Light

Рисуем блик света

Переключитесь на слой “overlay”, выберите любой цвет и создаете ещё один прямоугольник с овальными краями при настройках 38 пикселей по ширине и высоте. Радиус 8 пикселей. Затем выберите инструмент эллипс Elipse tool, рисуйте окружность и расположите её поверх прямоугольника.

Нажмите SHIFT и кликните по окружности и прямоугольнику чтобы выделить оба. Откройте окно Pathfinder и кликните по кнопке Minus Front. Это отсечет одну фигуру от другой.

Рисуем контур блика

С выделенной фигурой блика, кликните по панели градиентов Gradient  и выберите линейный градиент от белого к белому, с радиусом 0. Левый якорь установите на 25% невидимости, а правый на 0%. Затем измените режим наложения фигуры на “Soft Light”.

Хотите верьте, хотите нет, но основу иконки мы закончили. Осталось лишь поиграть с цветами.

Создаем иконку для Vimeo

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

Создайте две новых краски на панели Swatches . Клик по иконке New Swatch. Если у вас нет этой панели, откройте её в Window > Swatches

Новым краскам задайте параметры R “31″, G “117″, B “196″ и R “113″, G “188″, B “237″

Применяем градиент

Вернитесь на базовый слой “base” и выберите основу — прямоугольник и добавьте градиент из двух новых красок. В работе с градиентами вам поможет статья Как сделать градиент в Иллюстраторе.

Создаем логотип

К счастью Вимео создало свой логотип на основе шрифта Black Rose font. Загрузите его и напечатайте букву “V”. Я напечатал текст с размером  55pt и очень светло-серым цветом. Конвертируйте текст в кривые Type > Create Outlines и разместите букву по центру прямоугольника.

Создаем тень Drop Shadow

Выделите логотип и нажмите CTRL+C чтобы скопировать фигуру. Нажмите CTRL+B чтобы скопированная фигуру появилась позади прежней. Не теряя выделение нажмите ENTER и настройте координаты фигуры. Поставьте 0,5px по горизонтали и -0,5px по вертикали. Кликните ОК.

Меняем цвет скопированной фигуры и устанавливаем режим наложения Soft Light. Поставьте при этом невидимость около 50%

Добавляем тень под иконкой

По желанию можно создать тень под иконкой. Работайте с основным слоем “base”. Создайте небольшую окружность под иконкой. Залейте её радиальным градиентом, от черного к черному. Для левого якоря поставьте невидимость 60% а для правого 0%. aspect ratio 8% и расположение 60%

Создаем собственные иконки

Вот и все! Следую данному руководству вы легко и быстро создадите собственную, масштабируемую без потери качества, иконку для приложения или веб сайта. Просто откройте свой макет и наложите логотип.

Эксклюзивный бонус

Так как данный урок написан для Envato™, я решил создать коллекцию иконок для магазинов Envato —  ThemeForest, GraphicRiver, AudioJungle, ActiveDen,VideoHive, 3DOcean и CodeCanyon. Brandon В паке вы найдете коллекцию иконок в формате .png для размеров 32x32px, 64x64px, 128x128px и оригинальный исходник (.ai)

Скачать иконки

Применяем иконки в своем дизайне

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

Пример применения иконок в навигационной панели
Пример использования иконок в виджите
Пример использования иконок в футере сайта.

Постовой: Хотите высчитать стоимость банкротства до копейки? Сделать это очень просто, если доверить банкротство своей компании компании Право, на сайте uk-pravo.ru