Как нарисовать иконку USB-флешки в Иллюстраторе

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

Banner for lessons 001.jpg

Пример HTML-страницы

Как нарисовать иконку USB-флешки в Иллюстраторе

Создаем новый документ

Для начала создайте новый документ, выбрав в меню File > New/Файл>Создать (или нажмите Control-N). Настройте документ как показано ниже:

1-setting-up-a-new-document.png

Шаг 1

Для начала растяните квадрат по размеру рабочей области — размером 64 x 64 px. Укажите квадрату цвет заливки #F15A24 и разместите квадрат по центру рабочей области.

3-creating-the-main-shape-for-the-reference-grid.png

Шаг 2

Нарисуйте поверх оранжевого квадрата белый квадрат размером 56 x 56 px. Разместите его по центру рабочей области. Выделите оба квадрата и сгруппируйте их, нажав Control-G.

4-adding-the-active-drawing-area.png

Рисуем иконку

Теперь приступим к созданию самой иконки.

Шаг 1

Начнем создание иконки с круга размером 56 x 56 px. Укажите кругу цвет заливки #FFD55F и расположите его по центру рабочей области.

11-creating-the-background-for-the-usb-stick-icon.png

Шаг 2

Продолжим квадратом размера 24 x 24 px, укажите ему белый цвет заливки (#FFFFFF) и расположите как показано ниже.

12-creating-the-main-shape-for-the-usb-sticks-lower-body.png

Шаг 3

Выделите квадрат, и в палитре Transform/Трансформация укажите Radius/Радиус для нижних углов в 12 px.

13-adjusting-the-shape-of-the-usb-sticks-main-body.png

Шаг 4

Укажите получившейся фигуре обводку. В палитре Stroke/Обводка укажите обводке цвет #31353F, толщину в 4 px и скругленные углы.

14-adding-the-outline-to-the-usb-sticks-main-body.png

Шаг 5

Теперь нарисуйте квадрат размером 8 x 8 px с заливкой цвета #FF9045 и обводкой с теми же параметрами что и выше.

15-creating-the-main-shapes-for-the-usb-sticks-slider.png

Шаг 6

Добавьте прямоугольник размером 8 x 4 px с цветом заливки #31353F.

16-adding-the-little-insertion-to-the-usb-sticks-slider.png

Шаг 7

Рисуем прямоугольник размером 16 x 12 с белым цветом заливки и нашей обводкой. Разместите фигуру как показано ниже.

17-creating-the-main-shapes-for-the-usb-sticks-connector.png

Шаг 8

Добавим желобки. Нарисуйте их при помощи двух линий длиной и толщиной в 2 px цвета #31353F и со скругленными концами. Выделите все элементы, которые составляют флешку и сгруппируйте их, нажав Control-G.

18-finishing-off-the-usb-stick-icon.png

Результат

final2.jpg

Автор урока - ANDREI STEFAN


Ссылка на источник

Как нарисовать иконку USB-флешки в Иллюстраторе
Пример HTML-страницы

Также уроки которые могут вас заинтересовать

Комментарии 271

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

Яндекс.Метрика