Full Website Layout - Bright Idea

finished
Click here for larger version

1.

Create a new document 800x450 with a white background.

2.

Press Ctrl + R to bring up the rulers so we can create guides to work with.

3.

Draw 2 vertical guides from the left and from the right 150px away from the edge of the canvas. Then create 2 horizontal guides first being 100px from the top the second a further 70/80px in height:

Guides to set up

4.

Select the eliptical marquee tool and create an elongated eclipse.

elongated eclipse

Create a new layer and fill this with Black.

Also fill in the top left and right corners with black if they are not in the selection.

5.

Right click the layer in the layers panel and select Blending Options:

Inner Shadow

Make sure Use Global Light is unchecked.

Gradient Overlay

Gradient

Gradient: #FFFFFF » #CCCCCC

6.

Using the Eliptical Marquee Tool create another eclipse this time a lot smaller:

Small Eclipse

Fill this with Black on a new Layer.

7.

Move the layer and duplicate it then move it to the opposite side using the guides to help you.

Move, Duplicate and Move

8.

Right click the eclipse on the right in the Layers panel and click Blending Options:

Drop Shadow

Bevel And Emboss

Gradient Overlay

The gradient is just the standard black to white gradient.

9.

Apply the same blending options to the eclipse on the right but change the drop shadow to these settings:

Drop Shadow

10.

Select the rectangular marquee tool and create a rectangle covering the small box in the middle.

Rectangle selection

Go to Select » Modify » Smooth and set to 5px.

Fill with black on a new layer.

11.

Set these blending options:

Bevel And Emboss

Gradient Overlay

Gradient: #E2E2E2 » #BABABA

Stroke

Stroke Color: #DDDDDD

12.

Ctrl + Click the Layer that we just applied the Blending Options to. Go to Select » Modify » Contract and set to 5px press OK.

Create a new layer and fill this with #006699.

13.

Select the color dodge tool with a brush size of 100px, soft, highlights, and an exposure of 50%.

14.

Brush over the bottom of the rectangle and over the left and right.

LCD Blue

15.

Select the eliptical marquee tool and draw an eclipse that covers the top half of the blue rectangle.

Cover the LCD with eliptical marquee tool

Ctrl + Alt + Shift and click on the blue rectangle layer.

Then go to Select » Modify » Contract and set to 2px press OK.

Create a new layer and select the gradient tool.

16.

Set the gradient tool to White to transparent. Drag the gradient from the top of the blue rectangle to the bottom of the rectangle.

Change the opacity of the layer to 50%.

17.

Create another horizontal guide that is just below our 2 black elipses.

New guide

18.

Select the rectangular marquee tool and create a rectangle that covers the top half of the canvas down the new guide.

Create a new layer just above the background layer.

Go to Select » Feather and set to 50px.

Set the foreground colour to #888888.

Fill in the selection.

Change the opacity to 50%.

background

19.

Select the rectangular marquee tool and create a small rectangle for your links. Just make a small one, we will duplicate it for each link. Go to Select » Modify » Smooth and set to 5px. Press OK.

20.

Fill this with #FFFFFF on a new layer.

21.

Apply these Blending Options:

gradient Overlay

Gradient is the default Black to White gradient

stroke1

Stroke Color: #969696

22.

Add text to the link then duplicate the layer to add more links.

Add some more details in and you are finished:

finished