Applying Patterns to Web Graphics

You can use custom-made patterns as tiling Web page backgrounds or as pattern presets for filling foreground objects. Let's review how to do both.

Tiling Background Patterns

To make a tiling background pattern, start with a small pattern file like those described in the next section, Web Pattern Recipes. Save the file as an optimized GIF or JPEG. With a Web page layout or other foreground image open, specify the small file as the background in the Output Settings>Background dialog box. To access that dialog box in Photoshop, choose File>Save for Web, click the arrow on the top right of the Save for Web dialog box, choose Edit Output Settings from the side menu, and choose Background from the second pop-up menu in the Output Settings dialog box. In ImageReady, just choose File>Output Settings>Background. In the Output Settings dialog box, click the Choose button to the right of the Path field A and navigate to the small pattern file. When you save the foreground image you're working on, choose Format/Save as Type: HTML and Images so that the program generates an HTML file with a background tag that causes the small pattern to repeat itself horizontally and vertically in a viewer's Web browser.

Pattern Presets

Another way to use a custom pattern is to define it as a pattern preset, and then use it to fill a layer or a selection in a Web graphic. To define a pattern, open a small file, like those in the following section, in Photoshop or ImageReady. Press Command/Ctrl-A to select all, or use the Rectangular Marquee tool to select an area of a larger image. Choose Edit>Define Pattern, and give the pattern a name. The pattern will be added to the currently active pattern set. To fill a layer or selection of a Web graphic with the pattern, choose Edit>Fill. In Photoshop's Fill dialog box choose Pattern from the Use pop-up menu. Then click in the Custom Pattern field to open the Pattern picker and select your newly defined pattern from the active pattern set that's displayed there A. Click OK to fill with the pattern. In ImageReady's Fill dialog box just choose Pattern from the Use menu to fill with the last defined pattern.

In this tutorial:

1. Web Site and Home Pages
2. Getting in the Game
3. Showing Off
4. Getting Serious
5. Create Game Site
6. Applying Patterns to Web Graphics
7. Web Pattern Recipes
8. Gallery Site with Viewer Feedback
9. Adding File Information to Images
10. Customizing a Web Photo Gallery
11. Portfolio Site
12. Information Site
13. Flash Splash Page