Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Console Layout

Console Layout


Create a new document 900x700. 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.

image 1

image 2

image 3

Your header should look something like this.

image 4

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".

image 5

In the middle of your header add your site title, with these layer styles added.

image 6

image 7

image 8

image 9

You should have something like this.

image 10

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 don't no how to do patterns check my tutorial pages as I've already written a tutorial on patterns. Add a layer mask to your pattern, using the gradient tool drag a gradient diagonally across your pattern.

image 11

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

image 12

image 13

You should have something like this.

image 14

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

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

image 15

image 16

image 17

image 18

You should have something like this.

image 19

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 style 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.

image 20

Add your navigation text.

image 21

I've also add the search box and login boxes just for an example on how it would look when finished. I've 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.

image 22

image 23

You should have something like this.

image 24

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.

image 25

Now code it up and add your content, here's how it could look with the content.

Console Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Console Layout"

Only registered users can write comment

Reader's comments