HV-Designs.co.uk

October 10th, 2007 in Photoshop Tutorials by Richard Carpenter

Console Layout Tutorial

• Share

Create a new document 900×700. Fill your background with a gradient using the colors #383838 & #1f1f1f. Select the rectangular marquee tool and make a selection at the top of your canvas fill with any color then add these layer styles.

Your header should look something like this.

Now find yourself some pictures of your desired consoles, i used google images, place them at the top right corner of your header and set layer mode to “multiply”.  In the middle of your header add your site title, with these layer styles added.

You should have something like this.

Click your header layer whilst holding the CTRL key on the keyboard to make a selection, now once the selection is loaded create a new layer. Fill this layer with a pattern of your choice. If you dont no how to do patterns check my tutorial pages as ive already written a tutorial on patterns. Add a layer mask to your pattern, using the gradient tool drag a gradient diagonally across your pattern.

Create a new layer, select the rectangular marquee tool and draw a small rectangle the same width as your header, add these layer styles.

You should have something like this.

This bar will act as our login & news letter area.

Repeat the same steps above only add these layer styles instead.

You should have something like this.

This will be our main navigation bar. Duplicate your main nav bar layer twice, drag your two duplicated layers under your main nav bar layer. Open up the layer styes menu on both layers and UNTICK “inner glow” & “gradient overlay”. You should now only have 2 layer styles, drop shadow and stroke. Select one of the duplicated layers then select the move tool, press the up arrow on the keyboard 4 TIMES select the other duplicated layer select the move tool and press the down arrow 4 TIMES. You should now have something like this.

Add your navigation text.

Ive also add the search box and login boxes just for an example on how it would look when finished. Ive also added some console logos which i got from google images. Select the rectangular marquee tool and draw out 4 individual boxes under your navigation, add these layers.

You should have something like this.

Create another 3 additional boxes, 2 to the right and 1 along the bottom to serve as our footer, use the same layer styles as above.

Now code it up and add your content, HERES HOW it could look with the content.

• Share