There are great tutorials for creating web pages all over the web, so why would you do this one? I mean it’s longer than most, and I don’t even really get into design details in photoshop very much. Sounds bad right? Maybe if this weren’t awesome! Yes, I’m presumptuously slapping awesome on this like a badge. Why, you may ask. Because this document outlines best practices for creating web pages in Photoshop so they can then be cut up and coded for the web and it follows the latest trends in web design. Put this together with visual tutorials and you’ll be very educated in current web design.
Who is this for?
Aspiring designers who want to design and code their website. This will take you through from start to getting ready for publishing online; the next will step you through the actual coding and publishing.
How?
We’ll design a portfolio and similar sites. The principles work for everything but I’m targetting this specific group (so hopefully you have some work you’d like to put up online).
First Things First
We start with the Home Page. I’m sure you’ve noticed good websites have the same header and footer for all their pages (the same looking menu that stays in the same place the whole time, etc). That gives the site a unified feel and makes it easier for you during the design process because you can keep using the same header and footer for all the pages.
It also makes the Home Page design the most important part of designing a website because that’s when you come up with the feel of the entire thing. So you’ll spend more time on the Home Page than you will on the subpages.
So below first you’ll find a quick run through of good design principles for web pages. Then you’ll find a section on the technical details for designing your page. That includes how big it should be, what fonts to use, etc etc. The last section in this chapter has step by step instructions for setting up the Photoshop document so you can get designing.