[DaveH]

Y'all,

I came across this Illustrator tutorial today for drawing a golden compass:

http://vector.tutspl...in-illustrator/

And I thought to myself, "All of this can be in Fireworks." So I re-created the golden compass in Fireworks.

The Illustrator tutorial says this is "intermediate difficulty" and should take about 1.5 hours. I'm not a visual designer, so my drawing and illustration skills are not strong, but I did the Fireworks version in about that amount of time. I used the "Twist and Fade" command to create the compass marks, Text on a Path for the degrees, an Autoshape to create the 4-pointed star then applied the Wedgie extension to cut into 8 slices which were used to create the 8 pointers in the center. The gold rim was created by nesting a series of circles with different stroke widths (set to stroke outside path) and no fill, then the strokes were converted to fills with the Path panel, and the fills were all given the appropriate linear gradients. The shadow was created differently from the tutorial, because we can create an ellipse shape with feathered edge and an ellipse fill to simulate the lens distortion used in Illustrator (though there is a "fish eye" distortion tool in the Path panel that could be used, too.)

This is a Fireworks PNG source file, so feel free to take it apart and look at the guts. I don't have time to write the full tutorial right now, but I'll get around to it. Let me know if you have questions,

Dave

Attached image(s)

• 

[jchap]

Excellent attention to detail, Dave. This is really impressive.
The compass marks in particular are impressive.
I tried the same thing with the compass marks, but just drew a vector line,
cloned it and then rotated it, selected the result, cloned it,
rotated it, and so on. Took a few minutes, but it worked.
I then just pasted a circle on top to hide the strokes.


Your work looks very polished and professional!

Jeff

[DaveH]

jchap, on 13 September 2009 - 04:51 PM, said:

Excellent attention to detail, Dave. This is really impressive.
The compass marks in particular are impressive.
I tried the same thing with the compass marks, but just drew a vector line,
cloned it and then rotated it, selected the result, cloned it,
rotated it, and so on. Took a few minutes, but it worked.
I then just pasted a circle on top to hide the strokes.

Your work looks very polished and professional!

Jeff

Thanks, Jeff!

As you pointed out, there are several ways to accomplish the same end-result. When it comes to repetitive design elements, I'm always looking for ways to automate it, so I created the compass marks in about 30 seconds with two 20 px line segments positioned at the north and south ends (180 degrees from each other), grouped them, then used the Twist and Fade command to automate the duplicate and rotate actions for the 1 degree marks. I then did the same the 10 and 20 degree marks.

Dave

[Michel Bozgounov]

DaveH, on 14 September 2009 - 01:09 AM, said:

Y'all,

I came across this Illustrator tutorial today for drawing a golden compass:

http://vector.tutspl...in-illustrator/

And I thought to myself, "All of this can be in Fireworks." So I re-created the golden compass in Fireworks.

The Illustrator tutorial says this is "intermediate difficulty" and should take about 1.5 hours. I'm not a visual designer, so my drawing and illustration skills are not strong, but I did the Fireworks version in about that amount of time. I used the "Twist and Fade" command to create the compass marks, Text on a Path for the degrees, an Autoshape to create the 4-pointed star then applied the Wedgie extension to cut into 8 slices which were used to create the 8 pointers in the center. The gold rim was created by nesting a series of circles with different stroke widths (set to stroke outside path) and no fill, then the strokes were converted to fills with the Path panel, and the fills were all given the appropriate linear gradients. The shadow was created differently from the tutorial, because we can create an ellipse shape with feathered edge and an ellipse fill to simulate the lens distortion used in Illustrator (though there is a "fish eye" distortion tool in the Path panel that could be used, too.)

This is a Fireworks PNG source file, so feel free to take it apart and look at the guts. I don't have time to write the full tutorial right now, but I'll get around to it. Let me know if you have questions,

Dave

Amazing job, Dave!

Looks perfect! :-)

About how to create the compass' small markers - there are 360 of them - I got the idea:
- create two, one against the other (like in the Ai tutorial) and group them,
- then ctrl+D, ctrl+shift+T > rotate, 1 degree,
- then in history panel, select the duplicate and rotate commands (last two steps), and click on "Replay" for 179 times,
- done!

Looking forward for a tutorial of yours!

Or maybe, we can create two tutorials? ;-)

Cheers,
and once again, congrats!

[jdunning]

DaveH, on 13 September 2009 - 03:09 PM, said:

an Autoshape to create the 4-pointed star then applied the Wedgie extension to cut into 8 slices which were used to create the 8 pointers in the center.

Wow, you actually used the Wedgie extension for something useful! I've been wondering why it's been the second or third most downloaded extension. I figured people just liked the name.

Nice job on the tutorial!

[Mikko]

Really nice adaptation. Good Work, Dave!

[Michel Bozgounov]

Btw...

Commands > Creative > Twist And Fade!

Amazing! Just tried - I made the 360 compass marks in 30 seconds (just had to figure out how to set up the rotation and steps and other options)! Much better than clicking on "Replay" 179 times... ;-)

Fireworks continues to amaze me, every day...

[ace_ventura]

You can only do fireworks cs4 or fireworks 8 also.
Great work and congratulations DaveH

[DaveH]

ace_ventura, on 14 September 2009 - 07:53 PM, said:

You can only do fireworks cs4 or fireworks 8 also.
Great work and congratulations DaveH

Wow, it's been a while since I used FW8, but since there were only two extensions I used (Twist and Fade, Wedgie), if those extensions work in FW8, then this whole image is reproducible the same way in FW8. It can be done without those extensions - they just automate the rotate and duplicate action to create the grid marks (Twist and Fade) and a quick way to cut the 4-pointed star into 8 slices. All of this can be done manually (as some people have indicated they did) - it will just take longer to create the image.

There are no super-secret tools or techniques used. Actually, I think I only used the Line Tool, Ellipse Tool, Text Tool, and Star Autoshape. There are solid and gradient fills, some noise to reduce harshness (added as a Live Filter), a drop-shadow on the compass pointer, and a light texture to the compass face.

Let us know if you get it drawn with FW8!

[raja]

awesome work dave

[Michel Bozgounov]

@Dave:

I used your amazing golden compass in a short blog post of mine, trying to promote Fireworks:

Why Freworks?*

(Thank you for your permission to use it, citing you 'n all!) :-)

Cheers,
--Michel

[Zoe20]

amazing stuff DaveH

[Alan]

Nice one Dave! I particularly like how you did the background for the compass face. Its the suttle radial gradient that really gives off that classic compass feel.