Color Power with Gradient Fills pg 7: Production Graphics with Wendy Peck at webreference.com

Color Power with Gradient Fills: Fireworks Save Fills and Transparency

When you create a great custom gradient fill, you will want to be able to use it again. Choose Save Gradient As from the Fly-out menu and give your gradient a name. The new name will now appear in the color selection list for any gradient fill.

If you would like to use your new gradient in another document, open the document containing the fill and copy one of the filled objects. Activate the document where you would like to use the fill, select an object and choose Edit>Paste Attributes. The object will be filled with the custom gradient and the gradient name will be added to the list of colors.

Hint: If you are designing a site that uses a variety of graduated fills repetitively, try setting up a separate document for your fills. Follow the instructions above to place each new fill into the fills document. Whenever you are working on the graphics for your site, your fills will all be ready to use.

Gradient Transparency
Fireworks has an unusual texture transparency feature. Create your gradient fill, apply a texture, and click the transparency option in the Fill window to activate. Adjusting the amount of texture with the slider affects the transparency of the fill.

You can also reduce the transparency of your entire object, or in this case the gradient fill. Open the Object window and use the transparency slider to set the opacity of the object. I used a combination of the texture transparency and the object transparency to create the image below.

Original object filled with a black to teal gradient. Duplicated object filled with grayscale gradient. Note how the lines under the original object are not showing through.

The grayscale object was moved onto the original object and Mask to Image command applied. Note how the fill is now transparent according to the levels of gray in the masking object.

You can also adjust outer shape with the same command. In this example, I followed the exact steps as above, but instead of an exact copy of the original, I used a text sample filled with the grayscale gradient as a mask. Note that the transparency is the same since it comes from the fill of the masking object.

Graduated transparency
To create a graduated transparency in a Fireworks gradient fill, you can add a mask. To adjust only gradient transparency, duplicate the object with the gradient fill.

Fill with a gradient fill and specify black and white as the color. Or, choose any gradient fill and edit to make the fill black and white with shades of gray. In the final image, areas that are black will have no transparency, and in areas that are white the fill will be invisible. Shades of gray result in semitransparent fill.

Place the duplicated object with the grayscale fill on top of the fill object. Choose Modify>Mask Group>Mask to Image to apply the transparency. See the step-by-step progression in the samples at the left, which created the fill used in the image below. I have added the lines under the fill to show the added transparency. The final sample shows the same fill but using a text sample with the same grayscale fill as above. An image with a transparent gradient fill is shown below. The gradient is from black to teal and has a linear transparency fill from black to white.

For more information about transparency masks and masks in general, see my Masks tutorials Part 1 and Part 2. Both have Fireworks tutorials.

You have the tools you need now to create whatever subtle color patterns you can imagine. Practice with the techniques, since this is one skill that will raise the quality of your work instantly. And once you are comfortable with the techniques, it is a great production tool. Have some fun.

Return to start

Color Power with Gradient Fills Tutorial Index

Color Power with Gradient Fills Start
Photoshop Gradient Fills
Photoshop Gradient Transparency
PaintShop Pro Gradient Fills
PaintShop Pro Gradient Transparency
Fireworks Gradient Fills
Fireworks Save Fills and Transparency