Countdown in Photoshop is a useful feature that allows designers and developers to create visually engaging countdown timers for websites, applications, and other digital products. With the help of this feature, one can easily add numbers that count down from a specified time to zero. This can be done by using different styles, fonts, colors, and animations.
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.
Design a Flip-Clock Countdown in Photoshop
Countdowns are a popular way to create excitement and anticipation for events, whether it’s the release of a new product or an upcoming holiday. And with Adobe Photoshop, creating a countdown has never been easier. In this article, we’ll walk you through how to create a countdown in Photoshop step by step.
Step 1:
Create a new Photoshop document size 1280px by 720px.
Step 2:
Fill the background with #333333. Set your foreground color to #474747and grab the Gradient Tool (G). Set the Gradient Tool to draw a Radial gradient and set the gradient to “Foreground to Transparent”.
Step 3:
Create a new layer and drag you, Gradient Tool, from the center of the Photoshop document to any one of the edges. This will create a subtle glow in the center of the document. Set that new layer to a Blend Mode of “Screen”.
Step 4:
Notice the banding that appears on our gradient. Often times when doing various tasks in Photoshop you will run into this issue (usually when applying large blurs to colors or working with transparent gradients). Without getting into a ridiculous level of technical detail, the way to fix this is to add some noise. We want to add noise to our background anyway so it should work out perfectly. Add some noise to the layer with the Radial gradient by going Filter>Noise>Add Noise.
Step 5:
Make sure your foreground color is #474747 and then grab the Rectangle Tool (U) and set the tool to draw shape layers. Drag out a perfect square shape by holding down your shift key while dragging the shape out. NOTE: I drew a shape about 180px by 180px. My Layer Styles will be based on a shape that size. TIP: If you want to see how big your shape is while drawing it, open the Info panel by going Window>Info. Name this layer “Flip-Face”.
Step 6:
Set your foreground color to white by hitting the (D) key and then the (X) key. Apply the Gradient Overlay and the Stroke I have by going Layer>Layer Style>Gradient Overlay. NOTE: I am using the “Foreground to Transparent” gradient for my stroke.
Step 7:
Duplicate that Shape layer by hitting Cmd/Ctrl + J and then go Layer>Layer Style>Clear Layer Style. Drag this layer below the “Flip-Face” layer and give this the name “Top-Front”.
Step 8:
Grab your Move Tool (V) and nudge this shape downward five pixels by pressing the down arrow key five times. Reduce the Fill Opacity to zero and then apply the Drop Shadow and Gradient Overlay that I have.
Step 9:
Duplicate the “Top-Front” layer and rename it “Bottom-Front”. Drag it below the “Top-Front” layer. Use your Move Tool (V) and nudge it downward ten pixels and then add the Gradient Overlay I have added.
Step 10:
Duplicate that layer and drag it below the other shape layers and name it “Shadow”. Add the Drop Shadow that I have and then go Edit>Transform>Perspective. Grab the top left corner and drag it inward just a little bit until you fade the Drop Shadow right into the side of the shape.
Step 11:
Select your “Flip-Face” layer and duplicate it using Cmd/Ctrl + J. Clear the Layer Styles on this layer and then hit Cmd/Ctrl + T to transform this shape. Grab the transform handle in the bottom center and drag this shape up until the shape is half of the height of the underlying block. See my screenshot for the approximate size. Reduce the opacity to 30%. Change the name of this layer to “Top”.
Step 12:
Grab your Text Tool (T) and use a basic typeface to type a square bracket [ and set the color of the text to white. Check out my settings below. Reduce the opacity of this bracket to 40% and drag it over to the center edge. This is the clasp holding our flip clock together.
Step 13:
Duplicate that bracket we just made my hitting Cmd/Ctrl + J and drag it over to the over side of our flip clock. Go Edit>Transform>Flip Horizontal.
Step 14:
Grab your text tool again and type out any two digit number that you want. Set the text color to #b2b2b2 and check out my settings in the Character panel. Set your foreground color to white and then apply the Gradient Overlay that I have.
Step 15:
Duplicate the “Top” layer and drag it to the top of your Layers panel. Reduce the Fill Opacity to zero. Apply the Drop Shadow and Gradient Overlay that I have.
Step 16:
Grab the Text Tool (T) and type out the word “Days” and position it above the flip clock. I am using an 18pt, Bold, Arial typeface. Apply the Gradient Overlay that I have.
Step 17:
Select all of the layers that make up the flip clock we just made and hit Cmd/Ctrl + G to group them into a Layer Group. Duplicate this group four times and change the text to reflect Hours, Minutes, and Seconds. Change your numbers as well. NOTE: Select a Group and use your Move Tool (V) to drag the entire Group anywhere you like.
Step 18:
Select all four Groups in your Layers panel and select your Move Tool (V). Look to the Tool Options Bar and select the “Align Vertical Centers” icon as well as the “Distribute Horizontal Centers”. Use the over tool to grab all four groups as a whole and position them closer to the center of the document if needed. That’s it! Your countdown in Photoshop is ready.
In conclusion, creating a countdown in Photoshop is an easy and effective way to add a special touch to any project. It’s the perfect solution for when you don’t have access to a dedicated countdown program, but still want the same visual effect. Knowing how to create a simple, yet powerful countdown can open up new possibilities for your work.