Pixel Layout

Ok guys, today we'll learn how to create an amazing pixel layout.

It will be a long tutorial, so, get all your patience, and start.

First of all, open a new 500*600 document.

It could seems a strange dimension for a layout, but for a Pixel layout it's probably the best.

Fill the background with #E4E4E4 (Edit - fill).

Create a new layer.

The navigation bar

Get the polygonal lasso tool and draw a shape like this:

Click to enlarge

Fill the selection with #FFFFFF and open the "Blending option panel".

Use this settings:

Here is the results:

Click to enlarge

Create a new layer and always with the Polygonal Lasso Tool draw a shape like this:

Click to enlarge

Note that this shape is a little bigger than the empty area of the basic shape.

Fill the selection with white, then open the Blending Options panel and set:

And this is the result:

Click to enlarge

Create a new layer between the layer 2 and 3.

With rectangular marquee tool draw a square in the center of the shape, stroke it with with white (Edit - Stroke - 1 pixel), and set the opacity level to 40%.

Click to enlarge

Header and Footer

With the Rectangular Marquee Tool, draw a box with the same width of the navigation bar and a height of 80 pixel.

Now, CTRL click (with right button) on the navigation bar level and select "Copy layer style"; then CTRL-right-click on the header layer and select "Paste layer style".

Now we need a pattern to fill our header.

Open a new 3px * 3px document, set the zoom of the page to 1600 and with the pencil tool, draw something like this:

Then go to: Edit - Define pattern and hit Ok.

Ctrl-click on the header layer to select it, then go to Layer - New - Layer to create a new layer, and then Edit - Fill - Pattern.

Choose the pattern you've just created and then set the opacity level to 20%. Now it's more cool!

Click to enlarge

Duplicate the header layer, then hit CTRL-T and resize it in height to obtain your footer. Move it down to the bottom of the layout.

Click to enlarge

The body

First of all we have to create the body area.

Create a new layer, and with the Rectangular Marquee Tool, draw a box with the same width of the navigation bar and a height a little little of the space between the navigation bar and the footer.

Go to Edit - Stroke, and set 1px #D5D5D5, then hit ok.

Click to enlarge

The menu

Create a new layer, and with the rectangular marquee tool draw a square to the left side of the body.

Get the Gradient tool.

Set the foreground color to white, then select "Foreground to transparent" from the Gradient Tool Palette.

Fill your square from the top to the bottom and then set the layer opacity to 45%.

Click to enlarge

Create a new layer below the menu layer.

CTRL-click on the "menu" layer (do attention that the select layer is still the layer you've just created), then go to: Select - Modify - Expand, and set a value of 2 pixel.

With the selection still active, go to, Edit - Fill - Pattern. Choose the pattern you've created and hit ok.

Now set the layer opacity to 45%.

Well, now we have to create the fading effect in the bottom of this square.

With the "Eyedropper tool", pick the background color (#E4E4E4), then CTRL-click on the square layer to select it.

Get the gradient tool, select "Foreground to transparent" and fill like in the figure:

Good! Now the layout is ready to be filled with your own text and content, in the next page I'll show you my personal version.

Here is my layout finished:

Click to enlarge

I've used some pixel-fonts to finish it:

Silkscreen
04b19

Hope you like it!