Posts Tagged ‘Seamless Background’

Making a Seamless Background for a Website

Sunday, June 6th, 2010

In this tutorial, you will learn how to create your own seamless background pattern, by making use of Photoshop’s Offset filter.

STEP 1: Open a new canvas in Photoshop, the canvas can be whatever size you would like, but it must be square. In the example we will be working with a 100x100px canvas.

STEP 2: Delete the background layer from the Layer’s Palette, and add a new layer (so that the background will be transparent).

STEP 3: Create the pattern. In my example I created a very simple pattern by using a hard Black Brush and varying the size and opacity.

TIP: Keep the pattern black & white/transparent so that you can easily color it with layer styles at a later time.

STEP 4: In order to actually use the above image as a pattern, you first need to make it seamless. The first step in doing this it to open of the “Offset” filter from the Filters > Other menu. In the Offset filter menu, change the Horizontal and Vertical offset to exactly 50% of your canvas width/height. In my 100x100px example, each of these would be set to 50. Also set the undefined areas to wrap around, and press OK.

Your image should now look like this:

STEP 5: Clean up the seams. Using the eraser, remove the unfinished parts of your pattern that run into each other at the ‘seams’ of your pattern.

Before                              After

STEP 6: The last step in creating the pattern, defining the image as a Pattern. From the Edit menu, click on “Define Pattern…”, and give it a name.

STEP 7: Using the pattern. To test your new pattern out, create a new canvass (any size will do), and from the Edit menu, choose “Fill…”, then choose your new pattern from the list of Custom Patterns, and press OK. That’s it! Your new pattern will also be available to be used in layer styles, which will allow you to change the size, color, transparency, etc. of your pattern. This same technique to small seamless patterns out of a large texture images as well.