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.

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


Comments are currently closed.