Additional Graphic Techniques

Several graphic techniques involving the GIF and JPEG file formats are critical to your Web graphic production work. They include progressive rendering, transparency, and animation. FrontPage can be used for progressive rendering and transparency, but you will need an additional tool to create animations such as Ulead's Gif Animator (http://gifanimator.frontpagelink.com).

Progressive Rendering

This feature keeps a site visitor's visual attention while graphics are downloading from a server to a Web page. The concept is that the individual will see portions of the graphic until all of its binary data is loaded into the browser.

It's an effective method. If you prefer to have your images "pop" into a page, the downloading process appears to be smoother when progressive rendering is in place. You should learn progressive rendering techniques and make your own decisions based on personal and professional preferences.

Progressive rendering can be achieved in both the GIF and JPEG formats.

Interlaced GIFs

Interlacing is the term used for GIFs that progressively render.

Most popular Web graphic applications support interlacing. When you save a Web page in FrontPage that contains GIF images, the Save Embedded Files dialog box, shown in Figure 44.5, appears. This dialog box enables you to rename the graphic file, change the image folder, set actions, or set various picture options.

Figure 44.5. The Save Embedded Files dialog box lets you rename any images in a Web page.

Clicking the Picture File Type button opens the Picture File Type dialog box (see Figure 44.6). This dialog box lets you specify the image format as JPEG, GIF, or PNG. It also lets you specify GIF images as interlaced if desired.

Figure 44.6. The Picture File Type dialog box lets you set several image format options.

An interlaced GIF will first appear fuzzy and then slowly clarify as the GIF data downloads to the Web browser.

NOTE

If you view these images in the Preview window or in a browser on your local machine, you might not see the interlacing effect. Even large images will take almost no time to load from your local hard drive, so the interlacing effect isn't noticeable. To see the effect, load the image from a Web server over a slow Internet connection.

Progressive JPEGs

It's important to note that you cannot interlace a JPEG. However, a technology has been developed to enable JPEGs to progressively render. This is the progressive JPEG format. FrontPage, as well as many contemporary Web imaging programs, enables you to create JPEGs that render progressively.

As mentioned earlier in the chapter, the JPEG algorithm works by reducing rectangular sections of color data within an image. If you conceptually reverse this process and imagine data flowing in to the rectangular blocks, you will be visualizing the way a progressive JPEG renders. An integrated series of blocks creates the image and first appears with little graphic data. With each new delivery of information from the server, the JPEG blocks receive more data until the download is complete.

Whereas interlaced GIFs first appear fuzzy and then get clearer, progressive JPEGs first appear blocky and blurry.

NOTE

When serving progressive JPEGs at high speeds, the blurry effect is reduced or eliminated, improving the visual experience.

A JPEG image can be made into a progressive JPEG using FrontPage's Picture File Type dialog box. In this dialog box, you can specify the number of progressive passes. These passes are divided by the total time to load the image. If you have a fairly small JPEG image that takes five seconds to load with a setting of five passes, each pass will take roughly one second. This will create a rippling effect as the graphic comes into view.

TIP

Standard GIFs and JPEGs scroll into place rather than render progressively. Some people prefer this look. Still, most usability studies and anecdotal information suggest that progressive rendering helps keep individuals on a page. Therefore, in many cases it's usually wise to progressively render your graphics.

Transparency

Transparency can be described as an effect that places your graphic on a clear piece of tape. This means you can place that tape on a background and the background will show through the tape.

This is particularly effective when you're creating graphics that sit on a background especially graphics that aren't a standard rectangular shape.

The technique takes a little bit of time, patience, and an excellent hand and eye to learn.

Again, FrontPage can create transparent images, but your favorite Web graphics program is likely to have a helpful method by which to make an image transparent.

NOTE

Only GIFs can be transparent. JPEG technology does not include a transparency option.

Assume that you want to place a text header image over a background texture. The text selection is ornate, with a lot of circular shapes. Follow these steps to create a transparency:

1. Open a new page in Normal view.

2. Add a background image by selecting Format, Background. This opens the Page Properties dialog box with the Formatting tab selected.

3. Check the Background Picture box, and then use the Browse button to locate the background image.

4. Click OK to accept the background image. The view should tile the background image.

5. Load the header image by selecting Insert, Picture, From File. If the file doesn't include transparency information, it will look similar to Figure 44.7.

   Figure 44.7. Adding a non-transparent image to a page with a color.

   

6. Click the image to access the Picture toolbar; click the Set Transparent Color tool.

7. The cursor will change to look like an eraser. Click the color in the image that you want to make transparent.

8. The color you clicked becomes transparent (see Figure 44.8).

   Figure 44.8. A transparent GIF appears seamless over background color.

   

TIP

Creating transparent GIF images can leave ragged edges around your image. To reduce the visibility of this edge, try to match the background color in the image to the background color on the Web page. This is something you'll want to do in the program you are designing your graphics in.

GIF Animation

Another inherent feature of the GIF format is GIF animation. This very handy effect is actually an exploitation of GIF technology. This chapter briefly mentions animation because the GIF animation is directly tied to the file format that parents it.

GIF animations are essentially several GIF images stitched together into one file. You can create an animation effect by crafting your images carefully. FrontPage cannot be used to create GIF animations, but it can place any such animations on a page.

FrontPage won't show the animation in Design view (it will only show you the first frame of the animation) but will show you the animation if you view the file in Preview view.