Home

Business
Freebies
Design
Coding
Inspiration
Resources
How to Create Repeating Stripe Patterns in
Photoshop
By Hazel Raoult, 28 November, 2011 with 2 Comments
(Tutorial, Web design)
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, its 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
Lets 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 its 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.
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
1 of 10 8/5/2014 8:43 AM
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:
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
2 of 10 8/5/2014 8:43 AM
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:
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
3 of 10 8/5/2014 8:43 AM
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.
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
4 of 10 8/5/2014 8:43 AM
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.
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
5 of 10 8/5/2014 8:43 AM
Step 9 Select the Layer
Using the Rectangular Marquee Tool, select a section of the layer. Its 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
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
6 of 10 8/5/2014 8:43 AM
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.
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
7 of 10 8/5/2014 8:43 AM
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 itbg.jpg for now.
In the same folder, create a new text file and call ittest.html
Open the test.html in Notepad or other simple text editor and paste the following code:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4
/loose.dtd">
<html>
<head>
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
8 of 10 8/5/2014 8:43 AM
<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>
[/html]
Save the file
Open it in your favorite browser.
Change the code above to suit your needs like div height and image name.
Author: Hazel Raoult
Hazel Raoult is working with PLAVEB - Web Design Services provider Company She has extensive
experience in website design and redesign. Being a web designer, she has a sharp eye for all things beautiful,
including nature and occasionally she goes on nature walks with friends and family. You can like PLAVEB's
page on Facebook for web design and development related information and tips.
Related Posts
None
Danny
VERY useful! Thanks a lot!
Shahbaz Ahmed Bhatti
Dear Tara it nice and so goooooooooooooooooood and easily. have a nice day
cheeeeeeeeeeers
Subscribe to our Newsletter

How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
9 of 10 8/5/2014 8:43 AM
Advertise Here
Search

Popular Posts
A Complete Infographics Kit: Tutorials, Vector Kits and Examples
15 Must-Have High Quality Free Flat Icon Sets
40 Logo Design Tutorials
CSS Box-Sizing for Noobies
Creating a Full Screen Background for Websites
12 Free New Stylish Fonts to Download
50+ textures for Your Design Appetite and lot more Resources
How to Create Repeating Stripe Patterns in Photoshop

Privacy Policy Write for Us Advertise About Contact Us
Copyright 2008-2014 Web Design Views All Rights Reserved
How to Create Repeating Stripe Patterns in Photoshop http://www.webdesignviews.com/2011/11/how-to-create-repeating-stripe...
10 of 10 8/5/2014 8:43 AM