x

We’ve moved. Back40’s new address is 2513 S. Kelly Suite 120 Edmond, OK 73013

Photoshop Tutorial for Creating Repeatable Backgrounds

Repeatable backgrounds are great for website graphic designers. The ability for your background to expand horizontally and vertically will help your website look finished at any monitor size or browser window size. This is a brief photoshop tutorial to help you create your own repeatable backgrounds.

Image

First step, find an image that you want repeated on your website background. The repeatable background could be wood, gravel, grass, clouds, paper, a designed pattern, stripes, subtle textures, and much, much more. The image you select should be determined by the design you are creating and the look you are trying to accomplish. Here are some example repeats in place on their design files.

Repeatable Background Examples

Open the image you want repeated, change the image specs.

Image > Image Size > Resolution – 72

Image > Mode > RGB Color

Photoshop File

The next step is to prepare the background image on the photoshop file.

stock image to design file

Drag the image you want repeated on to your photoshop file where your design is being created. Resize the image or rotate the image using Edit > Free Transform until you get the desired look and orientation.

free transform on design file

Make sure to zoom in to check all four sides for any feathering that might have developed during Free Transform. Use the Rectangular Marquee Tool to clean up the edges of your image. Select the feathered portion and then hit the delete key.

cleaning up feathered edges on design file

Simply drag the image to the right while holding the option and shift keys. Pull the image to the right until the right side and left side line up perfectly.

Edit > Transform > Flip Horizontal. Once the image is flipped merge the two layers.

repeatable horizontal background on design file

Drag the merged layers down holding the option and shift keys. Pull the image up or down until the bottom of the original lines up perfectly with the top of the copied layers.

Edit > Transform > Flip Vertical. Once the image is flipped merge the two layers.

repeatable vertical background on design file

Move the now merged repeat image to the center and top of the photoshop file. If you repeat your image out from the center and top you will always know what to expect out of your repeat.

repeat in middle of design file

Repeatable Layers

Now you want to copy the image over and over until you fill your photoshop background.

repeatable background on design file

Make sure to label your repeat layer image “repeat” so your developer can easily find the image they need to cut up. Once your photoshop file is filled merge all of the layers minus your “repeat” layer.

repeatable background photoshop layers

Now you can easily change your entire background to get things just right by simply copying Layer Styles. First apply the Layer Style of your choice to the repeat image.

repeatable background with Layer Style

Hover your mouse over the Layer Style icon on the repeat image then hold option, click, and pull the Layer Style icon up to the merged image layer.

repeatable background with Layer Style

You can also add more layers around your repeatable background to break things up and create depth. The design can look so nice with repeatable backgrounds to finish out the edges.

design with repeatable background

Depth in your design does not require a repeatable background, but with this photoshop tutorial you should be free to use them wherever necessary.

Next
Display Typeface Using @font-face
Back to Blog