Advertisement
  1. Design & Illustration
  2. Vector
Design

Create a Set of Apple Watch Icons in Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:
Final product image
What You'll Be Creating

In this tutorial we’ll create a set of flat icons for Apple Watch that can be found on the original Apple Watch Home Screen menu by default. We’ll be using basic shapes and Warp Effects as well as some more complicated methods of making a trendy user interface design. Let’s get started!

1. Apple Watch Icon Guidelines

Apple Watch icons are designed in a trendy flat style very similar to the iOS icons, which can be found in the latest iOS on iPhone, iPad or other Apple devices. Yet there is a noticeable specific feature: the icons are round. In this tutorial we’ll be using a round grid to create a single base for every icon. You can download a very nice icon template in vector to make it easier to work with.

If you are interested in more in-depth theory on icon creation for Apple Watch, I would strongly recommend that you run through the official Apple Watch Human Interface Guidelines and Specifications

Also check these very useful and descriptive articles "Creating Icons for the Apple Watch" and "Icons for Apple Watch – The Definitive Guide", where people share their free templates and knowledge on creating custom icons.

Now its time to move on and create the Apple Watch icons! If you want your icons to be more pixel-perfect and true to life, like the original Apple Watch icons, you can find a sample image of the Apple Watch Home Screen in Google Images. File > Place it onto your Artboard and use it as a template, drawing your icons on top of it, preserving the desired sizes and proportions. Otherwise, just follow this tutorial as an inspirational guide, not as a strict instruction on creating exact copies of the original icons.

2. Create the Time, Mail and Music App Icons

Step 1

Start by opening one of the icon templates (for this tutorial we’ll be using the 80 x 80 px icon template for 38 mm watch). Go to View > Hide Grid to make the grid invisible if it distracts you, but be sure that you have the Smart Guides and Snapping enabled (you can find them in the same menu) to make it easier to work with.

open the 38 mm 80 px icon template

Step 2

Let’s start creating our first icon for the Time app by placing a 4 x 4 px even circle in the centre of the template. Double-click the Ellipse Tool (L) to call the pop-up options window, and then head to the Align panel to align the circle horizontally and vertically on the Artboard. Fill the circle with orange (#FF9506).

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

Step 3

Use the Rectangle Tool (M) to create a 2 x 40 px second hand of our clock, filled with the same orange color, and place it along the central Guide line, as shown in the screenshot.

add a second hand with the rectangle tool

You can align the hand to the Key Object, by clicking the circle while holding down the Alt key.

align to the key object

Step 4

Let’s copy the second hand, make it shorter and rotate it to -60 degrees, placing it along the Guide, as shown below.

add the base for the minute hand

Now we’ll form the body of the minute hand. Make a black 4 x 30 px rectangle and use the Live Corners feature to make both ends rounded by pulling the small circle markers with the Direct Selection Tool (A) to their maximum (2 px corner radius in our case).

Step 5

Place the hand on the proper place along the guide line (you can make it a bit smaller, so that it fits the inner circle of the icon base).

place the hand along the guide line

Step 6

Create another rectangle of 4 x 20 px size for the hour hand. Make it rounded, rotate to 60 degrees and place it on the opposite side from the minute hand.

create the hour hand

Step 7

Finally, create an 80 x 80 px white ellipse with the Ellipse Tool (L) for the icon base and place it beneath all other objects. Great! Our first icon is ready; let’s move to the next one.

create the circle icon base

Step 8

Now we’ll create the Mail icon. Start forming the envelope by making a 50 x 33 px rectangle of any color.

make the rectangle envelope base

Add a triangle with 2 pt Stroke either using a Polygon Tool with 3 Sides value or with the Pen Tool (P). Object > Expand the triangle to turn it into curves.

add a triangle and expand it

Step 9

Add another triangle on the upper side of the envelope base, make its lower corner rounded, and expand the shape. You can erase the top and bottom parts of the rectangles with the Eraser Tool (Shift-E), as we won’t need them.

add another triangle at the top

Delete the top part of the lower triangle with the Eraser Tool (Shift-E) and Unite both parts of the triangles in Pathfinder. Finally, make a copy of the basic envelope shape (Control-C > Control-F), select both the rectangle and the top shape, and use the Intersect function of Pathfinder to cut off the parts outside the envelope.

cut off the unneeded shapes with intersect

Step 10

Select the rectangle and the stripes again and apply the Minus Front function of Pathfinder to cut out the lines. Switch the color of the envelope to white and add a circle base for our icon, filling it with linear gradient from darker blue (#2066F0) on top to lighter blue (#1DD4FD) in the bottom.

finish the mail icon

Step 11

Our next icon is for the Music app, which consists of the only element: a music note sign. Start forming the note with a 27 x 11 px rectangle. Select the anchor points on the left side of the shape with the Direct Selection Tool (A) and drag them down to make the shape skewed.

form the rectangle top of the note

Step 12

Use the Rectangle Tool (M) to create two more shapes and start forming the “leg” of the note.

Add details to the note with the rectangles

Step 13

Select three anchor points of the lower square with the Direct Selection Tool (A) and make them rounded. Then Unite the shapes in Pathfinder and make the corner between the shapes rounded as well, using the Live Corners feature.

unite the shapes and make the corners rounded

Step 14

Add the second part of the note and make the overall shape more smooth and rounded. Finish up with the icon by making the base, filled with linear gradient from orange (#FA5D3B) to pink (#FF2968).

make the overall shape more smooth and add the icon base

3. Render the World Clock, Stopwatch, Timer and Alarm Icons

Step 1

Now we’re moving to a set of icons connected with time, and all created in a single style. Start by forming a 48 x 48 px even circle, and a smaller circle inside. Use the Minus Front function of Pathfinder to create a ring.

form the base with Minus Front function

Step 2

Create a smaller, elliptical ring inside the first shape and add two crossed lines, aligned to the centre.

create a ring inside the base of the globe

Add a horizontal line in the upper part of the shape and bend it with the help of Effect > Warp > Arc. Set the Horizontal Bend value to -35%.

use Arc Warp Effect to bend the line

Step 3

Add another bent line in the bottom part of our globe and finish up with this icon by expanding the globe shape and forming a gradient base with dark-orange bottom (#ff7632) and light-orange top (#ff9408). Add a smaller circle of darker orange color (#e45221) and hide it behind the globe shape, giving it more contrast.

make the orange base for the globe icon

Step 4

For our next icon—the Stopwatch—we’ll use the base from the World Clock icon that we’ve created previously. Form the center of the stopwatch by making a 8 x 8 px ellipse, aligned with a 2 x 25 px rectangle for the watch's second-hand.

form the second hand of the stopwatch

Step 5

Use the Rectangle Tool (M) to add minor details to the top of our stopwatch. Make the button of the stopwatch more rounded, using the Live Corners and setting the corner radius to 1.4 px.

add minor details and make the button rounded

Step 6

Let’s move on to the Timer icon—it has the same base as the Stopwatch icon. Form a 2.5 x 13 px stripe in the center top part of the ring with the Rectangle Tool (M). Then grab the Polygon Tool, setting the Sides quantity to 3, or use the Pen Tool (P) to form a triangle. Place it as show on a screenshot below, as if it's a slice of a pie.

add a triangle on top of the timer icon base

Step 7

Select both the basic white ring and the triangle shape and use the Minus Front function to cut out the left part of the ring. Add a small 6 x 6 px circle in the center of our icon.

cut out the unneeded part of the timer icon

Step 8

Finally, rotate the circle so that its upper anchor point is about 45 degrees to the left. Drag the anchor point with the Direct Selection Tool (A), extending the shape. Convert selected anchor point to corner either with the help of the Convert button in the upper control panel or by clicking it with the Anchor Point Tool (Shift-C), thus turning our shape into the hand of a watch.

form the second hand of the timer icon

Step 9

Our last icon in this set is the Alarm. It has the same base with the white ring as previous orange icons. The hands of the clock are formed with two narrow stripes made with the Rectangle Tool (M).

form the hands of the clock

Step 10

Let’s form the upper part of the alarm clock by making an even circle with the Ellipse Tool (L) and dividing it into two equal parts by clicking the side anchor points with the Scissors Tool (C). Place the halves on top of the alarm, and add two small “legs” in the bottom to finish up the icon.

add details to the top of the alarm

4. Create the Maps, Weather and Camera App Icons

Step 1

The Maps icon is rather simple and contains not so many elements. Start by forming its center with a 40 x 40 px circle of a blue (#087eff) color. Form a compass arrow from a 17 x 25 px triangle, heading up.

form the center of the Maps icon

Step 2

Add a beige (#e5decb) icon base. Go to Object > Path > Add Anchor Points and select the anchor point in the middle on the bottom side and pull it up a bit, forming the arrowhead.

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

Step 3

Place a wide vertical stripe, made with a 26 x 83.5 px rectangle, across the icon, and unite it with another wide stripe, placing it perpendicular. Hide the crossed shape behind the blue circle with the arrow. Select both the base of the icon and the crossed stripes and use the Divide function of Pathfinder to split the shape into three parts.

add stripes to the icon base

Step 4

Fill the parts of the icon base with green (#78c73d) and light-pink (#fbc7d2) colors.

color the parts of the icon

Step 5

Let’s move to the Weather icon. Fill the basic sky shape with linear gradient from darker blue (#2066f0) on top to lighter blue (#1dd4fd) in the bottom. Add a yellow (linear gradient from #ffc505 to #fee403) circle for the sun in the left part of the icon. Start forming the clouds with two circles: a 25.5 x 25.5 px circle in the center of the template and a 21 x 21 px circle closer to the right part of the icon.

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

Step 6

Create a 43 x 16 px rectangle and make its corners rounded with 8 px corner radius. Align the rectangle with the circles and Unite all three shapes in Pathfinder to form a smooth, rounded cloud.

add the bottom part of the cloud with the rectangle tool

Step 7

Fill the cloud with white color and make it semi-transparent, lowering the Opacity to 90%.

make the cloud white and semi-transparent

Step 8

Let’s move on to the Camera icon. Make a grey basic circle, filled with linear gradient from dark grey (#8e9196) in the bottom to lighter grey (#dadcdd) on top, and start forming the camera silhouette from a dark-grey (#3c3c3c) rounded rectangle. 

Add a smaller 30 x 17 px rectangle on top and make its upper left corner rounded with 7 px corner radius. Unite the shapes and make the corner between the shapes rounded as well.

form the camera base from the rounded rectangle

Step 9

Add a narrow stripe in the upper part of the camera and use the Minus Front function to cut it out.

use Minus Front to make a dividing stripe

Form the shutter icon from a 9 x 4 px rectangle, and place it in the center of our template. Use the Pen Tool (P) to add an arrow pointing down at the shutter. Set the Stroke Weight to 4 pt and make the caps and corner of the line rounded in the Stroke panel.

Form the shutter icon

Step 10

Add the final details to our camera: form a bright-yellow (#fac81b) indicator of a 6 x 6 px size. Further, create a big circle with 4 pt Stroke Weight. Place the circle in the bottom right corner of the camera, as shown in the screenshot.

Add the final details to our camera

Step 11

Object > Expand the big circle, turning it into the ring. Select both the ring and the camera and apply Minus Front to cut out the ring, forming the object-glass. Then select all the dark-grey parts of our camera and turn them into a single compound shape by pressing Control-8.

cut out the object-glass in the camera

Finally, use the Shape Builder Tool (Shift-M) or the Intersect function of Pathfinder to cut off the unneeded parts of the camera outside the base of our icon.

cut off the unneeded parts to finish up with the icon

5. Make the Phone, Messages and Remote App Icons

Step 1

Let’s make a handset for the Phone icon. Create an 8 x 40 px rectangle and use an Arc Warp Effect with 27% Vertical Bend value to bend the rectangle to the left side. Add two 17 x 20 px rectangles in the top and bottom parts of the handset and make their corners rounded, making the shapes smooth. Unite all parts of the handset in Pathfinder.

form the handset base

Step 2

Smoothen the left side of the handset by deleting the unneeded anchor points with the Delete Anchor Point Tool (-) and round the inner corners with the Live Corners feature. Finally, rotate the phone to 45 degrees and place it above the icon base, filled with linear gradient from lighter green (#86fb71) to darker green (#0fd51c).

edit the handset outlines

Step 3

Let’s form the Message icon on the same green base that we’ve used previously. Make a 40 x 40 px white circle and extend it to the sides a bit, making the shape squashed to 48 x 40 px. Add a tiny triangle in the bottom of the white shape, forming a speech bubble. Make the lower corner of the triangle slightly rounded. Use the Arc Warp Effect with -36% Vertical Bend value to make the triangle slightly arched.

form a speech bubble from the ellipse and triangle

Here’s how the completed icon looks.

message icon

Step 4

Our next icon is the Remote app icon, which is also very simple and consists of a single element. First of all, form a gradient base (from dark blue #2066f0 in the bottom to lighter blue #1dd4fd) on top. Add white stroke with 5.3 pt Stroke Weight and Align it to Inside. Place a 30 x 30 px white triangle in the center of our icon.

form the base and triangle shape

Step 5

Finally, make the corners of the triangle rounded with a 2.5 Corner Radius. Great! The icon is ready, so let’s move on.

make the corners of the triangle rounded

6. Create the Workout, Settings and Photos App Icons

Step 1

The Workout icon depicts a stylized silhouette of a running man. Create a bright icon base, filled with linear gradient from yellowish-green (#c2ec38) on top to green in the bottom (#a3fc3f).

Take the Pen Tool (P) and create separate lines for the bent arms, legs and torso with 3 pt Stroke Weight and rounded caps and corners. Increase the thickness of the Stroke Weight of the torso line to 6 pt and add a 9 x 9 px circle for the head.

create separate lines with the pen tool

Step 2

Object > Expand the lines and fill the shapes with black color.

fill the shapes with black color

Step 3

The Settings icon consists of a cog. Form the cog base from a 48 x 48 px circle with a cut-out center, making a ring. Add three lines with 3 pt Stroke Weight, connected in the center of the icon template.

form the cog base

Step 4

Now we need to add the ripples to our cog. Form a 5 x 9 px rectangle and make its upper part a bit narrower. Make its upper corners rounded with 1.6 Corner Radius. Place the ripples on the top and bottom parts of the cog base. 

Let’s use the Rotate Tool (R) to add more elements. Select both ripples, double-click the Rotate Tool (R) to call the pop-up options window, and set the Rotate value to 360/18. This way, Adobe Illustrator will automatically calculate the proper value for 18 shapes. Press the Copy button.

add the ripples to our cog

Step 5

Press Control-D multiple times to repeat our last action, adding more elements. To finish up with this icon, select all ripples, switch the fill color to white and Rotate them all together by -10 degrees.

rotate the objects and fill them with white

Step 6

Our next icon is a stylized flower for the Photos app. Start by forming the petal from a 20 x 30 px rectangle and make its corners rounded with 10 px Corner Radius. Duplicate the petal and place its copy in the bottom part of the icon template, as shown in the screenshot below. Select both petals and use the Rotate Tool (R) to make eight more copies of the petals, by applying the 360/8 Angle value and pressing the Copy button.

forming the petal from a rectangle

Step 7

Press Control-D several times to form the eight-petal flower. Switch the petals to Multiply Blending Mode and lower the Opacity to 80%. Let’s apply the appropriate color to each petal, starting from the top middle one and moving clock-wise: orange (#fa9700), yellow (#f0e22c), green (#b5d558), turquoise (#6ec19d), blue (#71b5e1), violet (#8f60c3), pink (#d782a4) and red (#ff2c2c).

Put the flower on the white icon base.

from the 8 petal flower and color it

7. Render the Stocks, Activity, Passbook and Calendar Icons

Step 1

The Stocks icon consists of a minimalist diagram. Start forming the diagram by making a bright-blue (#02a6f5) vertical line of 3 pt size with the Line Tool (\). Place it in the middle of our template, on a dark (#3f3f3f) icon base. 

Add a small blue circle above the middle of the template and apply a dark-grey (#3f3f3f) 1 pt Stroke to it in order to separate it visually from the line. Add four more lines on the both sides of the icon, with a lighter-grey (#555555) 3 pt Stroke. 

Object > Expand the lines and cut off the unneeded parts outside the icon base, either with the Shape Builder Tool (Shift-M) or with the help of the Pathfinder.

form the lines of the diagram

Step 2

Finish up with the icon by adding a zigzagged line with 1.5 pt Stroke for the graphic using the Pen Tool (P). Expand the line and make it fit the icon base.

add a zigzagged line for the graphic

Step 3

The Activity icon is more complicated and interesting to make. It consists of three colorful gradient circles. To form such a circle, first of all we need to make a Blend Group.

Make two equal 6 x 7 px rectangles of pink (#ff2b91) and red (#f1281e) colors. Select the rectangles and go to Object > Blend > Make. You can edit the settings in Object > Blend > Blend Options, applying Smooth Color to make a nice seamless blend. Drag the created blend group to the Brushes panel and create a new Art Brush with default settings.

create the art brush from the blend group

Step 4

Create a dark-grey (#393839) circle base for our icon and place another circle on top of it, applying our brush as a Stroke. Adjust the size of the circle, so that it fits the outer edge of the icon template. Set the Stroke Weight to 1 pt and Object > Expand Appearance to turn the brush stroke into a shape. Rotate or flip the shape with the Reflect Tool (O) horizontally, if needed, so that we have the pink side of the circle on the left and the red on the right. 

Create a small pink (#ff2b91) circle and place it in the top central area of the colored ring, so that it fits the height of the shape, hiding the connection of the two colors.

apply the brush and expand the shape

Step 5

Now we need to add dimension to the ring by forming a subtle shadow. As you may notice, the ring became divided into several parts after we expanded it. This is exactly what we need! Select the top red piece of the ring, copy it and Paste in Front (Control-C > Control-F). Fill the copy with linear gradient from dark red (#a11b17) to white, and switch to Multiply Blending Mode, thus making the white tip of the gradient invisible.

add shadow to the ring

Step 6

Use the same technique to create two more colorful rings inside the first shape. Create the art brushes from a yellow (#d8ff06) and green (#86e402) blending group and from a turquoise (#06ffaa) and blue (#06e3f9) blend. Finish up with the icon by adding circles and applying gentle shadows.

create more art brushes from blends

Step 7

The next is the Passbook icon, which consists of four tiny pictograms: a credit card, a plane, a movie camera and a coffee cup. These pictograms are minimalistic and made of basic shapes with the help of Pathfinder and Live Corners feature. Below you can see a step-by-step screenshot, showing how to combine the shapes for each pictogram.

create pictograms from basic shapes

Step 8

The base of the icon consists of four stripes of different colors: red (#ff4e46), blue (#439eca), green (#3dca36) and orange (#ffa02b), each of 20 px height. Create a default 80 x 80 px circle base for our icon and delete the unneeded pieces of the stripes with the help of the Shape Builder Tool (Shift-M) by selecting all objects and clicking the unwanted parts while holding down the Alt key.

create a striped icon base

Step 9

Form an even 3.5 x 3.5 px circle, crossing the top side of the orange stripe, and copy it to the right by holding both Alt and Shift and dragging the shape. Press Control-D several times to make more copies of the circle. Then select all the copies and turn them into a Compound Path by pressing Control-8. Select the circles and the orange stripe and apply the Minus Front function to cut out the holes, making the stripe perforated.

Finally, place the pictograms that we created earlier and align them to the center of our icon.

add perforation to the orange stripe and place the pictograms

Step 10

The last icon of our set is the Calendar icon. It consists of text, made with Helvetica Neue font and a simple white icon base. 

calendar icon with font

Great Job! The Apple Watch Home Screen Icons are Finished!

This was a long yet exciting quest! We've created a total of 20 Home Screen app icons, using basic shapes, warp effects and some tricks and effects. I hope you've enjoyed following this guide and found some useful techniques. Good luck with your designs!

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