Meter design in Photoshop


Advertisement

In this Adobe Photoshop tutorial we will show you how to create meter design. We will create meter for websites with miscellanea indicators on meter. Also you can create speedometer, using this technique.

Final Image Preview


Step 1

Let’s start out by creating a new file. I used a 400×200 pixels canvas set at 72dpi, and I filled my background with #255B31 color shade. Now in a new layer draw a white circle with 92 x 92 px dimensions.

Step 2

Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options to the white circle layer.

Result:

Step 3

In a new layer draw a dark circle with #1F1D20 color shade and 78 x 78 px dimensions.

Step 4

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Gradient Overlay and Stroke blending options to the dark circle layer.

Result:

Step 5

Create a new layer, using the Pen Tool create a red pointed line on the center of the meter design.

Step 6

Now in a new layer draw a small white circle with 13 x 13 px dimensions covering the bottom of the red pointed line.

Step 7

Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options to the white circle layer.

Result:

Step 8

Select the Horizontal Type Tool then set the font family to Webdings, 14 pt, crisp and white color shade. Now in different text layers type the letters shown below for the random icons on the meter.

Step 9

In a new layer draw a black circle with 25 x 25 px dimensions as shown below. On the layers window select the first white circle layer from step one then go to Select > Load Selection, use the settings below. Now cut out the outer selection through Edit > Cut.

Step 10

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the black circle layer. Then set the layer's blending mode to Lighten.

Result:

Step 11:

Duplicate the white circle design layer from step six and resize it by a couple of pixels through Edit > Transform > Scale. Position it on the bottom corner circle.

Step 12

Add the same set of circle designs from the last couple of step on the opposite side of the meter design.

Results: Meter Design

 Download Meter Design Psd file


Dainis Written on Sunday, 24 May 2009 13:46 by Dainis

Viewed 7066 times so far.
Like this? Tweet it to your followers!
blog comments powered by Disqus

Sponsored by

PSD to XHTML

Grab Psdeluxe Rss feed

PsDeluxe rss feedGet latest photoshop tutorials, design resources and articles directly in your email. Subscribe to Psdeluxe Feed and stay be informed about latest design news.

Subscribe by email:
Subscribe by Rss: Add to Google Reader or HomepageAdd to Yahoo pageBookmark Add to Netvibe

Search

Community Links

Think you're in total control of your type? Truth is, you're on a short lead, in the tight grip of your typeface's designer.

Many household items for your vector illustrations. This pack includes a fan, wind chime, trophy, margarita, globe, bread basket and more. Royalty free vector. Free to use in your personal and commercial designs.

Some have a passion for web design; others consider it a mere task! This article is for those who consider web design more than just a task, in fact, it is ....

iPhone apps you can use to tune up your photos

Multi-billion dollar industry of Internet is booming. IPv4 address is nearing its exhaustion, and this clearly implicates what is the growth rate of Internet in the present scenario.

Thanks to...

Content Delivery Network Search Engine Optimization Suite for Joomla

The Best Fans on Facebook