Making digital watch icon
![]()
Here is a tutorial that will teach you how to make a nice digital watch icon.
Final Image Preview
![]()
Step 1
Open up a new document. Mine is 500×500..
![]()
Step 2
Make a new folder and name it Shape. This is where the shape of the watch will go.
Now get your Ellipse Tool and make a circle. Color #b2b2b2.
![]()
Step 3
Add these Blending Mode settings to the big circle.
![]()
Step 4
Now duplicate the circle and by holding Alt and Shift keys pressed just scale down this duplicated layer. Set the circle color to #e4e4e4.
![]()
Step 5
Set the blending mode of this circle like mine.
![]()
Step 6
And one more circle. Same as before duplicate one of those 2 circles and scale them down like I did. Also use this color #e4e4e4.
![]()
Step 7
Use these Blending Options.
![]()
Step 8
Ctrl + Click on the first circle thumbnail to make a selection. Now make a new layer over the first circle. Set your foreground to white and select your Gradient tool. Before you make a gradient make sure you have the gradient set to Linear and Foreground to Transparent. Also make sure the reverse is not activated. Now click and drag from up to down.
![]()
Step 9
Make a new Folder called Light. Here is where the watch will start looking shiny and better.
Make a new layer. Using the Pen tool make a shape like I did.
![]()
Step 10
Mask out the shape now. You do this by adding a new layer mask for the shape you just created. Now Ctrl + Click on the thumbnail of the big circle layer to make a selection.
![]()
Step 11
Make your foreground black. Inverse the selection and make sure the mask you just created in Step 10 is selected. Now hold Alt button and press Backspace to mask the shape. Make the shape Opacity 30%.
![]()
Step 12
Next is another light. Same as before but this time make the light for this circle I just selected.
![]()
Step 13
Using the Polygonal Lasso Tool deselect a part of the image out.
![]()
Step 14
Now go to Select - Modify - Feather. And use a Radius of 20 pixels.
![]()
Step 15
Same as the first light using the Gradient Tool click and drag. Now set it to Soft Light.
![]()
Step 16
Repeat Step 13, 14 and 15 and make another light as I did.
![]()
Step 17
You can close the Light Folder now and make a new one. Call this one Hour.
Make a shape as I did using this color #9d9d9d.
![]()
Step 18
Duplicate this shape and move the duplicates as I did.
![]()
Step 19
Duplicate all these 4 shapes and rotate them as I did.
![]()
Step 20
Same as Step 19. This time move them as I did.
![]()
Step 21
Next step will be the shapes that indicate the minutes. Same as we did with the hour shapes.
First make a new folder and name it minutes. Make a shape as I did and move them same as me.
![]()
Step 22
Now same as we did with the hour shapes, duplicate the 4 minutes shapes you created and rotate them as I did.
![]()
Step 23
You will keep doing this till you have 4 minutes shapes between each hour shape.
![]()
Step 24
It is time to make the watch indicators. We will start with a new circle. Same as we did with the watch shape.
First make a new folder and name it Indicators. Now copy a circle shape in this folder, fill it with #a9a9a9 and resize it.
![]()
Step 25
Now add these Blending Options to the shape.
![]()
Step 26
First make the minute indicator. Use the Pen Tool for this and make a black shape.
![]()
Step 27
Second we will make the hour indicator.
![]()
Step 28
And last will be the second indicator. Make this one using the Line Tool with 1 pixel.
![]()
Step 29
Make the shadows for each indicator by duplicating the indicator and changing the opacity to 10%. Also make the second shadow indicator black.
![]()
Bonus
To make the watch indicate the AM just go to Watch folder in the layer palette. Here enter the Blending Options of the first circle and use change the Gradient like I did.
![]()
Conclusion
Make a nice Background and present your product to the client.
![]()


I think that’s analog clock, not digital. Very good tutorial.
Nice tut. But I’m more curious about the background. Looks so cool. How did you do that?
The background is a combination of blending mode and other effects. Will probably write a tutorial soon
lol…its not a digital clock dude. Nevetheless, really nice tut. Just loved it. Look forward for more stuff on your website. Keep rocking. Cheers !
Weldone! doing a great a job specially for the new student in grafix.
i m from paksitan and we work on Cs2 and i need Cs2 work file
Thanks
[...] Making a Digital Watch Icon [...]
[...] Making a Digital Watch Icon [...]
[...] Making a Digital Watch Icon [...]