This tutorial will show you how to make a faded stripes background from start to finish. I’ve included some pre-made ones at the bottom if you don’t want to make your own. Start with a blank document with the same height & width. Mine is 100px X 100px:

Make sure rulers are turned on (Control-R) and zoom in and put 1 pixel with the pencil tool at the coordinates 0,50 on a 100×100 document. If you are using a different size place the point in the center of the top edge.

Make these dots on the right, left and bottom on the center of the side. They will be your guides.

Now choose the Line tool and set line width to 1px. Holding Shift, make a line from 1 of the dots to the other.

Do the same for the other two dots, and also make a line straight through the middle of the square, diagonally. Hold shift for all of them.

Make a new layer, fill 2 non-adjacent areas with the same color in this layer. When you use the fill tool, make sure only the settings “Contiguous” and “All Layers” are checked.

Hide all the lines from visibility, and fill the rest of the areas with a different color:

Now go to Filter>Other>Offset… and apply these settings.

After you do this, you will notice some errors in your pattern, fix them with the pencil tool.

If you want to change the colors, make new layers and add different color fills. Every other color needs to be the same for the pattern to flow. Remember: When you use the fill tool, make sure only the settings “Contiguous” and “All Layers” are checked.

When you are satisfied with the colors, press Control-Shift-E(Merge Visible Layers), then Control-A(Select All), and finnally Edit>Define Pattern.

Now make a new document. Make it the same width as the original patthern’s width, and make the height 4 or 5 times the original height. Make a new layer and fill it with any color. Right click, and go to it’s blending options. On the “Pattern Overlay” panel, apply the previously created pattern.

Now comes the most important part of that faded stripes look alot of blogs have. Apply these settings to the “Gradient Overlay” panel.

Make sure one side has zero opacity (Thats the side going up) and it is the left side in my example. On my right side, I applied my background color. After this you are done! Save it and apply it as your background to your blog with x-axis repetition only. Here’s a final example of how this background looks on a trendy blog:

Here’s some generic faded stripes backgrounds you can use:

Please do not direct-link.

Keywords: Adobe Photoshop, wallpaper, lines, diagnonals, weblog, web design, repeating patterns