Photoshop Tutorials > Web Graphichs

Digital Clock

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.

You are going to make a digital clock interface like this:

To do this tutorial you will need a digital clock font. I'm using the Duxus Clock Font available here (3612 clicks).

1. Create a new canvas 145px wide and 70px in height with background colour #2A2A2A. Let's start off with the clock base. Choose the Rounded Rectangle Tool; set the radius to 10px and the fill colour to #004370. Draw a rounded rectangle to fill the canvas like this:

2. Name the layer to Clock Base. Add Stroke settings like this:

3. Your base should look like this:

4. Now add a Gradient Overlay layer like this:

5. Your Clock Base layer will now look like this:

6. Add a Bevel and Emboss layer like this:

7. So that your clock base layer looks like this:

8. Add an Inner Glow layer like this:

9. The main part of the base is finished and should look like this:

10. Now we are going to write the base of the clock letter. Choose your Dexus Clock font, set the size to 60pt, the colour to #3F82B3 and the anti-aliasing method to Sharp and type 88:88 across the middle of the Clock Base layer (the text layer will automatically create a new layer - rename this to Clock Letters Base):

11. Now it's time to do the clock numbers. Right-click the Clock Letters Base layer and Choose Duplicate Layer. Type 4 over the 88:88 text and change the colour to #30C2FF. Place the layer so it fits over the second 8 of the Clock Letters Base layer:

12. Add an Inner Glow layer like this:

13. The first clock digit is finished:

14. Duplicate the 4 (Right-click the layer and choose Duplicate Layer) and use the text tool to change the number from 4 to 2. Use the right arrow key to nudge the 2 right until it fits over the third 8 from the Clock Letters Base layer:

15. Repeat this process to create a 7 like this:

16. Repeat again but this time with a : and place it between the hours and minutes:

17. Create a new layer named Highlight at the top of the layer stack. Hold down Ctrl and click the Clock Base layer (with the Highlight layer selected). Choose Select > Modify > Contract and enter 3px. Fill the selection with #FFFFFF and set the layer opacity to 20%:

18.Choose the Rectangular Marquee Tool and nudge the selection up (use the up arrow) so that the bottom of the selection is halfway up the base. Choose Select > Modify > Smooth and enter 10px:

19. Choose Select > Inverse and press Delete. You're finished: