Speedometer Design From Scratch

Speedometer Design From Scratch

What We’ll Be Creating

Speedometer Design In Photoshop

Creating The Document

Create a new document (Ctrl + N) 800 x 600 pixels with any color background. Set your foreground to the color #353535 and background color to #161616, then select the “Gradient” tool (G) with a radial gradient.

Speedometer Design In Photoshop

Drag the radial gradient from the center of your canvas outwards until you have something like this.

Speedometer Design In Photoshop

Creating The Speedometer Dial

On every speedometer there are little lines which indicates the speed you are going, you can simply create these lines by using a mixture of vector masks and paths. A much easier way would be to use a circular path and the text tool.

Select the “Circle” tool (U) then set the circle type to paths.

Speedometer Design In Photoshop

Drag out a circular path in the middle of your canvas.

Quick Tip:

When dragging out the path onto your canvas hold down the Shift Key on the keyboard, doing this will ensure the circle is the same size all the way around opposed to the circle looking like an ellipse.

Speedometer Design In Photoshop

Once you’ve your happy with your circle select the “Type” tool (T). If you move your cursor over the path you will notice the cursor changing to something which resembles a line with some curvy dots running through it. Once the cursor shows up click your left mouse button to begin typing along the path.

Select the font “Verdana” with a size of 12px then using the line character on the keyboard add some lines.

Speedometer Design In Photoshop

Once you’ve added some lines select one line every 4 lines and make it bigger by changing the font size to 18px. The image below explains it a lot better.

Speedometer Design In Photoshop

Once you’ve finished doing your lines highlight the last couple of line and turn them red.

Speedometer Design In Photoshop

Using the techniques learned above create another circular path inside your first one but make it slightly smaller. Using the “Type” tool (T) this time add some full stops.

Speedometer Design In Photoshop

Finally to complete the speedometer dial add your numbers and any other additional text you might want.

Speedometer Design In Photoshop

Creating The Speedometer Inner Circle

Select the “Circle” tool (U) then on a new layer below your dial layers drag out a circle. The circle should be bigger than your dials.

Speedometer Design In Photoshop

Once you’ve created your circle add the following layer styles.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

When adding the gradient overlay drag the circle on your canvas into the top left side of the “Inner Circle”.

Speedometer Design In Photoshop

You should have something like this.

Speedometer Design In Photoshop

Creating The Chrome Outer Circle

Select the “Circle” tool (U) then on a new layer underneath the “Inner Circle” layer create a bigger circle.

Speedometer Design In Photoshop

Once you’ve created your new bigger circle add the following layer styles.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

You should have something like this.

Speedometer Design In Photoshop

Creating The Speedometer Needle Circle

Select the “Circle” tool (U) then create a small circle inside of your speedometer.

Speedometer Design In Photoshop

Now add the following layer styles.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

You should have something like this.

Speedometer Design In Photoshop

Re-select the “Circle” tool (U) and create a small white (#ffffff) circle inside of the speedometer needle circle, once you’ve created the circle set the opacity to 5%.

Speedometer Design In Photoshop

Creating The Speedometer Needle

Select the “Circle” tool (U) then create a small circle inside of your speedometer needle circle.

Speedometer Design In Photoshop

Now select the pen tool, once selected change the type to “Paths” then select “Add To Shape Area”.

Speedometer Design In Photoshop

Zoom into your circle, select the vector mask inside of the layers window for that circle then draw the needle starting from the side of the circle.

Speedometer Design In Photoshop

Once you’ve created the needle add the following layer styles.

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Speedometer Design In Photoshop

Your needle should now look something like this.

Speedometer Design In Photoshop

Bringing The Speedometer To Life With Some Reflections

In the last a final step I’m going to show you how to add some reflections to the speedometer, firstly select the “Polygonal Lasso” tool (L). Once selected make a selection across the speedometer like the image below.

Speedometer Design In Photoshop

Fill (G) the selection with the color white (#ffffff) then load a selection around your speedometer “Inner Circle”.

Quick Tip:

To quickly load a selection around an object simply click the little thumbnail in the layers window whilst holding down the Ctrl key on the keyboard. Alternatively you can select it from the menu, “Select > Load Selection”.

Speedometer Design In Photoshop

Now go to “Select > Inverse” (Ctrl + Shift + I) then hit the delete key on the keyboard. You should be left with a shape which sits inside your speedometer inner circle.

Speedometer Design In Photoshop

Select the “Polygonal Lasso” tool (L) again then make a selection in the middle of the white shape. Once your happy with the selection hit the delete key.

Speedometer Design In Photoshop

Next, add a gradient overlay to your white shape using the default settings then set the opacity to 5%. You should be left with something like this.

Speedometer Design In Photoshop

Were now going to add a big light reflection to the rim of the speedometer “Outer Circle”. Select the “Elliptical Marquee” tool (M) then make an ellipse in the top left side of the speedometer outer circle. Fill (G) the ellipse with the color white (#ffffff).

Speedometer Design In Photoshop

Now go to “Edit > Transform > Warp”, from the warp menu select arc.

Speedometer Design In Photoshop

Once you’ve selected arc from the menu drag the anchor point at bend the ellipse, then “Free Transform” (Ctrl + T) and rotate the ellipse so it follows the curve of the outer circle.

Speedometer Design In Photoshop

Now guassian blur the ellipse by going to “Filter > Blur > Guassian Blur”, blur by about 3-4 pixels. Once you’ve blurred the ellipse set the opacity to about 70%.

Speedometer Design In Photoshop

Conclusion

That’s it you’ve completed the tutorial, hope you enjoyed enjoyed it. You could now take it one step further and add a rev counter using the same techniques you’ve learned or maybe add some more dash boards items like the little glowing symbols or even a fuel gauge.

Speedometer Design In Photoshop

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

20 comments
Rawaf says

Thank you Richard

It’s perfect and easy tutorial and I wish you continue with this type from tutorials because I like them and learn more and more in Photoshop :)

I have request: can you add tutorial about design card visit ?

Best regards
Rawaf

Reply
Mustapha says

Great tutorial, <3 this site..

Reply
AnonSphere says

Really nice and easy, thank you!

Reply
El says

Excellent tutorial

Reply
Equinoxs says

Great tutor,

Learned a lot today.

Thanks

Reply
Amr Boghdady says

Awesome tutorial!
Loving the end result!

Good job Richard :)

Reply
web says

Nice tips, really worth reading it, I liked it to the core , thanks!!..

Reply
glass shelf says

Awesome tutorial!
Learned a lot today.

Thanks

Reply
white says

cute Speedometer,you are great.

Reply
Maria says

Excellent tutorial, thanks a lot! So easy and so nice.
But in the step when you draw the needle you have repeated one picture twice. I mean, there are two pictures for Drop Shadow effect, and no one for Inner Shadow.

Reply
Richard Carpenter says

Thanks for heads up “Maria”

i have now made changes to reflect the inner shadow,

thanks for your comments much appreciated

Reply
Logomondo says

Very nice tutorial,I will give it a try. Thanks.

Reply
aditya says

awesome tutorial man….
keep it up

Reply
Brett Widmann says

This was a fun tutorial! Thanks.

Reply
Straight-P says

Awesome Tut

Reply
KOFI FOSU POKU says

You are a genius indeed,want to be like u.

Reply
Linetoweb says

Nice tut

:)

Reply
David Walters says

Thanks for this tutorial, I used it to help with my new (freeware) game Cruise Racing for PC.

Reply
Phakiso says

Nice 1, now my racing car is ready for action

Reply
Add Your Reply

Popular posts

css.php