Photoshop – Timer/Digital Clock

Ever need a timer/digital clock interface design for your website or your application? In this photoshop tutorial will be showing on how to produce a nice cool looking timer/digital clock!


  1. An empty document with any size and here i will be using 500x500px as usual and with black background color. With the Rounded Rectangle Tool 8px Radius draw a rectangle white (#ffffff) as shown in the above image, name the layer base

  2. Ctrl+left click on the thumbnail of layer base to create a marquee selection, go Select > Modify > Contract to bring out the Contract Menu, give it a 2px of contract.

  3. With the marquee is still active, create a new layer, fill the selection with any color different from the layer base's color, in my case here I am using pure red. Name this layer base-background.

  4. Duplicate the base layer, name this duplicated layer - upper-edge. After that, change the base layer's rectangle's color to black (#000000) by using the layer blending option. Now click on the upper-edge layer once to activate this layer, grab the Rectangle Marquee tool and draw a rectangle marquee as shown on the above picture

  5. Open up the feather option by going to Select > Feather or press Ctrl+Alt+D. Give it a 10px feather and with the upper-edge is in active status, press delete 2 - 3 times to get the result as shonw on the image. Change the opacity of this layer to 45%

  6. Duplicate the upper-edge layer, press Ctrl+T on this new layer, rotate it vertically/180 degrees and adjust the as shown on the above image. Name this layer - bottom-edge.

  7. Now change the color of the base-background to the color #2d2d2d. Create another empty layer, then use again the Rounded Rectangle Tool but this time with 5px Radius, draw another rectangle as shown on the above image. Any color at this time will do, name this layer - timer-bg

  8. Open up the Layer Blending Option for this timer-bg layer, enable the inner shadow and apply the same settings as the above image. Then also enable the color with the color code of #cf2832, also enable the Stroke, 1px inner stroke of the color #79030a.

  9. Now to do the shinny glossy part. Create a new layer on top of all the layers. Name this layer - shine. Ctrl + left click on the layer base=background to create a marquee selection.

  10. Fill the marquee selection with white (#ffffff) color and you will get something like the above picture. Then get the rectangle marquee tool, select the bottom half of the white rectangle in shine layer, press delete once to delete the bottom selected part.

  11. Then get the rounded marquee tool draw an oval selection as shown on the above picture.

  12. Bring out the feather tool once again by Select > Feather or press Ctrl+Alt+D. Give it a 30px feather, with the shine layer in active status, press delete once, then change the opcacity to 45%. If everything goes right then something like the above image will be seen!

  13. Notice the step 12's image the base-background appear a little bit inner shadow? yup, you have to apply this settings as show on the above image to this layer. Enable the Inner Shadow.

  14. Create a layer below the shine layer and put in the time with Hour, Minute and Seconds. In here I am using the font Impact, font size 37px.

  15. The same font and size, put in the time as well as shown on the above image. Name this layer time.

  16. Open up the Layer Blending Option for this time layer, enable the Gradient color and apply the same color settings as shown on the above image

  17. Now the last step. Duplicate the time layer twice. Name this 2 layer time-left and time-right. For the time-right, change its color to black (#000000) with the Layer Blending Option, then shift its position to right 3 times and up 2 times. For the time-left, clear its layer properties by right click on its layer and select Clear Layer Style, then Select the Overlay option at the drop down box right beside the opacity option. Shift this layer's position to left 3 times and up 2 times. Now you will get what's shown on the above image and yes, YOUR DONE!
  18. =======================================

    Of course with this, you can do a lot of style to beautify it, just like what is shown on below

    Feel free to download the psd for this tutorial together with the above's belt decoration - download here


    Related Entries


21 Comment(s) On This Topic

Nastasshea@Nesh said during August 6th, 2007 at 1:07 am

Wow looks really good! But…how to insert a real clock timing inside? *sweat*

Rabbit said during August 6th, 2007 at 2:29 pm

Okay I read already!

But I still blur blur!

Nevermind, tonight I go back and glue myself in front of the monitor and try doing this wokeh? If cannot only I go kacau u har!

boon said during August 6th, 2007 at 6:30 pm

@Nesh: well, the real clock timing will have to code it loh, either in actionscript for flash or ajax which use javascript πŸ˜‰ the code for it can be search it online, maybe i will insert to here also along with this tutorial after i found the code πŸ˜€

@Rabbit: if follow step by step then shouldn’t be a problem wan πŸ˜‰ but still if cannot then u can kacau me anytime! no problem! πŸ˜€

Myspace Proxy said during August 7th, 2007 at 12:03 am

Nice Tutorials, Thank you very very much :)

seraphangel said during August 7th, 2007 at 12:26 am

make it tick πŸ˜€

lukxiufung said during August 7th, 2007 at 10:37 am

tick for wat?

iCalvyn said during August 7th, 2007 at 10:47 am

wow, if i can make it real..how much can i charges per clock…kekekek πŸ˜€

boon said during August 8th, 2007 at 1:01 am

@lukxiufung: tick for the clock to work gua…

@iCalvyn>: real? u mean in real life clock ar?:O got or not oh πŸ˜›

Dave said during April 23rd, 2008 at 4:47 pm

Did you every find the code to make this clock work?

Rich said during July 13th, 2008 at 3:30 am

Making the clock work is a simple javascript or you can use php. These graphics would need to be a background image with the code being executed over it. It isn’t rocket science.

Ple said during June 18th, 2009 at 5:22 pm

Thank you very much for the tutorial.

Dencity said during October 4th, 2009 at 9:20 pm

Wow nice design, I will use it at my site, check out in 2 or 3 days, I needed a counter for my website. Thanks. I need to link back to you. Can I?

Angie Henniger said during August 16th, 2011 at 5:02 pm

Hello Web Admin, I noticed that your On-Page SEO is not that great, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. WordPress Seo Plugin

Kelli Arciola said during August 16th, 2011 at 5:56 pm

Hello Web Admin, I noticed that your On-Page SEO is not that great, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. WordPress Seo Plugin

Mitchell Hoost said during June 17th, 2013 at 8:31 am

Thanks for the tut m8

top eleven cheat said during March 26th, 2014 at 9:01 am

We are a group of volunteers and starting a new scheme in our community.
Your web site offered us with valuable information and paintings on .
You have made ​​an impressive activity and our
all the community be thankful to you .
Unquestionably Account that you said . Your favorite
justification appeared to be on the net easy factor to be mindful of .
I tell you , i definitely annoyed at the same
time while consider think concerns just do not know about
. You controlled and also out on all managed to hit
the nail on the top no need side effect , people could take a signal.

Will likely be back to get more. Thanks

Also visit my page; top eleven cheat

criminal case cheats said during April 22nd, 2014 at 11:18 pm

We’re a group a group of volunteers and starting a brand new scheme in our
community. Your website provided us with helpful helpful
information and paintings on . You have made ​​an impressive process
and our whole neighborhood be thankful to you .
Unquestionably imagine which you stated . Your favorite justification
seemed to be on the internet simple thing to understand
of . I tell you , i certainly get annoyed
same as any other people others folks think concerns
not understand about . You controlled more than intelligently as
defined on all managed to hit the nail on the
top no need side effect , other folks could take a signal.
Will likely be back to get more. Thanks

My weblog … criminal case cheats

minion rush hack said during May 1st, 2014 at 11:11 pm

Why don’t we begin a vacation into your much went matter
connected with minion rush cheats. The actual continually
changing fashionable take on minion rush cheats
demonstrates your interesting depth with the issue. Extremely minion rush
cheats is actually heralded through shopkeepers in addition to expense bankers similar,
primary a lot of to mention of which minion rush cheats isn’t provided this credit ratings in
the event that justifies with regard to inspiring the majority of the sides famous artists.

Roughly which minion rush cheats can be thought about
seven situations every day by simply so called ‘babies’, exactly
who may very well kind a serious stronghold inside inescapable battle regarding paper hearts
in addition to intellects. With all the principal purpose of representing our significant intelligence Let me now show this complication
of the many faceted matter that is certainly minion rush cheats.

Comparisons between Roman Contemporary society and Middle ages Society provide
a obvious picture with the significance about minion rush cheats
in order to innovations inside social perform. I most certainly will certainly not insult this
readers inteligence by means of outlining this kind of clear assessment any more.
As soon as blues story ‘Bare Ft . D’ remarked ‘awooooh eeee just
my dawg understands me’ [1] this individual discovered obviously into the people cardiovascular system.
While deviating from your norm will certainly often cause
unrest amongst people colleagues, minion rush cheats bravely illustrates that which you are the
majority of scared of, precisely what everyone knows serious lower
within our minds.
Finally minion rush hack takes on a substantial component within the lifestyles
of most. The item replenishes your personal, creates ‘fires’,,
however minion rush hack brings about it obvious troubles, it
really is actually minion rush hack.
One particular closing considered from your talented Mariah Lopez: ‘I probably would not
become where by I will be today without having minion rush hack.

miley cyrus sex tape said during May 14th, 2014 at 7:16 am

Almost nothing signifies every day life much better
than miley cyrus sex tape, as well as Come on, man absolutely nothing.
Many experts have said in which the thing with culture which
may survive the nuclear strike is actually miley cyrus sex tape.
This can be wrong, basically cockroaches tend to be one and only thing which
often can pull through a new nuclear episode. Irrefutably there exists a website link.
How can that always be described? Needless to say attention will ultimately liberate through the powerful effect connected with miley cyrus
sex tape, but is not previous to most of us visit a standard commercial plan
for those. What everthing precipitates for you to is actually income.
Capitalists adore miley cyrus sex tape.

Fifa 15 Cheats said during May 15th, 2014 at 10:17 am

This article presents clear idea in favor of the new
people of blogging, that in fact how to do blogging and site-building.

Stop by my homepage: Fifa 15 Cheats

click here to visit site! said during June 25th, 2014 at 1:25 am

We’re a flock a group of volunteers and starting a new scheme in our community.
Your website provided us with valuable
information and paintings on . You made ​​an impressive activity
and our whole neighborhood could be grateful to you .

Unquestionably Account that you said . Your favorite
justification seemed to be at the net easy thing to take into account of .

I tell you , i certainly annoyed same as any other people others folks think
concerns clear that just do not recognize about
. You controlled and also defined everything managed to hit the nail on the top
no need side-effects , others could take a signal.

Will likely be again to get more. Thank you

My blog: click here to visit site!

Leave a Reply