This is the web log of Tim Bennett, web designer. He also runs Texelate, offering the best web design Leeds, Yorkshire has to offer

Analog clock in Photoshop

Monday, December 11th, 2006 at 8:49 am

 

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

By following this tutorial you will create an analog clock graphic like this:

analogclock_45

If you want to create a digital clock try this tutorial.

1. Create a new canvas 106 pixels wide and 106 pixels in height with background colour #2F2F2F.

2. Set the foreground colour to #878787 and draw a circle using the Elipse Tool (hold down Shift to make it a circle rather than an elipse) so that your canvas looks like this:

analogclock_2

3. Name the new Layer Border; right-click the layer and choose Rasterize Layer. This will form the base of the clock.

4. Using the Eliptical Marquee Tool (and holding down Shift to ensure the selection stays as a circle ) select the centre of the Border layer so that you have selected everything other than a border around the circle like this:

analogclock_4

5. Press Delete so that your circle has become a hoop:

analogclock_5

6. Apply these Outer Glow settings:

analogclock_6

7. Now apply these Bevel and Emboss settings:

analogclock_7

8. The difference is subtle but you’ll notice it later – these layer styles help add depth. Your canvas will look like this:

analogclock_8

9. Create a new layer above the Border layer and name it Border Highlight.

10. With the Border Highlight layer selected hold down Ctrl and click the Border layer. Choose Select > Modify > Contract and enter 1px.

11. Set the foreground colour to #FFFFFF; choose the Gradient Tool and set the gradient colouring to Foreground to Transparent:

analogclock_11

12. Drag from the top of the hoop to a third the way down like this:

analogclock_12

13. Your canvas will now look like this:

analogclock_13

14. Set your foreground colour to #0089A9 and draw another circle sao that in fits inside the Border layer. Name the layer Clock Face and drag it below the Border layer. Your canvas will look like this:

analogclock_14

15. Apply these Inner Shadow settings:

analogclock_15

16. Your canvas will look like this:

analogclock_16

17. With the foreground colour still set as #FFFFFF draw a rectangle on the clock face. Name the layer Date Base; right-click the layer and choose Rasterize Layer. It willlook like this:

analogclock_17

18. Apply these Inner Shadow settings:

analogclock_18

19. Apply these Stroke settings:

analogclock_19

20. This forms the base of the part of the clock that displays the date. It should look like this:

analogclock_20

21. Select the Horizontal Type Tool; set the font family to Arial, the font size to 9pt, the anti-aliasing method to Sharp and the text colour to #2F2F2F. Write 14 over the Date Base layer. It will look like this:

analogclock_21

22. Select the Clock Face layer and then set the foreground colour to #2F2F2F. Choose the Elipse Tool, hold down Shift and draw a circle in the centre of the clock like this:

analogclock_22

23. Name this layer Centre, right-click it and choose Rasterize Layer.

24. Apply these Drop Shadow settings:

analogclock_24

25. Apply these Bevel and Emboss settings:

analogclock_25

26. Apply these Stroke settings:

analogclock_26

27. Draw a rectangle for the minute hand. Rasterize it and name the layer Minute Hand. It will look like this:

analogclock_27

28. Choose Edit >Transform>Perspective and drag the top-right control point to the centre (to create a sharp point at the top) – it will look like this:

analogclock_28

29. Choose Edit>Transform > Rotate and rotate the Minute Hand layer so that your canvas looks like this:

analogclock_29

30. Add Drop Shadow settings like this:

analogclock_30

31. Add Bevel and Emboss settings like this:

analogclock_31

32. Your image should look like this:

analogclock_32

33. Duplicate the Minute Hand layer and rename it Hour Hand. Using the Polygonal Lasso Tool cut a third of the bottom of the Hour Hand layer. Choose Edit > Transform > Rotate and rotate until it looks like:

analogclock_33

34. Create a new layer above the Centre layer and name it Hour Marks. Set the layer Opacity to 75%. Set the foreground colour to #2F2F2F, select the Pencil Tool and draw a rectangle 5 pixels in height and 2 pixels wide. Your canvas will look like:

analogclock_34

35. Duplicate the layer and move it to the top of the clock face and press Ctrl + E to merge the layer down. Your canvas will look like this:

analogclock_35

36. Duplicate the layer and choose Edit > Transform > Rotate 90° CW so that your canvas looks like this:

analogclock_36

37. Press Ctrl + E to merge the layer down. Duplicate the layer and choose Edit > Transform > Rotate and enter 30° in the Rotate field.

38. Repeat the previous step.

39. Press Ctrl + E twice to merge all the clock hour points to one layer. Your canvas should look like this:

analogclock_39

40. Add these Outer Glow settings:

analogclock_40

41. Your canvas will look like this:

analogclock_41

42. Create a new layer above the Centre layer and name it Highlight. Hold down Ctrl and click the Clock Face layer. Choose Select > Modify > Contract and enter 2px. Fill the layer with #FFFFFF and set the layer opacity to 15%. It will look like this:

analogclock_42

43. Use the Rectangular Marquee Tool to make this selection:

analogclock_43

44. Press Delete so that your canvas looks like this:

analogclock_44

45. Hold down Ctrl and click the Date Base layer. Choose Select > Modify > Expand and enter 2px. Press Delete. Your Analog Clock is now finished and should look like this:

analogclock_45

Leave a Reply

You must be logged in to post a comment. If you don't have an account register one now.

Do you need a website or web-related service?
I run an award-winning web design studio.