Lesson 1: Creating Basic Web Images

Related video clips

There are eight video clips related to Lesson 1. If you are a visual type of learner, I suggest you view the videos first, then read through this written material. In general there is more explanation of a feature in the video clip.

Types of web graphic files

Through the lessons in this class, you will be using, adapting, changing, and creating images for a website. Although there are a variety of graphic formats, from different types of graphic programs, there are just three formats that can be used on a website: GIF, JPEG, and PNG.

GIF (Graphics Interchange Format) files can display images in black and white, gray scale, or color, but the files are limited to 256 (or fewer) colors. GIF files were the first web graphic format supported by browsers, and they are primarily used for images which have "flat areas" of colors, like in clip art or logos. The compression technique used to make GIF files is to throw away colors in an image, and this format should be used for images which have limited colors or which have no color gradation.

JPEG or JPG (Joint Picture Experts Group) refers to a set of formats that support full-color images and stores them in a compressed form. This was a format created to allow better quality of photos on the web. Unlike GIF files which limit you to a maximum of 256 colors in an image, a JPEG file is produced by "throwing out" parts of the image. JPEG is used for photographs or if your image has continuous tone graphics, or images which have glows, drop shadows and other gradient effects. Most people use JPEG for color photographs, but this format could also be used for black and white photographs.

Another format which is starting to appear is PNG (Portable Network Graphics). For more details about this newer web format, see www.libpng.org/pub/png/; more specifically, this page outlines the pros and cons of this format: www.libpng.org/pub/png/pngstatus.html. In a recent query of University of Arizona webmasters, there were no site managers who are using PNG graphics on sites which are aimed at the public; that is a site that is not an internal site when high speed connections and current browsers can be guaranteed. When you start to create original Fireworks images, in Lesson 2, you will see that the extension used on Fireworks files is PNG. However, this PNG format is not the same as the web PNG formats. It is a format created by Fireworks for its images.

Later in this lesson, you will learn how to make GIF or JPEG images in Fireworks, and in most cases it is pretty clear which format to use. However, some images have flat color areas in places and gradient colors in other places, or flat color areas in one part and a photograph in another part. In such cases, you have to decide which format you want to use, by saving in both formats and making a judgment call about which is better for an application.

Are your original images backed up?

These lessons will have you practicing features and completing exercises each week, and you may never need the original image you start with later. However, in real web work, I encourage you to take your original images and have backup copies in another folder you are not working on or on a zipped disk or CD. Thus, you can go back to the original if needed. After you complete a project, you can delete these "originals" if they are not needed anymore.

The initial display in Fireworks

The initial display that appears has a menu bar across the top, a tool panel on the left, and various panels which can be showing on the right side. These panels on the right side can be opened and closed by selecting these options through the Window option on the menu bar. If you want, you can close these windows right now, and as you need them for the lessons, I will give you instructions to open them. The video Initial Screens in Fireworks MX 2004 shows how to collapse the display of the panel area if you don't need to see this. You might want to do this is you are working with a screen resolution of 800 pixels across, just so you have more work space in the document area. As the class progresses in future weeks, you will need to use some of these panels, particularly the layers panel.

The options you see in the center of the MX 2004 screen (the gold area below) do not appear on the older Fireworks MX version.

Why sizing images is important

One of the most common operations you will use in Fireworks is resizing the image, particularly if you get the image from someone else or another source. How big should an image be on your page? It all depends on the layout of the page and the importance of the image. It is also possible that a large single graphic could make up an entire web page, especially an initial navigation page. This will be discussed in Lesson 5. Until we get to that lesson, I will assume that your graphics are just a part of your web page. Monitor resolutions for your audience machines should affect your decisions about design of a web page and how big to make various graphics. Read more about Monitor Resolution Issues and how monitor resolution assumptions affect your graphic sizes in Tip #2.

As far as most of the material in this class, it does not matter what program you are using to create your web pages. Fireworks is used to create web graphics, and most of your web pages will probably be done in Dreamweaver, the program sold by Macromedia. However, you could use Fireworks to create web graphics and then another web editor program to create web pages.

Any program that lets you create web pages (such as Dreamweaver, Frontpage, Hotmetal, BBEdit, Notepad, etc.) lets you resize a graphic image to make it larger or smaller in appearance on the web page. However, this is a bad habit to get into, because sizing in a web editor does not reduce the kilobyte file size of the image.

To illustrate this point, this is an image of a castle. The image is 38 kilobytes in size.

	These images are different sizes on the screen, but they would take the same amount of time to download, because download time is determined by the kilobyte size of the image and the speed of the connection. Although these images look different in size on the screen, the kilobyte size for both is the same.

So sizing an image should be done with a graphic program, such as Fireworks. Making an image smaller in appearance using Fireworks is one way to reduce the kilobyte size of the image, thus making the page which has the image load faster. Anytime an image is resized and made smaller in appearance in a graphic program, the kilobyte size of the image is always reduced.

Resizing images in Fireworks

Before you can resize an image, you must open it in Fireworks. You would select File from the main menu, then Open to open a graphic image. You can browse your computer for different drives or folders to find your image. This opening procedure is shown in the videos Saving in GIF Format and Saving in JPEG Format.

Once the image is opened and displaying in the "document window," Fireworks MX 2004 shows the image size in two places: it shows to the lower right side of the display, under the document window (only in the 2004 release) and it also shows in the Properties panel. Both of these areas on the screen are boxed in the screen capture below.

You get to the specific screen to give new measurements for the graphic by selecting Modify on the main menu bar, then Canvas, and then Image Size. The resulting dialog box allows you to change the width or height of the graphic, which is displayed in pixels.

We will talk in Lesson 2 about vector versus bitmapped images, but for the most part most of the images that come from others or from scanners are bitmapped images. In general when working with bitmapped images, you can make the image "smaller" but making it "larger" (especially significantly larger) can result in a grainy appearance or a display of the dots making up the bitmapped image. Most of the time you will be making an image smaller than the original you get from some source. However, as you may discover as you work with your own scanned images, significantly reducing the size of a bitmapped image can result in blurring of the image.

When resizing an image, you should either select a width you want and let the program calculate the height to keep the image in its original proportions, or pick a height and let the program calculate the width. Changing both the width and height will almost always distort the appearance of the image.

Sizing images is shown in both videos Saving in GIF Format and Saving in JPEG Format.

Depending on what images you work with, you may find different resolutions displaying in the Image Size display. For example, the screen capture to the left shows a resolution of 150. In Lesson 2 and Lesson 3 we will look more at the resolution of the images you are working with or creating. Resolution refers to the amount of (color) information or data that an image contains, and resolution directly translates into a scale of quality of an image.

Web images normally have a resolution of 72. If you are creating web images and use a resolution more than 72, you are adding unnecessary kilobytes to the image, since monitors cannot show the higher resolutions that print require. If you open an image that has a higher resolution, and you change the resolution to a lower number (besides resizing the image), you need to be sure that the Resample image box is checked, so that Fireworks can re-read the image in order to lower the resolution.

Options in viewing images

As you work with images from other sources or even images you create, pay attention to what magnification you are using. In the 2004 release, the percentage magnification is shown next to the image size below the document window. You can also go to View on the menu bar, then pick Magnification, and select different options from the resulting list. Sometimes you will want to "zoom in" to see details in part of a graphic, and in other cases you will want to "zoom out" to see the entire image at one time. However, as you open images from other sources, pay attention to the magnification. Viewing images at either more or less magnification than its actual size can present to you an inaccurate display of the image's quality.

Be sure to explore this magnification feature, to look at your graphics, especially if you are a new user of Fireworks.

Cropping

Both types of rotating are demonstrated in the video clip Rotating Images.

As was mentioned above, the GIF graphic format is used for images (color or black and white) which are using 256 or less colors. The images should have fairly distinct areas of color, and not color gradations, so this is the format used for clip art and most logos. Once you have the image cropped, rotated, and sized as you want to use it, select File from the main menu, then either Export Wizard or Export Preview. Both options are shown in the video Saving in GIF Format. The Export Preview option will probably be the one you use most of the time, and it brings up a display such as the one below. This is the same dialog box used for saving in GIF format or JPEG format.

The video shows three displays in the Export Preview window you can work with: full screen, a split screen, or a four way split. You can decide which way you want to preview your web graphic. In the screen capture below, there is a four way display of various versions of the same graphic. Using the four-way display lets you pick different settings for the same image and see the resulting file size in kilobytes. Reducing the number of colors for the GIF image makes the kilobyte size of the graphic smaller. You will want to balance between quality of the image and the kilobyte size. A graphic such as this plant image does not need a lot of colors, but other graphics may need more.

After selecting the number of colors and other settings you want to use, click on the Export button in this dialog box to make the web graphic. The default is to use the same name but add a GIF extension (for example, peatpot.gif), but you may create a new filename and also place the GIF file in another folder or location on your computer.

GIF images are compressed by reducing the number of colors used in the graphic to 256 or fewer colors. JPEG is a format created for photographs or images with gradual color changes, and compression is achieved by throwing away part of the image. The more the compression, the smaller the image is in kilobytes and the less is the quality of the image.

After you have cropped, rotated and/or sized the image physically, you select File from the main menu, then either Export Wizard or Export Preview. Eventually the same dialog box appears as is used for saving in GIF format. The Format window drop down listing lets you pick JPEG as a format for the image.

In the above screen capture, three different quality options were used for the same photograph. You can see that the lower the quality, the smaller the file is in kilobytes. However, as is shown more clearly in the video Saving in JPEG Format, on some images lowering the quality too much will degrade the image. Ultimately the quality setting you use will depend on the graphic, its size, its importance, and the number of graphics on a page.

After selecting the settings you want to use, click on the Export button in this dialog box. The default is to use the same name but add a JPG extension (for example, zebrahead.jpg), but you may give the image a new filename and also place the JPG file in another folder or location on your computer.

There is no hard and fast rule about what quality to use on a JPEG image. A small little photo being used as a button could have a lower quality than a detailed map image. I have taken the same image and saved it in different qualities, on the same page. You can go to this link to see this page and also see the corresponding kilobytes size for the image - cals.arizona.edu/ecat/web/graphics/jpeg-example.html

Creating a transparent background in a GIF image

If you are placing your images against a white background, then you do not need to worry about transparency. But sometimes you might have either a background image or a background page color being used, and if you don't make your background in the image "transparent", then the resulting web page looks very unprofessional. If you are working with a logo or clip art, it is easier to make the background transparent, since there are clear edges where the logo "ends" and the background begins, and typically the background is a solid color.

Whether or not you are working with logos or photographs, and you want to make part of the graphic transparent, you need to check the canvas color before creating the transparency. Select Modify from the main menu, then Canvas, and then Canvas Color. As shown below, you have choices for the canvas color, even if the image has been created already, and one of the choices is Transparent. Be sure to select this option before erasing part of an image to make part of the image transparent.

Erasing the background in a photograph

The concept of erasing a "background" in a photograph is different because the background in a photograph is hardly ever a solid color. Even in the photo showing to the right below, the wall behind the man is not a single color. It is made up of variations of gray pixels. So other ways have to be used to select the pixels to be changed. Just as when working with GIF images, be sure that the canvas color is set as transparent.

Depending on the photo, you can then use the eraser tool on the tool panel to erase the background, or you can use the magic wand tool to select pixels which have similar colors and then delete those pixels. Either of these options can be used, or even a combination. Both of these techniques are shown in the video Making a Photo's Background Transparent. In the end, part of the photograph will have transparency showing. You would then go to Export Preview, select the GIF format, and proceed to Export the image.

Before you go to the effort of erasing the background on a photograph, remember that only GIF supports transparency. If you make part of a photograph transparent, and then select the JPEG file format in the Export Preview display, the transparent area becomes white. The GIF format, even if used on a photograph, is still limited to 256 or fewer colors. Ultimately it is a judgment call if you want to make parts of photographs transparent. Some photos will look fine with using 256 or less colors. Others may not.

This material was used in a distance class on Using Fireworks MX 2004 to Create Basic Web Images, given by Linda Ffolliott, ECAT, in the College of Agriculture and Life Sciences at the University of Arizona.