Fireworks Tutorial: How to Make a Logo with a Reflection Effect

Fireworks Tutorial: How to Make a Logo with a Reflection Effect
Page content

A professional-looking logo is a hallmark of an outstanding business and website. Simple text can be transformed into a high quality logo by learning how to make a logo with a reflection effect. Use this Fireworks tutorial to understand the step-by-step procedure for creating a design that accurately represents your business or website.

Only basic Adobe Fireworks skills are required to create a logo with a reflection. This tutorial will demonstrate how to create a logo, complete with an elegant graphic.

Begin by opening a new file. The example used in this Fireworks tutorial starts with a 450 x 200 pixel transparent canvas.

Making a Simple Logo Design in Fireworks

Before creating text with a reflection effect, create a simple shape to begin your logo design. Begin by selecting the star tool in the vector section of your workspace, and choose the linear gradient fill, using the colors #FFCC00 and #FF6600. Draw a star on the right side of your canvas. If desired, grab the lower left yellow diamond on the star with your pointer tool and change the number of sides your star has; in this case, nine.

Create a copy of the star, shrink it slightly, and change the #FF6600 color of the gradient to #FFFF66. Center the smaller star on top of the first star.

Original Star

9 Sided Star

Double Star

Next, using the text tool and a font that’s suitable for your particular needs, type the name of your business or website. In this example, Poor Richard font was used in a 48 font size with the kerning set to -40. Choose a text color that coordinates with the shape you’ve already completed in the previous step. The same gradient colors of the original star, #FFCC00 and #FF6600, were used for the text in this example. You can select all of these options or play around with various text options in the properties panel of Fireworks, usually positioned at the lower edge of your screen.

Text in Fireworks

Creating Glassy Text in Fireworks

Try creating a unique, glass effect on the text portion of your logo to give your logo even more depth and appeal. Begin by creating an opaque oval using the ellipse tool, filled with #FFFFFF, with an opacity level set at 22 percent. Position the oval at the top portion of your text.

Then, using the subselection white pointer tool, drag one end of a point on the circle and rotate it to transform it into a unique, wave-like design. This will create the glassy effect on text that gives a logo an elegant feel.

Opaque Oval

Wave Design

Adding the Reflective Effect to Text

The next step in this Fireworks tutorial consists of adding a reflection to your text. Begin by creating a copy of the text, then flipping the text by selecting the Flip Vertical option in the Transform section under the Modify tab in Fireworks. Position the new text directly beneath the original text, creating a mirror effect.

In order to add the reflective effect, simply select Commands>Creative>Auto Vector Mask. Select the bottom left vector option. Reposition the black bar to create the desired reflective effect. The further towards the top of the screen you place the black bar, the smaller the reflection becomes.

Black Bar

At this point in this Fireworks tutorial on how to create a logo with a reflection effect, only a few final touches are needed. Adding a shadow to the star shape gives a three-dimensional effect. Add a black drop shadow filter to the larger of the two stars, with the distance set to two.

Then to make your canvas clean and tight, select Modify>Canvas>Trim Canvas. Save your logo in the desired format, generally as a .jpg or .png.

Finished Logo

Additional Creative Logo Design Ideas

Now that you understand the basics of making a logo with a reflection effect, modify the logo template to suit your needs. Ensure that your colors work harmoniously together and represent the look and feel you’re trying to portray. Most professionals favor clean and simple designs over crowded or overly-detailed. Get your creative juices flowing by studying others’ logos. Many people begin the logo creation process by simply sketching ideas on a paper.

As another great creative logo idea, try using unique fonts to liven up your design. provides free fonts that may prove useful when you create a logo. However, make sure to select only commercial-use fonts if you’ll be creating a logo for business or website use.

With a little knowledge and creativity, along with Adobe Fireworks, you can create a one-of-a-kind logo that gives your business an air of professionalism and style.


Source: author’s experience

All graphics and screenshots credits: author, Sunny Griffis