Photoshop Tutorial – Diagonal Stripes for Web Site Background
In this tutorial, I will show you how to create diagonal stripes easily using Photoshop. I had seen diagonal stripes being used quite a bit and tried to create my own, however I would never get it to match up correctly and when it is repeated it would always look like crap. Now I will show you the best way to make perfect tiling diagonal background patterns.
1. Open a new file that is 100 x 100 pixels.
2. Under Go to the Edit -> Preferences -> Guides, Grid & Slices menu. Under the Grid Section set a Gridline every 10 pixels with 1 subdivision.
3. Ensure that View -> Show -> Grid is selected as well as View -> Snap.
4. Select the Polygonal Lasso Tool, and make sure “Add to Selection” is the current region selection and that Anti-Alias is selected as well.
5. Zoom in to get a better view of the canvas (CTRL plus +). To draw the diagonal stripes you want to make sure that left side matches the right side, and that the top side matches the bottom side. To better describe the area to enclose, this of the grid as a graph.
If you would like even stripes of alternating colors connect (0,8), (0,3), (7,10), and (2,10). Click back to (0,8) to complete the region. Now create the second diagonal section by connecting (0,2), (0,7), (10,3), and (10,8).
6. Now choose your fill color. You might want to create a new layer before filling it in, to make for easier changes later.
7. For the other color section you can just fill the color of your choice in for the background.
8. I made red a white candy cane stripes since the holiday season is just around the corner.
If you would like your diagonal lines to be thinner you can just reduce the size of the image to whatever you desire, maybe 10 x 10 pixels or so. The main part of this tutorial is over, but I figured I would write real quick on how you can use it for your website using XHTML/CSS.
[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/html]
You can take a look at the finished product here.
If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.
I don’t get the part where you start talking about the grid as a graph…kinda confusing. =/
Great tutorial! Simple and very effective!
Very good, im going to use it on my website
Thank you for this tutorial, It was very simple and exactly what I was looking for
Thanks, just completed the tutorial visually, without worrying about the graph part, and because ’snap’ is turned on, everything went fine.
Thanks a lot. I kept trying the same thing you did before this and it never looked right. This looks great. Simple and effective. Thanks for posting this.
http://www.stripegenerator.com/
So much easier
Actually, I was just trying to find a candy cane striped pole to use as a graphic on the sides of a photo, but I’m having no luck. And I’m not really in the mood for drawing the whole thing in Illus. right now. But I think I’ll use this to just multiply into the pole image I want. Thanks!
(And this will be useful for the future too, I’m sure.)
@Beto Galetto – Why, do you find this difficult? That generator gives you little control over a final pattern. You can’t gradient etc. It’s easier but at what cost?
Great tutorial,
I had a specific request for a diagonal background and couldn’t get it. I found your tutorial and voila! Excellent!