<p>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.</p><p>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. </p><h2 class="wp-block-heading">Design a Flip-Clock Countdown in Photoshop</h2><p>Countdowns are a popular way to create excitement and anticipation for events, whether it&#8217;s the release of a new product or an upcoming holiday. And with <a href="http://blog.visibledev.net/category/tutorials/adobe-photoshop/">Adobe Photoshop</a>, creating a countdown has never been easier. In this article, we&#8217;ll walk you through how to create a countdown in Photoshop step by step.</p><h3 class="wp-block-heading">Step 1:</h3><p>
Create a new Photoshop document size 1280px by 720px.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-1.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-1.jpg" alt="Design a Flip-Clock Countdown in Photoshop" class="wp-image-2466"/></a></figure></div><h3 class="wp-block-heading">Step 2:</h3><p>
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”.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-2a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-2a.jpg" alt="" class="wp-image-2467"/></a></figure></div><h3 class="wp-block-heading">Step 3:</h3><p> 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”. </p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-3a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-3a.jpg" alt="" class="wp-image-2468"/></a></figure></div><h3 class="wp-block-heading">Step 4:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-4a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-4a.jpg" alt="" class="wp-image-2469"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-4b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-4b.jpg" alt="" class="wp-image-2470"/></a></figure></div><h3 class="wp-block-heading">Step 5:</h3><p>
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”.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-5a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-5a.jpg" alt="" class="wp-image-2471"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-5b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-5b.jpg" alt="" class="wp-image-2472"/></a></figure></div><h3 class="wp-block-heading">Step 6:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-6a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-6a.jpg" alt="" class="wp-image-2473"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-6b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-6b.jpg" alt="" class="wp-image-2474"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-6c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-6c.jpg" alt="" class="wp-image-2475"/></a></figure></div><h3 class="wp-block-heading">Step 7:</h3><p>
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”.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-7a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-7a.jpg" alt="" class="wp-image-2477"/></a></figure></div><h3 class="wp-block-heading">Step 8:</h3><p> 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 <a href="https://creativecloud.adobe.com/cc/discover/article/how-to-make-a-gradient-overlay-in-adobe-photoshop?locale=en" target="_blank" rel="noreferrer noopener">Gradient Overlay</a> that I have. </p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-8a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-8a.jpg" alt="" class="wp-image-2478"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-8b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-8b.jpg" alt="" class="wp-image-2479"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-8c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-8c.jpg" alt="" class="wp-image-2480"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-8d.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-8d.jpg" alt="" class="wp-image-2481"/></a></figure></div><h3 class="wp-block-heading">Step 9:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-9a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-9a.jpg" alt="" class="wp-image-2482"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-9b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-9b.jpg" alt="" class="wp-image-2483"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-9c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-9c.jpg" alt="" class="wp-image-2484"/></a></figure></div><h3 class="wp-block-heading">Step 10:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-10a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-10a.jpg" alt="" class="wp-image-2485"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-10b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-10b.jpg" alt="" class="wp-image-2486"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-10c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-10c.jpg" alt="" class="wp-image-2487"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-10d.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-10d.jpg" alt="" class="wp-image-2488"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-11b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-11b.jpg" alt="" class="wp-image-2489"/></a></figure></div><h3 class="wp-block-heading">Step 11:</h3><p>
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”.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-11a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-11b-1.jpg" alt="" class="wp-image-2491"/></a></figure></div><h3 class="wp-block-heading">Step 12:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-12a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-12a.jpg" alt="" class="wp-image-2492"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-12b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-12b.jpg" alt="" class="wp-image-2493"/></a></figure></div><h3 class="wp-block-heading">Step 13:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-13a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-13a.jpg" alt="" class="wp-image-2495"/></a></figure></div><h3 class="wp-block-heading">Step 14:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-14a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-14a.jpg" alt="" class="wp-image-2496"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-14b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-14b.jpg" alt="" class="wp-image-2497"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-14c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-14c.jpg" alt="" class="wp-image-2498"/></a></figure></div><h3 class="wp-block-heading">Step 15:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-15a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-15a.jpg" alt="" class="wp-image-2499"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-15b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-15b.jpg" alt="" class="wp-image-2500"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-15c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-15c.jpg" alt="" class="wp-image-2501"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-15d.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-15d.jpg" alt="" class="wp-image-2502"/></a></figure></div><h3 class="wp-block-heading">Step 16:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-16a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-16a.jpg" alt="" class="wp-image-2503"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-16b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-16b.jpg" alt="" class="wp-image-2504"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-16c.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-16c.jpg" alt="" class="wp-image-2505"/></a></figure></div><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-16d.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-16d.jpg" alt="" class="wp-image-2506"/></a></figure></div><h3 class="wp-block-heading">Step 17:</h3><p>
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.

</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-17a.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-17a.jpg" alt="" class="wp-image-2507"/></a></figure></div><h3 class="wp-block-heading">Step 18:</h3><p> 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.</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="http://tutvid.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/flip-clock-17b.jpg"><img src="http://blog.visibledev.net/wp-content/uploads/2020/04/flip-clock-17b.jpg" alt="" class="wp-image-2508"/></a></figure></div><hr class="wp-block-separator has-css-opacity is-style-wide"/><p>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.</p>
How to Design a Flip-Clock Countdown in Photoshop
