Fireworks Effects pg 4: Production Graphics with Wendy Peck at webreference.com

Fireworks Effects: Adding Live Effects

Default Pattern fills in the top set are adjusted using the Effects panel for the lower samples.

Drop shadow effect applied to a selected object. Details for the shadow are shown below.

If you have used a raster program like Photoshop or Paint Shop Pro, this section will sound familiar. Although the Effects panel offers raster effects, your objects are still vector, with all the freedom to move and position that comes with vector objects. (See Graphic Underworld: Behind the Pretty Pictures for a look at vector and raster formats.)

You can apply Effects to solid, texture or pattern fills. Of course, when working with solid colors, some effects will not show.

To add Effects to your objects, make sure the object is selected. Click on the Effects tab to activate the Effects panel. Click on the drop-down list to open and choose the effect that you desire. The sample at the left shows the Drop Shadow effect in use.

When you click on an effect, the default value for that effect will be applied to the object. You can edit the values in the menu that is presented. These values can be edited at any time by double-clicking on the Effect listing, or by clicking on the Edit and Arrange Effects icon as shown here highlighted by yellow.

Note: Most of you will be quite comfortable using a drop-shadow, but make sure that you are creating realistic shadows. Although not a specific tutorial for Fireworks, you can pick up some useful pointers for better shadows with Into the Shadows. Also, have some fun with colored shadows, which can add a very realistic glass look to an object. Simply click the color well in the Drop Shadow editing screen.

Three button states automatically created in the Effects panel. Raised, Highlighted and Inset samples are shown here from top to bottom.

Effects settings for the text shown at the right.

With the Effects menu, you can also add bevels to create buttons for your site. Fireworks includes four preset states that will let you quickly create the buttons you need for rollovers. The sample at the left shows three different states for a button, created by choosing the Fireworks defaults of Raised, Highlighted and Inset.

To add a bevel, make sure your object is selected. Select Bevel and Emboss from the drop-down list in the Effect panel. Select the state from the drop-down list at the bottom of the Effects editing menu. I strongly recommend reducing the default Width value to a smaller value to create a more believable button.

You can add several effects to each object in the Effects menu and the effects are not restricted to rectangles and circles. Any of the effect described here can be added to text, with the text remaining editable. See left for the Effects values for the image shown above.

Experiment with the Effects available in Fireworks. The options are endless if you let your imagination take off. Practice is very important when you have so many options. We could make this one text sample into many variations using just the Effect menu. The image included to the right is exactly the same as the one above, but the Hue and Saturation has been changed. If you look closely, you can see that the pattern is the same, even though the colors are so different.

Finally, once you have created the look you want, you can save it and create new graphics with the same capability at a later date. In the next section, we will cover creating a style with out images for future use. Read on.

Next page

Fireworks Effects Tutorial Index

Fireworks Effects: Choosing is the Hard Part
Looking at the Basic Fill and Stroke Tools
Fancy Fills
Adding Live Effects
Enhance Your Designs with Styles