Creating Great Web Graphics

Creating Great Web Graphics

The following steps will show you how to create a seamless pattern tile without using filters in Photoshop version 4.0.

1. Start with a new file, 100x100 pixels, in RGB Color. Select pale yellow as a foreground color and dark red as a background color. The filter we'll be using uses foreground and background colors to create its effect. Apply Filter/Sketch/Halftone Pattern, with the Pattern Type set to Circle.

2. There are probably seams in the image you've just created. To check, use Filter/Other/Offset, with the Wrap Around radio button checked. The horizontal and vertical offset amounts are 50 and 50 (see Figure 4.8). This way, the seam will appear through the middle of the image, where it will be easier to see and to clean up.

3. There are now a number of ways to clean up that ugly seam. Many people use the Rubber Stamp tool, but I prefer to use the Smudge tool. It's a lot like finger painting. Just drag the Smudge tool, set to a small or medium brush size, across the center seam a couple of times. You can constrain the tool (as you can many other Photoshop tools) to a straight line by holding down the Shift key while you click the Smudge tool at either end of the straight line you're creating.

Another way to clean up those seams is to grab a piece of the image and copy it and paste it over the seam. Use the Lasso selection tool to make a small, irregular selection. Apply Select/Feather at 2 pixels. Apply Edit/Copy, (or Control+C on Windows, Command+C on the Mac), Edit/Paste (or Control+V on Windows, Command+V on the Mac), and drag or nudge (using the arrow keys) the patch over a seam. Continue patching until all the seams are covered. You'll need to apply Layers/Merge Down before you can save the finished file.

A third method to clean up pattern tile edges is to use a paint tool. Since this pattern tile is made up of a very soft texture, you can clean up the seams using the Airbrush tool set to a small brush size and low opacity setting.

Now, fill a larger selection to check how your image will look when it is tiled and used as a background. Open a new file (or Control+N on Windows, Command+N on the Mac), set to 300x300 pixels. This is large enough to show the pattern tiled. Return to the seamless tile you've created. Apply Select/All (or Control+A on Windows, Command+A on the Mac), Edit/Define Pattern.

4.Next, select the new file, and apply Edit/ Fill. Within the Fill dialog box, select Use, Pattern; Opacity, 100%; and Mode, Normal. The results will appear as shown in the example above. If you see any obvious seams when the tile is repeated, you can clean them up in the original file, using the smudge tool or the patch method. Save this file as a .tif file, because we'll be using it in Chapter 5 to demonstrate how to lower contrast in backgrounds for web pages.

This Photoshop tip takes advantage of the fact that the Clouds and Difference Clouds filters in Photoshop will create a seamless pattern any time they are applied to an image whose measurements are some multiple of 128 pixels.

1. Start with a new file, 128x128 pixels, in RGB Color. Select white as a foreground color and purple as a background color. The filter we'll be using uses foreground and background colors to create its effect. Apply Filter/Render/Clouds. You can check the image for seams in this image easily. Open a new file (or Control+N), set to a 300x300 pixel size. Select the original cloud image. Apply Select/All (or Control+A on Windows, Command+A on the Mac). Next, apply Edit/Define Pattern.

2. Next, select the new file, and apply Edit/Fill. Within the Fill dialog box, select Use, Pattern; Opacity, 100%; and Mode, Normal The resulting image will be a seamless pattern tile, as seen below.

Extra Credit: The Clouds filter is a great place to start explorations into creating different textures using the filters that come with Photoshop. Try starting with the Clouds filter, duplicate the image by selecting Image/Duplicate, then apply some of the Artistic, Noise or Texture filters. Too tame? Try applying Image/Adjust/Invert (Control+I on Windows, Command+I on the Mac) to create a dramatic change in the contrast and color in your image.

Above you can see the seamless cloud background with nine variations. From the upper left: the original image, Artistic/Cutout filter applied, Artistic/Paint Daubs filter applied, Artistic/Plastic Wrap filter applied, Artistic/Rough Pastels filter applied. Second Row: Artistic/Sponge filter applied, Artistic/Underpainting filter applied, Artistic/Watercolor filter applied, Distort/Diffuse Glow filter applied, and Image/Adjust/Invert applied.

Using a flatbed scanner, you can use virtually any object that will fit onto the scanner as a background for your web page. The example below shows just a few of the amazing possibilities that ordinary objects offer for creative backgrounds.

The objects used in the examples above include, from left to right, a bit of fabric, a handful of plastic "jewels" from a craft supply store, a swatch of handmade paper, a paper doily, breakfast cereal, and an artichoke. Think of the infinite variety of creative backgrounds you can create from household and found objects.

Anything from a handful of costume jewelry to a scattering of leaves can become a background for your web page. This tutorial does require the use of a flatbed scanner. Obviously, you couldn't feed half an artichoke or a handful of dry pasta through a handheld or single-sheet fed scanner. I'd also suggest, if you'll be scanning messy or rough objects to protect the glass on your scanner by covering it with a sheet of clear acetate, available at art supply stores. You can also enclose the objects you'll be scanning in a plastic bag.

This tutorial will show you how to scan, make a simple adjustment, and create a seamless background from some colorful candy.We'll be covering more aspects of scanning in Chapter 6 of Creating Great Web Graphics.

1. Select File/Import, and select your scanner (your scanner drivers, obviously, would need to have been installed prior to this step). You'll want to scan a little larger than the image will show up on your web page, so scan your objects in at about 120 dpi. Your scan will probably be dark, gray in tone, and have small artifacts (what I call glitches) visible, but that's okay.

2. You'll fix the overall cast of the image first. This image scanned in too dark, as shown above. By selecting Image/Adjust/Levels, and dragging the right (or white) input slider towards the center, you'll lighten the highlights and midtones in the image.

3.Select Image/Offset with the Horizontal and Vertical amounts set to about half of your file size. Make sure that the Wrap Around radio button is selected.

4. There's a gap in the image, so I selected a portion of the image, feathered the selection using Select/Feather, then copied (Control+C on Windows, Command+C on the Mac) the selection, and pasted the selection (Control+V on Windows, Command+V on the Mac) to cover the blank area. Paint out any glitches in your image using the paintbrush, and resize the image by selecting Image/Image Size and changing the pixel size.