Page 2 - Layout

5. Layout is important on any web site, and its always good to make sure that you set things up in a way that makes them easy to read. With gaming sites there is a pretty standard way of setting up your web site, and although pretty basic it does the trick nicely. First of all we need a header, a horizontal navigation, a footer, then a left column, and a right column, and this leaves a nice center column for our content to go in. I will break down each part separately.

?? Header - For now, we just need to draw boxes, so draw a box (with the rectangle tool) the full width of your inner (content) box. This is the gray one we made in step 4. Try not to make your header too large, but make sure it is big enough, and it needs to be at the very top of the page. The sizes can be changed, but for now just make something about 120px high. Colour is not really important at this moment, but try to make it a different colour from one you have already used, i used #666A77 for the header. Enlarge reference image

? Navigation (Horizontal) - For the navigation just a thin box that stretches the full width of your inner (content) box will be enough for now. This only needs to be about 30px high. As for colour, you can either go for something rather light, or something quite dark, i prefer to go dark, so i chose the colour #565A5F. This needs to be placed just below your header box. Enlarge reference image

? Footer - This goes at the very bottom of your page, and can be just as useful as the header and the navigation, always make sure to use the footer to good effect filling it with useful links and information about the site. We will go into this later. I tend to split my footer up into too boxes, one that is very thin, and one that's a little fatter. The thinner one at the very bottom only needs to be about 20px high (enough to fit some text in), and the fatter box, which is directly above the thinner box needs to be about 60px high. I have made my thinner box the same colour as my navigation, and the fatter box a little darker than the header #444752.
Enlarge reference image

? Columns - Create a tall rectangle that goes from the bottom of the navigation to the top of the footer, in other words make it so that it fills in the rest of the space between the top and bottom of your site. Again this needs to stay within your inner background area, and only needs to be about 220px wide. I chose a dark colour for the background of the columns, #161D23. Once you have one column done, just duplicate the layer. (Go to Layer >> Duplicate Layer ... [on your workspace toolbar at the top] )

You should now have something that looks like the reference image: click to enlarge. Use this as a reference as you go along. If you are unsure about anything take a look at the enlarged image (click the thumbnail) and take a closer look at the details of the image

For the next stages, it doesn't really matter what order they go in, as long as each section gets done, however i find my way makes it easier, so you can follow along in the order i have but it.