- Open up photoshop. The latest edition is CS6 but most of the points in this tutorial will work back to CS4. When picking your document size I usually design in 960px width, so I’ll usually create it at 960 setup guides for the edges of the page and then add extra padding to either side, maybe an extra 100px each side.
- Set up your guides if you haven’t already. There’s an action I like that creates a 960 grid in multiples of 12, 16 and 24. You can find it here. It does help speed up the whole process.
- Now you’ve got your canvas, you’re ready to start designing. Hopefully you’ve got some idea of what you or the client wants. It’s a good to have content, branding, images and a spec before you start. I usually sketch out a wireframe of the site I’m going to design first and refer back to it while I’m working in photoshop. Pencil and paper is much faster for jotting down new ideas and designs so it’s good to have one to hand.
- I’ve got into the habit of picking my fonts first and I think it’s good to be in that habit. As you’re designing for the web you need to make sure you’re using web safe fonts, check my article here. There’s some great alternatives to Arial and Georgia so don’t feel like you’re stuck with these.
- Next I’ll probably pick my colour pallete. My favourite place for this is kuler. Its simply brilliant for colour matching. If you’ve got a colour already then kuler will match it or if you’re looking for a new colour pallete then there’s literally thousands to choose from.
Sales 0800 088 6000
Support 0800 879 9000
