Web Pattern Recipes

Use these pattern recipes to make tiling backgrounds for your Web pages or to fill your Web graphics, using the techniques explained in the last section, Applying Patterns to Web Graphics. You can make these patterns in Photoshop or ImageReady.

Scan Lines

Make a new white image 2 x 2 pixels. Zoom in to 1600%. Select the Pencil tool and choose a 1–pixel hard round TIP from the Brush pop-up palette. Set the Foreground Color box to black. Draw a horizontal line across the top of the image. Optimize and save as a GIF for use as a page background, or define as a pattern for filling foreground images.

Grid

Make a new white image 8 pixels x 8 pixels. Zoom in to 1600%. Select the Pencil tool and choose a 1–pixel hard round TIP. Set the Foreground Color box to black. Draw a horizontal line across the top of the image and a vertical line along the left side of the image. Optimize and save as a GIF with two colors, or define as a pattern.

Diagonal Lines

Make a new medium gray image 3 pixels x 3 pixels. Zoom in to 1600%. Select the Pencil tool and choose a 1–pixel hard round TIP. Set the Foreground Color to dark gray. Draw a horizontal line across the top of the image from the right edge of the document window to the 1–pixel mark on the horizontal ruler. Click in the center of the image to draw a 1–pixel square. Draw a vertical line along the left edge of the image from the bottom of the document window up to the 1–pixel mark on the vertical ruler. Click in the bottom-right corner of the image to draw a 1 pixel square. Optimize as a GIF or define as a pattern.

Boxes

Make a new transparent gray image 7 pixels x 7 pixels. Zoom in to 1600%. Select the Pencil tool and choose a 3–pixel hard round TIP. Set the Foreground Color box to black. Click in the center of the image to draw a 3–pixel square. Optimize and save as a GIF with two colors, or define as a pattern.

Frames

Make a new white image 6 pixels x 6 pixels. Zoom in to 1600%. Select the Pencil tool and choose a 1–pixel hard round TIPs. Set the Foreground Color box to medium gray. Make a new layer. Draw a 1–pixel border touching all sides of the document window A. Choose Image>Canvas size. In the Canvas size dialog box, check Relative and enter 4 pixels in both the width and height boxes. Click OK. Optimize and save as a GIF with two colors, or define as a 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