Full Website Layout - Bright Idea
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: |
4. |
Select the eliptical marquee tool and create an 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: Make sure Use Global Light is unchecked. Gradient: #FFFFFF » #CCCCCC |
6. |
Using the Eliptical Marquee Tool create another eclipse this time a lot smaller: 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. |
8. |
Right click the eclipse on the right in the Layers panel and click Blending Options: 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: |
10. |
Select the rectangular marquee tool and create a rectangle covering the small box in the middle. Go to Select » Modify » Smooth and set to 5px. Fill with black on a new layer. |
11. |
Set these blending options: Gradient: #E2E2E2 » #BABABA 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. |
15. |
Select the eliptical marquee tool and draw an eclipse that covers the top half of the blue rectangle. 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. |
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%. |
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 is the default Black to White gradient 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: |