This tutorial will be in 3 parts: Part 1 - Creating the basic layout in Photoshop. Part 2 - Slicing the layout in Photoshop. Then saving ready for coding. Part 3 - Coding the layout in Dreamweaver. This series of tutorials is not about the theory behind website, it's not going to cover the "What can my website offer?" kind of questions, there's already a great tutorial on TechTuts about the '10 Rules of the web' - Find it here. This tutorial will be about: Creating the basic web template. Colours etc are up to you. Slicing and saving said template ready to be coded in Dreamweaver. Hopefully you'll learn a bit about a few things in these tutorials, slicing can be a hard thing to teach, to slice complex layouts you need to be able to 'see' where things will go and what will have to expand / repeat. Good slicing skills like any other skills come with practice - don't expect magical results immediately. The source files for this tutorial will be listed in 'Part 3' and you will be able to see the final outcome and download the files used. I apologise if at any time you feel I've rambled on or done things in a strange way - I'm trying to be detailed and give as much info as possible and I'm doing things the way I usually do them. It's the habits I've got into and it's what I'm used to. Right now the explanations are over, let's get on with the tutorial: Part 1. There are a few tips I'll give you first about working in Photoshop - some may not find them useful, others will - it's the way I do things and it helps me to keep things organized. 1. Name your layers - I can't stress this enough, maybe if you've only got a few layers it's okay but when you've got lots of layers and you're trying to find the layer for 'that little bit that looks like a glowing blob' and you've not named them things can get frustrating. 2. Group your layers into 'Sets' - this way when you want to find something that's in the 'Header' for example you can look in the header set and find it quicker. Nothing's worse than having layers everywhere that aren't named or grouped. 3. Start everything on a new layer. For example you've made one box and you’re going to make another - put it on a new layer, it does no harm and can help you a lot if things go wrong. 4. SAVE! - Save your work every couple of minutes - it's better to take the time to save every few minutes than lose god-knows-how-much-work becuase something's gone wrong. Now onto the layout. First off create a document with these settings. Next choose your background colour. For the purposes of this tutorial I will be using blues - simply because blue is my favourite colour. Fill the layer with your background colour. Mine is #003D4C. Now for this tutorial I'll be using round edged boxes. They'll have a radius of 10px. On a new layer (like mentioned above) drag out a header area. Now hold CTRL and hit Return and that'll turn that shape into a selection. Don't worry about it not being centered, you can always use transform to center it. Now I'll be filling the header with a gradient to help show the use of repeating background images. My foreground colour is: #07647B and my background colour is #0099BF. Simply drag a Linear gradient from the top of the selection to the bottom. Deselect the area (CTRL + D). Maybe you want to add some text to the header, that's simple enough. Now onto content boxes. Using the same rounded rectangle settings (10px radius) drag out a content box on the left for links etc. I'll be using foreground colour of #0099BF for this content box. Now for the 2nd content box (main content) you can go down 2 possible routes: 1. The colour for the main content box is the same as the side content box - therefore you can add the main content box to the Photoshop file to give you an idea of what it'll look like but you won't need to slice that one and the other one because they're essentially the same you can just slice one. 2. THe main content box is made a different colour from the side content box, in this case you can drag out the main content box as it will need to be sliced as well as the other one. For the purpose of this tutorial I'll be going down route number 2. Below is the main content box dragged out - it doesn't need to be this big for slicing as most of it won't be used (only the corners will) but it'll give you some idea of what the layout will look like. Right so that's the basic layout - now move onto Part 2 where I'll show you how to slice this particular layout.
