Creating Your Own Web Graphics

In this chapter, I'll step you through a variety of tasks and demonstrate and describe features, problems, and helpful hints that will help you create your own Web graphics for your specific needs.

If you are having a hard time figuring out the specific term for the specific type of image you are looking for, see "Categorizing Images" in the "Troubleshooting" section at the end of this chapter.

Working with Background Images

Three kinds of background images exist:

• Wallpaper patterns These are small squares that tile in to create a smooth, seamless texture that looks like well installed wallpaper (no burps, seams, or bungles).

• Margin tiles Also referred to as strips because they are wide and short, margin tiles can be functional or decorative in nature.

• Watermark style This is one large background graphic, usually square, that adds an image, logographic material, or color to the background of a page.

One important issue to remember is that all backgrounds are tiles. They might not look like tiles, but they will always act like tiles whenever the resolution of a screen changes.

Wallpaper patterns, which are squares, will tile into the browser one by one until the available space is filled.

Margin tiles fill the browser in the same way except it might seem as though they don't because of their sizes and shapes.

Finally, watermark tiles, which are very large squares, tile in the same way that wallpaper and margin tiles do. Therefore, you have to be careful when creating watermarks.

If you are having a hard time making your backgrounds visible on an older system, see "Making Backgrounds Visible" in the "Troubleshooting" section at the end of this chapter.

Watermarks

Watermarks are especially difficult to create because of the tiling issue. The idea with watermarks is to keep them simple, with very few colors, because this is the only way you can make larger graphics look good.

To develop your own watermark, create a very large tile, 1024x1200 pixels. At that size, no matter the resolution, the effect will generally be the same.

Use as few colors as possible. By limiting colors and saving the image using the GIF format, the large, consistent areas of color are efficiently compressed. Save the file as a GIF with no dithering.

To see the results, create a new page in FrontPage and load the watermark graphic as the background image (see Figure 45.4). One of the options in the Formatting tab of the Page Properties dialog box in FrontPage is a Make it a Watermark check box. This check box causes the background graphic to remain stationary as the page is scrolled. This is supported only in browsers that support this feature.

Figure 45.4. A watermark-style background is set in FrontPage.

NOTE

You can get the same effect by setting the large watermark image as a background graphic. It won't tile if it's large enough, and serves the same purpose, without the potential browser problems.

Header Graphics

Headers are used to identify a site and a page within a site. One type of header is the splash header. This typically fills a larger piece of real estate on the opening page only. It identifies the site with the company logo or brand and sets the visual tone for the rest of the site.

A page header is smaller but still boldly visible along the top and left, middle, or right edge of an internal page.

TIP

A great product that does nothing other than create impressive header graphics can be found online at http://headergenerator.frontpagelink.com.

Building a Splash Page

Creating a splash page is easy to accomplish with any graphic development tool and FrontPage:

1. Create the new graphic file.

2. Enter the desired dimensions in pixels of the splash screen image.

3. Add the graphic in the center of the workspace.

4. Use a text tool to add text on top of the graphic.

5. When the graphic is complete, save it as a JPEG image (because the image contains many unique colors).

To create the splash page using the splash image you just made, use FrontPage's Insert, Picture, From File command. The resulting splash page will look similar to Figure 45.5.

Figure 45.5. The splash graphic in place.

From the original splash header, creating internal page headers is just a matter of resizing the original. In FrontPage, just grab one of the corners and drag it to the desired size. To resize the actual graphics file, click the Resample button on the Picture toolbar. This page header can then be used on additional pages as needed or loaded into the Navigation bar.

TIP

A large percentage of Internet users consider a splash page to be little more than an annoyance. They were interesting years back but now do little more than frustrate your audience.

Buttons in FrontPage

Navigational buttons can be made up of text, images, or a combination of both.

In this section, you learn how FrontPage can be used to make a simple beveled button.

For this exercise, start with a simple graphic image that you want to make into a beveled button. Then, do the following:

1. In FrontPage, load the button graphic by selecting Insert, Picture, From File.

2. Select the graphic and click the Bevel button on the Picture toolbar.

The beveled button was added to the page. The result is shown in Figure 45.6.

Figure 45.6. A simple beveled button created in FrontPage.

TIP

The Interactive Button tool, new to FrontPage 2003, also produces impressive buttons with just a few clicks of the mouse.

For more information creating Interactive Buttons with FrontPage, see "Using Interactive Buttons," p. 441.

Bars and Rules

At times, you might like an effective, decorative bar or rule to demarcate sections of a Web page. You can either create your own bars to match the look and feel of your site or use FrontPage to modify horizontal rules accordingly.

If you're going to create your own bar, I'd recommend the following:

• Don't stretch the bar from margin to margin Instead, make a bar that is either centered with some whitespace to either side or aligned to the right or left. Cutting the margins separates space dramatically and could cause disruption in cohesiveness of both the design and the content.

• Use a treatment This can be something such as a drop shadow, curved or angled lines, something that's hand drawn, or broken lines (anything to give the rule a fresh look).

FrontPage can create a variety of horizontal rules for you, or you can make your own and import them as a normal graphic. Figure 45.7 shows a number of horizontal rules options.

Figure 45.7. Several attractive horizontal rule options.

Standard Horizontal Rules

To use FrontPage's horizontal rules (or lines as FrontPage calls them), select Insert, Horizontal Line. Within the Horizontal Line Properties dialog box, you can specify width, height, alignment, and color. You can also toggle shading on or off (see Figure 45.8).

Figure 45.8. Setting the horizontal line properties.

Spot Art

Spot art serves to enhance and accentuate text. It can be clip art or photographs.

To make spot art stand out from the norm, it's fun to add edges, shadows, or bevels for effect. However, you do have to be careful with the use of effects because of the additional weight they can add to a page.

Hand-drawn art, cartoons, and clip art can add variety and personality to your sites as well.

Whichever you choose, you should be consistent and creative not conflicting and clichéd throughout a site. It always surprises me to find that people have created slick graphics only to mix them with a piece of overused, worn out clip art.

Another concern is dimension. Spot art is akin to italic or bold on a page it's about emphasis, not dominance. You want your spot art to blend well into the overall scheme of your design. Pay close attention not only to the dimension in relation to the screen size, but also from one photo to another.

Backgrounds, headers, rules, and spot art you're wrapped up and ready to go!