Creating a Seamless Background Tile in Photoshop
This Photoshop tutorial series is for webmasters who are new to preparing artwork for the web.
Premise for Photoshop Tutorial Series: You are a web designer at a small agency, and a client has called to request that you prepare a mock-up for a new home page for is company that sells gifts in Victoria. This Tutorial series was perfected and used in College Web Master classes by Author/Instructor Scott Frangos. Now you can build your Web Graphics skills in Photoshop, as you learn your way through this classroom tested series on preparing Art for the Web.
(In this lesson, you will use Photoshop to create a square tile that will repeat in the background of your web page without showing any edges where the tiles meet.)
1. Open Photoshop.
2. Open a new document that is 110 pixels wide by 110 pixels tall.
3. Select a color for your background using either the swatch palette or the color picker you get by clicking on the foreground color in the tool bar.
4. Choose add noise from the filter menu and set the filter at 20 to add a grain to your background.
Above, the “Add Noise” filter is shown adding “noise” (random pixels of different intensities) to the blue square tile with 20% set for Amount, and the Gaussian radio button clicked. Monochromatic is also checked at bottom to keep the pixels within the blue range.
5. Now use the filter menu to select an Artistic filter to apply to your tile. Because you added noise in step 4, the filter will be able to rearrange the pixels –this would not work if the pixels were all the same exact color.
Above, the Artistic Filter, Paint Daubs, is shown being run on the tile after noise is added to get a more pleasing swatch of color with a painterly feel to it. Note the slider settings for Brush Size, and Sharpness, and also the pop-down choices for Brush Type. You can try our settings, or choose your own.
6. Next decide if you need to lighten the tile if you are going to have dark text appear over this background (you could use the opacity setting to lighten your tile). Conversely, you may wish to use Levels to darken the tile if you are going to use light or white text on your web page. Finish up and flatten the image.
NOTE: You will find you have quite a bit of control choices before you make the final adjustments to make your tile seamless — light or darken it, change its hue (color), run another filter… this is the fun part of being a web designer.
Suppose you skip the rest of the lesson, and just go ahead and use your new tile as a background in your website? The illustration above shows what would happen — your tile would be show obvious edges, detracting from your site design.
7. Now switch over to Image Ready by clicking the bottom right icon on the toolbar. You are going to use the “Tile Maker” filter that is only available in ImageReady. ImageReady is the companion program shipped with Photoshop and used mainly to create animations, roll overs, and image maps.
8. While in Image Ready, choose Filter:Other:Tile Maker. Check “Resize Tile to Fill Image”, and set width to 20 percent –click OK. Check to make sure that JPEG is the file type in the Optimization palette. Save the file as “Background1.jpg” and quit out of Image Ready, back to Photoshop.
The above picture is actually in ImageReady (a companion program from Adobe) — not Photoshop, and shows the settings used with the Tile Maker filter. At the bottom of the ImageReady toolbar, the two buttons you use to switch back and forth between ImageReady, and Photoshop are shown.
NOTE: What about the Filter called “Pattern Maker” in Photoshop? My experience with this Filter (similar to that detailed in the book, the Photoshop Bible) is that the results are hit or miss — you might get a seamless tile, then again… you might not. Tile Maker in ImageReady produces seamless tiles much more consistently.
9. Test your new background tile in your HomePage1design.psd document (open it if it is not open), by first opening the file you just saved in Image Ready. Choose Select All, then Edit :Make Pattern and name it “VicBCTile1″ to store it.
10. Next, click on your HomePage document and create a new layer beneath your browser layer (we named it Blue Bkgnd in the illustration below). Finish by choosing Select All, then Fill from the Edit menu and Use Pattern — you will have to select the pattern you created in the previous step, which should be the last pattern in the pattern bank window.