Stylish vector clock icon in Adobe Illustrator

Stylish vector clock icon in Adobe Illustrator

Posted by on Friday 27 Apr 2012

In this tutorial we will go through the different steps in creating a stylish vector clock icon for your designs. Be it an icon for your web user interface, or an actual design figure in your brochures or catalog prints, you can easily apply this technique to any type of visual layout that needs a clock icon. Of course, you can also customize all the colors here as needed so that you can apply this to any themed website or printed poster/brochure. So let us get started in creating your vector clock icon.

1. First create a new document in Illustrator. It is important that you choose the right template, whether for print or for web design. Note that for web design the resolutions are generally smaller, while for print designs it is important to use higher resolution vectors. Once done with the new document window, just press ok to create your document.

2. Now, using the ellipse tool, simply create the shape clock that you want.

3. Add the appropriate colour gradient as its fill depending on your theme. Leave no strokes for now.

4. Next, inscribe a smaller circle inside our large circle. Fill it with a white to grey gradient with a radial style. Use a stroke color that matches your theme.

5. Alter the Stroke’s size and shape to add some abstract style to our clock icon. For our example we are using a large 3pt stroke with a tapered style for a more uneven looking circle.

6. Now, to add a gradient color to our stroke, first click on Object -> Expand Appearance.

7. Then, right click on our “expanded” inner circle and click on the option “ungroup”.

8. Afterwards, select the stroke line (that is now a separate shape) and add your own colored style gradient.

9. Now, we will create the lines that represent the numbers of our clock. First create a thin rectangle or ellipse that will be our line. Color it appropriately for your theme, we are using grey here. Place it at the 12 o’clock position.

10. Next, press and hold the ALT key on your keyboard while still selecting that grey thin rectangle/ellipse. Drag the “duplicate” that appears to the 6 o’clock position.

11. Select both of these thin rectangles, right click on them and click on “group”.

12. With both selected, go to Object -> Transform -> Transform each.

13. In the Window that opens, use a 30 degree value in the rotation field. Click on the “Copy” button to make the transformation.

14. Afterwards, just press CTRL+D to make all the other number slots for your clock.

15. Great! Now, let us just create small circle using the ellipse tool for the pivot point of the hands.

16. Then create three rectangles or long ellipses (depending on the style you want). Color them appropriately for your clock.

17. Rotate the clock hand shapes accordingly to get the right time that you want for your clock.

18. If you want a brand on your clock, or a logo, simply paste in the logo or type in the text in the appropriate location in your vector clock.

19. Finally, we shall add a shadow to our clock. Simply copy the background circle that we created as the first step. Turn its fill color to grey and adjust its transparency.

20. Afterwards go to Effects -> Blur -> Gaussian Blur to blur this shape much like a shadow.

21. Finally, right click on our shadow circle and click on the option Arrange -> Send to back. Position the shadow behind our clock appropriately.

22. Great! Now we have a nice clock icon that we can use for our design. Just adjust your colours and even add textures whenever needed to adapt this icon style for your theme.

Did you enjoy this tutorial? Share it, like it, favorite it!
987 Views
FavoriteLoadingAdd to favorites
0 0 votes, average: 0.00 out of 1
You need to be a registered member to rate this post.
Loading ... Loading ...

Write a Comment

Gravatars are small images that can show your personality. You can get your gravatar for free today!

You must be logged in to post a comment.