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

Games Portal Layout


Create a new document 900x800, select the paint bucket tool and fill your background with the color #032c45, now select the "rounded rectangle tool" draw out a rectangle at the top of your canvas fill with a gradient using the colors #1780b8 and #0c4d80.

image 1

Add a stroke to your header layer.

image 2

Select the "elliptical marquee tool" draw out a BIG eye like shape then drag to the very top of the header like this.

image 3

Fill with the color white, then holding the "ctrl" button on the keyboard click on your header to make a selection. Now select the layer your white circle is on and goto "select > inverse" then hit the delete key. Now add a layer mask blend the cirle in as much as you can just leaving abit showing, also set layer opacity to around 50%.

image 4

 

Now lets add out site title, slogan and logo to our header.

image 5

Now the logo is a shape from adobe's custom shapes libary, add this layer style to the word "planet".

image 6

And add these layer styles to the word "games".

image 7

image 8

Now lets add some important menu buttons to the right side of our header.

image 9

Lets also make some icons to go with our important menu items, ope up adobe's custom shapes libary and choose some images from there or use your own images, to select the custom shapes tool see the image below.

image 10

Add an "outer glow to your icons", you should have something like this.

image 11

 

Thats it for our header, now lets create out navigation, select the "rectangular marquee tool" and draw out 6 rectangles, now the colors all depend on personal preference, heres mine.

image 12

Still with the rectangle marquee tool draw yet another rectangle over your button.

image 13

Do this with every button and set layer mode to "soft light", your navigation should now look like this.

image 14

Now add your button text.

 

Duplicate your header layer, then move and resize your header to fit at the bottom of the canvas as your footer, add your footer information.

image 15

With the "rounded rectangle tool" draw 3 rectangles under your navigation, open up your layer styles and add a stroke to your shapes.

image 16

image 17

Select the "rectangular marquee tool" and draw a white rectangle over half of your 3 rectangles.

image 18

Press "ctrl" on the keyboard whilst clicking on your rectangle layer, you should now have a selection like below.

image 19

Goto "select > inverse" then hit the delete key. Set the opacity of your white rectangle to about 30%. You should be left with this.

image 20

Label your rectangles and your done. Ive also add some dividers to split the layout up abit.

Games Portal Layout



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: