MiniSite Layout 03

Step 1

Open up a new document 800x800px. Fill the background with this pattern. Create a new layer named 'main bg' and make a selection of 450x500px in the center of the document, fill with #ffffff, now apply an Outer Glow and a Stroke.




Step 2

Make a new layer named 'links bg' and make a selection of 450x65px at the top of your 'main bg' layer, fill with #000000, and apply a Pattern Overlay using this pattern. Create a new layer named 'links bg shine' and make a selection 450x60px at the top of your 'links bg' layer and make a gradient from transparent to #ffffff. Add some text links for your navigation I used Verdana, Bold, 16pt, None, #ffffff. Using the Rounded Rectangular Tool make a selection around one of your links (a mock-up of it being hovered with the mouse) and hit delete on your 'links bg shine' layer.




Step 3

Create a new layer named 'banner bg' and make a selection of 450x100px and fill with #4096ee. Create another layer named 'banner bg shine' and make a selection of 450x50px at the top of your 'banner bg' layer and fill with #ffffff, lower the opacity of the layer to 10%. Duplicate your 'links bg' layer and move it down under the banner, remove the bottom 60 pixels of it and rename the layer to 'banner under'. Add a text layer and put your website's name there, I used the font Verdana, Regular, 30pt, Crisp, #ffffff. Duplicate that text layer and apply Edit > Transform > Flip Verticle and lower the opacity of the layer to 10%.




Step 4

We are now going to add the fill-in text, so firstly we are going to put in the two sub-headings, where I have used the font Verdana, Bold, 12pt, None, #4197ee. For the main content I have used Verdana, Regular, 11pt, None, #555555. For the copyright notice I have used Verdana, Regular, 11pt, None, #999999 (#4197ee for the website's name).




Step 5

Finally we are just going to add four small tutorial pictures 30 pixels apart (80x80px) along the bottom just above the copyright notice, apply a Stroke.




View my Layers Window