Site icon Best Open Source Resources for Web Developers | Designers

How to Design a Flip-Clock Countdown in Photoshop

Flip-Clock Countdown

<p>Countdown in Photoshop is a useful feature that allows designers and developers to create visually engaging countdown timers for websites&comma; applications&comma; and other digital products&period; With the help of this feature&comma; one can easily add numbers that count down from a specified time to zero&period; This can be done by using different styles&comma; fonts&comma; colors&comma; and animations&period;<&sol;p><p>Under-construction templates are very popular nowadays&period; People are using them until they build a new website or modify the current one to inform readers&comma; to collect subscribers or even to promote products&period; In this tutorial&comma; I&grave;m going to show you how to design a flip-clock countdown in Photoshop which can be used for a coming soon template&period; Along the way&comma; we&grave;ll use different Photoshop tools and techniques in order to obtain a high-quality result&period; <&sol;p><h2 class&equals;"wp-block-heading">Design a Flip-Clock Countdown in Photoshop<&sol;h2><p>Countdowns are a popular way to create excitement and anticipation for events&comma; whether it&&num;8217&semi;s the release of a new product or an upcoming holiday&period; And with <a href&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;category&sol;tutorials&sol;adobe-photoshop&sol;">Adobe Photoshop<&sol;a>&comma; creating a countdown has never been easier&period; In this article&comma; we&&num;8217&semi;ll walk you through how to create a countdown in Photoshop step by step&period;<&sol;p><h3 class&equals;"wp-block-heading">Step 1&colon;<&sol;h3><p>&NewLine;Create a new Photoshop document size 1280px by 720px&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-1&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-1&period;jpg" alt&equals;"Design a Flip-Clock Countdown in Photoshop" class&equals;"wp-image-2466"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 2&colon;<&sol;h3><p>&NewLine;Fill the background with &num;333333&period; Set your foreground color to &num;474747and grab the Gradient Tool &lpar;G&rpar;&period; Set the Gradient Tool to draw a Radial gradient and set the gradient to &OpenCurlyDoubleQuote;Foreground to Transparent”&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-2a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-2a&period;jpg" alt&equals;"" class&equals;"wp-image-2467"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 3&colon;<&sol;h3><p> Create a new layer and drag you&comma; Gradient Tool&comma; from the center of the Photoshop document to any one of the edges&period; This will create a subtle glow in the center of the document&period; Set that new layer to a Blend Mode of &OpenCurlyDoubleQuote;Screen”&period; <&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-3a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-3a&period;jpg" alt&equals;"" class&equals;"wp-image-2468"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 4&colon;<&sol;h3><p>&NewLine;Notice the banding that appears on our gradient&period; Often times when doing various tasks in Photoshop you will run into this issue &lpar;usually when applying large blurs to colors or working with transparent gradients&rpar;&period; Without getting into a ridiculous level of technical detail&comma; the way to fix this is to add some noise&period; We want to add noise to our background anyway so it should work out perfectly&period; Add some noise to the layer with the Radial gradient by going Filter&gt&semi;Noise&gt&semi;Add Noise&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-4a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-4a&period;jpg" alt&equals;"" class&equals;"wp-image-2469"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-4b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-4b&period;jpg" alt&equals;"" class&equals;"wp-image-2470"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 5&colon;<&sol;h3><p>&NewLine;Make sure your foreground color is &num;474747 and then grab the Rectangle Tool &lpar;U&rpar; and set the tool to draw shape layers&period; Drag out a perfect square shape by holding down your shift key while dragging the shape out&period; NOTE&colon; I drew a shape about 180px by 180px&period; My Layer Styles will be based on a shape that size&period; TIP&colon; If you want to see how big your shape is while drawing it&comma; open the Info panel by going Window&gt&semi;Info&period; Name this layer &OpenCurlyDoubleQuote;Flip-Face”&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-5a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-5a&period;jpg" alt&equals;"" class&equals;"wp-image-2471"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-5b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-5b&period;jpg" alt&equals;"" class&equals;"wp-image-2472"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 6&colon;<&sol;h3><p>&NewLine;Set your foreground color to white by hitting the &lpar;D&rpar; key and then the &lpar;X&rpar; key&period; Apply the Gradient Overlay and the Stroke I have by going Layer&gt&semi;Layer Style&gt&semi;Gradient Overlay&period; NOTE&colon; I am using the &OpenCurlyDoubleQuote;Foreground to Transparent” gradient for my stroke&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-6a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-6a&period;jpg" alt&equals;"" class&equals;"wp-image-2473"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-6b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-6b&period;jpg" alt&equals;"" class&equals;"wp-image-2474"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-6c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-6c&period;jpg" alt&equals;"" class&equals;"wp-image-2475"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 7&colon;<&sol;h3><p>&NewLine;Duplicate that Shape layer by hitting Cmd&sol;Ctrl &plus; J and then go Layer&gt&semi;Layer Style&gt&semi;Clear Layer Style&period; Drag this layer below the &OpenCurlyDoubleQuote;Flip-Face” layer and give this the name &OpenCurlyDoubleQuote;Top-Front”&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-7a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-7a&period;jpg" alt&equals;"" class&equals;"wp-image-2477"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 8&colon;<&sol;h3><p> Grab your Move Tool &lpar;V&rpar; and nudge this shape downward five pixels by pressing the down arrow key five times&period; Reduce the Fill Opacity to zero and then apply the Drop Shadow and <a href&equals;"https&colon;&sol;&sol;creativecloud&period;adobe&period;com&sol;cc&sol;discover&sol;article&sol;how-to-make-a-gradient-overlay-in-adobe-photoshop&quest;locale&equals;en" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">Gradient Overlay<&sol;a> that I have&period; <&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-8a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-8a&period;jpg" alt&equals;"" class&equals;"wp-image-2478"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-8b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-8b&period;jpg" alt&equals;"" class&equals;"wp-image-2479"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-8c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-8c&period;jpg" alt&equals;"" class&equals;"wp-image-2480"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-8d&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-8d&period;jpg" alt&equals;"" class&equals;"wp-image-2481"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 9&colon;<&sol;h3><p>&NewLine;Duplicate the &OpenCurlyDoubleQuote;Top-Front” layer and rename it &OpenCurlyDoubleQuote;Bottom-Front”&period; Drag it below the &OpenCurlyDoubleQuote;Top-Front” layer&period; Use your Move Tool &lpar;V&rpar; and nudge it downward ten pixels and then add the Gradient Overlay I have added&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-9a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-9a&period;jpg" alt&equals;"" class&equals;"wp-image-2482"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-9b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-9b&period;jpg" alt&equals;"" class&equals;"wp-image-2483"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-9c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-9c&period;jpg" alt&equals;"" class&equals;"wp-image-2484"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 10&colon;<&sol;h3><p>&NewLine;Duplicate that layer and drag it below the other shape layers and name it &OpenCurlyDoubleQuote;Shadow”&period; Add the Drop Shadow that I have and then go Edit&gt&semi;Transform&gt&semi;Perspective&period; 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&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-10a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-10a&period;jpg" alt&equals;"" class&equals;"wp-image-2485"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-10b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-10b&period;jpg" alt&equals;"" class&equals;"wp-image-2486"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-10c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-10c&period;jpg" alt&equals;"" class&equals;"wp-image-2487"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-10d&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-10d&period;jpg" alt&equals;"" class&equals;"wp-image-2488"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-11b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-11b&period;jpg" alt&equals;"" class&equals;"wp-image-2489"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 11&colon;<&sol;h3><p>&NewLine;Select your &OpenCurlyDoubleQuote;Flip-Face” layer and duplicate it using Cmd&sol;Ctrl &plus; J&period; Clear the Layer Styles on this layer and then hit Cmd&sol;Ctrl &plus; T to transform this shape&period; 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&period; See my screenshot for the approximate size&period; Reduce the opacity to 30&percnt;&period; Change the name of this layer to &OpenCurlyDoubleQuote;Top”&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-11a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-11b-1&period;jpg" alt&equals;"" class&equals;"wp-image-2491"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 12&colon;<&sol;h3><p>&NewLine;Grab your Text Tool &lpar;T&rpar; and use a basic typeface to type a square bracket &lbrack; and set the color of the text to white&period; Check out my settings below&period; Reduce the opacity of this bracket to 40&percnt; and drag it over to the center edge&period; This is the clasp holding our flip clock together&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-12a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-12a&period;jpg" alt&equals;"" class&equals;"wp-image-2492"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-12b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-12b&period;jpg" alt&equals;"" class&equals;"wp-image-2493"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 13&colon;<&sol;h3><p>&NewLine;Duplicate that bracket we just made my hitting Cmd&sol;Ctrl &plus; J and drag it over to the over side of our flip clock&period; Go Edit&gt&semi;Transform&gt&semi;Flip Horizontal&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-13a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-13a&period;jpg" alt&equals;"" class&equals;"wp-image-2495"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 14&colon;<&sol;h3><p>&NewLine;Grab your text tool again and type out any two digit number that you want&period; Set the text color to &num;b2b2b2 and check out my settings in the Character panel&period; Set your foreground color to white and then apply the Gradient Overlay that I have&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-14a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-14a&period;jpg" alt&equals;"" class&equals;"wp-image-2496"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-14b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-14b&period;jpg" alt&equals;"" class&equals;"wp-image-2497"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-14c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-14c&period;jpg" alt&equals;"" class&equals;"wp-image-2498"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 15&colon;<&sol;h3><p>&NewLine;Duplicate the &OpenCurlyDoubleQuote;Top” layer and drag it to the top of your Layers panel&period; Reduce the Fill Opacity to zero&period; Apply the Drop Shadow and Gradient Overlay that I have&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-15a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-15a&period;jpg" alt&equals;"" class&equals;"wp-image-2499"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-15b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-15b&period;jpg" alt&equals;"" class&equals;"wp-image-2500"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-15c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-15c&period;jpg" alt&equals;"" class&equals;"wp-image-2501"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-15d&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-15d&period;jpg" alt&equals;"" class&equals;"wp-image-2502"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 16&colon;<&sol;h3><p>&NewLine;Grab the Text Tool &lpar;T&rpar; and type out the word &OpenCurlyDoubleQuote;Days” and position it above the flip clock&period; I am using an 18pt&comma; Bold&comma; Arial typeface&period; Apply the Gradient Overlay that I have&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-16a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-16a&period;jpg" alt&equals;"" class&equals;"wp-image-2503"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-16b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-16b&period;jpg" alt&equals;"" class&equals;"wp-image-2504"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-16c&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-16c&period;jpg" alt&equals;"" class&equals;"wp-image-2505"&sol;><&sol;a><&sol;figure><&sol;div><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-16d&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-16d&period;jpg" alt&equals;"" class&equals;"wp-image-2506"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 17&colon;<&sol;h3><p>&NewLine;Select all of the layers that make up the flip clock we just made and hit Cmd&sol;Ctrl &plus; G to group them into a Layer Group&period; Duplicate this group four times and change the text to reflect Hours&comma; Minutes&comma; and Seconds&period; Change your numbers as well&period; NOTE&colon; Select a Group and use your Move Tool &lpar;V&rpar; to drag the entire Group anywhere you like&period;&NewLine;&NewLine;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-17a&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-17a&period;jpg" alt&equals;"" class&equals;"wp-image-2507"&sol;><&sol;a><&sol;figure><&sol;div><h3 class&equals;"wp-block-heading">Step 18&colon;<&sol;h3><p> Select all four Groups in your Layers panel and select your Move Tool &lpar;V&rpar;&period; Look to the Tool Options Bar and select the &OpenCurlyDoubleQuote;Align Vertical Centers” icon as well as the &OpenCurlyDoubleQuote;Distribute Horizontal Centers”&period; Use the over tool to grab all four groups as a whole and position them closer to the center of the document if needed&period; That’s it&excl; Your countdown in Photoshop is ready&period;<&sol;p><div class&equals;"wp-block-image"><figure class&equals;"aligncenter size-large"><a href&equals;"http&colon;&sol;&sol;tutvid&period;wpengine&period;netdna-cdn&period;com&sol;wp-content&sol;uploads&sol;2012&sol;03&sol;flip-clock-17b&period;jpg"><img src&equals;"http&colon;&sol;&sol;blog&period;visibledev&period;net&sol;wp-content&sol;uploads&sol;2020&sol;04&sol;flip-clock-17b&period;jpg" alt&equals;"" class&equals;"wp-image-2508"&sol;><&sol;a><&sol;figure><&sol;div><hr class&equals;"wp-block-separator has-css-opacity is-style-wide"&sol;><p>In conclusion&comma; creating a countdown in Photoshop is an easy and effective way to add a special touch to any project&period; It’s the perfect solution for when you don’t have access to a dedicated countdown program&comma; but still want the same visual effect&period; Knowing how to create a simple&comma; yet powerful countdown can open up new possibilities for your work&period;<&sol;p>

Exit mobile version