DisDat Designs.com
Macromedia Fireworks 4 - Gradient Outlined Objects

There might be a time when you want a gradient for a stroke setting. But since there is no gradient choice on the stroke panel in Fireworks 4, we have to experiment a little.

1. Start a new canvas 400x400 with a white canvas color.

2. Create a rectangle on the canvas sized at 350 x 150 (use Info Panel to be precise.) Fill your rectangle with a white and gold Radial gradient. (Edit the gradient from the fill panel.)

3. Click Edit>Clone to create a copy in the exact position as the original rectangle.

4. Change the cloned rectangle's fill to a solid gold yellow color (same color as the gold in the gradient). Use the info panel to resize to 330x130.

5. Select both rectangles, and click Modify>Align>Center Vertical and then click Modify>Align>Center Horizontal. You should now see a 20 pixel gradient around your rectangle shape.

Resize the top rectangle again if you want a smaller or larger outline. Adjust the bottom rectangle's gradient if you want a different gradient setting.

6. When you are satisfied with the shape, add a drop shadow to the bottom rectangle.

Create text to place on the top of the shape.

7. I saved the edited gradient to my gradient menu, and applied it to text. I also applied a drop shadow to the text as well.

Gradient Golden Image

8. Optionally, I added a texture to the bottom rectangle and text.

textured gradient

9. Trim or crop the canvas, then Optimize and Export your image. Keep in mind that gradients are best exported as .jpg's.

I hope you have enjoyed this tutorial.


Page updated on April 26, 2003

[Home] [Contact debbieT] [Free Backgrounds] [Xhtml & CSS Tutorials]

Copyright © 1999-2010 debbieT & DisDat Designs
Please do not copy or redistribute any graphics or tutorials.
Please do not link to any graphics. Personal use only. Thank you.