Websites backgrounds does not need to use a solid color or a gradient color for their backgrounds. You can place objects there that maybe interacts with your design or just creates a natural break in the site. In this tutorial, you will be shown how to create a simple gradient bar with a striped pattern ontop of it and see some examples of how this can work in a design.

Step 1

The document I am using is a standard web sized document for a normal design, 960x800px. Create a document and chose to fill it with a dark gray color, #1a1a1a.

Step 2

Create a new layer and then pick up the Rectangular Marquee Tool from the toolbar. Drag out a selection that spans the full width of the document and is roughly 150px high (approximate a good height without measuring, it does not need to be that exact).

Go to Edit > Fill and fill it with a blue color, #204c94.

Step 3

Right-click on the Layer 1 layer and choose Blending Options. In the Blending Options dialog, go down and activate the Gradient Overlay. Click on the gradient bar to open up the editor.

In the gradient editor, click on the stop to the left and make it a darker blue (#1a3e79) and click on the top to the right and make it a lighter blue (#2d65c2).

Step 4

Next you are going to create the diagonal scanline pattern that we want to place above the gradient bar. To create the pattern, start by making a new file at 5x5px with a transparent background.

Step 5

Zoom in as far as you can go and grab your Pencil tool from the toolbar. Make sure you have your foreground color set to black and then click in the upper right hand corner to paint that single pixel black. Then hold down the shift key and click on the lower left hand corner to have Photoshop draw the diagonal line for you.

Notice that it may look like the background is white when you are zoomed in this far, even though it is not.

Step 6

Define this as a pattern by going to Edit > Define Pattern which brings up a dialog box asking you to name the pattern you have just created. After you do this and click OK, you can close this file without saving it as it has now served its purpose.

Step 7

Create a new layer above the blue bar layer. Then hold down your command key (PC: control key) and click on the layer icon for the blue bar layer to load that as a selection. Make sure that you are still on the new, empty layer and go to Edit > Fill (Shift + F5).

In the Fill dialog box, select to fill with a Pattern and choose the custom pattern that we just created, which will show up in the main pattern list after clicking the downfacing arrow.

Finally, click OK to the fill box and then deselect the selection through the shortcut, Command + D (PC: Control + D).

Step 8

Right now, the pattern looks slightly rough around the edges and thus we want to fade it out towards the top and bottom edges. Start by adding a layer mask (1) to the layer filled with the pattern and activate the gradient tool from the toolbar.

Next make sure you are using a white to black gradient (2) and that you set its mode to reflected. Finally in the gradient options check the Reverse checkbox.

Finally with the mask selected, draw out a gradient (3) from the center and down to see the edges fading in slightly. This might take a few tries before you are fully satisfied with the results.

Conclusion

That wraps up the main bar effect but below are some examples on how you can place a main website container box to work together with this bar to get some ideas started.