Let's give you a detailed analysis of the Illustrator software and share the tutorial on creating a complete set of Apple Watch icons.
Tutorial sharing:
Icon Display:
The specific drawing process is as follows:
1. Apple Watch icon standards
Apple Watch icons are designed to be very similar to the trendy flat style of other iOS icons. A distinctive feature is that the icons are circular. You can download a very beautiful vector icon template to make your work easier.
If you are interested in more in-depth theories about how to create an Apple Watch icon, I strongly recommend that you go to the official Apple Watch interface guidelines and specifications.
2. Creation time, email, and music App icons
Step 2
First, open an icon template (click the link above to download it. In this tutorial, we will use the 80x80 PX icon template for 38mm watches ). Go to View> hide grid to make the grid invisible, but make sure that the smart reference line and alignment functions are visible.
Step 2
Let's create our first icon and create a 4 × 4 px circle. Double-click the oval tool (L) to call the pop-up option window, and then go to the alignment panel to align the circle horizontally and vertically on the canvas. Fill the circle with orange (# FF9506.
Step 2
Use the rectangle tool (M) to create a 2x40 px rectangle for seconds. Fill it with the same orange color and place it in the center reference line, as shown in the screenshot.
You can hold down the Alt key and click the circle to align the key object and second-hand.
Step 2
Let's copy the second hand to make it shorter and then select-60 degrees, as shown below on the reference line.
Now we will draw the body of the sub-needle. Create a black 4x30 px rectangle, then round the tail end by pulling the small circle mark, use the direct selection tool to maximize them. (In our example, the radius of the rounded corner is 2 px ).
Step 2
Place this pointer next to the reference line (you can make it smaller so that it is suitable for the circle inside the bottom of the icon)
Step 2
Create another 4x20 px rectangle as our hour hand. Turn the image into a circle, rotate it 60 degrees, and place it in a change opposite to the split needle.
Step 2
Finally, use the elliptic tool (L) to create an 80x80 px white oval as the bottom of the icon and place it under all other icons. Great! Our first icon is ready. Let's go to the next one.
Step 2
Now we will create the Mail icon. Create an envelope with a rectangle of any color, 50x33 px.
Use the polygon tool or pen tool to create a triangle with three sides and add a 2 pt stroke. Objects> extensions bend the triangle.
Step 2
Add another triangle to the bottom of the envelope and use an extended shape to round the bottom corner of the envelope. You can use the Shift-E tool to erase the top and bottom rectangles because we don't need them.
Use the Shift-E tool to delete the lower triangle at the top and merge the triangle in the path finder. Finally, copy the shape of the bottom envelope (Control-C> Control-F), select the shape of the rectangle and the top, and use the intersection function of the path finder to cut out the outer part of the envelope.
Step 2
Select the rectangle and the stripe again, and then remove these lines by applying the Path Finder minus the top layer function.
Convert the envelope color to white, add a circular background to our icon, and fill it with a linear gradient from the Dark Blue (#2066F0) on the top to the bright blue (# 1DD4FD) on the bottom.
Step 2
The next icon is the music App, which contains only one element: a note sign. First, create a 27x11 px rectangle, use the direct selection tool to select the anchor on the left side of the shape, and then drop down to make the shape skew.
Step 2
Create two shapes with the rectangle tool (M) to form the symbolic "leg ".
Step 2
Use the direct selection tool to select the three anches in the following blocks and then make them angular. Merge these shapes in the path finder and use the features of the active angle to make them round.
Step 2
Add the second part of the symbol to make the overall shape smoother and smoother.
Fill in the gradient from Orange (# FA5D3B) to pink (# FF2968.
3. World clock, stopwatch, timer and alarm icon
Step 2
Now we will go to a set of time-related icons. First, create a circle of 48x48 px, and create a small circle in it. Use the minus top layer function in the path finder to create a ring.
Step 2
Create a smaller elliptical ring in the first shape and add two crossover lines to align the center.
Add a horizontal line to the above part of the shape and mix it with the help of effect> deformation> arc. Set the horizontal bending value to-35%.
Step 2
Add another curved wire at the bottom of our ball.
Draw the base using a linear gradient of deep orange (# ff7632) and a bright orange (# ff9408) on the top.
Add a smaller dark orange (# e45221) circle and hide it behind the spherical shape to give more comparisons.
Step 2
For the next icon stopwatch, we will use the background of the previously created World hour icon.
Create an 8x8 px elliptic from the center of the stopwatch and align it with a 2x25 px rectangle as the second-hand watch.
Step 2
Use the rectangle tool (M) to add secondary details to the top of our stopwatch. To make the bottom of the stopwatch smoother, use the moving angle and set the angle radius to 1.4px.
Step 2
Let's go to the timer icon-it has the same background as the stopwatch.
Use the rectangle tool (M) to create a 2.5x13 px stripe at the center of the top of the ring. Then, use the polygon tool, set the number of edges to 3, or use the pen tool (P) to draw a triangle. As shown in the following figure.
Step 2
Select the basic white ring and triangle, and subtract the bottom layer function from the left side of the ring. Add a Circle of 6x6 px to the center of the icon.
Step 2
Finally, rotate the circle so that the anchor on it is about 45 degrees left. Use the direct selection tool (A) to pull the anchor and expand the shape.
Use the Shift-C tool to convert the selected anchor to an angle, so that our shape is changed to the pointer of the watch.
Step 2
The last icon in our group is the alarm clock. It has the same background and white ring as the previous Orange icon. The pointer to the alarm is formed by two narrow stripes produced by the rectangular tool (M.
Step 2
Let's use the circle produced by the elliptical tool (L) to draw the upper part of an alarm, and use the scissors tool (C) to click the Side anchor, divide the circle into two equal parts. Place a half circle at the bottom of the alarm, and then add two small "legs" at the bottom to complete this icon.
4. Create weather and camera app icons
Step 2
Fill in the basic Sky shape with a linear gradient from the top of the Dark Blue (#2066f0) to the bottom of the Light Blue (# 1dd4fd.
Add a yellow circle (linear gradient from # ffc505 to # fee403) to the left of the icon as the sun. Create a cloud with two circles: a 25.5x25.5 px circle in the center of the template, and a 21x21 px circle on the right of the icon.
Step 2
Create a 43x16 px rectangle with an 8 px radius rounded. Align the rectangle and circle, and then combine three shapes in the path finder to form a smooth and round cloud.
Step 2
Fill the cloud with White to reduce transparency to 90%.
Step 2
Let's go to the camera icon. Create a gray bottom circle and fill it with a linear gradient from the bottom dark gray (# dadcdd) to the top light gray (# dadcdd,
Create a dark gray (# 3c3c3c) rounded rectangle to form a side shadow of the camera.
Add a small 30x17 px rectangle to the top, and then make the top left corner of the rectangle rounded with a 7px rounded corner.
Merge these shapes and then round the corners between these shapes.
Step 2
Add a narrow stripe at the top of the camera and subtract it from the top layer.
Create a shutter icon with a 9x4 px rectangle and place it in the center of our template. Use the pen tool to add an arrow pointing to the shutter, set the stroke width to 4 pt, and smooth the endpoints and corners in the stroke panel.
Step 2
Add the final details for our camera: create a 6x6 px bright yellow (# fac81b) indicator. Create a large circle with a 4 PT stroke width. Place the circle at the bottom of the right corner of the camera, as shown in the screenshot.
Step 2
Object> expand the circle and convert it to a ring. Select the ring and camera, and then apply minus the top layer minus the ring to form the object-glass. Select the dark gray area of the camera and press Control-8 to convert them into a separate combination shape.
Finally, the intersection function in the shape generation tool (Shift-M) or path finder is used to remove unnecessary parts from the camera icon.
5. Make phone calls, text messages, and remote application icons
Step 2
Let's create a microphone for the phone icon. Create a rectangle of 8x40 px and go to effect> twist> arc, select the vertical bending value of 27%, and bend the left side of the rectangle. Add two 17x20 px rectangles to the microphone at the top and bottom, and then round them to smooth the shape. Merge all the microphones in the path finder.
Step 2
You can use the delete anchor tool to delete unnecessary anchor, smooth the left side of the receiver, and then use the activity angle to make the internal circle smooth.
At last, rotate the phone 45 degrees and place it on the top of the bottom of the icon, fill it with a light green (#86fb71) to a linear gradient from a dark green (# 0fd51c.
Step 2
Let's use the same green background we used to form the text message icon. Create a white circle of 40x40 px and extend the side to flatten the shape to 48x40 px.
Add a small triangle at the bottom of the white shape to form a speech bubble. Make the angle under the triangle a little circle. Use the arc bending effect of-36% vertical bending value to slightly change the triangle to an arc shape.
The complete icon is displayed.
Step 2
The following icon is the remote application icon, which is a very simple icon containing a single element.
First, form a gradient bottom (from the bottom of the dark blue #2066f0 to the top of the light blue # 1dd4fd ). Add a white stroke with a width of 5.3pt and align it from the interior. Place a 30x30 px white triangle in the center of our icon.
Step 2
Finally, the triangle has a 2.5-angle radius. Great! This icon is already in place, so let's go to the next one.
6. Create an out-of-office, setting, and photo App icon
Step 2
The Out icon depicts a stylized runner.
Fill in with the linear gradient of the top yellow green (# c2ec38) and the bottom Green (# a3fc3f) to create a bright background.
Use the pen tool (P) to create separate lines for bending the arm, leg, and trunk, and add 3 pt stroke width and circle endpoints and corners.
Increase the thickness of the stroke width of the trunk to 6 pt, and then add a 9x9 px circle as the header.
Step 2
Object> extension line, and then fill the shape with black.
Step 2
The set icon contains a gear. Draw a circle of 48x48 px and cut off the middle fragment to form a ring.
Add three lines with 3 pt stroke width and connect them at the center of the icon template.
Step 2
Now we need to add ripple to our tooth rail.
Create a 5x9 px rectangle and narrow the top slightly. Make the angle above have a round radius of 1.6px. Place the ripple on the top and bottom of the tooth rail.
Use the rotation tool (R) to select all ripple, double-click the rotation tool (R) to call the pop-up option window, and set the rotation value to 360/18. In this way, Adobe Illustrator automatically calculates the appropriate values of 18 shapes. Press the Copy button.
Step 2
Press Control-D to repeat the previous action multiple times to add more ripple. To complete this icon, select all ripple, convert the color to white, and then rotate all the ripple together-10 degrees.
Step 2
The next icon is a stylized photo App. Create a rounded rectangle with a radius of 20x30 px and a radius of 10 px.
Copy the petals and copy them to the bottom of the icon template, as shown in the screenshot below.
Select all the petals and use the rotation tool (R) to make 8 copies of the petals. Apply the 360/8-angle value, and then press the Copy button.
Step 2
Press Control-D several times to form an octal flower. Convert the petals to the front-slice and bottom-stack hybrid mode and reduce the transparency to 80%. Let's apply the favorite color to each petal and start clockwise from the top of the Center: Orange (# fa9700), yellow (# f0e22c), Green (# b5d558 ), turquoise (# 6ec19d), Blue (#71b5e1), Violet (#8f60c3), pink (# d782a4), and red (# ff2c2c ).
Place the flowers on the white icon baseboard.
7. Stock, activity, Passbook and calendar icons
Step 2
The stock icon contains a simple chart. First, create a dark (# 3f3f3f) icon baseboard, and then use a straight line tool to create a light blue (#02a6f5) 3pt-sized vertical line. Place it in the middle of the template,
Add a small blue circle and apply a dark gray (# 3f3f3f) 1pt stroke to visually separate it. Add the remaining four lines on both sides of the icon and draw the lines with a 3pt of light gray (#555555.
Object> extension line, and remove unnecessary parts at the bottom of the icon. You can use the shape generation tool (Shift-M) or path finder.
Step 2
Use the pen tool (P) to draw a jagged line with a 1.5pt stroke and add it to the graph to end the creation of this icon.
Step 2
This activity icon contains three color gradient rings. To form such a ring, you must first create a hybrid group.
Create two rectangle with the same 6x7 px, one of which is pink (# ff2b91) and the other is red (# f1281e ). Select the rectangle and find the object> hybrid> create.
You can edit this setting in object> hybrid options, and use smooth colors to create a beautiful seamless hybrid. Drag the created blending group to the paint panel and create a new art paint brush with default settings.
Step 2
Create a dark gray circle (#393839) as the bottom of our icon, place another circle on the top of it, and use the paint brush we created as the stroke. Adjust the circle size so that it conforms to the external edge of the icon template. Set the stroke width to 1 pt, select an object> extend appearance, and change the paint stroke to a shape. If necessary, use the image tool (O) to rotate or horizontally flip the shape so that we have a red ring from the left to the right.
Create a small ring in pink (# ff2b91) and place it in the area at the top of the color ring to conform to the shape height to hide the relationship between the two colors.
Step 2
Now we need to add a subtle shadow. You may notice that this ring is divided into several parts after we expand it. This is exactly what we need!
Select a red clip at the top of the ring, copy it, and paste it in front (Control-C> Control-F ). Add a dark red (# a11b17) to the white linear gradient on the copy layer, and then convert it to the hybrid mode of the front slice. Therefore, the gradient makes the white end invisible.
Step 2
Use the same technology to create two more colorful rings in the first shape. Create an art paint brush from a mix of yellow (# d8ff06) and green (#86e402) and a mix of turquoise (#06 ffaa) to blue (#06e3f9. Add a circle and a soft shadow to create the icon.
Step 2
Next is the passbook icon, which contains four small pictograms: a credit card, an airplane, a camera, and a coffee cup. These pictograms are simple and made with the help of the Path Finder and the feature of the active angle. You can take a step-by-step screenshot below to see how each pictogram icon is connected.
Step 2
The bottom of the icon is composed of four stripes of different colors: red (# ff4e46), Blue (# 439eca), Green (#3dca36), and orange (# ffa02b ), each height is 20 px. With the help of the shape generator tool (Shift-M), create a circular bottom of the default 80x80 PX icon. By selecting all objects and holding down the Alt key, click the unwanted part to delete the unwanted stripe.
Step 2
Create a circle of 3.5x3.5 px and intersect with the top of the orange stripe. Copy the circle and press Alt and Shift to pull the shape. Hold down Control-D to form more copies of the circle. Then, select all copies and convert them to the combined path by pressing Control-8. Select the circle and orange stripes and apply the minus layer function to cut the holes.
Finally, place the previously created pictograms in the center of our icons to align them.
The last of our set of icons is the calendar icon, which consists of text in the Helvetica Neue font and a simple white icon.
Good! The Apple Watch home screen icon has been completed! We have created a total of 20 screen application icons, using some basic shapes, bending effects and tips. I hope you can enjoy following this guide and discover some interesting technologies.
All right, the above information is the complete set of Apple Watch icon tutorials for the users of this software of Illustrator, users now see the small editor here. I believe that you are very clear about the production method. Then, let's draw the Apple Watch icon according to the tutorial above.
