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

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

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

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

3. Adding a white box

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

Select Rounded Rectangle Tool

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"

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 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

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"

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

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"

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

Show us what you made!

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)

Pixelonomics

How to create a geometric poster in photoshop

Last week I came across a great set of geometric posters. Soon, I thought of documenting the process of creating a similar poster and share this tutorial with the readers of Pixelonomics.  The implementations of this tutorial are far beyond than just creating a poster. Also, it is easier to create a similar poster in Illustrator if you are familiar with its interface and working. The reason for using photoshop as a tool here is just to assist the fellow users. On that note, we should attempt a similar tutorial for illustrator very soon.

Let’s get started with our poster. The first thing that needs our attention is the size of our poster. Considering it is a poster, there are good chances that we will eventually print it. Side note: if we are working on anything that has to go for print, it must have a resolution of 300dpi. If you would like to know more about creating files for printing, please leave a comment about the same and we shall soon do a couple of posts on the same.

Final Result

Here is a preview of what we are trying to create.

Final geometric poster

Setting up the Photoshop file

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). We’re creating an A4 size file; set the width to 2480 and the height to 3508 pixels. We’re creating a graphic for print, as mentioned before, so set the Resolution to 300 pixels/inch.

Setup photoshop file

2. Choose a color (#f7a901)and use the paint bucket tool (or Alt + Backspace) to fill in the base color to Background layer.

Add base color

Adding the main Graphic

3. Using the horizontal type tool (T), type any word you like. I chose to write a number 139, using the Chalet-Tokyo font in 450px size, color (#ede9cc) and aligned them, like the graphic below.

Type a word

4. Select the text layers in the layer panel (ctrl + click layers that need to be selected), right click them and choose Rasterize Type. This will convert text layers from vector to raster and help us with their fine-tuning.

Rasterize type

5. Words may need a bit of fine-tuning to fit the layout and form a better graphic. Here is a quick list of editing done using Polygonal Lasso Tool (L) that was required to fine-tune “139” as per the graphic alignment.

• The height of 1 was decreased a bit and its tip was slant-cut.
• The tip of 3 is decreased to create a visual spacing between 1 and 3. Also, the neck of 3 is adjusted to align itself to the tail of 9.
• The tail of 9 is extended and its end is curved to lock itself close to 3.

Editing & fine-tuning the type

6. Reselect the text layers as described in 4th step and merge them using Layer > Merge  (Ctrl + E). Name the merged layer Main Graphic.

Rename the merged layer

Next, we need to add depths and shadows, both outside and inside.

Adding outside depth

7. To create depth, we need to duplicate the Main Graphic layer. Press Alt + push the Right key on your keyboard. Now without pressing Alt, press the down key. This layer would automatically be named Main Graphic copy. In the layers panel, drag this new layer below the Main Graphic layer.

8. Again, press Alt + push the right key. Without pressing Alt, press the down key. Repeat this process several times to have a considerable amount of depth. Select the layer just below Main Graphic (Top but one layer) and holding shift key, select the layer just above the Background Layer. Merge them as described in 6th step. Name this layer Outer Depth.

Name this layer Outer Depth

9. Make sure Outer Depth is selected. Go to Layer > Layer Style > Color Overlay. Choose color: # 392c02.

Color overlay

10. If you see your poster at 100% view, some of the edges will look jagged. Let’s quickly clean these edges. Using Polygonal Lasso Tool (L), select the edges and press the delete key. Repeat the process for all the edges that require cleaning. Voila! You just added a solid depth to your graphic.

Clean the edges

Adding outer shadow

11. Holding Shift + Alt key, drag the graphic diagonally down-right to double the depth. Name this layer Outer Shadow and in the layers panel, drag it below the layer Outer Depth. Use color overlay to change the color of this layer to # b47c01. Looks good, doesn’t it?

Creating thick edges to highlight inner depth and shadow

12. In the layers panel, right-click Main Graphic and Duplicate layer. Let’s name it Thick Edges.

Name it Thick Edges

13. Create a marquee selection around the shape by Ctrl + clicking on Thick Edges layer’s thumbnail in the Layers Panel. Select > Modify > Contract (Alt + S + M + C) to contract the selection by 40 pixels. You may vary the number of pixels, depending on how thick you want the edges to appear.

Contract selection

14. Press delete to remove the selected area. Select > Deselect (Ctrl + D) to deselect the selection.

15. At 100% view, some of the inside edges will look ill-defined. Using pen-tool (P), define the edges. Repeat the same for all ill-defined edges. Ctrl-select these new layers and merge them. Press Ctrl + E to merge the new layer with Thick Edges. This is the area that will highlight the inner depth and shadow.

Ill-defined edges

Adding inner depth and shadow

16. Press Alt + push the right key. Without pressing Alt, press the down key. Color overlay it to # 392c02. Repeat this process about six times. Ctrl-select all the layers above Thick Edges and merge them. Clean the edges as described in 10^th step. Name it Inner Depth.

Name this layer Inner Depth

17. Again, holding Shift + Alt key, drag the graphic diagonally down-right to double the depth. Name this layer Inner Shadow and in the layers panel, drag it below the layer Inner Depth. Color overlay it to # 9c9d8d.

Name this layer Inner Shadow

18. Marquee select the Main Graphic. Shift + Ctrl + I to invert the selection. Select Inner Depth and press delete. Repeat it with Inner Shadow and deselect the selection.

19. Move the Thick Edges layer to top of layers panel and see the magic.

20. Add your logo, a headline or a message and have fun with this Geometric poster!

Here is the final result!

Hope you like it! Adapt it to your artwork, style and share it with us.

Final geometric poster

Show us what you made!

Did you try this tutorial? What are your variations and artworks derived from this tutorial? Share your work on the Pixelonomics Flickr group and contribute to this active community.

Download the Photoshop file used in this tutorial

Geometric-poster.zip (ZIP, 665 kb)

Pixelonomics