For a video tutorial that introduces Fireworks basics, see click here. Also, watch this video by Steve Burnard, Adobe UK Product Manager, to know how to create beautiful designs for websites and mobile apps.
Draw and edit vector and bitmap objects
The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps. The tool you select determines whether the object you create is a vector or a bitmap. After drawing an object or text, you can use a wide array of tools, effects, commands, and techniques to enhance your graphics or to create interactive navigation buttons.
You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats.
Add interactivity to graphics
Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web page, each slice appears in a table cell.
Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to graphics. Use the Fireworks Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating websites.
Optimize and export graphics
Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual quality for exported graphics. The type of optimization you choose depends on the needs of your users and the content.
After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source PNG document, you can export files of a number of types, including JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types.
Vector and bitmap graphics
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats.
About vector graphics
Vector graphics render images using lines and curves (vectors) that include color and position information. For example, the image of a leaf can be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill).
Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change when you change its color; move, resize, or reshape it; or when the resolution of the output device changes.
About bitmap graphics
Bitmap graphics are composed of dots (pixels) arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic.
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, which can make the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image's quality.