(Video Tutorial) How to Create a Striped Background Pattern Using Photoshop

BlogHer Original Post

Last week, I showed you how to create a banner in Photoshop. That's great n' all, but wouldn't it be nice to snazz up your blog further with a background pattern? In this tutorial, I'll show you how to create a simple, but popular, style of background pattern – stripes. From there, you can let your imagination go nuts.

I've created this screencast below for you, in case you're a more visual person (I know I am!) and provided similar written text below for those who like to go at their own pace. If I fumble over my words, just chalk it up to too much incredibly strong coffee.

Creating the File

  • Open Photoshop (I'm using CS4) and click File > New
  • When the prompt window opens, name your file Stripes.
  • The Preset should be Custom.
  • Set the dimensions of your file to100x100 pixels
    This is a nice size to start with when you're learning how to make patterns. When you get to be a ninja at it, you can try going smaller to reduce file size or bigger if you have a more elaborate pattern.
  • 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.

Stripes

  • 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 previous tutorial Creating a Simple Banner in Photoshop.)
  • Next, we'll need to add the stripe.  Go over to your Layers palette and choose to add a new layer from the icon on the bottom right, the little document to the left of the trashcan.
  • Click on your new layer, Layer 2, and go back over to your lefthand toolbar.  Select the marquee tool (the little dotted box 2nd from the top) .
  • Making sure you have Layer 2 highlighted, starting from the top left, click and drag a rectangle out 50px and down to fill the box, creating a 50px ‘stripe'. You should see a dashed line bordering where you wish your stripe to be.
  • Then go back to the toolbar and click the curved arrow above the color squares on the bottom left to flip to the other color. (If you've not selected that color yet, do that now by clicking on the box.)
  • Click the Paint Bucket tool again and double-checking that you're still on Layer 2, click in the highlighted area to fill it with your new color. You should now see two stripes, one of each color.
  • 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 viola! You got yourself a tidy striped background pattern to upload to your blog or website.

Testing Your Pattern

Once your pattern is finished, you might want to see how it looks, to ensure you don't have any weirdness before you upload it to your blog.

  • 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 stripes will look like en masse).
  • 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 stripes should fill the new test file.  If you see anything that needs fixing or gaps in your stripes, 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 want to make skinnier stripes?

If you want them even, just like these, just narrower, make the width of the file smaller from the start (like 50px) and make your stripes half as wide as the file. If you want them skinnier than that, you could go as far down as you like, with the easiest way to get the stripes even by having a file width evenly divisible by 2 (10px/5px, 12px/6px, 8px/4px, even 2px… if you want the stripes to be 1px wide. That's a pretty tight stripe, but I've seen it done!).

What if I want uneven stripes?

No problem. Just don't make the Layer 2 stripe 50px wide. Make it wider, if you want that color to be more dominant or skinnier if you want Layer 1's color to prevail.

What if I want lots of stripes in varying colors and widths?

Now you're talkin'. This is where Layers come in. Just like you made Layer 2 and that even-width stripe, you can add a Layer 3 and draw a new stripe in whatever width you want, move it where you want and color it how you want.  Make a Layer 4 or 5 or 6, even.  Do as many as you want to get the affect you like as long as it's one stripe per layer. You can even click and drag the layers up and down to place certain stripes over or under others. As long as the stripes meet the top and the bottom of your file, you should get a seamless result.

Can the file size be smaller?

Sure thing. Given that it's a stripe and it's just repeating over and over, it's not really necessary to have it be a square. The file can be whatever width you want your stripes to be and the height can be as short as 1px.  I usually start with a square because it makes it easier for me to see what I'm doing and then I reduce the final result by cropping it down to 1px-10px in height, leaving the width as I originally created it. Then I save it out as a .gif or a .jpg , etc and the file size is greatly reduced.

That's all there is to it!  Next time, I'll show you how to create a seamless patterned background that can be any shape – dots, stars, chickens, whatever turns you on. Once you learn the basic technique, you can get crazy with the Cheez Whiz, as the kids say.

Until then, happy blogging... and happy design! 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.