Как создать 10 простых иконок и их вариации в Adobe Illustrator
Russian (Pусский) translation by Anastassiya Abramenko (you can also view the original English article)



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



1. Как настроить новый файл проекта
Откройте Illustrator и настройте Новый документ (Файл > Новый или Control-N), применив следующие параметры:
- Количество монтажных областей: 20
- Расстояние: 20 пикселей
- Ширина: 64 пикселей
- Высота: 64 пикселей
- Единицы измерения: пиксели
Во вкладке с Расширенными настройками:
- Цветовой режим: RGB
- Растровые эффекты: осветление (72 точек на дюйм)
- Режим предпросмотра: по умолчанию



2. Как настроить пользовательскую сетку
Хотя сегодня мы не будем работать с иконками, мы создадим иллюстрацию в точных пикселях, поэтому давайте настроим небольшую сетку, чтобы можно было полностью контролировать наши фигуры.
Шаг 1
Перейдите в Редактировать > Установки > Направляющие и сетка и задайте следующие параметры:
- Сетка через каждые: 1 пиксель
- Разделы: 1



Подсказка: вы можете узнать больше о сетках, почитав это детальное руководство о том, как работает система сеток Illustrator.
Шаг 2
Когда настроите пользовательскую сетку, для чёткости фигур нужно активировать функция Привязки к сетке и Привязки к пикселям под меню Вид, которые трансформируются в Привязку к пикселям всякий раз при входе в Режим предпросмотра пикселей (если вы используете старую версию Illustrator).
Если вы не знакомы с работой с точными пикселями, я очень рекомендую почитать моё руководство по созданию рисунка с точными пикселями, которое быстро расширит ваши технические навыки.
3. Как настроить слои
В новом созданном документе нужно структурировать проект, создав несколько слоёв, чтобы отделить координатную сетку от самих иконок. Если вы знакомы с моими предыдущими руководствами, то заметите, что в этом мы применим немного другой подход, т.к. проект будет создан на Монтажных областях, а не Слоях из-за большого количества иконок.
Откройте панель Слоёв и создайте два слоя, которые назовём следующим образом:
- слой 1: координатные сетки
- слой 2: иконки



4. Как создать координатные сетки
Координатные (или базовые) сетки – это набор точно ограниченных координатных поверхностей, которые позволяют нам создавать наши иконки, исходя из их размера и однородности.
Обычно размер сеток определяет размер самих иконок, и этот момент нужно учитывать в первую очередь в начале нового проекта, т.к. начинать всегда будем с самого маленького размера и далее.
В нашем случае мы собираемся создать набор иконок одного размера, а точнее 64 х 64 пикселей, что соответствует среднему размеру.
Шаг 1
Перейдите на
нужный слой (первый) и Инструментом «Прямоугольник» (М) создайте оранжевый (#F15A24
) квадрат 64
х 64 пикселей, который выровняем по центру первой Монтажной области и
используем для определения общего размера наших иконок.



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



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



5. Как создать иконки навигации
Если вы успешно создали маленькие координатные сетки, перейдите на следующий слой (второй) и создайте первую группу иконок, которая поможет нам лучше ориентироваться.
Шаг 1
Создайте основную
фигуру первой иконки из круга 48 х 48 пикселей, окрасьте его в цвет #DCEEFF
и выровняйте по центру первой Монтажной области.



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



7. Как создать иконки видимости
Переходим к третьей группе иконок, поэтому перейдите на следующую Монтажную область (девятую), и мы начнём.
Шаг 1
Создайте эллипс
48 х 32 пикселей, окрасьте в цвет #DCEEFF
и
выровняйте по центру Монтажной области.



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



12. Как создать иконку меню «гамбургер»
Следующий объект из нашего списка стал универсальным символом.
Шаг 1
Для центральной
части меню создайте круг 8 х 8 пикселей, окрасьте его в цвет #629CF9
и выровняйте по центру левого края активной области рисования.



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



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



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



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



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



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



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



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



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



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



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



Unlimited Downloads.
