Back to DEB Tips

Photoshop: Create Seamless Background Tiles with the Tile Maker Filter

Photoshop can create backgrounds and textures with a combination of filters and commands, but you can also create a pattern based on a selection from a scanned image. If you define a pattern based on a small selection from a scanned image, you can use the Fill command, a Pattern layer or the Pattern Stamp tool to fill a selected area with that pattern. The pattern that you defined will be repeated horizontally and vertically to fill the selection.

But when patterns are tiled, obvious seams can appear where the edge of one tile meets the edge of another. Adobe ImageReady can help fix this problem by using the Tile Maker filter. This filter can blend the edges of a rectangular selection so that it appears seamless when it's used as a tiled pattern.

1. Open an image and use the Rectangle Marquee tool to create a selection around the area of an image that you want to use as a tiled pattern.

2. Choose Edit...Define Pattern. Name the pattern in the Pattern Name dialog box and click OK.

3. Choose File...New to create a new file that is 800 x 600 pixels. We will use this new file to see how the pattern we've defined appears when tiled on-screen. To fill the screen with the pattern choose Edit...Fill. Choose Pattern from the Use drop-down menu on the Fill dialogue box. Then choose the pattern you defined from the Pattern drop-down menu. Click OK.

4. The pattern fills the image window. You will probably see visible horizontal and vertical lines where the pattern tiles meet on-screen. We will use ImageReady's Tile Maker filter to fix these lines and make the pattern appear seamless. Return to the image you defined as a pattern. Then choose the Jump to ImageReady button at the bottom of the Toolbox. This takes you ImageReady.

5. In ImageReady, drag the Background Layer to the Create New Layer icon on the Layers palette. This creates a duplicate of the Background layer. We will use the copy to apply the filter and smooth the pattern, while keeping the original preserved as a back-up. Rename the duplicate layer "smooth pattern."

6. Choose Filter...Other....Tile Maker. The Tile Maker dialogue box appears. The Blend Edges option enlarges the image slightly and the blends the edges to form smoother transitions between edges of the tiled image. The Kaleidoscope option flips the image horizontally and vertically to create a mirrored appearance. For this example, choose the Blend Edges option. Then type 20 in the Width field and check the Resize Tile to Fill Image check box. This enlarges the tile to fill the entire image. We've now enlarged the image and modified the edges. Click OK.

7. Choose the Jump to Photoshop button at the bottom of the Toolbox to return to Photoshop. Back in Photoshop, choose Edit...Define Pattern again to create a much smoother defined pattern this time. Give the pattern a name and click OK.

8. Access the new blank file we created earlier. We will use the file to fill the image pattern again. Choose Edit...Fill. Choose Pattern from the Use drop-down menu and select your defined pattern from the custom pattern drop-down menu. Click OK. Notice that the tiled pattern appears smoother this time with no visible seam.

9. Return to your pattern file and choose File...Save. Then choose File...Save for Web and choose the appropriate settings for the Web. This GIF or JPG image can now be used as a background image on a Web page.

Source: This lesson was developed especially for YOU by Debbie Berg  :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

Back to top

about debbie | debbie's clients | deb's schedule | deb's monthly tip
flawebdeb home | dreamweaver | flash | frontpage | photoshop
web seminar | digital design camp | dreamweaver/flash conference