Jump to content


Photo

Golden Compass


  • Please log in to reply
13 replies to this topic

#1 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 13 September 2009 - 02:09 PM

Y'all,

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

http://vector.tutsplus.com/tutorials/icon-design/how-to-create-a-golden-vector-compass-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 Images

  • golden_compass.fw.png


#2 jchap

jchap

    Fireworker

  • Members
  • PipPipPip
  • 34 posts
  • Location:Japan

Posted 13 September 2009 - 03:51 PM

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.
Posted Image

Your work looks very polished and professional!

Jeff

#3 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 13 September 2009 - 04:45 PM

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

#4 Michel Bozgounov

Michel Bozgounov

    FireMonk

  • Members
  • PipPipPipPip
  • 94 posts
  • Location:Sofia, BG
  • Interests:Webdesign (XHTML, CSS, graphics)

Posted 13 September 2009 - 10:12 PM

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!

#5 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 13 September 2009 - 10:29 PM

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!

#6 Mikko

Mikko

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 152 posts
  • Location:Helsinki, Finland
  • Interests:Bacon

Posted 13 September 2009 - 11:04 PM

Really nice adaptation. Good Work, Dave!

#7 Michel Bozgounov

Michel Bozgounov

    FireMonk

  • Members
  • PipPipPipPip
  • 94 posts
  • Location:Sofia, BG
  • Interests:Webdesign (XHTML, CSS, graphics)

Posted 13 September 2009 - 11:20 PM

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...

#8 ace_ventura

ace_ventura

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 14 September 2009 - 06:53 PM

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

#9 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 14 September 2009 - 07:34 PM

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!

#10 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,228 posts

Posted 15 September 2009 - 09:36 AM

awesome work dave

#11 Michel Bozgounov

Michel Bozgounov

    FireMonk

  • Members
  • PipPipPipPip
  • 94 posts
  • Location:Sofia, BG
  • Interests:Webdesign (XHTML, CSS, graphics)

Posted 19 September 2009 - 10:03 PM

@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

#12 Zoe20

Zoe20

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 547 posts

Posted 20 September 2009 - 12:30 AM

amazing stuff DaveH

#13 Alan

Alan

    FireworksGuru

  • Root Admin
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1,507 posts
  • Location:San Francisco, California USA
  • Interests:Longboarding, art and video games

Posted 22 September 2009 - 10:43 AM

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. :)

#14 devin

devin

    FireMonk

  • Members
  • PipPipPipPip
  • 85 posts

Posted 16 February 2011 - 02:48 AM

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! :)



i think this wont work in CS3...