Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Icon Design

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

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called 10 Years of Envato Tuts+!.
10 Mistakes New Artists Make and How You Can Avoid Them

Russian (Pусский) translation by Anastassiya Abramenko (you can also view the original English article)

Final product image
What You'll Be Creating

Сегодня вы узнаете, как создать набор из десяти топовых UI-иконок при помощи базовых фигур и инструментов, которые предлагает Illustrator.

Если вы ищете больше иконок в разных стилях, переходите на GraphicRiver.

Сделайте глоток свежезаваренного кофе, и мы приступим. 

1. Как настроить новый файл проекта

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

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

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

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

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

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

Шаг 1

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

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

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

Шаг 2

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

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

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

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

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

  • слой 1: координатные сетки 
  • слой 2: иконки
setting up the layers

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

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

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

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

Шаг 1

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

creating the reference grids main shape

Шаг 2

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

creative the active drawing areas main shape

Шаг 3

Выделите и сгруппируйте два квадрата при помощи комбинации клавиш Control-G, а затем создайте оставшиеся сетки из 19-ти копий (Control-C > Control-F), которые поместим на каждую пустую Монтажную область. Когда будет готово, заблокируйте текущий слой перед тем, как перейти к следующему разделу.  

adding the remaining reference grids

5. Как создать иконки навигации

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

Шаг 1

Создайте основную фигуру первой иконки из круга 48 х 48 пикселей, окрасьте его в цвет #DCEEFF и выровняйте по центру первой Монтажной области.   

creating and positioning the main shape for the back buttons main body

Шаг 2

Создайте контур при помощи метода Обводки, создав копию фигуры (Control-C), которую вставим на передний план (Control-F), изменим цвет на #629CF9 и поменяем Заливку с Обводкой(Shift-X).  Установите Толщину получившегося контура на 8 пикселей, выделив и сгруппировав все составляющие фигуры текущей секции, нажав Control-G.

adding the outline to the back buttons main body

Шаг 3

Начните работать над маленькой стрелкой влево, создав её фигуру из линии Обводки шириной 24 пикселя и толщиной 8 пикселей (#629CF9) со Скруглёнными концами, а затем выровняйте её по центру большой монтажной области.  

creating and positioning the main shape for the body of the back buttons arrow

Шаг 4

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

finishing off the back button

Шаг 5

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

creating and positioning the main shapes for the forward button

Шаг 6

Создайте иконку прокрутки вверх из копии (Control-C) предыдущей иконки, которую вставим (Control-F) на следующей монтажной области и повернём на -90 градусов при помощи Инструмента «Поворот» (щелчок правой кнопкой > Трансформировать > Поворот  >-90º).

creating and positioning the main shapes for the up button

Шаг 7

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

creating and positioning the main shapes for the down button

Шаг 8

Для кнопки обновления создайте круг 36 х 36 пикселей с Обводкой толщиной 8 пикселей (#629CF9), который выровняем по центру нижнего края активной области рисования. 

creating and positioning the main shape for the refresh buttons main body

Шаг 9

Откройте круг, удалив его верхнюю левую четверть, установив Концы получившегося контура на Скруглённые на панели Обводки.  

opening up the path of the refresh buttons main body

Шаг 10

Создайте кончик стрелки из прямоугольника 18 х 24 пикселей, окрасьте его в цвет #DCEEFF и расположите, как на картинке.  

creating and positioning the main shape for the refresh buttons arrow head

Шаг 11

Превратите прямоугольник в стрелку влево, добавив новую опорную точку в центре его левого края при помощи Инструмента «Добавить опорную точку» (+), а затем удалите внешние левые точки, нажав на них Инструментом «Удалить опорную точку» (-). 

adjusting the shape of the refresh buttons arrow head

Шаг 12

Завершите создание стрелки и самой иконки, создав для получившейся фигуры контур толщиной 8 пикселей (#629CF9) со Скруглённым стыком, выделив и сгруппировав (Control-G) обе фигуры, а после этого и всю иконку.  

finishing off the refresh button

6. Как создать иконки поиска и увеличения

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

Шаг 1

Создайте область лупы иконки поиска из круга 40 х 40 пикселей (#DCEEFF) с контуром толщиной 8 пикселей (#629CF9), сгруппируйте (Control-G) и выровняйте по верхнему левому углу активной области рисования.  

creating and positioning the main shapes for the search icons lens

Шаг 2

Нарисуйте область ручки из Обводки толщиной 8 пикселей (#629CF9) со Скруглёнными концами, как на картинке.  

adding the handle section to the search icons lens

Шаг 3

Укоротите длину ручки, выделив её верхнюю опорную точку Инструментом «Прямое выделение» (А) и затем перетащите её по диагонали вниз, удерживая Shift для создания прямой линии. Когда будет готово, выделите и сгруппируйте (Control-G) все составляющие фигуры перед тем, как перейти к следующей иконке.  

finishing off the search icon

Шаг 4

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

adding the plus sign to the zoom in buttons lens

Шаг 5

Добавьте иконку уменьшения из копии (Control-C) только что созданной иконки, вставьте (Control-F) на следующей монтажной области и дважды кликните на знаке плюса, чтобы его изолировать. Затем разгруппируйте (щелчок правой кнопкой > Разгруппировать) и удалите вертикальную линию Обводки.  

creating the zoom out button

7. Как создать иконки видимости

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

Шаг 1

Создайте эллипс 48 х 32 пикселей, окрасьте в цвет #DCEEFF и выровняйте по центру Монтажной области.  

creating and positioning the main shape for the toggle on visibility button

Шаг 2

Ухватите левую и правую опорные точки Инструментом «Опорная точка» (Shift-C) и превратите эллипс в фигуру, похожую на глаз.  

adjusting the shape of the toggle on visibility button

Шаг 3

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

adding the outline to the toggle on visibility button

Шаг 4

Добавьте область зрачка из круга 16 х 16 пикселей, окрасьте в цвет #629CF9 и выровняйте по центру двух фигур, которые мы только что сгруппировали.  

adding the pupil section to the toggle on visibility button

Шаг 5

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

finishing off the toggle on visibility button

Шаг 6

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

creating the toggle off visibility button

8. Как создать иконку совместного доступа к файлам

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

Шаг 1

Сначала создадим иконку загрузки, создав основные фигуры для коробки из прямоугольника 48 х 12 пикселей (#DCEEFF) с контуром толщиной 8 пикселей (#629CF9), который сгруппируем (Control-G) и выровняем по центру нижнего края активной области рисования.  

creating and positioning the main shapes for the upload buttons box section

Шаг 2

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

adding the side segments to the upload buttons box section

Шаг 3

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

finishing off the upload button

Шаг 4

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

creating the download button

9. Как создать кнопку информации

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

Шаг 1

Создайте основную фигуру иконки из круга 48 х 48 пикселей (#DCEEFF) с контуром толщиной 8 пикселей (#629CF9), затем сгруппируйте (Control-G) и выровняйте по центру 13-й монтажной области.  

creating and positioning the main shapes for the information prompt buttons main body

Шаг 2

Создайте маленькую точку восклицательного знака из круга 8 х 8 пикселей с цветом #629CF9  и затем выровняйте по центру больших фигур, расположив на расстоянии 4 пикселя от нижнего края контура.  

adding the little dot to the information prompt buttons main body

Шаг 3

Добавьте отрезок линии из Обводки высотой 12 пикселей и толщиной 8 пикселей (#629CF9), а затем расположите над точкой на расстоянии 4 пикселя. Выделите и сгруппируйте (Control-G) две фигуры, а после этого сгруппируйте всю иконку перед тем, как перейти к следующей.  

finishing off the information prompt button

10. Как создать иконку общего доступа

Общий доступ – это то, что делает Интернет отличным местом, поэтому я собираюсь поделиться с вами простым способом создания такой иконки. 

Шаг 1

Создайте основные части иконки из трёх кругов 16 х 16 пикселей (#DCEEFF) с контуром толщиной 8 пикселей (#629CF9), а затем по отдельности сгруппируйте (Control-G) и расположите, как на картинке.  

creating and positioning the main shapes for the share buttons main sections

Шаг 2

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

finishing off the sharing button

11. Как создать иконки переключения

Нам нравится включать и выключать что-нибудь, поэтому сейчас мы узнаем, как создать свои переключатели. 

Шаг 1

Начните создавать иконку с выключенным состоянием, создав основную фигуру из скруглённого прямоугольника 48 х 32 пикселей (#DCEEFF) с Угловым радиусом 16 пикселей и контуром толщиной 8 пикселей (#629CF9), затем сгруппируйте (Control-G) и выровняйте по центру следующей монтажной области.

creating and positioning the main shapes for the toggle off buttons main body

Шаг 2

Добавьте индикатор состояния из круга 16 х 16 пикселей с цветом #629CF9, затем выровняйте по центру больших фигур, расположив его на расстоянии 4 пикселя от левого края контура. Когда будет готово, выделите и сгруппируйте (Control-G) все три фигуры перед тем, как перейти к следующей иконке.  

finishing off the toggle off button

Шаг 3

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

creating the toggle on button

12. Как создать иконку меню «гамбургер»

Следующий объект из нашего списка стал универсальным символом. 

Шаг 1

Для центральной части меню создайте круг 8 х 8 пикселей, окрасьте его в цвет #629CF9 и выровняйте по центру левого края активной области рисования.  

creating the main circle for the menu buttons center section

Шаг 2

Добавьте перекладину из линии Обводки шириной 36 пикселей и толщиной 8 пикселей (#629CF9) со Скруглёнными концами, затем выровняйте по центру правой стороны активной области рисования. Когда контур будет на месте, выделите его и круг и сгруппируйте их вместе, нажав Control-G.

adding the bar segment to the menu buttons center section

Шаг 3

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

finishing off the burger menu button

13. Как создать иконку настроек

Мы все можем согласиться, что иконка настроек с шестерёнками или ползунками – нужная вещь в любом UI-наборе, т.к. мы любим вносить изменения, если вы понимаете, о чём я. 

Шаг 1

Создайте ползунки иконки из трёх линий Обводки шириной 48 пикселей и толщиной 8 пикселей (#629CF9) со Скруглёнными концами, которые расположим по вертикали на расстоянии 16 пикселей друг от друга, выровняв их по центру пустой монтажной области.  

creating and positioning the main shapes for the settings buttons bar segments

Шаг 2

Добавьте ручки регулировки из трёх кругов 12 х 12 пикселей (#DCEEFF) с контуром толщиной 8 пикселей (#629CF9), затем по отдельности сгруппируйте (Control-G) и расположите на ползунках, как показано на рисунке. Когда будет готово, не забудьте выделить и сгруппировать (Control-G) все составляющие фигуры иконки перед тем, как перейти к следующей.  

finishing off the settings button

14. Как создать иконки лайков

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

Шаг 1

Начните работать над верхней областью кнопки лайка, создав круг 28 х 28 пикселей, затем окрасьте его в цвет #DCEEFF и расположите на расстоянии 8 пикселей от верхнего края активной области рисования и 4 пикселя – от левого края. 

creating and positioning the main shape for the like buttons upper body

Шаг 2

Создайте ещё один круг 28 х 28 пикселей (#DCEEFF), затем расположите его на противоположной стороне активной области рисования, сохранив одинаковые промежутки. Когда обе фигуры будут на месте, выделите и объедините их в один большой объект при помощи Режима объединения фигур на панели Обработки контуров.  

uniting the composing shapes of the like buttons upper body into a single larger shape

Шаг 3

Включите режим Предпросмотра пикселей (Alt-Shift-Y), выделите и удалите нижнюю половину получившейся фигуры, а затем привяжите верхнюю центральную опорную точку к Пиксельной сетке. 

adjusting the shape of the like buttons upper body

Шаг 4

Возьмите Инструмент «Перо» (Р) и нарисуйте нижнюю фигуру сердца, сгладив боковые опорные точки при помощи функции «Преобразовать выделенные опорные точки в плавную линию». Выделите и переместите некоторые точки указателей, как показано на картинке, отключив режим Предпросмотра пикселей (Alt-Control-Y) перед тем, как перейти к следующему шагу.  

adjusting the shape of the like buttons lower body

Шаг 5

Создайте контур получившейся фигуры толщиной 8 пикселей (#629CF9) со Скруглёнными стыками, выделите и сгруппируйте (Control-G) две фигуры перед тем, как перейти к следующей.  

finishing off the like button

Шаг 6

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

creating the dislike button

Отличная работа! Наш маленький набор UI-иконок готов!

Как обычно, надеюсь, что вам понравилось это пошаговое руководство, и вы узнали что-то новое и полезное! 

finished project preview
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.