Best size for PSD website Templates?

css templates photoshop psd
IncomePitbull picture IncomePitbull · Aug 12, 2012 · Viewed 81.5k times · Source

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!

Answer

Marcelo De Polli picture Marcelo De Polli · Aug 12, 2012

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.

Related questions

Opening new window in HTML for target="_blank"

<a href="facebook.com/sharer" target="_blank" >Share this</a> How do I make this a certain width and height, in a new window, when the user clicks on it? In firefox, the current code only …

Read More
Application not picking up .css file (flask/python)

I am rendering a template, that I am attempting to style with an external style sheet. File structure is as follows. /app - app_runner.py /services - app.py /templates - mainpage.html /styles - mainpage.css mainpage.html …

Read More
Declare CSS style outside the "HEAD" element of an "HTML" page?

my use-case is the following : I'm composing an HTML page by using parts that are valid HTML fragments but not valid pages, like Divs; these elements are using CSS to manage their style. I'd like to allow each fragment to …

Read More