Back in the past most of the grunge website had sidebars , sidebars are bars placed on each end of the website and ar strechable or pattern type. They were really cool back in the days.

Step1.

Make a new document for this tutorial chose any size. I chosed 200×200. Fill the first layer with any color. I chosed orange. Make a new layer and using the marquee tool make a selection like and fill it with any color it won’t matter because we are going to change the color later on.

Step2.

Grab the poligonal marquee tool(see image for icon) and make a selection like mine starting from top.

Now we need to cut the selection so press Ctrl+X.

Step 3.

So we got the basic shape now we need to add a gradient on it so select the shape by Pressing CTRL while clicking on the second layer. Now grab the gradiend with the colors below:

Go from left to right like below:

Step4.

Keep the selection again and make another one over the main one but be sure you use the settings below:

Now fill the remaining selection using a dark gray I used #757575

Step5.

Using the rectangular marquee tool make a selection exactly like the shape. See mine. And will it with a dark gray.

Step 6.

Now make another selection very small this time and fill it with a ligher gray color. I chosed #939393. Now for a better see zoom in up to 1500%.

Now make another shape and again fill it with a even brighter gray color. I chosed #A4A4A4.

Step 7.

This is it you are mostly done but now I added a small shape at bottom. Click here for image

Now add a dropshadow with the following settings :

This is another example used on a layout: