Boonage

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 500×500px 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!

=======================================

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

• Evil Alarm Clock
• Orb Button Effect - Dreamweaver Part
• Photoshop - Automated Task/Automated Actions
• Photoshop - Decay Text Effect
• Eerie Eye Effect
• Visiting the Putrajaya Botanical Garden


05 Aug 2007