Design Oahu

Web design blog from the middle of the pacific.

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.
Diagonal Add Selection

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.
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.
Diagonal Preview

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.

10 Comments

  1. Comment by Kourtni on December 30, 2007

    I don’t get the part where you start talking about the grid as a graph…kinda confusing. =/

  2. Comment by Ratamacue on February 13, 2008

    Great tutorial! Simple and very effective!

  3. Comment by ryan staniforth on April 12, 2008

    Very good, im going to use it on my website :)

  4. Comment by Gemma on May 21, 2008

    Thank you for this tutorial, It was very simple and exactly what I was looking for

  5. Comment by steeb on September 15, 2008

    Thanks, just completed the tutorial visually, without worrying about the graph part, and because ’snap’ is turned on, everything went fine.

  6. Comment by Adam on November 25, 2008

    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.

  7. Comment by Beto Galetto on December 1, 2008

    http://www.stripegenerator.com/

    So much easier :P

  8. Comment by Atomic Girl on December 6, 2008

    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.)

  9. Comment by Damien on January 27, 2009

    @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?

  10. Comment by The Bandit on May 7, 2009

    Great tutorial,
    I had a specific request for a diagonal background and couldn’t get it. I found your tutorial and voila! Excellent!

Leave a Comment

Trackbacks

  1. links for 2007-03-05
  2. Diagional stripes in the background. - Almost Epic Dot Com
12 Comments and Trackbacks »