easyodometer

Easy Odometer Icon

author     date03/28/2012     date19 Comments

Hi guys! I’m Tiago, from Porto Alegre, RS, Brazil. I’m 26 years old and I’m working as art director at MMDA. I “met” Fireworks in 2009 and when I became a Fireworks enthusiast! I’m glad to be part of the FWPolice team and share with you some Fireworks tutorials. FYI: I’m still learning English, so… be patient! Hope you enjoy it ;)

In this first post, I decided to join 2 things I love: icons and Fireworks! And as I’m a big fan of Bjango’s work (check it out bjango.com) I’ll start with a very simples tutorial to show you how to create a very cool icon using Fireworks.

THE FINAL RESULT

STEP 1

Open Fireworks and create a new document. I’m using 640×640 pixels. Using Elipse Tool (U) create a circle. Fill it with a linear gradient. I’m using the following colors sequence #F5F5F5 (top), #BEBEBE (medium) and#DCDCDC (down).

STEP 2

Add Noise filter with amount 1 to make it more realistic.

STEP 3

After that, create a new circle. I’m using linear gradient fill with the following colors sequence: #1A242F,#2C3D4E#384C61#5A6B82 and #818993.

STEP 4

Apply 2 filters to this circle: Drop-shadow with distance 2opacity 100%softness 0angle 270º and color #ffffff. And the second filter is Noise with amount 2.

STEP 5

Create another circle with linear gradient fill using the following colors sequence #0A0A1E and #0A0A28.

STEP 6

Create another circle, with radial gradient fill using this colors sequence: #004C95 and #00102D.

STEP 7

Now we’re going to create the odometer’s markers. I’m adding 4 rectangles as you can see in the image bellow;

STEP 8

Now, combine the rectangles in a unique path using Union Paths on Path Tab.

STEP 9

Create another circle in front of the path. Select both and click Punch Paths.

STEP 10

I decided to delete some markers using Subselection Tool (A). Feel free to do it as you want.

STEP 11

Repeat steps 7 to 10 to create new markers. I’m using lighter markers with the #21D1F7 color fill and darker markers with #00163E color fill.

STEP 12

Create the alert bar using the same technique. Use 2 circles, and click Punch Paths. Use the image bellow as reference:

STEP 13

Now, create a square, turn it 45º and position it over the path created on step 12. Click Intersect Path.

STEP 14

Select the markers and use Glow Filter with width 0opacity 35%softness 10offset 0 and color #00FFFF.

STEP 15

Apply radial gradient to the markers using the following colors sequence #B1EDFD and #82C5FF.

STEP 16

Create a new small circle. I’m using solid color #000000 with opacity 85% and Blend mode Overlay.

STEP 17

Create a triangle. Use linear gradient fill with the following colors sequence #F05258#BA011C#7A0222and #D50019.

STEP 18

Create another circle. I’m using linear gradient fill with the colors #A6A6A6#333333 and #787878. Add Photoshop Live Effects, apply Bevel and Emboss using the setup bellow:

STEP 19

Use your creativity to add new effects to make it more realistic. The final image will be something like this:

Hope you enjoy it!

 
Want to use this for your next project? Download the source file to play with.

19 Responses to “Easy Odometer Icon”

Leave a Comment

You must be logged in to post a comment.

 

Premium HTML & Fireworks Resources

Get your hands on premium resources that will make your job much easier.