Basic Fireworks MX

Designing graphics for the web

When creating graphics for a website, it is good to know your file types. Especially, the types of graphics files that can be displayed by an internet browser. Computers display two basic kinds of graphic formats, either bitmap orr vector. Vector graphics you can change the color, resize, and reshape without changing the quality. The bitmap formatAll browser can display JPG (Joint Photographic Experts Group, 32 bit color) and GIF(Graphics Interchange File, 8 bit color) files, and some can display PNG(Portable Network Graphics) files, but not all.

JPGs are larger files that perserve more detail and are ideal for digital photographs. GIFs are smaller files that "re-draw" vector based graphics quickly and efficiently, they are not well suited for photo based images.

The default for Fireworks is the PNG file format. Once you export from PNG to either a GIF or JPG, you can no longer edit layers. Once you export to GIF or JPG, the layers combine into one.

Another basic to keep in mind is resolution. Currently, displays reach their ceiling at 72 dpi.

The Fireworks work environment is shown in Figure 1. The Tools Panel is the vertical panel on the left. The horizonal panel on the bottom is called the Property Inspector, and the other panels are to the right with the Document in the center of the panels. The Tools Panel is comprised of categorically organized tool groups, like bitmap, vector, and web. The Property Inspector displays information pertaining to the selected object in the document.

Figure1

Click above image to enlarge.

Sizing Graphics.

As mentioned above, you want to keep your graphics at 72dpi resolution. Resizing high resolution images to become web deliverable (72dpi) is accomplished by navigating to the Modify menu, then to Canvas, and then to Image Size.

While scaling down is no problem, scaling up from a smaller image to a larger one is when dealing with bitmap images. This is because the computer has to supply new pixels to compensate for the increase in size. This causes a boxy and distorted looking image.

Perhaps you want to crop a part of the image rather than downsize it entirely. To do so, you would first use the Marquee Tool in the Bitmap group to draw a square around the area you would like to crop out. Then you go to the Edit menu and navigate to the bottom to Crop Selected Bitmap or Crop Document.

Creating Your Own Graphics.

To create your own graphic. You first navigate to the File menu, and then select New. A dialogue box will pop up with fields for the size of the canvas and resolution you want to work in as well as assigning background color.

Once you have a new document, you can then create your graphic. In this example, we have created a rectangle. We can accomplish this by selecting the Rectangle Tool in the Vector tool group. Then we added text on our rectangle graphic using the Text tool (Figure2).

You can then Export your graphic by navigating to the File menu and then to Export, which will prompt you to save the document.

Rectangle Tool:
Text Tool:

Figure5

Click above image to enlarge.