Solution

Custom Shapes

Create a new Photoshop document and draw your shapes. I've used some of the leaf shapes that come with Photoshop's Custom Shape Tool (u), and put each shape on its own layer so that I can easily move them around later. While you're creating your shapes, make sure that they're within the boundaries of the document.

A seamless tiling background in use on a web site
Creating shapes

When you've arranged your shapes as you'd like, hold down Shift and click on each shape's layer in the Layers palette until you've selected all of them. Right-click (hold Ctrl and click on a Mac) on one of the selected layers and choose Duplicate Layers from the menu that appears.

Now select Layer > Merge Layers or press Ctrl-E (Command-E). This will merge the duplicated layers onto a single raster layer that contains all the shapes. Hide the original shapes by clicking on their layer eye icons in the Layers palette.

You're probably wondering why we went through all «> a E &, the trouble of duplicating and hiding the original Merging the duplicated layers

layers when we could just have merged them. It's so that we can keep our original layers intact in case we need to revert back to them later.

If we were to use our image as is in a repeating background, we'd get some noticeable "gaps" in the pattern, as shown here.

Let's fix this. Select Filter > Other > Offset. In the dialog box that appears, set the Horizontal field to half your document's width, and the Vertical field to half your document's height. Since my document dimensions are 150 pixels by 150 pixels, I've set both the fields to 75 pixels. Select the Wrap Around option, and click OK. The rasterized shape layer will be moved to the right and shifted down by the number of pixels you've specified, and any leaves extending beyond the document boundary will be "wrapped around," as shown in the example below.

Background with noticeable gaps
Applying the offset filter

Now you can fill in the empty gap with more shapes, as shown at right. Again, ensure that your shapes stay within the document boundaries.

That's it! Save it for the Web, and your background is ready to be tiled. The example on the next page shows what our final image will look like when it's repeated on a web page (the original tile we created is highlighted with the red square).

Filling in the gaps

Web page with tiling background

Photographic Backgrounds

We can create tiles for photographic backgrounds in the same way: by applying the Offset filter and filling in the "gap." However, it's a lot trickier to adjust a photographic image in a way that retains its authenticity.

For this solution, I'm using a selection from a photo of coffee beans as my tile. I've used a photo in which the lighting is pretty uniform and there's no perspective to deal with—these are things you should keep in mind when selecting your photo, as you'll be "blending" the edges of the tiles together. I'm using a selection rather than the whole photo to make the blending process a bit easier. For best results, I've chosen an area of the photo in which there's little variation in lighting.

NOTE To Tile or Not to Tile

A selection of good coffee beans

The image below shows an example of a photo that I would not use as a background tile. The perspective of the photo, which makes the front candies appear larger than the ones at the back, as well as the different colors, would make it almost impossible to "blend" the edges of tiles together.

A selection of bad candies

A selection of good coffee beans

A selection of bad candies

Let's get started! With the original photo open, copy the selection you want to tile and paste it into its own layer in a new document. Select the layer in the Layers palette and duplicate it using Ctrl-J (Command-J). Apply the offset filter to the new layer, as illustrated here.

Applying the Offset filter

Position the document windows next to each other so that you can see both the original photo and the tile document. We're going to clone areas of the original photo into the new document, then use layer masks to blend the cloned areas.

In the original photo, locate the area from which you made your tile selection. Select the Clone Stamp Tool (5), hold down Alt (Option) and click once within this area. This sets up the "source" for the clone stamp.

Create a new layer in your tile document, and name it first clone. Select a medium-sized brush from the options bar and Setting the source for the Clone Stamp Tool paint on the new layer. As you paint, you'll see a crosshair cursor moving in the document that contains the original photo, as shown above—this shows you where the information is being cloned from.

In this example, I've dimmed the offset layer so that you can see the cloned area more easily. As you can see, I've cloned more than appears in the background picture so that I can hide some of those offset edges.

After cloning a small patch of the original photo, you may need to switch to the Move Tool (v) and carefully line up the cloned patch with the offset layer beneath it.

Cloning an area

NOTE Lining up Layers

When you're lining up the layers, it may help to temporarily lower the opacity of the layer that contains the cloned patch to about 50%, so that you can see the layer underneath. If the two layers are not quite aligned, that particular section of the image will look blurry. You can then adjust the layers until the picture "snaps" into focus, and return the layer's opacity to 100%.

If it's hard for you to tell when the layers are aligned, change the blending mode of the cloned patch to Difference mode using the drop-down menu on the top-left of the Layers palette. This compares the clone layer's pixels with the layer below and shows the difference in color between the two. If the layers are aligned, you'll see only black. If this isn't the case, you can use the arrow keys to move the layer until it snaps into place.

Take a look at the example shown here: the top two images are unaligned. The top, right-hand image has lowered opacity and shows a slight blurriness.

The top, left-hand image has the cloned patch set in Difference mode. You can see faint outlines of the shapes, indicating that the layers aren't aligned correctly.

The two images at the bottom of the example show what the layers look like when they are perfectly aligned. The image on the left-hand side shows the black patch that displays in Difference mode.

erence Mode f1, -

k. ki

Normal Mode i fr m ^

f<0 % f

Not lined up

Perfect alignment

Perfect alignment

Aligning layers

Add a layer mask to the clone layer by clicking on the Add layer mask button at the bottom of the Layers palette. Set your foreground color to black and, with a soft-edged brush, paint around the cloned section to blend it into the background, as I've done here.

Adding a layer mask to the clone layer

Create another new layer in your tile document and select the Clone Tool (5). Holding down Alt (Option), click in the original photo document to set up another source point, and clone more areas into the new layer on the tile document as you did earlier. Add a layer mask for this layer as well. The example overleaf shows my second clone layer with its layer mask.

The second cloned layer that helps to create a seamless effect

Repeat this process until the image looks suitably blended (you'll probably need to shuffle the layers around a bit and adjust the layer masks to achieve this). As you can see from the example shown at right, I've used five clone layers (I've color-coded these so that you can see which is which).

Final clone layers

The example on the right shows what our final tile looks like, and the example below shows what it looks like when it's repeated on a web page (the original tile is highlighted with a yellow square).

Photographic tiling image

Web page using tiling image

Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos


Post a comment