How to Design Web Banners on Fireworks

Create web banners using Adobe Fireworks.

Originally created by Macromedia, Fireworks is a popular web graphics application developed and distributed by Adobe Systems. It allows users to create both bitmap and vector images, and to adjust and slice those images to rapidly create designs for websites and other computer-based interfaces. Fireworks also supports basic graphics creation, including the design of web banners. Once you understand the proper steps, creating and saving banners in Fireworks is a quick process.

Instructions

1. Open Adobe Fireworks.

2. Click "File" in the top menu bar and select "New."

3. Set your preferred width and height dimensions in the corresponding fields, enter a value of "72" in the "Resolution" field, and select your preferred background color within the "Canvas Color" section. Click "OK" after making your selections.

4. Create your banner content. Fireworks offers a wide range of design tools, allowing for the creation of lines, predefined and free-form shapes, blocks of text, color and gradient fills, and much more. See Resources for links to Fireworks tutorials.

5. Click "File" in the top menu bar and select "Save."

6. Give the file a name, select a save location, and click "Save." This action saves your file in PNG format, which preserves layer and page information and allows you to make edits in the future. You can skip the remaining steps if PNG is a suitable format for your web banner.

7. Click "File" and select "Save As."

8. Click the "Save As Type" drop-down menu and select the "JPEG" option.

9. Give your file a name, select a save location, then click "Save." Your web banner is exported to JPEG format and is ready to use on any website.

References

• Best Web Designz: Create a new document in Fireworks CS4
• Adobe Support: Fireworks Support Center, Exporting

Resources

• Entheos: Adobe Fireworks Tutorials & Resources
• Adobe Developer Connection: Fireworks Developer Center