(Video Tutorial) How to Create a Seamless Background Pattern in Photoshop

BlogHer Original Post

Last time, I showed you how to create a simple striped background pattern using Photoshop. This time, with just a few more steps, we'll create a seamless background pattern using polka dots, but you can substitute anything you like, from stars to squares to tiiiiiny pairs of pants — there's no limit, really, so let's get started!

This video tutorial moves fairly quickly, so feel free to pause and check the text instructions below if you get lost. Or, ask in the comments if you need further explanation. :)

Creating the File

  • Open Photoshop (I'm using CS4) and click File > New
  • When the prompt window opens, name your file whatever you want.
  • The Preset should be Custom.
  • Set the dimensions of your file to 200x200 pixels.
    This is a nice size to start with when you're learning how to make patterns. When you get to be more skilled at making patterns, you can go smaller for a tighter pattern and smaller file size.
  • Set the Resolution to 72 pixels/inch if it's not already.
  • Color Mode should be RGB Color / 8 bit.
  • Background Contents should be Transparent.
  • Click Ok.

Adding the Dots

  • Choose your background color by clicking the squares on the bottom left of your toolbar.
    Whatever color is on top is the color you're working with. You can choose both the colors for your pattern there for easy access. To swap the colors back and forth, click the curved arrow icon just above the squares.
  • Using the Paint Bucket tool on the left toolbar and making sure the color you want is in the top square, click and fill in your new file. You'll notice on the Layers toolbar on the right, Layer 1 is filled in with your color of choice. (If you need a refresher on Layers, visit my earlier tutorial Creating a Simple Banner in Photoshop.)
  • Create a new layer above your background layer by clicking the Add Layer icon on the Layers palette.
  • Now we need to draw our dots. You can use either the circle shape tool or the circle marquee tool for this. I use the round marquee tool. Confirming you’re on the new layer, click and draw a small circle somewhere in the middle of the file.
  • Now you need to choose the color for your dot. Going back to the colored squares on the bottom left, select another color to fill in the dots. I chose white.
  • Then clicking the Paint Bucket tool, and making sure you’re on the new layer, click inside the circle you drew to fill it with white.
  • Now you can use your arrow to drag and position that dot wherever you like, but keep it away from the edges for now.
  • Draw a couple more dots, each on their own layer, until you have three (three’s a good number to start with, but you can add more). You can resize the dots if you want a more complex pattern, so some are big, some are small. It’s up to you.
    To resize, make sure you’re on the correct layer, click Control+T -- or Command+T on a Mac – and holding down the shift key, drag a corner until it’s sized to your liking.
  • Now, making sure you’re on the top-most layer, click Control+A (or Command+A) to select everything in your file. Click Shift+Control+C (or Shift+Command+C) to “copy merged”, meaning, it will copy to your clipboard, the visible portion of your file, merged together.
  • Click Control+P (or Command+P) to paste and it should insert a new layer at the very top, complete with all your dots and background color.
  • While clicked on this new layer, click Filter from the top menu, scroll to Other > Offset and a dialog box will appear.
  • Make sure “Wrap Around” is checked and use the sliders to manipulate the position of your dots vertically and horizontally. It’s ok if they go ‘offscreen’ – you actually want that.
  • Once you have it how you like it, click OK to save your adjustments. Then go back to the layers palette and drag the earlier individual dot layers you created above the patterned layer you just adjusted with the Offset Filter.
  • Move around the dots to fill the spaces to your liking and then start the copy/pasting process from above over again. (Select all, copy merged, paste to the top, filter > other > offset to adjust dot position, click ok.)
  • If you think your pattern needs more dots, drag the original individual dot layers above the layer you just adjusted again and keep going.
    You could just draw new dots every time, but if you want all the dots to be the same size, you can just use the same dots you already made by dragging the layers around.
  • Now just save the file out as a .gif, .jpg or .png – I would use a .gif for this particular pattern and you're finished. Click File > Save for Web & Devices
  • When the large dialog box opens, make sure you're set to .gif from the drop-down menu on the top right. For this simple of a pattern, all the other default settings should be fine.
  • Save, name your file and ta daaaa! Your new pattern is finished and ready to be uploaded to your blog or website.

Dotted Background Pattern

Testing Your Pattern

Once your pattern is finished, you might want to see how it looks, to ensure you don't have any adjustments that need to e made before you upload it to your blog. Sometimes seeing it 'big picture' lets you get a better perspective on the overall pattern.

  • Click the marquee tool again.
  • Click Control+A (or Cmd+A) to select all and you should highlight your whole pattern square.
  • Click File > Edit > Define Pattern. A dialog box will appear asking you to name your pattern. Name it whatever you like and click save.
  • Start a new file by clicking File > New. Make the dimensions on this file 1024x768 (or some other website-shaped size so you can see what your pattern will look like in all it's glory).
  • From Layer 1, click Edit > Fill and choose “pattern” from the “Use:” drop-down menu.
  • Select your new pattern from the Custom Pattern drop down that is now available. Click OK.
  • Your dots should fill the new test file. If you see anything that needs fixing or gaps in your pattern, revisit your original pattern file and make adjustments accordingly.
  • There is no need to save this large test file, it's just for display purposes and shouldn't be used as a background pattern.

Design Tips

What if I don’t like dots? What if I want stars or cheeseburgers or whatever?
No big deal, just use them instead of dots. :) Hell, mix it up if you want – dots AND cheeseburgers. Let your hair down, go nuts!

Why should I keep my dots or shapes in the middle and away from the edge?
This is so when you use Filter > Other > Offset, you can get a seamless pattern when "Wrap Around" is selected. If you draw your a shape and let half of it go off the edge, it will appear cut off when you offset.

Why should I test my pattern before uploading?
Sometimes when you're making a pattern, there will be gaps you don't realize until you offset and then tile the background across a larger space. It's just a good rule of thumb to make sure your pattern truly looks seamless and doesn't need further finessing.

Really? Nuts? Like, I should make it as insane as possible?
Well, no. Remember that people will still need to read your blog, so you don’t want to make it too distracting. You can have an intricate pattern or a busy pattern, but choose your colors wisely. Monochromatic tones tend to work best for especially crazy patterns. Something like this:

Random Bunny Pattern

Now these were just examples I whipped up really quickly, but the more time you take with them and the more care you put into it yields more seamless and interesting results.

I look forward to seeing your handiwork and hope you enjoy creating new background patterns!

Happy blogging! xo


Joelle Reeder is the brunette half of the blog and website design duo, The Moxie Girls™ of Moxie Design Studios™. She is the co-author of The IT Girl's Guide to Blogging with Moxie and has designed hundreds of blogs since 2003. She also blogs at tenth-muse.com and makes a tasty martini.

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.