Thursday, October 30, 2008

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.

6 comments:

Ginger*:)* said...

Thanks Jenn! I use Painter to make patterns of any kind. It is a bit easier but I am glad to know how to do it in Photoshop. The new website is wonderful!

AWells said...

This is so funny....

I saw your website and I LOVED it- and really enjoyed your spotted background so much, that I decided to emulate it. After 2 hours I gave up, and decided on stripes instead- lol!

Great job, and keep up the fantastic work- you are SO talented!

Anonymous said...

Came accross your site looking for something else, but thought I'd mention something. If you make that repeating graphic a GIF instead of a JPG, you'll have a much, much cleaner graphic because it won't have those JPG artifacts. JPGs are generally just for illustrations, photos... things with a lot of color variation. An image like your background image should almost always be a GIF.

J. E. Morris said...

Yes, you are right. It should be a gif.

Anonymous said...

Thank you for posting this. It has really helped me with my project. :-)

Anonymous said...

Hi Jennifer, thanks so much for posting this. I've been trying to make a polka dot background for ages but this is by far the easiest way yet! Em