Step 1) Make your layout on Photoshop. I tend to start with 900x900 pixel images since nowadays nearly all screens are set to a resolution of 1024x768 or higher. Most people have 1280x1024.
When making the layout, some things to keep in mind:
- Color Schemes: It is not a good idea to use more than a few main colors for the site layout, in my opinion. Do not blind people with rainbow websites or neon color combos. And no yellow text on white background.
I like to match (what I call) a strong color with weaker/accent color(s).
Strong colors: green, blue, red, purple, black, mahogany, dark gold etc
Accent colors: white, cream, light tan, grey, pastel colors, black etc
I find blue+white combo particularly popular amongst big company websites. xD I'm more of a green+cream person. If you couldn't tell... >_>; Anyway, just pick a color scheme and stick with it throughout.
- Avoid clutter. Don't just copy and paste a bunch of codes one after another and make a page with 1209384 different things floating around all over the place. Figure out what you want to put on your website and organize your layout accordingly. Sscribble a bunch of different layout candidates on notebook paper before you begin. In the case of the Costrasa website the layout consisted of: Title, navbar, vote area, poll area, latest page, tagbox and main content area. (Click thumbnail to enlarge screenie.)
- Navigation bars are usually towards the top or the left. It is said people pay more attention to the left than the right.
- Different types of websites have different layouts. "Professional" websites tend to use more white or black. They are generally also fond of shiny buttons, reflection-ey effects and flash banners. lol. Or there's also the popular websites that look like stationary by using various textures. (By the way, free textures at cgtextures.com!) For the purposes of this tutorial, I'm working on a webcomic website, so it's a little more... artsy.
- NOTE: If you want roll-over images, they need to be on TWO separate layers. (examples of roll-overs: the navigation bar turns green when you mouse-over it, and the Key image lights up.)
>> Next: Slicing it up & ImageReady
