2 Step Seamless patterns

2 Step Seamless patterns Thumbnail Image

This is a cool technique I used last week to make an easy seamless pattern for a web mock up I was working on. I end up not using the pattern in the site but the technique I used to make it was pretty interesting.

Step 1 : Offset the image to be patterned by half the width and height of the image.

Step 2: The border parts of the pattern will now tile properly and the edges of the image are now in the center. So go in with the patch and clone stamp tools to clean the image up to make a perfect tiling image.

Detailed Explanation

Create an image to start out with. In useing a 3000x3000 square.

Create an image to start out with. In using a 3000x3000 square.

To start with I made a 3000×3000 image you can use whatever size you want but it should divide evenly in half. To make these I used these artistic brushes from Alex Dukal.

Open up the offset filter.

Open up the offset filter from the “Other” part of the filter menu.

Enter half your documents width and height for the Horizontal and Vertical offset.

Enter half your documents width and height for the Horizontal and Vertical offset.

Use image size to find half your images width and height to enter for the values in vertical and horizontal offset.

After the offset filter has been applied

After the offset filter has been applied

You can now see that what was the four corners of the image are not aligned across the center and the edges will now tile perfectly.

Zoom into one of the edges and use the patch toll to remove it.

Zoom into one of the edges and use the patch toll to remove it.

Next grab the patch tool and select and area close to the edge where a line is visbile try to taper the shape so that you select as few pixels along the edge as possible. Also select a wide area around the edge so that the patch tool has something extra to blend.

Drag the patch to cover the edge with a new area and erase the hard edge.

Drag the patch to cover the edge with a new area and erase the hard edge.

After you have a good selection drag the patch tool to cover the edge with a new area. Once you release the mouse the edge should look like the the image below.

Image after the patch tool.

Image after the patch tool.

Now you can see that the patch tool has fixed the hard edge by blending pixels from the area you specify with the pixels from the destination area. You can also use the clone tool to make adjustments and clear out the hard edges. Once you get the hard edges its time to test the image.

Now define a a pattern from the edit menu.

Now define a a pattern from the edit menu.

Now that you have fixed all the hard edges with the patch or clone tool Select All and go to Edit > Define Pattern, name your pattern and hit ok.

Now mkae a new pattern layer from the bottom of the layer palatte.

Now make a new pattern layer from the bottom of the layer palate.

Once you make a new pattern layer just set the scale down a little and check your edges and then go back and fix problem areas and check again. You can Add to your pattern just as long as nothing gets cut off by an edge.

Just set the scale down and check your edges.

Just set the scale down and check your edges.

That was it now to have a simple pattern layer that you can use for web or print and a quick technique to make more.

Final Pattern made with the offset filter.

Final Pattern made with the offset filter.

Easy Seamless pattern. HOORAY!

2 Comments