1. Design & Illustration
  2. Vector

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

by
Read Time:19 minsLanguages:

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

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

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

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

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

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

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

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

Шаг 1

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

open the 38 mm 80 px icon templateopen the 38 mm 80 px icon templateopen the 38 mm 80 px icon template

Шаг 2

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

place a 4x4 px even circle in the centre of the templateplace a 4x4 px even circle in the centre of the templateplace a 4x4 px even circle in the centre of the template

Шаг 3

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

add a second hand with the rectangle tooladd a second hand with the rectangle tooladd a second hand with the rectangle tool

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

align to the key objectalign to the key objectalign to the key object

Шаг 4

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

add the base for the minute handadd the base for the minute handadd the base for the minute hand

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

Шаг 5

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

place the hand along the guide lineplace the hand along the guide lineplace the hand along the guide line

Шаг 6

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

create the hour handcreate the hour handcreate the hour hand

Шаг 7

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

create the circle icon basecreate the circle icon basecreate the circle icon base

Шаг 8

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

make the rectangle envelope basemake the rectangle envelope basemake the rectangle envelope base

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

add a triangle and expand itadd a triangle and expand itadd a triangle and expand it

Шаг 9

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

add another triangle at the topadd another triangle at the topadd another triangle at the top

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

cut off the unneeded shapes with intersect cut off the unneeded shapes with intersect cut off the unneeded shapes with intersect

Шаг 10

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

finish the mail iconfinish the mail iconfinish the mail icon

Шаг 11

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

form the rectangle top of the noteform the rectangle top of the noteform the rectangle top of the note

Шаг 12

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

Add details to the note with the rectanglesAdd details to the note with the rectanglesAdd details to the note with the rectangles

Шаг 13

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

unite the shapes and make the corners roundedunite the shapes and make the corners roundedunite the shapes and make the corners rounded

Шаг 14

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

make the overall shape more smooth and add the icon basemake the overall shape more smooth and add the icon basemake the overall shape more smooth and add the icon base

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

Шаг 1

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

form the base with Minus Front functionform the base with Minus Front functionform the base with Minus Front function

Шаг 2

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

create a ring inside the base of the globecreate a ring inside the base of the globecreate a ring inside the base of the globe

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

use Arc Warp Effect to bend the lineuse Arc Warp Effect to bend the lineuse Arc Warp Effect to bend the line

Шаг 3

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

make the orange base for the globe iconmake the orange base for the globe iconmake the orange base for the globe icon

Шаг 4

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

form the second hand of the stopwatchform the second hand of the stopwatchform the second hand of the stopwatch

Шаг 5

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

add minor details and make the button roundedadd minor details and make the button roundedadd minor details and make the button rounded

Шаг 6

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

add a triangle on top of the timer icon baseadd a triangle on top of the timer icon baseadd a triangle on top of the timer icon base

Шаг 7

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

cut out the unneeded part of the timer iconcut out the unneeded part of the timer iconcut out the unneeded part of the timer icon

Шаг 8

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

form the second hand of the timer iconform the second hand of the timer iconform the second hand of the timer icon

Шаг 9

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

form the hands of the clockform the hands of the clockform the hands of the clock

Шаг 10

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

add details to the top of the alarmadd details to the top of the alarmadd details to the top of the alarm

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

Шаг 1

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

form the center of the Maps iconform the center of the Maps iconform the center of the Maps icon

Шаг 2

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

move the anchor point of the arrow to make its bottom pointedmove the anchor point of the arrow to make its bottom pointedmove the anchor point of the arrow to make its bottom pointed

Шаг 3

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

add stripes to the icon baseadd stripes to the icon baseadd stripes to the icon base

Шаг 4

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

color the parts of the iconcolor the parts of the iconcolor the parts of the icon

Шаг 5

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

make a sun and start forming the cloud for the weather iconmake a sun and start forming the cloud for the weather iconmake a sun and start forming the cloud for the weather icon

Шаг 6

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

add the bottom part of the cloud with the rectangle tooladd the bottom part of the cloud with the rectangle tooladd the bottom part of the cloud with the rectangle tool

Шаг 7

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

make the cloud white and semi-transparentmake the cloud white and semi-transparentmake the cloud white and semi-transparent

Шаг 8

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

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

form the camera base from the rounded rectangleform the camera base from the rounded rectangleform the camera base from the rounded rectangle

Шаг 9

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

use Minus Front to make a dividing stripeuse Minus Front to make a dividing stripeuse Minus Front to make a dividing stripe

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

Form the shutter iconForm the shutter iconForm the shutter icon

Шаг 10

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

Add the final details to our cameraAdd the final details to our cameraAdd the final details to our camera

Шаг 11

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

cut out the object-glass in the camera cut out the object-glass in the camera cut out the object-glass in the camera

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

cut off the unneeded parts to finish up with the iconcut off the unneeded parts to finish up with the iconcut off the unneeded parts to finish up with the icon

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

Шаг 1

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

form the handset baseform the handset baseform the handset base

Шаг 2

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

edit the handset outlinesedit the handset outlinesedit the handset outlines

Шаг 3

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

form a speech bubble from the ellipse and triangleform a speech bubble from the ellipse and triangleform a speech bubble from the ellipse and triangle

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

message iconmessage iconmessage icon

Шаг 4

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

form the base and triangle shape form the base and triangle shape form the base and triangle shape

Шаг 5

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

make the corners of the triangle roundedmake the corners of the triangle roundedmake the corners of the triangle rounded

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

Шаг 1

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

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

create separate lines with the pen toolcreate separate lines with the pen toolcreate separate lines with the pen tool

Шаг 2

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

fill the shapes with black colorfill the shapes with black colorfill the shapes with black color

Шаг 3

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

form the cog baseform the cog baseform the cog base

Шаг 4

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

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

add the ripples to our cogadd the ripples to our cogadd the ripples to our cog

Шаг 5

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

rotate the objects and fill them with whiterotate the objects and fill them with whiterotate the objects and fill them with white

Шаг 6

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

forming the petal from a rectangleforming the petal from a rectangleforming the petal from a rectangle

Шаг 7

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

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

from the 8 petal flower and color itfrom the 8 petal flower and color itfrom the 8 petal flower and color it

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

Шаг 1

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

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

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

form the lines of the diagramform the lines of the diagramform the lines of the diagram

Шаг 2

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

add a zigzagged line for the graphicadd a zigzagged line for the graphicadd a zigzagged line for the graphic

Шаг 3

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

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

create the art brush from the blend groupcreate the art brush from the blend groupcreate the art brush from the blend group

Шаг 4

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

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

apply the brush and expand the shapeapply the brush and expand the shapeapply the brush and expand the shape

Шаг 5

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

add shadow to the ringadd shadow to the ringadd shadow to the ring

Шаг 6

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

create more art brushes from blendscreate more art brushes from blendscreate more art brushes from blends

Шаг 7

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

create pictograms from basic shapescreate pictograms from basic shapescreate pictograms from basic shapes

Шаг 8

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

create a striped icon basecreate a striped icon basecreate a striped icon base

Шаг 9

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

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

add perforation to the orange stripe and place the pictogramsadd perforation to the orange stripe and place the pictogramsadd perforation to the orange stripe and place the pictograms

Шаг 10

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

calendar icon with fontcalendar icon with fontcalendar icon with font

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

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

Final resultFinal resultFinal result
One subscription.
Unlimited Downloads.
Get unlimited downloads