A quick refresher on how to create seamless backgrounds in Adobe Photoshop for use on the web. Seamless backgrounds are used in background elements, menus, sidebars, & buttons.  Pretty much all over the place!  Get comfy with creating them.

These are the steps.

1) Find an image

First either create or find an image that you are going to use to repeat.  I’ll do grass, since it is relatively easy.

I did a google search for grass, and chose to use this image.

Grass!

Remember to select a portion of the grass where the colors are uniform.  Choosing the dark corners would ruin our pretty pattern we are going to make.

2) Select a portion of the image to use for your pattern. I chose a 150 px by 150 px square in the middle.  Remember to always use a number that divides by two nicely.  (Even numbers).  Select the rectangular marquee tool, change its option style to “Fixed Size” and type in 150 for height and 150 for width.  Click anywhere on your grass, and the perfectly square marching ants will appear.  Position these by clicking on the selection and dragging it to where you want. Like so

3) Crop it. Once you have your selection over your desired portion of the grass, go to Image->Crop.  This will re-size your document to the same size as your selection.

4) Offset it. Go to Filter->Other->Offset and choose for the vertical and horizontal sizes exactly half of your initial selection (150 / 2 = 75).  So choose 75px for the vertical and horizontal offset values.  Make sure “wrap around” is checked and hit “Okay.”  This will now offset your document so that there appears lines down the middle both vertically and horizontally of the grass.

5) Get rid of the middle lines. Zoom in so that you can see better.  All we have to do now is use the Clone Stamp tool, or the “Patch” tool or any other method you choose to get rid of those middle lines.  Just put click on the clone stamp tool, hold down alt/opt and click near the line, not directly on it.  Choose a brush size around 20px and then clone stamp away the lines.  Once your satisfied with the result save the newly created pattern by going to Image->Define Pattern.  Give it a name.

6) Test it. To see how the pattern will look once it is tiled or reapeated across a background, create a new photoshop document about 800 px by 800px.  Go to Edit->Fill.  Make sure that under the “Use” you have “Pattern” selected, click on the little pattern icon box, and choose the pattern you just created.  (It should be the last on the list) and hit “OK.”

This should fill your photoshop document with that pattern and should look something like the following:

7) Delight in your newly created wonder!

Like most everything the web is FULL of free resources for web designers.  The following links are links to sites that have TONS of patterns.  Feel free to download them, change the colors of them in Photoshop, create you own patterns from them, or simply use them in your own designs.

http://patterncooler.com/

http://www.grsites.com/textures/

http://patterrific.com/

http://dezignus.com/floral-patterns-background/

http://www.dinpattern.com/

http://www.squidfingers.com/patterns/

http://www.noqta.it/dromoscopio/

If you have questions, post them in the comments.  Share tricks you discover as well.

Tags: creating background images, photoshop, repeating background, seamless background