Как нарисовать иконоки для Apple Watch в Иллюстраторе

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

Шаг 1. Направляющие для создания иконок Apple Watch

Иконки для Apple Watch созданы в модном плоском стиле, подобно иконкам для iOS на последних моделях iPhone, iPad и других устройств Apple. Важно отметить, что все иконки круглой формы, поэтому нам понадобится сетка в форме круга в качестве основы для создания иконок. Вы можете скачать замечательный векторный шаблон иконки (в папке Source), чтобы упростить задачу.

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

Шаг 2. Создание иконок «Часы», «Mail», «Музыка».

Откройте один из шаблонов иконки (в этом уроке использован шаблон иконки 80 х 80 пикселей для часов 38 миллиметров). Перейдите в меню Просмотр > Спрятать сетку - View > Hide Grid (Ctrl + "), чтобы скрыть сетку, если она отвелкает вам. Но убедитесь, что активированы «Быстрые» направляющие (Smart Guides) и Выравнивание (Snapping) – вы можете найти эти функции в том же меню.

Шаг 3. Создание иконок «Часы», «Mail», «Музыка».

Начнем создавать первую иконку «Часы». Создайте круг 4 х 4 пикселя и разместите его по центру шаблона, для этого дважды кликните по Инструменту Эллипс - Ellipse Tool (L), чтобы появилось всплывающее окно с настройками. Затем перейдите на панель Выравнивание (Align) и установите Горизонтальное и Вертикальное выравнивание по центру монтажной области (align horizontally and vertically on the Artboard). В качестве заливки установите оранжевый (#FF9506).

Шаг 4. Создание иконок «Часы», «Mail», «Музыка».

Используйте Инструмент Прямоугольник - Rectangle Tool (M), чтобы создать секундную стрелку наших часов размером 2 x 4 пикселей, с заливкой такого же оранжевого цвета. Разместите фигуру по центральной направляющей, как показано на рисунке:

Шаг 5. Создание иконок «Часы», «Mail», «Музыка».

Вы также можете Выровнять стрелку По ключевому объекту (Align to the Key Object), кликнув на кружок, удерживая клавишу Alt.

Шаг 6. Создание иконок «Часы», «Mail», «Музыка».

Скопируйте стрелку (Ctrl + C > Ctrl + V), сделайте ее короче и поверните под углом -60 градусов: для этого при выделенной стрелке нажмите правую кнопку мыши и в меню перейдите Трансформирование > Поворот (Transform > Rotate). Затем разместите по направляющей, как показано ниже:

Шаг 7. Создание иконок «Часы», «Mail», «Музыка».

Теперь мы создадим минутную стрелку. Создайте черный прямоугольник 4 х 30 пикселей и используйте функцию Динамические углы (Live Corners), чтобы скруглить углы прямоугольника с помощью маленьких круглых маркеров – возьмите Инструмент Прямое выделение - Direct Selection Tool (А) и скруглите углы по-максимуму (в данном случае радиус скругления 2 пикселя).

Шаг 8. Создание иконок «Часы», «Mail», «Музыка».

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

Шаг 9. Создание иконок «Часы», «Mail», «Музыка».

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

Шаг 10. Создание иконок «Часы», «Mail», «Музыка».

Теперь создайте белый круг размером 80 х 80 пикселей, используя Инструмент Эллипс - Ellipse Tool (L) и поместите его снизу всех других объектов. Отлично! Наша первая иконка готова; перейдем к следующей.

Шаг 11. Создание иконок «Часы», «Mail», «Музыка».

Теперь создадим иконку «Mail», для этого надо будет нарисовать конверт. Для начала, создайте прямоугольник 50 х 33 пикселя любого цвета.

Шаг 12. Создание иконок «Часы», «Mail», «Музыка».

Далее используя Инструмент Многоугольник (Polygon Tool) с тремя сторонами (настроить количество сторон можно кликнув левой кнопкой мыши в любом месте холста при выбранном инструменте) или Инструмент Перо - Pen Tool (P) создайте треугольник с обводкой в 2 пункта. Затем перейдите в меню Объект > Разобрать (Object > Expand), чтобы преобразовать треугольник в кривые: отметьте галочки Заливка (Fill), Обводка (Stroke).

Шаг 13. Создание иконок «Часы», «Mail», «Музыка».

Далее создайте еще один треугольник для верхней части конверта, скруглите нижний угол фигуры и также выберите в меню Объект > Разобрать (Object > Expand). Сейчас вы можете стереть верхнюю и нижнюю линии треугольников с помощью Инструмента Ластик - Eraser Tool (Shift + E), так как они больше нам не нужны.

Шаг 14. Создание иконок «Часы», «Mail», «Музыка».

Удалите верхнюю часть нижнего треугольника с помощью Инструмента Ластик - Eraser Tool (Shift + E), затем выделите обе фигуры и нажмите иконку Соединение (Unite) на панели Обработка контуров (Pathfinder). Далее сделайте копию основы конверта (Ctrl + C > Ctrl + F), выберите обе фигуры: прямоугольник и верхнюю фигуру, затем нажмите на иконку Пересечение (Intersect) на панели Обработка контуров (Pathfinder), чтобы обрезать ненужные части, выходящие за границу конверта.

Шаг 15. Создание иконок «Часы», «Mail», «Музыка».

Выделите прямоугольник и полоски снова и нажмите иконку Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder). Цветом заливки конверта выберите белый и создайте круглую форму, которая будет основой иконки. Залейте фигуру линейным градиентом (Инструмент Градиент - Gradient Tool (G), Тип (Type): Линейный (Linear) от темно-голубого (#2066F0) сверху до светло-голубого (#1DD4FD) снизу.

Шаг 16. Создание иконок «Часы», «Mail», «Музыка».

Нашей следующей иконкой будет приложение «Музыка», которая состоит из одного элемента: музыкальной ноты. Начните создание ноты с прямоугольника 27 х 11 пикселей. Далее с помощью Инструмента Прямое выделение - Direct Selection Tool (А) выделите все узлы с левой стороны прямоугольника и сместите их вниз, в итоге вы получите скошенный прямоугольник.

Шаг 17. Создание иконок «Часы», «Mail», «Музыка».

Используйте Инструмент Прямоугольник - Rectangle Tool (M), чтобы создать еще два прямоугольника: 1) 3 х 20 пикселей; 2) 14 х 11 пикселей – это будет «ножка» ноты.

Шаг 18. Создание иконок «Часы», «Mail», «Музыка».

Далее с помощью Инструмента Прямое выделение - Direct Selection Tool (А) выделите три опорные точки нижней фигуры, как показано на рисунке и сгруглите их. Затем выделите обе фигуры и на панели Обработка контуров (Pathfinder) кликните иконку Соединение (Unite), затем скруглите внутренний угол, соединяющий фигуры, используя функцию Динамические углы (Live Corners).

Шаг 19. Создание иконок «Часы», «Mail», «Музыка».

Скопируйте «ножку» ноты и разместите ее, как показано ниже. Затем скруглите углы верхнего прямоугольника, чтобы сделать фигуру в целом более сглаженной. Завершите создание иконки, сделав круглую основу и залив ее линейным градиентом (Инструмент Градиент - Gradient Tool (G), Тип (Type): Линейный (Linear) от оранжевого (#FA5D3B) вверху до розового (#FF2968) внизу.

Шаг 20. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Теперь переходим к иконкам, связанным со временем, которые созданы в едином стиле. Начнем с создания круга размером 48 х 48 пикселей, и еще одного, меньшего круга внутри. Далее используйте функцию Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder), чтобы получилось кольцо.

Шаг 21. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Создайте внутри кольца овал и две пересекающиеся линии, выровненные по центру.

Шаг 22. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Затем добавьте линию в верхней части фигуры и изогните ее с помощью функции Эффект > Деформация > Арка (Effects > Warp > Arch) и примените следующие настройки:

- выберите пункт По горизонтали (Horizontal)

- Изгиб (Bend): -35%

Раздел Искажение

- По горизонтали (Horizontal): 0%

- По вертикали (Vertical): 0%

Шаг 23. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Создайте еще одну изогнутую линию для нижней части нашей иконки, затем выделите все части глобуса и в меню выберите Объект > Разобрать (Object > Expand). Затем создайте круглую основу иконки и залейте ее градиентом от темно-оранжевого (#ff7632) внизу к светло-оранжевому (#ff9408) вверху. Добавьте еще один круг в размер глобуса оранжевого цвета (#e45221) и разместите его ниже самого глобуса, чтобы придать иконке больше контраста.

Шаг 24. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Для следующей иконки – Секундомер – мы используем основу от предыдущей иконки. Создайте белый кружок 8 х 8 пикселей в центр, затем создайте прямоугольник 2 х 25 пикселей (он будет служить секундной стрелкой) и выровняйте его по центру.

Шаг 25. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Используйте Инструмент Прямоугольник - Rectangle Tool (M), чтобы добавить мелкие детали нашему «Секундомеру». Далее скруглите углы кнопки секундомера с помощью функции Динамические углы (Live Corners), установив значение Радиус скругления (Corner radius) в 1,4 пикселя.

Шаг 26. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Теперь будем делать иконку «Таймер» - используем ту же основу, что и для секундомера.
Создайте прямоугольник размером 2,5 х 13 пикселей и разместите его в верхней центральной части кольца. Затем возьмите Инструмент Многоугольник (Polygon Tool) с количеством сторон (Sides) 3 или используйте Инструмент Перо - Pen Tool (P), чтобы нарисовать треугольник. Разместите его так, как показано на рисунке:

Шаг 27. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Выделите основное белое кольцо и треугольник и затем кликните по иконке Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder), чтобы вырезать левую часть кольца. Далее добавьте маленький кружок 6 х 6 пикселей по центру иконки.

Шаг 28. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Теперь поверните кружок на 45 градусов, далее с помощью Инструмента Прямое выделение - Direct Selection Tool (А) выделите левую верхнюю точку и потяните его влево-вверх (см. рисунок). Затем при выделенной точке нажмите иконку Преобразовать выделенные опорные точки к точкам преломления (Convert selected anchor points to corner) на верней панели настроек. Таким образом мы получили стрелку таймера.

Шаг 29. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Наша последняя иконка, связанная со временем, - «Будильник». Она имеет такую же основу, как и предыдущие, так что основу мы оставляем. Стрелки часов – это два прямоугольника - создайте их с помощью Инструмента Прямоугольник - Rectangle Tool (M).

Шаг 30. Создание иконок Мировое время, Секундомер, Таймер и Будильник.

Теперь сделаем верхнюю часть будильника. Создайте круг с помощью Инструмента Эллипс - Ellipse Tool (L) и затем разделите его на две равные части, выбрав Инструмент Ножницы - Scissors Tool (C) и кликнув по средней левой и правой точке круга. Поверните нижнюю часть на 180 градусов (проще всего повернуть фигуру подведя курсор к крайним точкам до появления значка поворота – затем повернуть фигуру). Когда закончите, разместите части наверху будильника и добавьте маленькие «ножки» в нижней части, чтобы завершить создание иконки.

Шаг 31. Создание иконок приложений «Карты», «Погода», «Камера»

Иконка «Карты» довольно простая и не содержит много элементов. Итак, создайте круг 40 х 40 пикселей в центре, залейте его голубым цветом (#087eff).  Затем создайте треугольник (как было описано в предыдущих шагах) размером 17 х 25 пикселей.

Шаг 32. Создание иконок приложений «Карты», «Погода», «Камера»

Создайте бежевую (#e5decb) основу иконки. Затем перейдите в меню Объект > Контур > Добавить опорные точки (Object > Path > Add Anchor Points) и после этого выделите среднюю точку в основании треугольника, используя Инструмент Прямое выделение - Direct Selection Tool (А) и сдвиньте ее вверх, как вы можете видеть на рисунке ниже:

Шаг 33. Создание иконок приложений «Карты», «Погода», «Камера»

Создайте широкую вертикальную полосу, пересекающую всю иконку, размером 26 х 83,5 пикселей, скопируйте эту фигуру, разместите перпендикулярно первой, уменьшите наполовину, затем предварительно выделив обе фигуры, кликните на иконку Соединение (Unite) на панели Обработка контуров (Pathfinder). Разместите полученную фигуру под голубым кругом. Затем выделите эту фигуру вместе с основой иконки и нажмите иконку Разделение (Divide). Таким образом у вас получится 3 разные части основы. Разгруппируйте фигуры, кликнув правой кнопкой мыши и выбрав пункт Разгруппировать (Ungroup)

Шаг 34. Создание иконок приложений «Карты», «Погода», «Камера»

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

Шаг 35. Создание иконок приложений «Карты», «Погода», «Камера»

Теперь приступим к созданию иконки «Погода». Залейте основу линейным градиентом от темно-синего (#2066f0) вверху до светло-голубого (#1dd4fd) внизу. В левой части создайте кружок 27 х 27 пикселей и залейте его желтым линейным градиентом от цвета #ffc505 к цвету #fee403. Этот кружок будет «солнцем». Далее создаем облака: сделайте два кружка: один диаметром 25,5 пикселей и второй диаметром 21 пиксель. Разместите круги, как показано на рисунке.

Шаг 36. Создание иконок приложений «Карты», «Погода», «Камера»

Создайте прямоугольник 43 х 16 пикселей и скруглите углы, задав значение Радиус скругления (Corner radius) 8 пикселей. Выровняйте прямоугольник с кругами, как вы видите на рисунке. Затем выделите оба круга и прямоугольник и кликните на иконку Соединение (Unite) на панели Обработка контуров (Pathfinder) – вот у вас и получилось отличное гладкое облако.

Шаг 37. Создание иконок приложений «Карты», «Погода», «Камера»

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

Шаг 38. Создание иконок приложений «Карты», «Погода», «Камера»

Итак, теперь будем делать иконку «Камера». Создайте основу - круг с заливкой линейным градиентом от темно-серого (#8e9196) внизу до светло-серого (#dadcdd) вверху. Затем создайте прямоугольник примерно 62 х 41 пикселей, залейте его серым (#3c3c3c) цветом и скруглите углы. Создайте еще один прямоугольник 30 x 17 пикселей, разместите его в правом верхней части от первого (см. рисунок), затем скруглите его левый верхний угол с Радиусом скругления (Corner radius) 7 пикселей. Далее нажмите иконку Соединение (Unite) на панели Обработка контуров (Pathfinder) и потом скруглите угол между двумя фигурами.

Шаг 39. Создание иконок приложений «Карты», «Погода», «Камера»

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

Шаг 40. Создание иконок приложений «Карты», «Погода», «Камера»

Создайте кнопку из прямоугольника 9 х 4 пикселя со скругленными верхними углами и разместите ее по центру шаблона. Далее используйте Инструмент Перо - Pen Tool (P), чтобы создать стрелку, указывающую на кнопку. Установите толщину обводки (Stroke Weight) в 4 пункта и сделайте концы (cap) и углы (corner) обводки скругленными на панели Обводка (Stroke) панель можно вызвать, кликнув на надпись Обводка (Stroke) сверху.

Шаг 41. Создание иконок приложений «Карты», «Погода», «Камера»

Последние детали: создайте ярко-желтый (#fac81b) кружок 6 х 6 пикселей. Затем создайте круг 37,5 х 37,5 пикселей без заливки, с толщиной обводки (Stroke Weight) в 4 пункта. Разместите маленький и большой круги, как показано на рисунке:

Шаг 42. Создание иконок приложений «Карты», «Погода», «Камера»

Выделите большой круг и перейдите в меню Объект > Разобрать (Object > Expand), преобразовав его в кольцо. Затем выделите кольцо и основу камеры и нажмите Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder). Далее выделите все серые части камеры и объедините их в одну фигуру, нажав Ctrl + 8.

Шаг 43. Создание иконок приложений «Карты», «Погода», «Камера»

В заключение используйте Инструмент Создание фигур - Shape Builder Tool (Shift + M), зажмите клавишу Alt и удалите ненужные части камеры, которые выступают за основу иконки. 

Шаг 44. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Теперь делаем трубку для иконки «Телефон». Создайте прямоугольник 8 х 40 пикселей и примените Эффект > Деформация > Арка (Effects > Warp > Arch) с такими настройками:

- выберите пункт По вертикали (Vertical)

- Изгиб (Bend): 27%

Раздел Искажение

- По горизонтали (Horizontal): 0%

- По вертикали (Vertical): 12%

Затем создайте два прямоугольника 17 х 20 пикселей в верхней и нижнее частях трубки, скруглите углы. Далее выделите все части трубки и нажмите иконку Соединение (Unite) на панели Обработка контуров (Pathfinder).

Шаг 45. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Сгладьте левую часть трубки, удалив ненужные опорные точки, используя Инструмент Перо- Delete Anchor Point Tool (-) и затем сгладьте внутренние углы используя функцию Динамические углы (Live Corners). Поверните трубку на 45 градусов и разместите поверх основы, залитой линейным градиентом от светло-зеленого (#86fb71) к темно-зеленому (#0fd51c).

Шаг 46. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Далее приступаем к иконке «Сообщение». Основу оставляем, как и в предыдущей иконке. Создайте белый овал размером 48 х 40 пикселей. Добавьте маленький треугольник в нижней части белой фигуры, чтобы получилось диалоговое облачко. Нижний угол треугольника немного скруглите, потом немного изогните треугольник, используя Эффект > Деформация > Арка (Effects > Warp > Arch):

- выберите пункт По вертикали (Vertical):

- Изгиб (Bend): -36%

Шаг 47. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Вот так выглядит готовая иконка.

Шаг 48. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Следующая иконка «Пульт», она очень проста и состоит из одного элемента. Для начала залейте основу линейным градиентом от темно-синего #2066f0 внизу к светло-голубому #1dd4fd вверху. Добавьте белую обводку толщиной 5,3 пункта и в настройках обводки отметьте Обводка внутри линии (Align Stroke to Inside). Создайте белый треугольник 30 х 30 пикселей и разместите его по центру иконки.

Шаг 49. Создание иконок приложений «Телефон», «Сообщения», «Пульт»

Наконец, скруглите углы треугольника с Радиусом скругления (Corner radius) 2.5. Отлично! Иконка готова, идем дальше.

Шаг 50. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

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

Возьмите Инструмент Перо - Pen Tool (P) и создайте отдельные линии для рук, ног и тела с толщиной обводки (Stroke Weight) в 3 пункта и в настройках обводки выставьте концы (cap) и углы (corner) на скругленные. Увеличьте толщину обводки «тела» до 6 пунктов. Создайте «голову» - круг 9 х 9 пикселей.

Шаг 51. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

Выделите все линии и перейдите в меню Объект > Разобрать (Object > Expand), затем залейте все фигуры черным цветом.

Шаг 52. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

Иконка «Настройки» представляет собой шестеренку. Создайте основу шестерни – кольцо 48 х 48 пикселей. Добавьте три линии с толщиной обводки (Stroke Weight) 3 пункта, соединяющиеся в центре шаблона.

Шаг 53. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

Теперь нужно добавить зубцы. Создайте прямоугольник 5 х 9 пикселей и чуть уменьшите его верхнюю часть (это можно сделать подвинув точки с помощью инструмента Прямое выделение - Direct Selection Tool (А), затем скруглите верхние углы с помощью функции Динамические углы (Live Corners) с Радиусом скругления (Corner radius) 1,6. Поместите зубцы в верхней и нижней частях основы (см. рисунок).
Теперь выделите обе фигуры, дважды клините по Инструменту Поворот - Rotate Tool (R), в открывшемся окне введите в поле Поворот – Угол (Rotate – Angle) 360/18, так Adobe Illustrator автоматически высчитает значение для 18 фигур. Нажмите кнопку Копировать (Copy).

Шаг 54. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

Нажмите Ctrl + D несколько раз, чтобы повторить предыдущее действие и добавить больше элементов. Затем выделите все зубцы, выберите цвет заливки белый и поверните все элементы на -10 градусов.

Шаг 55. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

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

Шаг 56. Создание иконок приложений «Тренировка», «Настройки» и «Фото»

Нажмите Ctrl + D еще несколько раз, пока не получите цветок с 8 лепестками. Переключите Режим наложения (Blending Mode) всех лепестков на Умножение (Multiply) и уменьшите Непрозрачность (Opacity) до 80%. Теперь применим каждому лепестку свой цвет, начиная с верхнего среднего и двигаясь по часовой стрелке: оранжевый (#fa9700), желтый (#f0e22c), зеленый (#b5d558), бирюзовый (#6ec19d), синий (#71b5e1), фиолетовый (#8f60c3), розовый (#d782a4) и красный (#ff2c2c).

Сделайте белую основу для цветка.

Шаг 57. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Иконка «Акции» представляет собой минималистичную диаграмму. Начнем с создания ярко-голубой (#02a6f5) вертикальной линии толщиной 3 пункта – для этого используйте Инструмент Отрезок линии - Line Segment Tool (\). Разместите линию в середине шаблона, на темной (#3f3f3f) основе иконки.

Далее создайте маленький голубой кружок в центре шаблона, примените к нему обводку (Stroke) темно-серого (#3f3f3f) толщиной в 1 пункт. Добавьте еще 4 линии с обводкой светло-серого (#555555) цвета толщиной 3 пункта по обеим сторонам иконки.

Выделите все линии, перейдите в меню Объект > Разобрать (Object > Expand), затем удалите ненужные части линий, используя Инструмент Создание фигур - Shape Builder Tool (Shift + M).

Шаг 58. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Далее, используя Инструмент Перо - Pen Tool (P), создайте зигзагообразную линию с толщиной обводки в 1,5 пункта. Перейдите в меню Объект > Разобрать (Object > Expand) и также удалите выступающие за край иконки линии.

Шаг 59. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Иконка «Активность» более сложна, но и интересна. Она состоит из трех разноцветных кругов с градиентной заливкой.
Создайте два прямоугольника 6 х 7 пикселей: один розового (#ff2b91) цвета, другой – красного (#f1281e). Выделите оба прямоугольника и перейдите в меню Объект > Переход > Создать - Object > Blend > Make (Alt + Ctrl + В). Вы можете откорректировать настройки в меню Объект > Переход > Параметры перехода (Object > Blend > Blend Options) выбрав опцию Оптимальные цвета (Smooth Color), чтобы получить бесшовный переход. Перетяните полученный переход на палитру Кисти (Brush) и в окошке отметьте Объектная кисть (Art Brush), настройки оставьте по умолчанию.

Шаг 60. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Создайте темно-серый (#393839) круг в качестве основы иконки и поместите еще один круг внутри, применив нашу кисть, как Обводку (Stroke). Откорректируйте размер круга так, чтобы он ровно вписывался в размер шаблона иконки. Установите толщину обводки (Stroke Weight) 1 пункт, затем перейдите в меню Объект > Разобрать оформление (Object > Expand Appearance), чтобы преобразовать обводку в объект. Поверните и/или отразите объект с помощью Инструмента Зеркальное отражение - Reflect Tool (O) горизонтально, если нужно, чтобы розовая сторона круга была справа, а красная – слева.

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

Шаг 61. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Теперь нам нужно добавить глубины, сделав тень. Как вы могли заметить, кольцо стало разделенным на части, после операции Разобрать оформление (Expand Appearance). Выберите верхний красный кусочек кольца, скопируйте и поместите на передний план (Ctrl + C > Ctrl + F), залейте копию линейным градиентом от темно-красного (#a11b17) к белому и измените режим наложения на Умножение (Multiply) – это сделает белую часть градиента невидимой.

Шаг 62. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

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

Шаг 63. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Следующая иконка – «Passbook», которая состоит из четырех маленьких пиктограмм: кредитная карта, самолет, видеокамера и чашка кофе. Эти пиктограммы минималистичны и могут быть сделаны с помощью панели Обработка контуров (Pathfinder) и функции Динамические углы (Live Corners). Ниже вы можете видеть процесс создания пиктограмм пошагово: как комбинировать фигуры каждой пиктограммы.

Шаг 64. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

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

Шаг 65. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

Создайте круг 3,5 х 3,5 пикселя, пересекающий верхнюю часть оранжевой полосы, затем скопируйте кружок, удерживая клавиши Alt и Shift, и перетянув его вправо. Нажмите Ctrl + D несколько раз, чтобы сделать еще больше кружков. Затем выделите все копии и Образуйте составной контур - Make Compound Path (Ctrl + 8). Выделите кружки и оранжевую полосу и нажмите иконку Минус верхний (Minus Front) на панели Обработка контуров (Pathfinder).

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

Шаг 66. Создание иконок «Акции», «Активность», «Passbook» и «Календарь»

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

Шаг 67. Финальное изображение

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

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