Web Design Layout #5

Create a new document 800x800 pixels with a white background, unlock your background layer and add this gradient overlay.

You should have something like this.

Select the rectangle marquee tool and create two 1 pixel lines.

Stretch the lines across the width the the canvas.

Create a rectangle using the rounded rectangle tool. Add these layer styles. Place above your line that you created in the previous step, Select the rectangle marquee tool and cut off the bottom corners so the bottom half is not rounded. Just make a selection and hit the delete key. Name this layer "navigation"

You should have something similar to this.

Click to enlarge

Create a new document 4×4 pixels. Select the pencil and draw 4 1 pixel squares like this. Helps if you zoom in to the maximum (1600%).

Make sure the background is transparent, then go to "edit > define pattern" give your pattern a name. Head back over to your layout select your navigation layer whilst holding the Ctrl key this will make a selection. Create a new layer above your navigation layer and fill with your pattern. Set layer opacity of the lines to 25% and blending mode to overlay.

Click to enlarge

Now using the rectangle tool and elliptical marquee tool create 2 highlights over your navigation.

Click to enlarge

Add your navigation text and layout title.

Click to enlarge

Now select the rounded rectangle tool and draw a big rectangle, make sure rectangle is under navigation.

Click to enlarge

Add these layer styles to your rectangle.

Inside your rectangle create another rectangle.

Click to enlarge

Add this gradient overlay to your new rectangle.

On the side of your new rectangle and in the middle of your main rectangle. create those two 1 pixel lines that we created in step one.

Click to enlarge

Now take the time to add some content, i wont go into too much detail at this stage as it is mainly text.

Click to enlarge

Looking good so far, Now create another rectangle using the rounded rectangle tool underneath your big main rectangle that we previously created.

Click to enlarge

Add the same layer styles as the main rectangle that we created previously. Take the time to add your own content again.

Click to enlarge

The arrows in the image above can be found in adobes custom shapes library. Now duplicated your navigation elements. (x2 shines, actual shape and line pattern) duplicate the layers, flip vertical and place at the bottom of the page. This will be our footer. Add your footer text and your done.

Click to enlarge