Creating a sliding gradient navigation in Photoshop [html]

I used this technique on an earlier version of silentcollision. This is what the final result will be.

To begin with, Create a new document. I made this one 250x250. Create a new layer, and on it, draw a square box, and click edit > stroke > 1px > black. You can use the marquee tool, and use the stroke, or you can always draw it on with a pencil. The important part is to make it on a new layer.

Duplicate this layer, and using shift + down arrow key, move it down three spaces. Repeat this again, until you have reached your desired number of boxes for your navigational links.

I merged all mine into one layer, by pressing Control + E. Now use your magic wand tool (second column, second row) to select the interior of the boxes.

Select these, or similar colours in your palette.

Select the gradient tool (second column, sixth row). You may have to select the paint bucket, hold it down, and wait for the paint bucket option to come up. Drag from the bottom area, up towards the top. You should get a similar effect.

Create a new layer. Its time to add some effects to the navigation. I am using magurno brushes for my effect, but you can quite easily use fonts, or any other pattern.

On this new layer, which has the pattern on it, select its blending mode to overlay, and make its opacity 30 or around there.

You can now add some text and effects to your navigation.

End of tutorial. Hope you enjoyed it.