Создаём набор иконок для часов Apple в Adobe Illustrator

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

1. Стандарты для иконок часов Apple

Иконки часов Apple созданы в модном плоском стиле, очень похожем на иконки  iOS в iPhone, iPad и других продуктах Apple.  Но здесь есть отличительная черта – иконки круглые. В этом руководстве мы используем круглую сетку для создания единой основы каждой иконки.   Вы можете скачать хороший векторный образец иконки, чтобы было проще работать. 

Если вы заинтересованы в более подробной теории создания образцов для часов Apple Watch, я настоятельно рекомендую почитать о Стандартах и спецификациях интерфейса часов Apple.

Также взгляните на эти полезные описательные статьи «Создание иконок для Apple" и «Иконки для часов Apple – подробное руководство», где люди делятся своими бесплатными образцами и знаниями по созданию самодельных иконок. 

Пора начать создавать иконки для часов Apple!  Если вы хотите, чтобы ваши иконки были один в один строго до пикселя похожими на оригинальные иконки часов Apple, можете найти пример главного меню часов Apple в картинках Google.  Поместите образец (Файл > Поместить) на монтажную область и рисуйте свои иконки поверх него, сохраняя нужные размеры и пропорции.  Либо просто следуйте этому руководству, которое не является инструкцией по созданию точных копий оригинальных иконок. 

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

Шаг 1

Откройте один из образцов иконок (в этом руководстве будем использовать образец 80 х 80 пикселей для часов 38 мм).  Перейдите в Вид > Спрятать сетку, чтобы сетка стала невидимой, если она вас отвлекает, но убедитесь, что активированы Быстрые направляющие и Прилипание  (можете найти их в том же меню), чтобы было проще работать. 

Шаг 2

Давайте начнём создавать нашу первую иконку для приложения времени, поместив ровный круг 4 х 4 пикселя в центре образца.  Дважды кликните на Инструменте «Эллипс» (L) для вызова окна с настройками и перейдите на панель Выравнивания, чтобы выровнять круг по горизонтали и вертикали на монтажной области.  Заполните круг оранжевым цветом (#FF9506).

Шаг 3

Используйте Инструмент «Прямоугольник» (М) для создания второй стрелки наших часов 2 х 40 пикселей, заполнив её таким же оранжевым цветом и поместив вдоль центральной Направляющей линии, как показано на снимке экрана. 

Можете выровнять стрелку по отношению к Ключевому объекту, кликнув на круге, удерживая клавишу Alt. 

Шаг 4

Давайте скопируем вторую стрелку, сделав её короче и повернув на -60 градусов, поместив её вдоль Направляющей, как показано ниже. 

Теперь сформируем минутную стрелку.  Создайте чёрный прямоугольник 4 х 30 пикселей и примените функцию Живые углы, чтобы сделать оба конца скруглёнными, сдвинув маленькие круглые маркеры Инструментом «Прямое выделение» (А) на максимум (в нашем случае – радиус угла 2 пикселя).

Шаг 5

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

Шаг 6

Создайте ещё один прямоугольник размером 4 х 20 пикселей для часовой стрелки.  Сделайте его закруглённым, поверните на 60 градусов и поместите его на противоположной стороне от минутной стрелки. 

Шаг 7

Наконец, создайте белый эллипс 80 х 80 пикселей Инструментом «Эллипс» (L) для основы иконки и поместите его под все другие объекты.  Отлично!  Наша первая иконка готова, перейдём к следующей. 

Шаг 8

Теперь создадим иконку почты. Сформируйте конверт, создав прямоугольник любого цвета размером 50 х 33 пикселей. 

Добавьте треугольник с Обводкой 2 либо используйте Инструмент «Многоугольник» с 3 сторонами или Инструмент «Перо» (Р).  Разберите треугольник (Объект > Разобрать), чтобы превратить его в кривые. 

Шаг 9

Добавьте ещё один треугольник в верхней части основы конверта, сделав его нижний угол закруглённым, и растяните фигуру.  Можете стереть верхнюю и нижнюю части треугольников Инструментом «Ластик» (Shift-E), т.к. они нам не понадобятся.

Удалите верхнюю часть нижнего треугольника Ластиком (Shift-E) и Объедините обе части треугольников на панели Обработки контуров. Наконец, создайте копию базовой фигуры конверта (Control-C > Control-F), выделите прямоугольник и верхнюю фигуру и используйте функцию Пересечения на панели Обработки контуров для отсечения частей за пределами конверта. 

Шаг 10

Выделите прямоугольник и полоски и примените функцию «Вычитание переднего» на панели Обработки контуров для отсечения линий.  Измените цвет конверта на белый и добавьте круглую основу нашей иконки, заполнив её линейным градиентом от тёмно-синего (#2066F0) сверху до светло-синего (#1DD4FD) снизу.

Шаг 11

Наша следующая иконка будет для приложения музыки, и она состоит из одного элемента – знака музыкальной ноты.  Сформируйте ноту при помощи прямоугольника 27 х 11 пикселей. Выделите опорные точки на левой стороне фигуры Инструментом «Прямое выделение» (А) и перетащите их вниз, чтобы сделать фигуру изогнутой. 

Шаг 12

Используйте Инструмент «Прямоугольник» (М) для создания ещё двух фигур и начните формировать «ногу» ноты. 

Шаг 13

Выделите три опорных точки нижнего квадрата Инструментом «Прямое выделение» (А) и сделайте их закруглёнными.  Затем Объедините фигуры на панели Обработки контуров и сделайте угол между фигурами также скруглённым при помощи функции «Живые углы». 

Шаг 14

Добавьте вторую часть ноты и сделайте всю фигуру более плавной и закруглённой.  Завершите создание иконки, сформировав базу, заполненную линейным градиентом от оранжевого (#FA5D3B) до розового (#FF2968).

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

Шаг 1

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

Шаг 2

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

Добавьте горизонтальную линию в верхнюю часть фигуры и согните её при помощи команды Эффект > Деформация > Дуга.  Установите значение Горизонтального сгиба на -35%. 

Шаг 3

Добавьте ещё одну согнутую линию в нижнюю часть нашего глобуса и завершите эту иконку, растянув фигуру глобуса и сформировав градиентную основу с тёмно-оранжевым дном (#ff7632) и светло-оранжевым верхом (#ff9408).  Добавьте маленький круг тёмно-оранжевого цвета (#e45221) и спрячьте его за фигурой глобуса, создав больше контраста. 

Шаг 4

Для нашей следующей иконки секундомера мы используем основу иконки мировых часов, которую создали в предыдущем шаге. Сформируйте центр секундомера, создав эллипс 8 х 8 пикселей, выровненный с прямоугольником 2 х 25 пикселей для второй секундной стрелки часов. 

Шаг 5

Используйте Инструмент «Прямоугольник» (М) для добавления второстепенных деталей в верхней части нашего секундомера.  Сделайте кнопку секундомера более закруглённой при помощи Живых углов и установив радиус угла на 1.4 пикселя. 

Шаг 6

Перейдём к иконке таймера – у него такая же основа как у иконки секундомера. Сформируйте полосу 2.5 х 13 пикселей в центральной верхней части кольца Инструментом «Прямоугольник» (М).  Затем возьмите Инструмент «Прямоугольник», установив количество Сторон на 3, или используйте Инструмент «Перо» (Р) для создания треугольника.  Поместите его как показано на снимке экрана ниже, будто бы это кусок пирога. 

Шаг 7

Выделите базовое белое кольцо и фигуру треугольника и используйте функцию «Вычитание переднего» для вырезания левой части кольца.  Добавьте маленький круг 6 х 6 пикселей в центре нашей иконки. 

Шаг 8

Наконец, поверните круг, чтобы его верхняя опорная точка была на 45 градусов влево.  Перетащите опорную точку Инструментом «Прямое выделение» (А), растянув фигуру.  Преобразуйте выделенную опорную точку в угол либо при помощи кнопки «Преобразовать» на верхней панели управления или кликнув Инструментом «Опорная точка» (Shift-C), превратив нашу фигуру в стрелку часов.

Шаг 9

Наша последняя иконка в этом наборе – будильник. У него такая же основа с белым кольцом, как у предыдущих оранжевых иконок.  Стрелки часов сформированы двумя узкими полосками, сделанными Инструментом «Прямоугольник» (М). 

Шаг 10

Давайте сформируем верхнюю часть будильника, создав ровный круг Инструментом «Эллипс» (L) и разделив его на две равные части, кликнув на боковых опорных точках Инструментом «Ножницы» (С).  Поместите половинки на верх будильника и добавьте две маленьких «ноги» в нижней части для завершения иконки.

4. Создаём иконки карты, погоды и камеры 

Шаг 1

Иконка карты достаточно простая и содержит не так много элементов.  Начните с формирования её центра при помощи круга 40 х 40 пикселей синего (#087eff) цвета.  Создайте компасную стрелку из треугольника 17 х 25 пикселей, указывающую наверх. 

Шаг 2

Добавьте бежевую (#e5decb) основу иконки.  Перейдите в Объект > Контур > Добавить опорные точки и выделите опорную точку в середине в нижней части и слегка подвиньте её, сформировав наконечник.  

Шаг 3

Поместите широкую вертикальную полоску, сделанную из 26 х 83.5 пиксельного треугольника, поперёк иконки и объедините её с другой широкой полосой, расположив её перпендикулярно. Спрячьте скрещённую фигуру позади синего круга со стрелкой.  Выделите базу иконки и скрещённые полоски и используйте функцию «Разделить» на панели Обработки контуров для разделения фигуры на три части.

Шаг 4

Заполните части основы иконки зелёным (#78c73d) и светло-розовым (#fbc7d2) цветами.

Шаг 5

Давайте перейдём к иконке погоды. Заполните базовую фигуру неба линейным градиентом от тёмно-синего (#2066f0) наверху до светло-синего (#1dd4fd) внизу.  Добавьте жёлтый круг (линейный градиент от #ffc505 до #fee40) для солнца в левой части иконки.  Начните формировать облака при помощи двух кругов: круг 25.5 х 25.5 пикселей в центре образца и круг 21 х 21 пиксель ближе к правой части иконки. 

Шаг 6

Создайте прямоугольник 43 х 16 пикселей и сделайте его углы скруглёнными с радиусом 8 пикселей.  Выровняйте прямоугольник с кругами и Объедините все три фигуры на панели Обработки контуров для создания плавного, округлого облака. 

Шаг 7

Заполните облако белым цветом и сделайте его полупрозрачным, снизив Непрозрачность до 90%. 

Шаг 8

Перейдём к иконке камеры.  Создайте серый базовый круг, заполненный линейным градиентом от тёмно-серого (#8e9196) в нижней части до светло-серого (#dadcdd) в верхней части и начните формировать силуэт камеры от тёмно-серого (#3c3c3c) скруглённого прямоугольника.

Сверху добавьте маленький прямоугольник 30 х 17 пикселей и сделайте его верхний левый угол скруглённым с угловым радиусом 7 пикселей.  Объедините фигуры и сделайте угол между фигурами также скруглённым. 

Шаг 9

Добавьте узкую полоску в верхней части камеры и используйте функцию «Вычитание переднего», чтобы вырезать её. 

Сформируйте иконку затвора из прямоугольника 9 х 4 пикселей и поместите её в центре нашего образца.  Используйте Инструмент «Перо», чтобы добавить стрелку, указывающую вниз на затвор.  Установите Толщину обводки на 4 и сделайте углы и угол линии скруглёнными на панели Обводки. 

Шаг 10

Добавьте нашей камере финальные детали: сформируйте ярко-жёлтый (#fac81b) индикатор размером 6 х 6 пикселей.  Далее создайте большой круг с Толщиной обводки 4.  Поместите круг в нижний правый угол камеры, как показано на снимке экрана.  

Шаг 11

Разберите большой круг (Объект > Разобрать оформление), превратив его в кольцо.  Выделите кольцо и камеру и примените «Вычитание переднего», чтобы вырезать кольцо, обозначающее объектив.  Затем выделите все тёмно-серые части камеры и превратите их в единую составную фигуру, нажав Control-8.

Используйте Инструмент «Создание фигур» (Shift-M) или функцию «Пересечение» на панели Обработки контуров для отсечения ненужных деталей камеры за пределами основы иконки.  

5. Создаём иконки телефона, сообщений и удалённого приложения

Шаг 1

Давайте создадим телефонную трубку для иконки телефона.  Создайте прямоугольник 8 х 40 пикселей и примените Эффект деформации «Дуга» со значением Вертикального сгиба 27%, чтобы наклонить прямоугольник влево.  Добавьте два прямоугольника 17 х 20 пикселей в верхней и нижней частях трубки и сделайте их углы скруглёнными для плавности форм.  Объедините все части трубки на панели Обработки контуров.

Шаг 2

Сделайте плавной левую сторону трубки, удалив ненужные опорные точки Инструментом «Удалить опорную точку» (-), и скруглите внутренние углы при помощи функции «Живые углы».  Поверните трубку на 45 градусов и поместите её поверх основы иконки, заполнив линейным градиентом от светло-зелёного (#86fb71) до тёмно-зелёного (#0fd51c).

Шаг 3

Давайте сформируем иконку сообщений на такой же зелёной основе, которую мы создали ранее.  Создайте белый круг 40 х 40 пикселей и слегка растяните его в стороны, сжав фигуру до 48 х 40 пикселей.  Добавьте маленький треугольник в нижней части белой фигуры, сформировав диалоговый пузырь.  Сделайте нижний угол треугольника слегка закруглённым.  Используйте Эффект деформации «Арка» со значением Вертикального сгиба -36%, чтобы сделать треугольник слегка выгнутым. 

Вот как выглядит завершённая иконка. 

Шаг 4

Наша следующая иконка – иконка удалённого приложения, также очень простая и состоящая из одного элемента.  Для начала сформируйте градиентную основу (от тёмно-синего #2066f0 в нижней части до светло-синего #1dd4fd) в верхней.  Добавьте белую обводку с Толщиной 5.3 и Расположите её внутри. Поместите белый треугольник 30 х 30 пикселей в центре нашей иконки.  

Шаг 5

Сделайте углы треугольника скруглёнными с Угловым радиусом 2.5.  Отлично! Иконка готова, двигаемся дальше. 

6. Создаём иконки тренировки, настроек и фотоприложения 

Шаг 1

На иконке тренировки изображён стилизованный силуэт бегущего человека.  Создайте яркую основу иконки, заполненную линейным градиентом от желтовато-зелёного (#c2ec38) наверху и зелёного внизу (#a3fc3f).

Возьмите Инструмент «Перо» (Р) и создайте отдельные линии для согнутых рук, ног и туловища с Толщиной обводки 3 и скруглёнными углами.  Увеличьте Толщину обводки линии туловища до 6 и добавьте круг 9 х 9 пикселей для головы. 

Шаг 2

Разберите линии (Объект > Разобрать) и заполните их фигурами чёрного цвета. 

Шаг 3

Иконка настроек состоит из шестерёнки.  Сформируйте её основу из круга 48 х 48 пикселей с вырезанным центром, чтобы получилось кольцо.  Добавьте три линии с Толщиной обводки 3, соединённые в центре иконки. 

Шаг 4

Теперь нужно добавить зазубрины. Сформируйте прямоугольник 5 х 9 пикселей и сделайте его верхнюю часть слегка уже.  Сделайте его верхние углы скруглёнными с Угловым радиусом 1.6.  Поместите зазубрины на верхнюю и нижнюю части основы шестерни. 

Давайте используем Инструмент «Поворот» (R) для добавления дополнительных элементов.  Выделите обе зазубрины, дважды кликните на Инструменте «Поворот» (R) для вызова окна с настройками и установите значение Поворота на 360/18.  Таким образом, Adobe Illustrator автоматически рассчитает нужное значение для 18 фигур.  Нажмите на кнопку «Копировать».  

Шаг 5

Несколько раз нажмите  Control-D для повторения последнего действия, добавляя больше элементов.  Чтобы закончить эту иконку, выделите все зазубрины, измените цвет заливки на белый и Поверните их все на -10 градусов. 

Шаг 6

Наша следующая иконка – это стилизованный цветок для фотоприложения.  Начните с формирования лепестка из прямоугольника 20 х 30 пикселей и сделайте его углы скруглёнными с Угловым радиусом 10 пикселей.  Скопируйте лепесток и поместите его копию в нижнюю часть образца иконки, как показано на снимке экрана ниже.  Выделите оба лепестка и при помощи Инструмента «Поворот» (R) сделайте ещё восемь копий лепестков, применив значение Угла 360/8 и нажав кнопку «Копировать». 

Шаг 7

Несколько раз нажмите Control-D для формирования цветка с восемью лепестками.  Настройте Режим наложения лепестков на «Умножение» и снизьте Непрозрачность на 80%.  Давайте применим подходящий цвет к каждому лепестку, начав с верхнего среднего лепестка и двигаясь по часовой стрелке: оранжевый (#fa9700), жёлтый (#f0e22c), зелёный (#b5d558), бирюзовый (#6ec19d), синий (#71b5e1), фиолетовый (#8f60c3), розовый (#d782a4) и красный (#ff2c2c).

Расположите цветок поверх белой основы иконки. 

7. Создаём иконки накопителя, визуального интерфейса, расчетной книжки и календаря 

Шаг 1

Иконка накопителя состоит из минималистичной диаграммы.  Начните формировать диаграмму, создав ярко-голубую (#02a6f5) вертикальную линию размером 3 при помощи Инструмента «Линия» (\).  Поместите её в середине нашего образца на тёмной (#3f3f3f) основе иконки.

Добавьте маленький синий круг поверх середины образца и примените тёмно-серую (#3f3f3f) Обводку размером 1 для визуального отделения от линии.  Добавьте ещё четыре линии на обеих сторонах иконки со светло-серой (#555555) Обводкой размером 3. 

Разберите линии (Объект > Разобрать) и отсеките ненужные части за пределами иконки либо при помощи Инструмента «Создание фигур»  (Shift-M), либо при помощи панели Обработки контуров.

Шаг 2

Закончите создание иконки, добавив зигзагообразную линию с Обводкой 1.5 для графика при помощи Пера (Р).  Растяните линию и вместите её в иконку. 

Шаг 3

Иконка визуального интерфейса более сложная и интересная в создании. Она состоит из трёх цветных градиентных кругов.  Для формирования такого круга для начала нам нужно создать Переходную группу. 

Создайте два равных прямоугольника 6 х 7 пикселей розового (#ff2b91) и красного (#f1281e) цветов.  Выделите прямоугольники и перейдите в Объект > Переход > Создать.  Можете изменить настройки, перейдя в Объект > Переход >  Параметры перехода, применив Сглаженный цветовой переход для создания гладкого перехода.  Перетащите созданную переходную группу на панель Кистей и создайте новую Объектную кисть с настройками по умолчанию. 

Шаг 4

Создайте тёмно-серую (#393839) основу круга для нашей иконки и поместите поверх неё другой круг, применив нашу кисть как Обводку.  Настройте размер круга, чтобы он подходил под размеры внешнего края иконки.  Установите Толщину обводки на 1 и разберите оформление (Объект > Разобрать оформление) для превращения мазка кисти в фигуру.  Поверните или отразите фигуру по горизонтали при помощи Инструмента «Зеркальное отражение» (О), чтобы у нас была розовая сторона круга слева и красная – справа.

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

Шаг 5

Теперь нам нужно добавить объёма кольцу, сформировав мягкую тень.  Как вы можете заметить, кольцо стало разделённым на несколько частей после того, как мы его расширили. Это именно то, что нужно!  Выделите верхнюю красную часть кольца, скопируйте её и Вставьте на передний план (Control-C > Control-F).  Заполните копию линейным градиентом от тёмно-красного (#a11b17) до белого и настройте Режим наложения на «Умножение», сделав белый кончик градиента невидимым. 

Шаг 6

Используйте ту же технику для создания ещё двух цветных колец внутри первой фигуры.  Создайте объектные кисти из жёлтой (#d8ff06) и зелёной (#86e402) переходной группы и из бирюзового (#06ffaa) и синего (#06e3f9) перехода. Завершите создание иконки, добавив круги и применив мягкие тени. 

Шаг 7

Следующей будет иконка расчётной книжки, которая состоит из четырёх маленьких пиктограмм: кредитной карты, самолёта, кинокамеры и кофейной чашки.  Эти пиктограммы минималистичны и сделаны из базовых фигур при помощи панели Обработки контуров и функции Живых углов.  Ниже вы можете увидеть пошаговую картинку о том, как объединить фигуры каждой пиктограммы. 

Шаг 8

Основа иконки состоит из четырёх полос разных цветов: красного (#ff4e46), синего  (#439eca), зелёного (#3dca36) и оранжевого (#ffa02b), каждая из них высотой 20 пикселей.  Создайте стандартную основу круга 80 х 80 пикселей для нашей иконки и удалите ненужные части полосок при помощи Инструмента «Создание фигур»  (Shift-M), выделив все объекты и нажимая на ненужных частях, удерживая клавишу Alt.  

Шаг 9

Сформируйте ровный круг 3.5. х 3.5 пикселей, пересекающий верхнюю часть оранжевой полоски, и скопируйте его на правую сторону, удерживая клавиши Alt и Shift и перетаскивая фигуру. Несколько раз нажмите Control-D для создания дополнительных копий круга.  Затем выделите все копии и превратите их в  составной контур, нажав Control-8.  Выделите круги и оранжевую полоску и примените функцию «Вычитание переднего», чтобы вырезать отверстия, сделав полоску продырявленной. 

Разместите пиктограммы, созданные ранее, и выровняйте их по центру нашей иконки. 

Шаг 10

Последняя иконка в нашем наборе – календарь.  Она состоит из текста со шрифтом Helvetica Neue и простой белой основы.

Отличная работа!  Иконки главного меню часов Apple готовы!

Это была времязатратная, но увлекательная задача!  Мы создали 20 иконок для приложений главного экрана при помощи базовых фигур, эффекта деформации и нескольких приёмов и эффектов.  Надеюсь, вам понравилось это руководство, и вы открыли для себя полезные техники.  Удачи в творчестве!