Best size for PSD website Templates?

Question

I have made some websites in Photoshop CS5, but I usually tend to just make them raw in notepad++. I normally make them live on the site, and edit the code and refresh the page to see the changes. I am wanting to move to the more professional method and making the entire template/design in photoshop. The thing holding me back from diving right in, is the very very start lol..

What is a good resolution to use for the template? I have came across different tutorials and they have say different sizes. For instance, my laptop resolution is 1366x768. I have a 22in LCD at my office, and I know it is a really large resolution as well. I would assume the min resolution of most monitors is 1024x768...

When creating a new template in Photoshop to create website templates, what size should I make the image and why?

Also, since we are on the topic, do you guys have any links to good resources of image collections and such that you find helps you the most in creating your templates? I am a programmer, and as we all know, most coders suck at images.. I am just trying to strengthen the other half of my brain :)

Thanks in advance!

Solution 1

I would suggest the following course of action:

1. Take a look at current statistics for the most widely used screen resolutions. As you'll see, 1366x768 is the most popular resolution right now, followed by good old 1024x768 which still has a huge user base. And keep and eye out for mobile resolutions as well.
2. Factor in the necessary screen real estate taken by browser chrome and other OS fluff.
3. Since designing for multiple screen sizes is becoming more important every day, I would strongly encourage you to pick a few target resolutions rather than only one. This can all be nicely handled by CSS. Even if you're targeting only desktops, it still makes sense to consider different screen sizes.
4. Since you're still getting your feet wet with Photoshop, you could start from one of the many grid-based PSD templates available. I know a 960px one and a 1140px one, but you can find many more. You'll probably have to use multiple grids anyway if you decide to support more than one screen size.

And then when you feel like thinking about all this a bit harder, go straight for this article: A tale of two viewports by Peter-Paul Koch.

Solution 2

Look at smashing magazine and sign up for their newsletter as well as webdesignerdepot and check out Codrops.net. They have great freebies, tutorials, and standards updates. I LOVE checking my mail to see them.

As for the PSD - their's no set size. I've seen professional wordpress developers mockup at 1100px wide (height is SO variant based on your layout). I wouldn't recommend much more than 1366px wide.

I might do 1366 or 1440 because that is the resolution most people will see. When you send a mockup at 1920 wide people think the website is too small, when the content is still the 940-980 that they all

Edit:

I myself do PSD's at either at 1100px or 1440px wide and the main content is is always 940-980px wide.

I use 1100 when there isn't much to look at graphically in the body background, and 1440 when the background is more crucial to the "feel" of the website.

Solution 3

You want to design your website for the most used screen resolution which seems to be 1280px by 720px. Therefore that is what you want your width to be, you can create any type of background and just make sure you fade it to one color or transparently and use CSS to change the background color.

Make sure you have guides that help you keep the content inline, best way, create a new document with the width 960-100px and the height 720px, then drag guides to all four sides.

Then you can change document size to 1280px by 800-960px.

The reason why you have a guide at 720px is because everything above that line is guaranteed to be seen on all resolutions, it's called "above the fold". Good designers take this in account for to ensure the audience will be drawn into exploring the site, a featured content slider is an easy way out.