Stylish Small Layout

Welcome. This is a great little layout tutorial to suit users of all experience. So lets crack on, and make our selves a stunningly simple site! Note most of the images we be logged in at 50%

Phase One:

Open up you image sized 800 x 600. Set your foreground colour to: E8E8C8 And your background to: FDFDEA

Step 1: On our first layer, simpy fill it with our foreground colour, and go Layer>New Layer

Step 2: Using the Rectangular Marquee Tool (RMT for short), make a box about the same size as mine: 278 x 480. Fill it with your background colour. Give it the following Outer Glow, Inner Glow, Stroke.

Step 3: Layer>New Layer. We'll now add that tech feel. Do this by zooming in, and with your pencil tool make some lines and plus's on the side of our layout. Remember, what you do to one side, do to the other. Make it actuate. I've also added lines to the side. I recommend you do this last. Of course, you can use any colour for our "tech lines" but I'd suggest using: CACAA5

Step 4: Make the three boxes I have and fill them: E8E8CF. Add the following Outer Glow and Stroke:

Phase Two:

Step 1: Now we need to use a few grunge brushes, you can download them, but its easy enough to make your own. With the magic wand, just selct parts of a photo you may have and go Edit>Define Brush. Thats it! Get a couple of those, in fact two will be enough. Try and make one bigger than the other. Anyway, hold and Press "Ctrl" and select your layer your working on in its palette. With our smaller one, dab the bottom right corner's of the boxes using the larger one, dab the whole left side of the boxes. At the end of it, you should have something like mine:

Step 2: You shouldn't have deselected so, Select>Contract and about 6/7 pixels. Then go Layer>New Layer. Fill that layer in: F0F0DA, and change the layers opacity to 65/70%. Make a box over the first box if you understand what I mean and delete it, so you left with the below: (Also add the Outer Glow, and Inner Glow below too)

Step 3: Hold "CTRL" and press the layer we're working on in its palette, and Select>Inverse Select>modify>Smooth with about two pixels:

Step 4: Use the RMT and make a very small box, like the one I've made, and press delete. Do this for both content boxes. Use my image below for a guide:

Step 5: Layer>New Layer. Set your foreground colour to: D4D4B9. Make the box I have, fill it in. Give it a slightly darker 1 px Stroke.

Step 6: Download a pixel font, check out: http://www.dafont.com And size 8 pixels colour: EFEFD9 write out your links.

Step 7: Layer>New Layer. Zoom in and use your pencil tool size 1, and with the colour: FEFEEA Go around the border as I've done. Next, with the colours: D4D4B9 and FEFEEA do as I've done between your links:

Step 8: As your layout really lacks colour, you can bring it out in your icons. I feel pixel art really works for this, use the tutorials on Blueshout, or search for on google. I'm going to use a bird for my icons, no idea why, but still. As this isn't a Pixel art tutorial, I won't step you though it, but use mine as a guide, take it into photoshop to get the colours:

Step 9: You should have your icons, position them. Add you final touches. I've used text as a logo, you can of course put your own in.

Step 10: You've finished!

You will see my final result below:

Click to enlarge