- Share This Post
- Pin It
- 1
- 7
-
Sparkle (0)
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
