In this tutorial we are going to create a stylish countdown timer. 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 PSD Countdown Source File (3)
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.
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. Now that you know how to build a PSD Countdown it is time to put it into motion. Good luck!
Download PSD Countdown Source File (3)
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.
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. Now that you know how to build a PSD Countdown it is time to put it into motion. Good luck!
0 comments:
Post a Comment