Motivation: Fireworks has great text tools for creating logos
Features: Fireworks MX 2004 was used in the revision of theOpenSourcery Logo

If you have Adobe Photoshop CS, by all means take advantage of the improved text styling features available there. However, Macromedia Fireworks MX 2004 also provides some powerful tools for text manipulation. Fireworks' text features are particularly attractive and easy to use when creating logos. This is the software we used in creating the revised theOpenSourcery.com logos. The following examples shows one of those logos being designed - but we did over 10 logos of fair complexity in just under two hours - to give an idea how productive one can be with Fireworks.

The screenshot above shows Fireworks Mx 2004 with a bitmap already imported from a cropped screenshot of JavaScript code in Dreamweaver's code editor. We wanted a snippet of code to form the background - so we trimmed the JavaScript code into 350 x 90 pixel .gif file that was imported into Fireworks. Then adding "the Opensourcery" using Serifa BT font at 35px and the other Properties seen in the screenshot is a straightforward application of the text tool.

In the next step we use the Scale Tool along with the Distort Tool (two icons underneath the Scale Tool)to stretch out the logo title in an interesting way. The transform tools (Scale, Shear, and Distort) are some of the more useful options for giving a logo a distinctive look and styling.

The third step involves using the effects option in the text properties - in the first screen shot at the top of this tutorial we have highlighted the text effects at the bottom right of the screen. To the immediate left is the screenshot showing the second and most important effect being applied - DropShadow. Note that the Knock out option has been checked. This option blanks out or makes transparent the lettering, leaving the drop shadow to highlight the original letters.The whole idea is to have the title, "TheOpenSourcery" mingle with the underlying code.

The results are shown at the left as the text title is being positioned precisely in the logo. This is close to what is desired; however some additional shading is required and also the need to tryout the idea of buttonizing the logo since it is used as a "return to home" button on several pages on the website. We had previously tried a whole series of 2-10 pixel wide frames around (similar to the one used in the screenshot - but the frames just did not work out. So onto button making.

Fortunately, Fireworks has a number of filters for overall special effects (and in fact supports most Adobe Plugins). The Bevel Boss filter, Filter | Eye Candy 4000 | Bevel Boss, is used here to supply the finishing touches. Note the tabs across the top for three sets of beveling options - Basic as shown in the screenshot, Lighting and Bevel Profile. Fiddling with these controls we arrive at the final product as shown below:
The most important point in this tutorial is to note how many tools Fireworks provides right in the Text Properties for refining basic text. Specifically we used the Text Effects Outer Bevel and Drop Shadow options in combination. But astute readers will have noted the other text property settings - where each letter was widened to 118% and the between line spacing was reduced to 90% to bring "The" closer to "OpenSourcery". Finally, another trick. By highlighting with the text tool just "OpenSourcery", it is easy to increase its size to 45 pixels while "The" stays at 35 pixels. In sum, Fireworks provides loads of tools and options for making your text and logos as distinctive as desired. Have fun - I did.