How Fireworks Works

 

Fireworks is a drawing program.

Fireworks is an image-editing program.

Fireworks is an HTML and JavaScript generator.

Fireworks is all of these things and more!

The first image program made specifically for the web, Fireworks will help you draw web graphics like buttons and banners, help you place and edit photographs for the web, and allow You to apply hundreds of super cool effects to images and text. Youll be able to make JavaScript rollover buttons, animated GIFS, and beautiful images that load quickly on the web.

To do all of these things, Fireworks combines the usefulness and features of several different popular kinds of programs. Fireworks functions as a code generator, Like Macromedia Dreamweaver, and as both a drawing program, like Adobe Illustrator, and an image editor, like Adobe PhotoShop. Illustration programs and image editors work on totally different principles at a base level, though. The wonderful engineers that designed Fireworks figured out fancy ways to cram the functionality of both image editors and illustration applications into the same program.

Sounds like a pretty cool program to teach in a web design course, huh?

 

Bitmap vs. Vector Based Images

There are two main different types of images that are used by different kinds of programs. Those types are Bitmap Images and Vector Based Images.

Photo Editors are Bitmap Based

A bitmap image is made of thousands of little dots, or pixels.

 

Creating an image with dots allows you to provide for rich detail in an image. Because every dot can be a different color, you can allow for any kind of color change.

 

In computer binary language, a "bit" is a zero or a one, so the "bit" in bitmap is referring to the zeros or ones that instruct your computer on each dots color. If an image is made in "8 bit color", it means that 8 zeros and ones are used to make up each of the three colors of the visual light spectrum: red, green, and blue. Each pixel, then, would be made up of 32 zeros and ones (8x3). When you consider that every image on the Internet is made up of 72 dots per inch Well, it turns into an awful lot of zeros and ones (5,308,416 in one square inch) for an image editing program to keep track of.

 

The "map" in bitmap is alluding to the grid, or map, that the dots are laid out in. Each pixel is allotted a certain area of the image. Each pixel is the same size, and there are no blank spots. If part of an image appears to be blank, it is probably made up of white pixels.

 

Bitmap images are wonderful for rendering rich, full color images, like photographs. Bitmap based programs do have some drawbacks, though:

�.       Bitmap images are file-heavy. All of the zeros and ones that are used to make up bitmap images result in them having large files sizes. You computer must keep track of the zeros and ones and must change each one when editing. This is memory intensive and may cause slower editing.

�.       Bitmaps do not resize well. When you resize a bitmap image the pixels just spread apart, making the image appear distorted and grainy.

Photo editors, like Adobe PhotoShop use bitmap based images to allow for precise editing and total freedom in image appearance.

 

Illustration Programs are Vector Based

Vector based programs approach image creation in a whole different manner. A vector based program does not render images on a pixel by pixel basis.

 

In a bitmap based image creation program, a square might look like this:

The image is made of thousands of dots (black on the border, white on the inside).

 

In a vector-based program, the same square would only be made of only four dots, one on each corner. These dots, or "Vector Points", basically allow you computer to play Connect the Dots. Each vector point has information in it telling your computer how to connect each point with straight or curved lines, and with what color to fill in the closed shape.

In the actual image, the vector points would be invisible.

Because the computer only has to keep four points in its memory, it is much easier for the computer to edit vector-based images.

If you resize a vector-based image, it loses little to no detail. The vector points spread out, and the computer just redraws the image. You can easily color, or re-color, a vector based image very easily using a drawing program.

 

Because of their positive properties, vector based drawing programs can be very useful to web designers. Logos can be easily created, colored, and resized. Buttons can be drawn, copied, and quickly changed.

 

Vector images do have some drawbacks, however. They are generally filled with a solid color or a gradient, but cant display the lush color depth of a bitmap. They also work better with straight lines or sweeping curves. Images, even line art drawings with too much detail are often better represented in bitmap form.

 

Drawing programs, like Adobe Illustrator and Macromedia Freehand, use a vector based drawing mode to allow for scalability and clean lines.

Fireworks Uses Both Vectors and Bitmaps

Fireworks was the first program to incorporate both Vector and Bitmap based drawing and editing tools into one program. You get the best of both worlds. How cool is that?

 

JPG & GIF Vector or Bitmap?

JPGs and GIFs are both bitmap based image types, so every image that you export will eventually be bitmap based, but its nice to have the freedom of drawing in vector mode. Of course you can save your original Fireworks file, complete with vectors, for later use.

 

Does Fireworks Replace PhotoShop?

Fireworks is a much better drawing tool than it is a photo editor. For professional photo editing, most web designers still turn to Adobe PhotoShop. Fireworks can do an okay job of cutting and pasting, but does not have the advanced selection tools or image and color correction tools found in PhotoShop.

 

Continue to Importing, Selecting, and Moving |