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.
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.
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.
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.
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.
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.
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.
Repeatable Layers
Now you want to copy the image over and over until you fill your photoshop background.
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.
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.
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.
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.
Depth in your design does not require a repeatable background, but with this photoshop tutorial you should be free to use them wherever necessary.
