Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

Posted in Quick Tips, Tutorials, Web Interface10 months ago • Written by 13 Comments

In this tutorial I am going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Video Tutorial

And in case you prefer to do it the rough way, here’s a text and screenshot combo tutorial for you!

Step 1

Create a new document in Photoshop 730px by 410px and then let’s create guidelines by just dragging some guides from the Ruler Tool and placing them at the center of the canvas horizontally and vertically.

Step 2

Using the Ellipse Tool (U) create a 120px by 120px shape and place it in the center. Hide the fill layer and a stroke of 5px, color to #e1e1e1.

Step 3

Zoom in about 1200% and create a 1px line using the Line Tool (U) starting from the top edge of the circle down to the middle.

Step 4

Press Ctrl + Alt + T on the keyboard and you will see a transform control. See that Pivot Point (something like the crosshair of a sniper) on the center of the line? Let’s move that to the bottom edge of the line by holding the Alt key on the keyboard and clicking and dragging it to the very bottom.

Step 5

Don’t press enter yet. While the transform control is still there change the value of the Rotation to 10 degrees and press enter twice.

Step 6

Now press Shift + Ctrl + Alt + T on the keyboard, what this does is copy what we did in Step 5. Just continue pressing the keys until you have a spiral line shape.

Then change the color to white.

Step 7

Duplicate the base first/base shape that we’ve created and place it at the very top of the layers panel. This will serve as the rotation indicator.

Apply this gradient overlay.

Step 8

Mask the part you want to hide and make sure it matches with the desired day, time, min, sec that we will put it.

Step 9

Using the Text Tool (T) add a number for the desired day, time, min, sec and add the right label to it.

Final Step

Group the layers that we’ve created and duplicate it 4 times and align them horizontally by adding a 20px gap between each timer.

Look what I did here. With the timer that we’ve created I put an iOS7 wallpaper and blurred it about 15%. Then I played with the layer mask to hide the unnecessary parts, added some drop shadows and Boom! I came up with image you see below.

It’s a challenge for you to take this tutorial and go to the next level by just playing with layer mask and adding touches to make it look interesting, yet still minimal.

The Wallpapers

Man Of Steel


Download

Flying Paper Plane


Download

Windmills


Download

Hot air balloon


Download

Hot, Ice, Cozy and Frapp


Download

The Evolution of Man Geek


Download

Paper Plane


Download

Vintage Camera


Download

Air Plane


Download

Space Shuttle


Download

iOS7 Wallpaper

Image from Ihponehacks
Here is the iOS 7 Wallpaper from WWDC 2013. You can download the wallpaper here.

That’s it guys, I hope you learned something from this tutorial. It will be awesome if you share your results below. If you have questions feel free to drop them below. I would love to hear your thoughts and I am willing to answer your questions. I’ll catch you guys in the comments. Peace!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

13 Comments Best Comments First
  • Michael Smith

    Monday, July 8th, 2013 10:04

    9

    Looks great but you left the project unfinished. Right now you have a static image of what you want your countdown timer to look like, not a countdown timer. You should consider partnering with another person to push this project into the development stage. Link from this tutorial to another one that shows how to take the psd files and integrate them into a live website.

    +4
    • Matt Gross

      Tuesday, July 9th, 2013 11:58

      10

      I’m no developer, but there’s already a circular clock/dial in jquery that I use every now and again made by Anthony Terrien. http://anthonyterrien.com/knob/ I should imagine that one could use it as a base and style it to look like this.

      +1
  • Dave Madarro

    Friday, July 5th, 2013 07:45

    2

    Awesome job Michael, I got some ideas from this tutorial! :-)

    +2
    • Michael John Burns

      Friday, July 5th, 2013 14:07

      4

      Hello Dave,

      Glad to hear that. If you wouldn’t mind. What are you planning to create? :)

      +1
  • Justin Gilbert

    Saturday, July 6th, 2013 19:40

    6

    That windmill background looks awesome. Love silhouette wallpapers. They just look so clean. That’s goin on my desktop!

    +2
  • Yasin Atagun

    Saturday, July 6th, 2013 18:06

    5

    This countdown looks really fancy. Thank you for tutorial and inspiration.

    +2
  • Nivetha Rajan

    Wednesday, July 3rd, 2013 08:18

    1

    Wow, absolutely new great ideas.

    +1
  • Lu

    Monday, July 8th, 2013 02:23

    8

    This is a great photoshop tutorial for countdown clock!!! really cool! :)

    +1
  • Maruf

    Saturday, September 14th, 2013 05:47

    13

    This is really very effective tutorial for us ,,, Thanks for share this !!

    +1
  • Chris Blake Jones

    Saturday, July 20th, 2013 16:57

    11

    Great tutorial! I really like the “flat” design.

    +1
  • Arif

    Sunday, July 7th, 2013 15:28

    7

    Wonderful tutorial ! just i was looking for this and I am so inspired from this tutolial, Thanks

    0
    • Arif

      Friday, July 26th, 2013 13:38

      12

      This also effective tips and thanks for wonderful image sharing.

      +1
  • Sreejesh

    Friday, July 5th, 2013 09:23

    3

    Thanks for sharing idea. But I’m not a big fan of iOs7 design style. Apple remind us Simplicity is hard to achieve.

    0
  • Maruf

    Saturday, September 14th, 2013 05:47

    13

    This is really very effective tutorial for us ,,, Thanks for share this !!

    +1
  • Chris Blake Jones

    Saturday, July 20th, 2013 16:57

    11

    Great tutorial! I really like the “flat” design.

    +1
  • Michael Smith

    Monday, July 8th, 2013 10:04

    9

    Looks great but you left the project unfinished. Right now you have a static image of what you want your countdown timer to look like, not a countdown timer. You should consider partnering with another person to push this project into the development stage. Link from this tutorial to another one that shows how to take the psd files and integrate them into a live website.

    +4
    • Matt Gross

      Tuesday, July 9th, 2013 11:58

      10

      I’m no developer, but there’s already a circular clock/dial in jquery that I use every now and again made by Anthony Terrien. http://anthonyterrien.com/knob/ I should imagine that one could use it as a base and style it to look like this.

      +1
  • Lu

    Monday, July 8th, 2013 02:23

    8

    This is a great photoshop tutorial for countdown clock!!! really cool! :)

    +1
  • Arif

    Sunday, July 7th, 2013 15:28

    7

    Wonderful tutorial ! just i was looking for this and I am so inspired from this tutolial, Thanks

    0
    • Arif

      Friday, July 26th, 2013 13:38

      12

      This also effective tips and thanks for wonderful image sharing.

      +1
  • Justin Gilbert

    Saturday, July 6th, 2013 19:40

    6

    That windmill background looks awesome. Love silhouette wallpapers. They just look so clean. That’s goin on my desktop!

    +2
  • Yasin Atagun

    Saturday, July 6th, 2013 18:06

    5

    This countdown looks really fancy. Thank you for tutorial and inspiration.

    +2
  • Sreejesh

    Friday, July 5th, 2013 09:23

    3

    Thanks for sharing idea. But I’m not a big fan of iOs7 design style. Apple remind us Simplicity is hard to achieve.

    0
  • Dave Madarro

    Friday, July 5th, 2013 07:45

    2

    Awesome job Michael, I got some ideas from this tutorial! :-)

    +2
    • Michael John Burns

      Friday, July 5th, 2013 14:07

      4

      Hello Dave,

      Glad to hear that. If you wouldn’t mind. What are you planning to create? :)

      +1
  • Nivetha Rajan

    Wednesday, July 3rd, 2013 08:18

    1

    Wow, absolutely new great ideas.

    +1

Comments are closed.

23.20.149.27 - unknown - unknown - US