Games Portal Layout

Create a new document 900×800, 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.

Add a stroke to your header layer.

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

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


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

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

And add these layer styles to the word “games”.

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

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.

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


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.

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

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

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.

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

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

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

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

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

2 thoughts on “Games Portal Layout”

  1. Could you please email me the PSD and provide it on the website – as this is an extremely good example of design.

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *