Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best size for PSD website Templates? [closed]

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!

like image 923
IncomePitbull Avatar asked Aug 12 '12 03:08

IncomePitbull


People also ask

What is the size of website PSD?

psd” file in Photoshop. Then go to Edit > Canvas Size and set the width to 1200px and the height to around 1600px. You can adjust the height later on so that your web layout fits within your document.

What is the size of website template?

1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.

What is a PSD template web page?

PSD template is a graphic project created with Adobe Photoshop. This software works perfectly for the design-to-code process. The folder with template contains. PSD files which can be opened with Adobe Photoshop and, sometimes, Adobe Photoshop Elements.


1 Answers

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.

like image 117
Marcelo De Polli Avatar answered Oct 14 '22 10:10

Marcelo De Polli