How to design a countdown in 5 simple steps using photoshop
We have been getting a lot of tutorial requests from Pixelonomics’ readers. Sincere apologies for not being able to come up with a new tutorial after Geometric poster in photoshop, for long.
Off late, we have observed the usage of Countdown as an element for UI, broadcasting and collateral design.
Documented below is the process of creating a countdown in 5 simple steps using photoshop. Each step is divided into a couple of sub-steps to make it as simple as possible. Nevertheless, we are looking forward to your feedback, in the comments section below, to make future tutorials a lot more simpler.
Let’s get started with our Countdown. For the purpose of keeping it simple, we are going to create a countdown element for web usage. Side note: if we are working on anything for web, the resolution should be 72dpi.
Here is a preview of countdown once it is finalized.
1. Setting up the Photoshop file
1.1. Create a new file (Ctrl + N). In the New file dialog box, set the Width and Height units to pixels (if it isn’t already). Set the width to 500 and the height to 300 pixels. We’re creating a graphic element for web, as mentioned above, so set the Resolution to 72 pixels/inch, color mode to RGB color, 8 bit and background contents to white.
1.2. To unlock the layer, currently titled “background”, double click on it and on appearance of a dialog window showing title as “Layer 0″, press ok.
2. Adding color to the background (Layer 0)
2.1. Select Layer 0 (if not already selected) and go to Layer > Layer Style > Gradient Overlay.
2.2. Make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #191d29 at 0% location, #616a71 at 60% and #a9afab at 100% location.
3. Adding a white box
3.1. Click and hold (without releasing) the Rectangle Tool to select Rounded Rectangle Tool.
3.2. Choosing radius as 6 px, as shown above, create a rectangular box like the one shown below and rename it as “white-box” after double clicking the “shape 1″ layer.
3.3. With white box as selection, go to gradient overlay (as explained in step 2.1). Again, make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #e1e1e1 at 0% location, #ffffff at 49%, #e1e1e1 at 51% location and finally, #ffffff at 100% location.
3.4. In the same box as gradient overlay, look for Drop Shadow and Stroke. We have to select them too. Drop shadow settings: Opacity – 45%, distance – 2 px, spread – 0 px and size – 3 px. Stroke settings: Size – 1 px, position – inside and color: #ffffff.
4. Adding Separators to the box
4.1. Click and hold the Rounded Rectangle Tool to select Line tool.
4.2. With weight as 1 px and color #90949c, draw a line horizontally middle across the white box, just enough to touch the edges widthwise, like shown in the pic below. Name it “dark-sep”.
4.3. Right-click (ctrl-click in mac) “dark-sep” layer and select duplicate. Name it “white-sep”. Press V on the keyboard to select Move tool, press bottom arrow to move “white-sep” downwards by 1 px and change it color to #ffffff.
5. Adding text to complete the countdown
5.1. Press T on the keyboard to select Text tool. We have chosen “Myriad Pro bold” in 80 pt size but feel free to select your favorite font here. Select the layer “white-box” and type in a digit or a letter in vertical and horizontal middle. We have typed in a “2″.
5.2. With text layer as selection, go to gradient overlay (as explained in step 2.1). Again, make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #2d2d2d at 0% location, #474747 at 49%, #2d2d2d at 51% location and finally, #474747 at 100% location.
Here we have our countdown ready for usage as an element in broadcasting, collaterals or user interfaces.
Bonus Step – add reflection to the counter
B.1. Select the layer “white-box” and duplicate this layer (step 4.3). Right click (ctrl-click in mac) and first select “rasterize layer” and then, “clear layer style” as shown below.
B.2. Press M on the keyboard to select Rectangular Marquee Tool and select the box 60% horizontally, from the bottom, like shown above. Go to Select > Modify > Feather and choose a feather radius of 20 px. We pressed “delete” 3 times to get the desired effect. You may choose as per your preference.
B.3. Press ctrl+d (cmd+d in mac) to deselect. Press V to go back to move tool and move the shape to the bottom of white box. Go to Edit > Transform > Flip vertical and change opacity of this layer to 20%.
Here is the result!
Wasn’t that easy? Use this element as you like, in wallpapers, interfaces and more. But please share your creations with us here Pixelonomics Flickr group.
Show us what you made!
We duplicated and edited the countdown to create our own version above. We’d love to see what your version looks like. And if you choose to follow this tutorial to create a real life project or artwork, please do share with us. You may share your work on the Pixelonomics Flickr group and contribute to this active community.
Download the Photoshop file used in this tutorial
Countdown-tutorial.zip (ZIP, 29 kb)