Rapid Fire #2: Golden Seal

Shiny golden seal

Whether it’s signifying merit or signalizing new content, a golden seal graphic often does the trick. Utilizing two of Macromedia Adobe® Fireworks®‘ nifty features—Auto Shapes and Text On A Path—you’ll be stamping shiny seals in no time.

Update 2006-11-20: Spanish translation is available, care of Uriel.

The Making Of A Star

We start off by creating our base shape—the starburst. Select the Star Tool (Icon) and draw a star that’s around 150px wide. Drag the Points Handle up to increase the number of rays to around 22, and similarly drag the Inner Radius Handle to produce shorter, more triangular rays.

From star to superstar

Next, we add a splash of color. Give the starburst a gradient fill going upwards, from #DDA600 to #FFEB77. That should give it a nice golden tone. Adjust the colors to suit your taste; you can go for royal blue, crimson red, or forest green, if the situation calls for it.

Color me gold

Then we give our starburst a subtle shadow. Apply to it a Drop Shadow Live Effect, with 2 Depth, 55% Opacity, 2 Blur, and 270° Tilt.

Drop shadows, not bombs

Faux Inverted Bevel Mini-Tutorial

Use the Text Tool (Icon) and place your main text on top of and centered on the starburst. I chose bold-italicized Georgia for the fontface, but you can use any font of your choice. (Traditional serifs look good on seals.) Give it a color similar in hue to, but slightly darker than the starburst’s. (Try #DDA600 to match our gold tone) Copy-paste (Ctrl+C, Ctrl+V) the text you just made and push it one layer down (Ctrl+↓). Nudge it 2px up, give it a solid black fill, and set it’s opacity to 50%. Paste another copy of the main text and again push it one layer down. (It should be a layer below the gold-colored text) This time, nudge it 2px down and give it a solid white fill. Set it’s opacity to 50% just the same.

Bevel in one, two, three

Note: This bevelling technique works best with solid-colored, small-sized graphic elements. I came up with this technique because Macromedia Adobe® Fireworks®’ built-in Outer Bevel Live Effect is of crappy quality. If you want a raised bevel effect, just switch the colors of the two back texts.

Words Go ‘Round

For the pièce de résistance, we’re gonna put some accompanying text on a circular path, similar to most gold seals we see on certificates and legal documents.

Use the Ellipse Tool (Icon) to create an outer circle, centered over the starburst. Then, use the Text Tool to create a couple of center-justified text objects that will form parts one and two of your accompanying text. Center them horizontally over the circle you just made, align the top of the first part of text with the top of the circle, and align the bottom of the second part of text with the bottom of the circle. After this, create another circle, this time smaller than the first one, with it’s top touching the bottom of the first part of text, and it’s bottom touching the second part of text. This arrangement ensures that your texts are perfectly aligned along concentric paths once you attach them to the circles.

Text on a circular path

Once you have everything aligned, select the first part of text and the inner circle, and attach the text to the path (Text > Attach To Path; Ctrl+Shift+Y). Once the text is on the circle path, adjust the Text Offset to position the text correctly. Do the same for the second part of text and the outer circle, this time reversing the direction (Text > Reverse Direction) so the text flows inside the circle.

To finish off, adjust the Kerning of the accompanying texts so they occupy just the right amount of space on either side of the main text. Give each of your accompanying texts a color that is similar to that of the starburst, with just the right darkness/lightness to create contrast against the starburst background.

Finishing moves

Tips On Usage

When you’re all done, select all of the objects on the canvas (Ctrl+A) and create a symbol out of it (F8). Because of some quirks in Macromedia Adobe® Fireworks® that happen whenever you resize/rotate gradient-filled shapes and texts-on-a-path, you’ll want to flatten an instance of your symbol (Ctrl+Shift+Alt+Z) before applying any transformations to it. Also, depending on the situation, you’ll want to adjust the intensity of the drop shadow to make your seal prominent.

Yummy example

Disclaimer: The author of this tutorial will not be held responsible for any legal consequences arising from misuse of the same, including, but not limited to falsificaton of deed of sale, incorporation documents, and high-school diplomas. Happy stamping!

Need a quick sample to study? Download the source PNG (tutorial02.zip, 197KB) for this tutorial.

43 Responses to “Rapid Fire #2: Golden Seal”


  1. 1 tim

    Great tutorial ! Thanks a lot

  2. 2 Estrup

    Very well written indeed. Thanks buddy!

  3. 3 Ishita

    Great trick! Thanks

  4. 4 Wayne

    wow how easy is that! excellent trick indeed. Fireworks rocks!

  5. 5 Steve

    Thanks for this. I’m always happy to see Fireworks tutorials, since there are so few of them, except basic ideas. I enjoy seeing how people use the tools in combination to create nice effects.

    Is it okay to share one of my own here?
    Pixelation - Color Sampling

  6. 6 koan

    If you’re going to use the seal with a little rotation, better is to apply the shadow AFTER the rotation to provide a more realistic effect: what if I apply a 270° shadow and then I rotate the seal 45° more? :) BTW, great tutorial!!!

    Thanks.

  7. 7 Hugo

    Very cool tutorial!

  8. 8 John

    verycool i liked it a lot

  9. 9 Brownspank

    koan: I see what you mean, but there’s more to it than meets the eye. Not only do you need to apply the shadow afterwards, but you also have to wait until the end to apply your gradient for the starburst, and nudge texts for the faux bevel, both of which coincide with the same light source as the does shadow. Not that it’s not doable, it’s just harder to explain it that way in the tutorial.

    Thanks for the worthy comment, though. I appreciate it. ;)

  10. 10 Nuno

    Great work, but I have some doubts (I’m a newbie to fireworks)

    How do I save my new “stamp” with a transparent background without loosing the inner stamp gradient?

  11. 11 Brownspank

    Nuno: First, set your canvas color to transparent, then export it as a PNG with Alpha Transparency.

  12. 12 TipClique Tutorials - Drixer

    Great tutorial, it has been linked to from my site at http://www.tipclique.com/ which allows ranking of tutorials, I think this will fair well.

    Thanks

  13. 13 Giovanna

    Great e verycool tutorial. Giovanna.

  14. 14 Robert

    Great tutorial thanks

  15. 15 aad_lfcfn

    thanks for the tutorial. you do photoshop too?

  16. 16 Brownspank

    aad_lfcfn: I tried using it, but never got the hang of it. Fireworks just happens to suit my preferences more.

  17. 17 Eric

    good job. i used it for a website i was making. very thorough. i like fireworks 10 times more than photoshop.

  18. 18 Mike the Tiger

    Love it!!! Thanks so much!

  19. 19 Werker

    Awesome tutorial! Thank you, thank you, thank you!!!

  20. 20 Samuel Benson

    Fantastic!! as I am in the middle of my A-levels and drawing the intial ideas for my coursework these tutorials are invaluable thanks a lot!

  21. 21 Marv

    It’s simple…
    Thanks for the tutorialism!

  22. 22 web design

    thanks for this tutorial and expesiall y for the source file.
    Regards
    Dimi

  23. 23 minikperi

    very easy way of making web 2.0 logos. thanks.

  24. 24 zeb

    That was nice and neat!

  25. 25 DGS matematik

    Great, thc for tutorial

  26. 26 S.Ali Qamar

    Fantastic !!!, you really made it easy and described quite a many new skills for novice fireworks learner .. Thank you so much

  27. 27 bethany

    that was a bit peasy.
    the only thing is the language was over rated
    it could be madse easier to read as the actions done were pretty simple

  28. 28 J a k e y

    Didn’t think it was that good to be honest

    Nicole +& Jake x

  29. 29 Swanny

    I Could make a better tutorial myself
    jake you have my love ;) x

  30. 30 miss fairhurst

    was immense better than anything i could teach

  1. 1 LutinCapucheBlog » des etoiles tres trendy
  2. 2 Fireworks Designer » Blog Archive » Creating a Gold badge or Gold Seal in Fireworks
  3. 3 Web 2.0 Badges
  4. 4 Webmomente.de » Badges
  5. 5 Web 2.0 Star Seal Badge | ToolSoup
  6. 6 Beginner Fireworks Tutorials Roundup | Firetuts.com
  7. 7 Fireworks’e Yeni Başlayanlar İçin Dersler | BloGrafik
  8. 8 Fireworks’e Yeni Başlayanlar İçin Dersler | Bizim Neyimiz Eksik?
  9. 9 Robin’s Blog» Blog Archive » Fireworks Resources
  10. 10 Fireworksのチュートリアルいろいろ - DesignWalker
  11. 11 Los mejores tutoriales de Adobe Fireworks
  12. 12 M3HMET BLOG » Blog Archive » Fireworks’e Yeni Başlayanlar İçin Dersler
  13. 13 Fireworks’e Yeni Başlayanlar İçin Dersler | M3HMET BLOG

Leave a Reply