|
Full Website Layout - Creating the basic layout |
|
Sunday, 01 January 2006 |
|
Full Website Layout Photoshop - Creating the basic layout This tutorial is the first part of a 3 parter. This will guide you through how to make your template in Photoshop ready for slicing and exportation.
| 1. | Create a new document any size you want your site to be. I am using 800x550 and will be using an iframe area for the content so the site will always be 800x550, more on iframes later on in part 3. |
| 2. | Set the background to what ever colour you want. For this site I am using a small grey gradient from the top to the bottom but only having the gradient at the top. So select #CCC as your foreground colour and #FFF as your background colour. Then using the gradient tool  with these settings: 
|
| 3. | Now from the top of the canvas while holding down Shift drag the gradient from the top to around 1/4 of the way down. Click here for Example |
| 4. | Select the crop tool  and crop some of the background, we will use this as the main page background. So select a small bar of your background like this then right click it and press Crop. You should now have a thin bar like this. |
| 5. | Now press Ctrl + Alt + Z, you should now be back to your 800x550 image. |
| 6. | For this site layout I am doing it on Firefox, so I searched Google Images and found a large Firefox icon. Now paste your image in. The image I got was quite big so I had to transform it so it fit in better. The image I used can be found here. Once your image is where you want it, set the Blending Mode to Luminosity and the Opacity to 30%. You should now have something like this |
| 7. | Create a header and footer bar using the marquee tool and fill it with #AAA. You can do seperate layers for the header and footer or do them on 1 layer. Set the blending mode to Darken. |
| 8. | Now using the marquee tool again create a rectangle for your navigation bar. I have used the gradient we used for the background but reversed it. |
| 9. | Now using the marquee tool again create a rectangle for your navigation bar. I have used a gradient of #CECECE to #B0B0B0 |
| 10. | Create another rectangle and fill it with #E7E7E7 make this rectangle the size of the content area you wanted. |
| 11. | You should now have something like this |
| 12. | You can either leave it as this and put your text in, in Dreamweaver or you can add your text now. |
| 13. | Once you have finished your layout you can move on to slicing your layout. Please proceed to Part 2. 
(Click for larger version) Download the PSD here (1.2MB) |
Go To Part 2 |
