Stylish Black PSD Countdown Tutorial

In this tutorial we are going to create a stylish countdown timer. For more variations check our Countdown Freebie. If you wonder how to create a Flash Countdown Timer out of it head to our tutorials section and take a look at our premium tutorial.

[download id=”42″]

STEP 1: PREPARING THE GROUNDS

Create a new document of 500px width and 500px height. Now download this dark splatter image and set it as your background.

STEP 2: SHAPING THE COUNTDOWN

Create a new group and call it countdown. Within this group create another group called CountdownLayer1. This is just so our document is well layered and organized. Create a new layer and draw a rounded shape with Rounded Rectangle Tool (U). Set the radius to 5px and make it 100px in width and height. Now apply following layer styles. Gradient colors are: 1b1b1b, 373737,  1b1b1b.

[amazon_carousel widget_type=”SearchAndAdd” width=600″ height=”200″ title=”” market_place=”US” shuffle_products=”True” show_border=”False” keywords=”flash tutorial, learn flash” browse_node=”” search_index=”Books” /]

STEP 3: APPLYING THE MASK

Now create a new layer above the previous one. Draw a black rectangle directly above your rounded shape (it has to be slightly bigger). Call the layer Mask. Right click on it and select Create Clipping Mask. Now apply the same dark gradient as seen in an image above. Gradient colors are: 1b1b1b, 373737,  1b1b1b. Your countdown should now look something like this:

STEP 4:LIGHTING IT UP

We will now create light effect for the lower borders of the countdown. First zoom in to 1600% or even 3200%  and then choose a pen tool (P) and draw a three dots path like in an image below:

Now click on the brush tool (B) and set diameter to 1px and hardness to 0%. Click on the pen tool again (P). Rasterize the layer and right click on the selection that you have just made. Select Stroke Path and in next window choose Brush as a Stroke Path. Right click on the path again and select Delete Path. Now it is time to blur it a bit. Go to Filters / Gaussian Blur and set it to 0.5. Finally set the opacity of the layer to 50%. Your light effect should look like this:

Play with these settings a bit to get the perfect light effect. Now simply copy light layer and move it to the bottom left border. Flip it horizontally so it fits to the left side.

STEP 5: CREATING MULTIPLE LAYER EFFECT

Now it is time to duplicate group CountdownLayer1 two times and each new group below the previous one. Now move newly created groups a few pixels downwards. Countdown placeholder now looks like this:

STEP 6: ADDING SOME NUMBERS

Grab your Type tool (T) and type a random number. Font used in our example is Bebas Neue. Now apply following layer styles. Gradient colors are: c3c3c3, ffffff,  c3c3c3.

STEP 7: COPYING COUNTDOWN PLACEHOLDERS

Now simply duplicate your main group twice (group countdown) to get two more countdown placeholders. Position them at even spaces so they look like this:

CONCLUSION

Thank you for reading our tutorial. Please also check our Countdown Freebie that contains five different variations of this countdown. Now that you know how to build a PSD Countdown it is time to put it into motion. Check our tutorial about how to make a stylish Flash Countdown Timer based on this PSD example. Good luck!