Under-construction templates are very popular nowadays. People are using them until they build a new website or modify the current one to inform readers, to collect subscribers or even to promote products. In this tutorial I'm going to show you how to design a flip clock countdown in Photoshop which can be used for a coming soon template. Along the way, we'll use different Photoshop tools and techniques in order to obtain a high-quality result.
What we'll be doing today:
First step is to open Photoshop and to create a new document of 600x400px. Set the "Background Contents" to transparent.
Let's build the background. Grab the Paint Bucket Tool(G) and with a dark gray color (#474747) paint the empty canvas.
Convert the layer for Smart Filters by going to Filter -> Convert for Smart Filters. This way we can apply filters in a non-distructive way. Go to Filter -> Noise -> Add Noise and add a Monochromatic Uniform Noise of 2%.
Now add a Radial Gradient Overlay by double-clicking the layer or right-click -> Blending Options:
The background looks good and is ready to sustain the flip-clock countdown.
Now let's build the countdown. Grab the Rounded Rectangle Tool(U), set the radius to 3px and draw a rectangle of 100x100px. Don't worry about the color. We'll apply a gradient overlay later.
Stylize the shape by adding the next blending options:
The shape just got transformed and looks like this:
Now pay attention at the next step. We're going to build the flip effect. Duplicate the shape layer you just styled and place the new layer under the original one. Then hide the stroke effect by clicking on the small eye icon. Then move the layer 5 px under the original one.
Duplicate the new layer(the bottom one) 2 times and lower them 3px and 6px. Doing this, you'll obtain a nice page-on-page effect.
Now it is time to add some text inside the box. I used the elegant Droid Sans typeface which can be downloaded for free from Google Webfonts directory.
Grab the Horizontal Type Tool(T), select the Droid Sans typeface, set the font-weight to Bold and font-size to 60px and type in a number, like "34". This box will be used for days.
Stylize the text by adding the next layer styles:
Using the same bold Droid Sans font, type in under the box the word "DAYS". Make sure to reduce the font-size from 60 to 18px and apply the same effects used for "34".
The image looks good until now but still we didn't build yet the flip-clock effect, so let's do that now. Grab the Line Tool(U), set the line height to 3px and draw a black horizontal line at the middle of the box.
With the same Line Tool(U), draw 2 small gray flaps of 2x10px and position them on the left and right side of the bar. And with this touch we created the flip-clock effect which looks great!
Now that you completed the first box, group the layers used (all except the first one-background layer). To group more layers, select the layers and go to Layer -> Group Layers or just hit Ctrl+G. Duplicate the group 2 times to create boxes for hours and minutes, arrange them one after another and rewrite the text by modifying "DAYS" with "MINUTES" and "HOURS".
That was all, my friends. In just a few steps, you've learned how to build a stunning flip-clock countdown which I'm sure it will be useful for you.
Take a look at what we've done today:
