How to Create Repeating Stripe Patterns in Photoshop
Stripe patterns are an excellent way to add a little texture to your design elements, such as with fonts in greeting cards, or to set the tone as the background for a website. There are many resources for generating stripe pattern online, it’s easy to get great looking repeating stripe patterns. But sometimes you need a very customized patterns and online tools just do not cut it. If you find yourself in this dilemma, then look no further! The following tutorial will guide you through the exact steps needed for creating your very own customized stripe pattern.
Custom Horizontal Stripe Design
Let’s look at a simple way to create a completely custom stripe design. One caveat: you need to know the height of your design since this repeating stripe design will only work for fixed heights. This should not be a problem no matter what the height, whether it’s 5px or 5000px. You will still be able to create a small file that will repeat.
Step 1 – Set up your canvas
I like to start with twice the size that I will need. So if you are working with a navigation bar that has a height of 100px, then start with a canvas that is 200x200px.
Step 2 – Set up your grid
Go to Edit -> Preferences -> Guides, Grid & Slices…
Set up your grid to be at twice the dimensions you need with 4 subdivisions:
Step 3 – Set your boundaries
Hit CTRL/CMD+’ or go to View -> Show -> Grid to display the grid on your square canvas.
Step 4 – Start the stripe
Just to be over-the-top, I will design a stripe with four colors. Using the Rectangle Tool, draw a rectangle in the far left quarter and repeat for each quarter:
Step 5 – Add embellishments
Of course, you can add as much or as little at this point, but to demonstrate how much you can do, I added a drop shadow to each layer:
Step 6 – Organize your layers
I had to re-organize may layers to make the drop shadows work.
Step 7 – Merge Layers
Select all the layers, Right-click in the Layers panel and select Merge Layers
Step 8 – Downsize
With your layer selected, grab the Move Tool. While holding the Shift key, shrink the layer down to the bottom quarter of the canvas.
Step 9 – Select the Layer
Using the Rectangular Marquee Tool, select a section of the layer. It’s not as important to get the height right as it is to make sure you get the width perfect. Using the Snap to Grid feature helps.
Step 10 – Define Brush
Go to Edit -> Define Brush and give it a name of your choice
Step 11 – Fill layer with Pattern
Now, create a new layer, go to Edit -> Fill and select your pattern you just created.
Step 12 – Create the Angle
Go to Filter -> Distort -> Shear to create the desired angle.
Step 13 – Crop it!
With your grid in view, grab the Crop Tool and crop it at the top 1/4. Hit enter when ready.
Now you can add the little extras like the glossy overlays to give it that polish. To test the design, do the following:
- Save the image in a new folder on your desktop – call it”bg.jpg” for now.
- In the same folder, create a new text file and call it”test.html”
- Open the test.html in Notepad or other simple text editor and paste the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title> Test Page</title>
</head>
<body>
<div style="height:100px; width:100%;
background-image:url('bg.jpg'); background-repeat:repeat-x"></div>
</body>
</html>
- Save the file
- Open it in your favorite browser.
- Change the code above to suit your needs like div height and image name.
About the Author
Tara Hornor has a degree in English and writes about marketing, advertising, branding, graphic design, and desktop publishing. She works for PrintPlace.com, an online printing company that offers postcards, posters, brochure printing, postcard printing, and more printed marketing media. In addition to her writing career, Tara also enjoys spending time with her husband and two children.
Bookmark or Share This Post