Creating Repeating Patterns in Photoshop

The other day, I created this little dotty pattern in Photoshop for a background for my website. I used to struggle to create seamless patterns but I've since learned a quick and easy way to create them in Photoshop that thought it might be a useful technique for others. It works for creating all sorts of repeating patterns of all different sizes.

The dot pattern above is created by repeating this little file over and over again...




To make it, I created a new photoshop file. Mine was 30 pixels high and 30 pixels wide. You can make larger patterns. Just make sure you make it square and that you use an even number of pixels.

Then I changed the background to a medium blue color. So I have a small blue square.



Next I use the brush tool to draw a darker blue dot in the center of the blue box. You can draw something other than a dot, just make sure it doesn't touch the edges of the square.



Then you select Filter->Other->Offset. In the offset dialog box, enter +15 pixels right and +15 pixels down (half of the total height and width of my image) and select the "Wrap Around" option. Hit okay and your dot should have moved to the corners like so...



All that's left to do is make one more dark blue dot in the center. Now you have a repeating pattern. You can save it as a .jpg or a .gif and use it as the background on your website, like I did.