Create a Gauge Interface in Photoshop

In this tutorial I will show you how to make a speedometer gauge interface using the tools in Photoshop. This could show you skills on how to create a gauge for a website or something you could convert over to a working flash document. Who knows maybe you could even use this as a real gauge?

First start new document with the size 500X500px, I am going to walk you through making the tachometer first in its own document then you can duplicate that one for the speedometer.

So in your new document start a new layer and create a circle in the middle of the canvas and choose a dark blue color for it. The blue I used is #00082d.

Next create a new layer and within that circle create another one and use whatever color
you want, I just used white so I could see the circle.

Now add these blending options to that layer

Outer Glow

Inner Glow

Gradient Overlay

Time yet for another circle.. Create this one in a new layer and in the middle of the last one leaving space around the edges.

Now add this blending option to the new circle.



Also click on the gradient to bring up the gradient editor choose these colors



This window will pop up



Now you should have this so far

Now to make the lines like a speedometer has you need to create a circle the exact same size as the 2nd circle we made. So I am going to hide the other circle layers for now and hide the blending options so we just have our 2nd circle showing and white again.

To create another circle the exact same size we will use the ruler tool. Hit ctrl+r on your keyboard to bring up your ruler tool. You will see a ruler pop up on the top and left of your window.

Don’t worry about what the number is in the ruler because it doesn’t matter at this point.

First click on the top ruler with your mouse and bring down a guide on the very top of
your circle.

Do the same thing for the bottom and the left and the right of the circle.

Now create a new layer above all the others we have made so far. Choose your ellipse
shape tool.

As you can probably guess we are going to create a circle within those guides, they will help make it the exact size of the other circle.

The most important part of this next step is this; make sure in your shape settings to choose “Shape Layers”. You will see the shape settings at the top of the photoshop window with the tool chosen

This is important because once we create the circle this setting will allow us to put the lines
on its path.

Create your circle within the guides and there will be a line around the circle

Once you make your circle you can drag your guides off your screen.

After removing those guides we need to add one back, except put it right in the middle of the circle. The guide should automatically snap to the middle once you drag it there.

If your guide does not snap to the middle in phtoshop go to view and make sure “snap”
has a checkmark beside it.

Ok now its time to add the lines for the speedometer.

Grab your text tool and choose whatever text you want. I am using one on my computer called Helvetica Neue Medium Condensed. Click on the bottom middle of the circle and use the color white and hold down shift. Click on your back slash key to create a vertical bar.

Here are the font settings I used:

Hold down the vertical bar key until you have the lines for your speedometer most of the way around your circle. I stopped at a certain point but just estimated it.

After looking at some real speedometers I decided I am going to make my tachometer go up to 10,000 RPM’s since this is a tutorial. Most cars don’t go that high but some super cars do so that’s how I am going to make it. Each notch for me will represent 50 rpm’s and I will base where I place the next notches we will make for the next step.

In this step I will place the notches that will be the mid point for the whole numbers.

So from 0 and up 10 notches will be 500 rpm’s and that notch will be a little longer than what we currently have. The other notches will be even longer than those where I will be placing the whole numbers 1 through 10.

To make these notches longer I tried just counting up 10 and making the font bigger where I wanted a bigger notch but this did not work out for me well. So I decided to use the line tool.

Create a new layer and while in that layer, hold down ctrl and click on the preview icon on the left of the 2nd layer’s name. I renamed my layers to make this part easier. I named the first circle we made “bottom circle”, then “second circle”, and “glow circle”.

Doing this will create an outline the same radius as the circle.

To make the notches the same length there is a cool little trick I will show you.

In your new layer with your selection still made go to select>>modify>>expand

In the window that pops up put 12 as your number.

Now do you see how that expanded the selection. So now when we use the line tool to make the longer notches we can take them to that line and they will be even.

Now choose your line tool, change your color to white and zoom in to the tachometer.

Count 10 lines and place a line that goes out to the selection.

Then from the first notch you made you need to count up 20 lines to create the next mid point notch. The reason for this is because if you only counted 10 more that is where the actual whole number would go. So keep counting up 20 from each notch until you reach the
end.

Here is what I have after that

Now create a new layer above those notches to create the longer ones where the numbers will be placed.

Use the same method as before and in the expand settings put the number 16.

Now place a line every 10 notches after the mid notches.

So now we can place our numbers, you can use whatever font you like. Here is how mine looks with the numbers placed.

I placed a drop shadow on each of my numbers.

From the 9 until the end we need to make the lines red because that is where the car would redline if this was a real tachometer. So to do this just highlight the lines with your text tool and choose a bright red as your color.

Other real speedometers usually have some sort of red bar along with the red marks so to do this we will use techniques already discussed in this tutorial.

Create a new layer below the numbers but above the notches.

In this layer use the ctrl+click technique yet again on the second main circle to make a selection. Fill that layer with a mid red color I used #ba0810.

Now we are going to use the modify tool again by going to select>>modify except this time choose “contract”. Set your number to 12 again.

Just hit delete on your keyboard to get rid of what is within the selection.

Now I will erase the rest of the red line from the 9 back.

I want to fade this red part at the bottom to give it a more modern feel. To do this I will add a layer mask to the layer, get my gradient tool, and drag upward to fade it.

So now that’s done, I will add some text that says X1000 RPM on the lower right side of the tachometer.

Next will be a quick speedometer needle.

First make a circle in the middle in a new layer with a dark blue.

Create a new layer and a smaller circle within that one.

Add these blending options to it

Outer Glow

Bevel and Emboss

Color Overlay

Choose the color black.

After that it should look like this

To make the speedometer needle I just use my rectangle shape tool to first make a line down to the “0”

Put a guide down the middle of the line so we can cut off the end evenly and make an angled at the end like a real needle in a car.

I added a gradient and drop shadow to the needle for added effect.

Finally I will add one more circle above the needle to give it more realism.

All these steps showed you how to make a simple speedometer in photoshop, here is my final image. I went through and made a full speedometer/tachometer display…



Click on image for large version

Thanks for reading!

By John Overbee

John Overbee is a graphic designer for the iEntry Network.

Leave a comment