These are my personal design philosophies for the web.  They didn't come out a book, they're not from a how-to web site.  It's just my opinions revealed for putting together a great layout in Photoshop.

1. Browser intrusion - 1024x768 is a common resolution that webmasters build for but keep in mind that the browser takes up space so your design should account for the browser intrusion.  You might want to be on the safe side and make it something like 1010x760 -- in other words keep in mind the browser takes up space.

2.  Contrast / Value -- The human eye detects contrast before it detects and processes color.  Even if you're using a lot of colors make sure there is a light/dark contrast in the page for best visual effect.  Make sure your text is easy to read.  (BTW... the human eye sees red first which makes it the perfect accent color.) 

3.  Headings -- If you go down a magazine isle you'll notice most titles are done in white or a light color.  For real - go look.  I'm not sure what holy commandment they're using - but since they probably know more than I do, I also tend to use light titles now. 

4.  Pile it Deep -- As a graphic design student this is a sure fire way to get an 'A'.  I just keep layering elements and for some reason it makes it look a lot more complex and innovative.  Really try it! 

5.  Glitter -- Glitter is shiny and pretty and web sites bennefit from it.  Little accent graphics and miscellaneous little .gifs make your site look more attractive and professional.  Even if there is no real reason to add a wee graphic I will, it just makes the whole site look more authoritative. 

6.  Cohesiveness -- even the ugliest design can bennefit if it is at least consistent!  

I hope these six ideas help you out when you build your next design in Photoshop.  Note I didn't mention a lot of the obvious like how to slice graphics, optimize them, or file types all important topics.

Regards - Seven
Photoshop Certified Know-It-All

NIce write up seven have you considered filling up the article section? you could get some backlinks from it

I'm confused - since when are web pages done in PS?

Graphic elements yes....

Generally the mock up pages are done in PS - photo Shop does however offer full functionality if it is a website your trying to push out... it has the export to html option and all that crud. As far as im concerned it should only be used for mock ups and email brochures. Websites built in PS are usually large in size as they are excessively graphics intensive and the code is... well... less than elegant.

matte wrote:

I'm confused - since when are web pages done in PS?

As far back as I can remember - but they were all crap and took a day to load

When i used to do design i used a pencil and a pad of paper - then coded up the html in textpad. Images always came second.

Now, I get my designer to do it; who, IMO, is one of the best designers out there - certainly the best i've ever met.

And guess what? He starts off with a pencil and paper too; followed neatly by fireworks, photoshop, coral draw, illustrator or any suitable comination.

But he also knows the power of xHTML, CSS and javascript to make vector-graphic style page elements and animations

http://www.peterroper.co.uk/ and http://www.designmachine.co.uk/

Personally i also start with a pen and paper (the lalibela site looks alot more hardcore in my original sketches). Generally when i am doing a site for a private client i tell them to go home, get a pen and paper - draw a picture of what they would like their site to look like and then i do the coding and show them the real thing. Normally this makes them quite happy... my work situation in the office is a different ball game though, they love my sketch, make their own sketch, i create, they dont like and it starts all over again consistently and is always ensued by never ending bitching about why i have not met the deadline.

I remember when i first started getting into SEO my girlfriends (now ex) sister's boyfriend asked me to look at a new site he'd done and if i thought it was optimised for search engines....i asked for the url and he said it wasn't live yet, but he'd show it to me on his laptop.....on his laptop, rather than opening up IE - he opened up photoshop!

Northie wrote:

http://www.peterroper.co.uk/ and http://www.designmachine.co.uk/

Where's my motion sickness tablets for the peterroper site - whoa! that menu!!!

matte wrote:

Northie wrote:

http://www.peterroper.co.uk/ and http://www.designmachine.co.uk/

Where's my motion sickness tablets for the peterroper site - whoa! that menu!!!

Not cool Matte. It took me 1min42seconds to open that bladdy site... i thought it killed my firefox

You would think that with a loading time like that it would at least be laid out correctly

Well here is my process in order.

1. Meet with client, if client is psycho say I'm too busy to complete their job.

2. Make client fill out a page of questions
    (I also provide client with a list of milestones - these are dates that the client and I both have to keep for turning in work)

3. Make client fill out an outline of their web site and provide content
     Develop idea of navigation, figure out if naviagation will be expanding
     Plan out what the client will need, any extra functionality, calendars etc.
     (I usually also complete a project plan here)

4.  Generate thumbnail sketches (pencil and paper) and plan the navigation (I build the site around the Nav usually)

5.  Go into Photoshop and start designing the page.  Photoshop has layers which allows you to turn parts of the page off and on in order to slice.  If anyone is interested in how this is done I would be happy to write up a tutorial.

6.  Get client to sign off on the Photoshop design, let client know that if they sign off on it and later decide they hate it they will be paying me to redesign their web site. 

7.  When PSD file (Photoshop) is complete then I open up Dreamweaver.  I use CSS layout and PHP includes.  So I start with the CSS layout.  I usually have in my head how each of the graphical elements need to be sliced and put in for optimal load time etc. 
     
     Pencil and Paper are vital here - I draw out my div containers and I label them ID, size, padding, margins, and the custom hex colors for each area.  This gives me a visual to work with and a guide to go back to if the client needs something changed in six months and I need a fast reference sheet. 
(example)  http://i91.photobucket.com/albums/k318/ … layout.jpg

8.  Complete all coding in Dreamweaver & publish. 

So at the end of the Photoshop process basically you end up with a JPEG like this:
http://i91.photobucket.com/albums/k318/ … ebpage.jpg

And then you have to take that JPEG (after client likes it hopefully) and turn it into a web page
http://www.bearcreekhardwoods.com
(Still has some IE bugs due to PHP -but haven't had time to wrestle with it, and it's not finished, I still have some CSS work to do)

The client on this particular site is beginning to think he wants to change the name of the business and he's wondering if it doesn't look too feminine/pretty.  *sigh  I have been waiting to complete this until I can set down with him and get specifics.

I know him though so I can tell him - LOOK - you like this, you REALLY like this, you really don't want me to redo this! :-)

Cheers - 7

matte wrote:

I'm confused - since when are web pages done in PS?

Graphic elements yes....

5.  Glitter -- Glitter is shiny and pretty and web sites bennefit ...
6.  Cohesiveness -- even the ugliest design can bennefit ...

I was wondering at what point she consults the spell checker...   Last I heard, there was only one 'n' in 'benefit' ....  Misspellings on webpages look so incredibly illiterate....  Misspellings in ads, even moreso...

If you don't understand how to use Photoshop with page layout then you can honestly ask, if you want to snipe because you're jealous you just end up looking stupid.

Seven

Seven wrote:

If you don't understand how to use Photoshop with page layout then you can honestly ask, if you want to snipe because you're jealous you just end up looking stupid.

Seven

BWAHAHAHAHHAA... OMG.... you guys are seriously making my day start on a good foot  

AndriaD, the spelling story has been around for ages and i love to insult someones intelligence based on their ability to communicate as much as the next guy but it is not a contributing factor on any forum... perhaps on a kids forum (online gaming forums) it could pan out well to let them know that they are illiterate idiots.... but on a forum like SR where there is a large base of people who don't really have time to proof read every post before submission as they are generally busy with more important things or are simply fatigued from staring at code for hours, there is no place for such comments. Im saying this purely because i have seen arguments flair out over silly spelling mistakes and it just makes people feel awkward and could possibly ward off potentially helpful people from the forums.

My spelling steadily loses grammatical correctness as the day passes, im not upset or embarrassed about that simply because it  means that i am doing my job (this may only apply to me) well in the sense that i have become so hypnotized by whatever i am working on that i couldn't actually be phased by simple and tedious spell checkers. It is a different ball game when it comes to adverts and web pages, on that point you are quite correct but this is neither an advert or promotional web page thus making the comment seem quite snide.

If you really want to bite at someones an ankle for misspelling random things please by all means come for my ankles... i feel i may deserve it more than seven, yesterday i printed 1200 postcards with a misspelt email address... now im really mr popular as one of the reservations ladies has to sit there and put 1200 stickers over the email he he he (i think i misspelt misspelt?)

Ryan_steyn, Well put, And i couldn't have said any better. I am new here and have just built my first website to which I am proud of [http://robosapienv2-4mem8.page.tl/] It may not be up to standard compared to a lot of other sites and I may have miss spelt some words [Ops] but the main thing is I enjoyed building it.

And thats what its all about.. if you are good at what you do and enjoy it who the hell cares if you cant spell when in a rush or are just generally fatigued... Dare i say to all who wish to bitch about the arbitrary and nit picky bits of life... DONT BE A MARQUIS!

What would you say if someone put up web site written in todays modern text messaging language.  Would you consider that person illiterrate?  Gosh look at some government paperes, you don't have enough fingers to count spelling errors on them.

Seven wrote:

5.  Go into Photoshop and start designing the page.  Photoshop has layers which allows you to turn parts of the page off and on in order to slice.  If anyone is interested in how this is done I would be happy to write up a tutorial.

Nice tips Seven! I have always had problems slicing images in photoshop, either they turn out too huge or they end being messed up and they dont look sharp. I'd appreciate if you'd do the tutorial.

Thanks
Kwezi

I will work on a tutorial but here is a tip for mock "slicing" images in Photoshop.

I work in CS2 - so maybe CS3 has an improved method of slicing.  CS2 slicing is so dreadful I never use it.  Instead I use the selection tool.  I select the area I need and 'copy merged' for precision - if I need to grab what is underneath this area, for a navbar for instance, I use select inverse.  The makes sure my selections are pixel perfect.  Once you have a selection copied make a new document.  It will automatically be the correct size.  Paste and save for web.

Fireworks has much better slicing tools then Photoshop and occasionally I use it - but I'm handy enough with the selection tool I usually don't need to. 

I will work on a full tutorial with pictures and so forth on how to go from Photoshop to a web page over the Christmas break.