Web 2.0 Diagonal Stripes Tutorial

Diagonal stripe patterns are very popular when producing Web 2.0 design styles. On Meanderfly, I have used a diagonal stripe background on my post headings. It is not unusual to see this style used in web page headers, menu backgrounds, content boxes, buttons, logos and more. I decided to provide a kind of general tutorial for producing this popular Web 2.0 graphic design style. In addition I am offering, for free download,, a diagonal stripe pattern collection.

First off, take a look at the image below, it showcases a number of Web 2.0 diagonal striped graphics created with the free stripe patterns collection.

The examples were created using the Gimp, an open source graphics and image editing application. However, you can easily adapt this tutorial to whatever graphics package you are using. Not only that, but the diagonal stripe patterns are available for Gimp in .pat format or as PNG files that you can convert for use with your own particular software.

There are 8 black and white patterns, as well as 8 two-toned grey patterns. Depending on which you chose and the blending options you employ, you can achieve an endless number of effects.

Here is an image showing the sixteen different stripe patterns:

The numbers below each image indicate the width of the stripes in pixels, not the size of the actual pattern tiles, which range from 4x4 pixels to 32x32 pixels. (To download your collection see the instructions at the end of this post.)

The Tutorial:

First, open a new image large enough to accommodate the desired size for your project. For this example I opened a new image 400 pixels wide by 200 pixels high. Choose a transparent or colored background - depending on your preference and the ultimate use for the finished image. I am using a white background so you can see it better.

I added two new layers above the background and named them as shown in the picture beolow. The Stripes Layer is active.

I drew a rectangular selection on this layer:

From the patterns palette I chose a diagonal stripe pattern, an 8x8 grey stripe.

I used the bucket fill, with pattern fill selected. You can see my settings here:

After filling the selection on the Stripes Layer with this pattern my image looks like this:

Next I will be working on the Color or Gradient Layer, and I check to make sure this is the active layer:

You can use either a blend or foreground color for filling the next layer. I chose a gradient called Red Gloss#3. (This gradient is part of a collection you can download, 130 gradients in all, for the Gimp or for Photoshop.)

Here are the blend settings I used for the gradient fill:

I applied the gradient from top to bottom on this layer, my image now looks like this:

Next I went to the blending mode and experimented with different settings. I decided on the Grain Merge blending mode:

Here is my result:

There you have it a Web 2.0 style, diagonal striped header bar or whatever you want to use it for. You can add an outline, text, shadows or reflections before you flatten, optimize and save the image.

My final Web 2.0 Style image with a few tweaks added!

Variation: Instead of using a gradient you could fill the color layer with a solid color, then add an extra layer for a highlight. Fill the highlight selection with a white to transparent gradient and use the opacity settings to fine tune your results. Like I said endless options.

Download a PDF copy of this tutorial. Opens in a new window.

How to Download The Free Files

Select and click on the file you want to download (list of downloads follows these instructions), this will open a new window with the name and description of the file you are downloading. Scroll down until you see the large orange download button:

A new window will open and your download will begin. If it does not, scroll down to the bottom of this page and click on "download file now" (shown as it appears on the actual page in the image below).

I know its not perfect, but its free. I test download all the files and it always works for me. If you have problems, leave a comment and I will try to get the files to you some other way.

Choose file to download:

• Grey Stripes Gimp Pattern Format
• Grey Stripes PNGs
• B&W Stripes Gimp Pattern Format
• B&W Stripes PNGs