Basic Glossy Blue Layout

Step 1

Create a new document 800x800px, fill the background with #ffffff. Firstly we are going to do the banner, make a new layer and call it 'banner', make a selection of 800x120px and fill it with #184c82. Now make a new layer called 'banner shine' and make a selection 800x60px and fill that with #ffffff, lower the opacity to 10%. Add your website's title.




Step 2

Now we are going to do the global links, make a new layer named 'links', make a selection 800x30px 1px under your banner and make a gradient from #23588e to #184c82. Add some text links, the font I used was Tahoma, sized 11pt, colour #ffffff.




Step 3

We will now be making the navigation box. Make a new layer named 'nav bg' and make a selection 200x400px 10px from the left, and 10px under the links, and fill with #184c82. Under blending options, add a stroke inside, #000000, 1px. Make a new layer 'nav top', make a selection of 200x30px at the top of the navigation box, and apply a gradient from #23588e to #184c82. Under blending options, add a stroke inside, #000000, 1px. Create a new layer 'nav top shine' and make a selection of 200x15px and fill with #ffffff, lower opacity to 10%. Add a title for the navigation box, and some links, the font I used was Tahoma, sized 11pt, colour #ffffff.




Step 4

For the main content box, just repeat Step 3, with 10px margins, and an extra 30px at the bottom.




Step 5

For the footer, I repeated Step 2.




View my Layers Window