Jan
10
2012

How to design a countdown in 5 simple steps using photoshop

How to design a countdown in 5 simple steps using photoshop

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. 

Final Result

Here is a preview of countdown once it is finalized.

Final version of countdown

Final version of countdown

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.

Setting up the photoshop file

Setting up the photoshop file

Unlocking layer

Unlocking layer

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)

Selecting gradient overlay

Selecting gradient overlay

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.

Adding gradient overlay

Adding gradient overlay

3. Adding a white box

3.1. Click and hold (without releasing) the Rectangle Tool to select Rounded Rectangle Tool.

Select Rounded Rectangle Tool

Select Rounded Rectangle Tool

Choose radius as 6 px

Choose radius as 6 px

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.

Name the layer "white-box"

Name the layer "white-box"

Adding gradient to white box

Adding gradient to white box

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.

Adding shadow to white box

Adding shadow to white box

Adding stroke to white box

Adding stroke to white box

4. Adding Separators to the box

4.1. Click and hold the Rounded Rectangle Tool to select Line tool.

Selecting line tool

Selecting 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”.

Duplicate "dark-sep" to "white-sep"

Duplicate "dark-sep" to "white-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”.

Selecting a font

Selecting a font

Adding gradient to text

Adding gradient to text

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.

Duplicate "white-box"

Duplicate "white-box"

Feather selection

Feather selection

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.

Result of countdown tutorial

Result of countdown tutorial

Show us what you made!

Final version of countdown

Final version of countdown

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)

Related Posts

About the Author:

Himanshu Khanna is the founder of Pixelonomics and a senior designer at Sparklin. If you’d like to connect with him, follow him on Twitter: @SparklinGuy

View All Jobs

Join our Weekly Newsletter

Signup today for free and get the best Pixelonomics posts to your inbox every week.

Pixel Tweets

View more tweets

Got an idea?

If you've got an idea for a post or happen to know a startup, we'll be glad to feature it! Get in touch.