Web Design :: Lessons :: Introduction to Fireworks
The Fireworks Environment
Adobe Fireworks, like Dreamweaver, was originally created by Macromedia. Adobe purchased the company in 2005, and decided to continue developing Fireworks, which is an image-editing program aimed at web designers. Like Adobe Photoshop, Fireworks is a layer-based editor.
When you create a Fireworks document it has a canvas, and the layers of the document lay on top of the canvas. In the image above the canvas is indicated by the tile pattern. The left picture shows you what the image actually looks like while the right image shows the separate layers. Each image you place can be placed in its own layers so you can edit the image individually without worrying about them removing any information from the other layers. The Layers Panel below is where you can see how your layers are oriented. Layers that appear above other layers will cover those layers in your document.
- A. Expand/Collapse Layer: Expanding a layer shows you all items within the layer such as images or sublayers.
- B. Show/Hide Layer: Hiding a layer makes it invisible, but does not delete the layer. This is useful when you want to work on a layer behind the hidden layer.
- C. Lock/Unlock Layer: Locking a layer prevents changes to that layer. This is important in case you are working on a different layer and don't want to accidentally alter the locked layer.
- E. New/Duplicate Layer: Creates a new layer with the same objects as the active layer. The new layer is placed above the active layer.
- F. New Sub Layer: Creates a layer within the active layer.
- G. Delete Layer: Removes the selected layer(s).
Searching for Images
You probably will use Google to find images to use for your websites. You can use Google's image search to find images that fit more specific criteria. Clicking on "Tools" from the image search results will let you search by size, color, type, time, and usage rights.
Size: Specify relatively how big you want the image. You can also specify an exact size or say you want an image larger than a specific size.
Color: Choose the main color you want your image to use. You can choose "Transparent" if you want an image with a transparent background. This is a good option to use if you want an image with a solid color background.
Type: Choose if you want an image of a face, a photo, clip art, a line drawing, or an animation.
Time: Choose how recent you want the image to be.
Usage Rights: Determine if you can use the image on a commercial website. This is important if you are designing a website for a business, but for educational use you may use any images from Google.
Transparency
Many times you will want an image that has a see-through background. This is simple to do in Fireworks and is a common task.
- Download an image from Google with a solid color background.
- Open the image in Fireworks.
- Click on the Magic Wand tool
under the Bitmap section of the Toolbar. - Click in the white background to select it.
- Hit "Delete" to remove the background.
The background will change to a checkerboard pattern, which indicates that it is transparent. This means it will be see-through if you save it with transparency. Only two major web image types support transparency: GIFs and PNGs.
Sometimes you will find that the checkerboard pattern does not appear. This may be because the canvas color is white. In this case you can go to Modify>Canvas>Canvas Color to change the background to transparent.
Resizing Images
You should try to avoid resizing images in Dreamweaver. Doing so does not actually change the size of the source image so it will still take the same time to download. If you need to make an image smaller, use an image editor like Fireworks.
- Go to Modify->Canvas->Image Size...
- Type in a new width of height and click "OK."
When the "Contrain Proportions" box is checked, the image will resize proportionally. This means it will not look distorted after you resize it. However, if you try to make an image bigger than its original size, it may look bad because of pixelation.
Image File Types
By default, Fireworks saves images as a PNG, which stands for Portable Network Graphics. This image type was designed in 1995 as an alternative to the GIF format. It supports transparency, but not animation.
The GIF, or Graphics Interchange Format, also supports transparency, but it also supports animation. It was designed by CompuServe in 1987, but has a limitation of 256 colors. Because of this limitation you may want to use PNG if you want an image with more colors or higher quality.
Finally, the JPEG format is mainly used for photographs, and is named after the Joint Photographic Experts Group. This image type does not support transparency or animation, but supports higher-quality images. However, a JPEG image loses quality every time it is edited so it should not be used if you plan on editing an image a lot.
Here are some tips about when you should use different image types:
PNG:You need an image that retains its layers in Fireworks
You need a high-quality image with transparency
GIF:
You need transparency, but do not need more than 256 colors
You need an animated image
JPEG:
You need a high-quality photograph
Optimizing Images
Now that we know about the different image types we are ready to save our image. You always will want to save a PNG copy so you keep the Fireworks layers intact, but from there you will use the Optimize Panel to make your image file size as small as possible.
- Click on the 2-Up Button in the Document Window.
- Open the Optimize Panel if it isn't already open.
- Change the type to PNG 8.
- Change the transparency type to Alpha Transparency.
- Go to File>Export.
- Save the image to the images folder in your Lessons folder.
The 2-Up view allows you to see your original image and what your image will look like after making changes to it. You can see the actual file size at the bottom of the preview window. Notice that changing to Index Transparency will make the file smaller. If you can, always use Index as opposed to Alpha Transparency since it makes the file smaller, but sometimes you need Alpha since Index will sometimes makes portions of your image see-through that shouldn't be transparent. It is also a good idea to mess with the colors and other settings unless you need a high-quality image.
