в

Как создать набор иконок с компьютерной периферией

Final product image

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

Налейте кофе в старую кофейную кружку, и мы начнём!

1. Как настроить новый документ

Откройте Illustrator и настройте Новый документ (Файл > Новый или Control-N) с такими параметрами:

  • Количество монтажных областей: 1
  • Ширина: 800 пикселей
  • Высота: 600 пикселей
  • Единицы измерения: пиксели

Во вкладке с Расширенными настройками:

  • Цветовой режим: RGB
  • Растровые эффекты: осветление (72 точек на дюйм)
  • Режим предпросмотра: по умолчанию
setting up a new document

Подсказка: некоторые из вас могли заметить, что отсутствует опция «Выровнять новые объекты по пиксельной сетке». Это из-за того, что у меня новая версия ПО CC 2017, в которую были внесены большие изменения в привязке фигур к Пиксельной сетке.  

2. Как настроить пользовательскую сетку

Т.к. мы будем создавать иконки в пикселях, нам нужно установить маленькую сетку, чтобы полностью контролировать наши фигуры – это если у вас более старая версия ПО. 

Шаг 1

Перейдите в Редактировать > Установки > Направляющие и сетка и установите следующие параметры: 

  • Сетка через каждые: 1 пиксель
  • Разделения: 1
setting up a custom grid

Подсказка: вы можете узнать больше о сетках, прочитав это подробное руководство по работе системы сеток в Illustrator.

Шаг 2

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

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

3. Как настроить слои

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

Откройте панель Слоёв и создайте пять слоёв, которые назовём следующим образом: 

  • слой 1: координатные сетки
  • слой 2: планшет
  • слой 3: мышь
  • слой 4: клавиатура
  • слой 5: MIDI-контроллер
setting up the layers

4. Как создать координатные сетки

Координатные (или Базовые)сетки – это набор точно ограниченных координатных поверхностей, которые позволяют нам строить иконки по размеру и однородности. 

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

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

Шаг 1

Заблокируйте все слои, кроме слоя с координатной сеткой, затем возьмите Инструмент «Прямоугольник» (М) и создайте оранжевый (#F15A24) квадрат 128 х 128 пикселей, который поможет определить размер наших иконок.  

creating the main shape for the reference grid

Шаг 2

Добавьте маленький квадрат 120 х 120 пикселей (#FFFFFF), который будет нашей активной областью рисования и послужит круговой прослойкой толщиной 4 пикселя.  

creating the main shape for the active drawing area

Шаг 3

Сгруппируйте два квадрата, из которых состоит координатная сетка, нажав комбинацию клавиш Control-G, а затем создайте три копии на расстоянии 40 пикселей друг от друга, выровняв их по центру монтажной области.  

Когда будет готово, заблокируйте текущий слой и перейдите к следующему, где мы начнём работать над первой иконкой. 

creating and positioning the remaining reference grids

5. Как создать повторяющуюся фигуру

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

Шаг 1

Начните с создания скруглённого прямоугольника 112 х 100 пикселей с Угловым радиусом 8 пикселей, который окрасим в цвет #60677C, а затем выровняем по центру активной области рисования на расстоянии 4 пикселя от нижнего края. 

creating and positioning the repeating bodys main shape

Шаг 2

Создайте контур фигуры при помощи метода Обводки, создав копию фигуры (Control-C > Control-F), а затем измените её цвет на #2B3249 и поменяйте Заливку с Обводкой (Shift-X), установив Толщину на 8 пикселей.  

adding the outline to the repeating bodys main shape

Шаг 3

Инструментом «Перо» (Р) нарисуйте линию с Обводкой высотой 16 пикселей и толщиной 8 пикселей (#2B3249), начав с центра верхнего края контура и проведя её до внешней границы активной области рисования. Когда будет готово, можете выделить и сгруппировать все три фигуры, нажав комбинацию клавиш Control-G.

adding the little cable segment to the repeating bodys main shape

Шаг 4

Теперь, когда у нас есть повторяющаяся фигура, нам нужно скопировать её три раза (Control-C > Control-F три раза) и поместить по одной на каждую пустую координатную сетку.  

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

creating and positioning the repeating body copies onto the empty reference grids

6. Как создать иконку с планшетом

Первой иконкой будет маленький графический планшет. Перейдите на нужный слой (второй), затем увеличьте на области координатной сетки, чтобы можно было начать. 

Шаг 1

Создайте экран планшета из прямоугольника 80 х 60 пикселей, который окрасим в белый цвет (#FFFFFF) и выровняем по центру повторяющейся фигуры на расстоянии 12 пикселей от верхнего края.  

creating and positioning the main shape for the tablet icons display

Шаг 2

Создайте контур толщиной 8 пикселей для только что созданной фигуры (#2B3249), использовав метод Обводки, а затем выделите и сгруппируйте обе фигуры, нажав комбинацию клавиш Control-G.

adding the outline to the tablet icons display

Шаг 3

Инструментом «Перо» (Р) нарисуйте три линии с диагональной Обводкой (#2B3249) толщиной 8 пикселей и снизьте их Непрозрачность до 20%. Когда будет готово, выделите и сгруппируйте их (Control-G), выровняв по центру экрана. 

adding the reflection lines to the tablet icons display

Шаг 4

Для первой кнопки планшета создайте квадрат 16 х 16 пикселей (#BAC0CE) с контуром толщиной 8 пикселей (#2B3249), который мы сгруппируем (Control-G) и расположим на левой стороне экрана на расстоянии 16 пикселей от верхнего края большого контура. 

creating and positioning the main shapes for the tablet icons top-left button

Шаг 5

Создайте вторую кнопку с левой стороны при помощи копии (Control-C > Control-F) только что созданной кнопки и поместите её внизу, изменив цвет фигуры заливки на белый (#FFFFFF). Когда обе кнопки будут готовы, сгруппируйте их (Control-G), т.к. мы будем использовать их для создания кнопок с правой стороны. 

creating and positioning the tablet icons second left-sided button

Шаг 6

Создайте кнопки с правой стороны из копии (Control-C > Control-F) только что сгруппированных кнопок и поместите их на противоположную сторону экрана.  

creating and positioning the tablets right-sided buttons

Шаг 7

Завершите создание иконки, добавив маленькое перо из линии с Обводкой шириной 40 пикселей и толщиной 8 пикселей (#2B3249) со Скруглёнными концами, которую мы выровняем по центру нижней области планшета. Когда будет готово, не забудьте выделить и сгруппировать все составляющие фигуры иконки, нажав комбинацию клавиш  Control-G.

finishing off the tablet icon

7. Как создать иконку с мышкой

Перейдите на следующий слой (третий) и заблокируйте предыдущий, затем увеличьте вторую координатную сетку, и мы начнём работать над иконкой с мышкой. 

Шаг 1

Создайте основную фигуру мышки из прямоугольника 44 х 68 пикселей, которую окрасим в белый цвет (#FFFFFF) и затем выровняем по центру основной заливки повторяющейся фигуры.  

creating and positioning the mouse icons main shape

Шаг 2

Установите Радиус верхних Углов только что созданной фигуры на 4 пикселя, а нижних углов – на 22 пикселя, перейдя в Свойства прямоугольника на панели Трансформирования.  

adjusting the corner radius of the mouse icons main shape

Шаг 3

Создайте левую кнопку из прямоугольника 22 х 20 пикселей, который окрасим в цвет #BAC0CE, и затем выровняйте его по верхнему левому углу большой фигуры.  

creating and positioning the main shape for the mouse icons left button

Шаг 4

Создайте контур для мыши толщиной 8 пикселей (#2B3249) при помощи метода Обводки, расположив его на двух фигурах заливки (щелчок правой кнопкой > Монтаж > Переложить вперёд).  

adding the outline to the mouse icons main shape

Шаг 5

Добавьте ограничивающую линию нижней кнопки из Обводки шириной 44 пикселя и толщиной 8 пикселей (#2B3249), которую мы выровняем по центру фигуры мыши и расположим на расстоянии 12 пикселей от верхнего края контура.  

creating and positioning the main shape for the mouse icons bottom button delimiter

Шаг 6

Завершите создание иконки, добавив вертикальную линию с Обводкой высотой 36 пикселей и толщиной 8 пикселей (#2B3249), разделяющую две кнопки. Когда будет готово, сгруппируйте (Control-G) все составляющие фигуры мыши, проделав то же самое с разделами иконки.  

finishing off the mouse icon

8. Как создать иконку с клавиатурой

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

Шаг 1

Создайте квадрат 14 х 14 пикселей (#FFFFFF) для первой клавиши верхнего ряда с контуром толщиной 8 пикселей (#2B3249), который мы сгруппируем (Control-G) и поместим ближе к верхнему левому углу повторяющейся фигуры на расстоянии 6 пикселей от большого контура.  

creating and positioning the main shapes for the keyboard icons first key

Шаг 2

Создайте оставшиеся клавиши верхнего ряда, выделив только что созданную клавишу и перетащив её вправо, удерживая Alt (для создания копии) и Shift (для перетаскивания по прямой), чтобы создать первый образец. 

Убедитесь, что контур копии перекрывает оригинал, а затем четыре раза нажмите Control-D, после чего повторится последнее действие и создадутся оставшиеся копии, а затем сгруппируйте (Control-G) все кнопки ряда. 

adding the remaining keys to the keyboard icons top row

Шаг 3

Создайте второй ряд клавиш, использовав тот же метод Alt-Shift-Перетаскивание, но в этот раз повторите процесс, сдвигая мышь вниз, пока копия не перекроет контур оригинала. 

adding the keyboard icons second row of keys

Шаг 4

Для первой клавиши третьего ряда создайте прямоугольник 20 х 14 пикселей (#FFFFFF) с контуром толщиной 8 пикселей (#2B3249), а затем сгруппируйте (Control-G) и расположите под фигурами из предыдущего шага, выровняв по их левому краю.  

creating and positioning the main shapes for the keyboard icons third row key

Шаг 5

Создайте пробел из прямоугольника 44 х 14 пикселей (#FFFFFF) с контуром толщиной 8 пикселей (#2B3249), а затем сгруппируйте (Control-G) и поместите на правой стороне только что созданной кнопки.  

creating and positioning the main shapes for the keyboard icons spacebar

Шаг 6

Добавьте последнюю кнопку третьего ряда при помощи копии (Control-C > Control-F) первой кнопки, которую мы поместим на противоположной стороне от пробела. Когда будет готово, сгруппируйте (Control-G) все фигуры ряда, а после этого сгруппируйте все кнопки.  

finishing off the keyboard icons third row of keys

Шаг 7

Создайте сенсорную панель из прямоугольника 28 х 20 пикселей (#BAC0CE) с контуром толщиной 8 пикселей (#2B3249), которую мы сгруппируем (Control-G) и затем выровняем по центру нижней области клавиатуры, расположив на расстоянии 12 пикселей от маленьких кнопок, которые мы только что сгруппировали.  

creating and positioning the main shapes for the keyboard icons trackpad

Шаг 8

Закончите создание иконок, добавив маленький сканер отпечатка пальцев из линии с Обводкой шириной 12 пикселей и толщиной 8 пикселей (#2B3249), который расположим в нижнем правом углу повторяющейся фигуры на расстоянии 20 пикселей от сканера. Когда будет готово, выделите и сгруппируйте все составляющие фигуры иконки, нажав комбинацию клавиш Control-G.

finishing off the keyboard icon

9. Как создать иконку MIDI-контроллера

Настала черёд четвёртой и последней иконки, поэтому перейдите на правый слой (пятый) и мы начнём! 

Шаг 1

Создайте первый из трёх ручек регулировки из круга 8 х 8 пикселей, который окрасим в цвет #2B3249 и расположим в верхнем левом углу повторяющейся фигуры на расстоянии 8 пикселей от левой стороны и 6 пикселей – от верхней.  

creating and positioning the main shape for the midi controller icons first adjustment knob

Шаг 2

Создайте оставшиеся ручки из двух кругов 8 х 8 пикселей (#2B3249), которые мы вертикально расположим на круге из предыдущего шага на расстоянии 6 пикселей друг от друга. Когда будет готово, не забудьте выделить и сгруппировать их, нажав комбинацию клавиш Control-G.

adding the remaining adjustment knobs to the midi controller icon

Шаг 3

Создайте регулятор громкости из прямоугольника 12 х 28 пикселей (#FFFFFF) с Обводкой толщиной 8 пикселей (#2B3249), поверх которого мы добавим линию индикатора состояния шириной 12 пикселей и толщиной 8 пикселей (#2B3249), которую поместим в нижнюю часть. Сгруппируйте (Control-G) все три фигуры и поместите их на правую сторону регулирующих ручек на расстоянии 8 пикселей.  

creating and positioning the main shapes for the midi controller icons volume slider

Шаг 4

Для маленьких кнопок крестовины создайте квадрат 14 х 14 пикселей (#BAC0CE) с контуром толщиной 8 пикселей (#2B3249), который мы сгруппируем (Control-G), а затем поместим на правую сторону регулятора громкости на расстоянии 14 пикселей.  

creating and positioning the main shapes for the midi controller icons first d pad button

Шаг 5

Завершите создание первого ряда крестовин, добавив две копии только что созданной фигуры, используя метод Alt-Shift-Перетасквание, а после выделите и сгруппируйте (Control-G) все три фигуры. 

adding the first row of d pads to the midi controller icon

Шаг 6

Создайте второй ряд крестовин из копии (Control-C > Control-F) только что созданной фигуры, которую мы расположим под ней, а затем выделите и сгруппируйте (Control-G) обе фигуры. 

adding the second row of d pads to the midi controller icon

Шаг 7

Создайте прямоугольник 16 х 44 пикселей (#FFFFFF) для клавиш управления с контуром толщиной 8 пикселей (#2B3249), а затем сгруппируйте (Control-G) и выровняйте по нижнему краю повторяющейся фигуры на расстоянии 8 пикселей от левого края. 

creating and positioning the main shapes for the midi controller icons first key

Шаг 8

Создайте оставшиеся клавиши из четырёх копий (Control-C > Control-F четыре раза) только что созданной фигуры, а затем распределите их по её правой стороне.  

adding the midi controller icons remaining keys

Шаг 9

Закончите создание клавиатуры и самой иконки, добавив прямоугольник 16 х 22 пикселей (#2B3249) в центр первых двух рядов клавиш, выделив и сгруппировав их. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры иконки.  

finishing off the midi controller icon

Отличная работа, мы закончили!

Приятное и лёгкое руководство по созданию своей компьютерной периферии при помощи некоторых простых фигур и инструментов подошло к концу. Надеюсь, у вас получилось следовать каждому шагу и, самое важное, вы научились чему-то новому. 

finished project preview

Автор: Andrei Stefan

kak sozdat set cirkovyh ikonok v adobe illustrator

Как создать сет цирковых иконок в Adobe Illustrator

web dizain neon instagram

Web-дизайн – Neon Instagram