CSS PSD 网站模板的最佳尺寸？

Best size for PSD website Templates?

提问by IncomePitbull

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..

我在 Photoshop CS5 中制作了一些网站，但我通常倾向于在记事本 ++ 中制作原始网站。我通常将它们放在网站上，然后编辑代码并刷新页面以查看更改。我想转向更专业的方法并在 Photoshop 中制作整个模板/设计。阻止我直接潜入的事情是一开始就大声笑..

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...

用于模板的良好分辨率是什么？我遇到过不同的教程，他们说不同的尺寸。例如，我的笔记本电脑分辨率是 1366x768。我的办公室有一个 22 英寸的 LCD，而且我知道它的分辨率也非常大。我假设大多数显示器的最小分辨率是 1024x768 ...

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

在 Photoshop 中创建新模板以创建网站模板时，我应该制作什么尺寸的图像，为什么？

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!

提前致谢！

回答by Marcelo De Polli

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 oneand 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.

1. 查看当前最广泛使用的屏幕分辨率的统计数据。正如您将看到的，1366x768 是目前最流行的分辨率，其次是 1024x768，它仍然拥有庞大的用户群。并留意移动分辨率。
2. 将浏览器 chrome 和其他操作系统绒毛占用的必要屏幕空间考虑在内。
3. 由于针对多种屏幕尺寸的设计每天变得越来越重要，我强烈建议您选择几个目标分辨率，而不仅仅是一个。这一切都可以由 CSS 很好地处理。即使您只针对台式机，考虑不同的屏幕尺寸仍然是有意义的。
4. 由于您仍然对 Photoshop 感到陌生，因此您可以从许多可用的基于网格的 PSD 模板之一开始。我知道一个960px 一个和一个1140px 一个，但你可以找到更多。如果您决定支持多个屏幕尺寸，则无论如何您都可能不得不使用多个网格。

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

然后，当您想更深入地思考这一切时，请直接阅读本文：Peter-Paul Koch的两个视口的故事。

回答by Xhynk

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.

查看 smashing 杂志并注册他们的时事通讯以及 webdesignerdepot 并查看 Codrops.net。他们有很棒的免费赠品、教程和标准更新。我喜欢查看我的邮件以查看它们。

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.

至于 PSD - 他们没有固定的尺寸。我见过专业的 wordpress 开发人员模型的宽度为 1100 像素（高度是基于您的布局的变体）。我不会推荐超过 1366px 的宽度。

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

我可能会做 1366 或 1440，因为这是大多数人会看到的分辨率。当你在 1920 发送样机时，人们认为网站太小，当内容仍然是 940-980 时，他们都认为

Edit:

编辑：

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

我自己在 1100 像素或 1440 像素宽处制作 PSD，主要内容始终为 940-980 像素宽。

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.

当正文背景中没有太多可查看的图形时，我使用 1100，而当背景对网站的“感觉”更为重要时，我使用 1440。

回答by Andrew Manson

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.

您想为最常用的屏幕分辨率设计您的网站，该分辨率似乎是 1280 像素 x 720 像素。因此，这就是您想要的宽度，您可以创建任何类型的背景，只需确保将其淡化为一种颜色或透明并使用 CSS 更改背景颜色。

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.

确保您有帮助您保持内容内联的指南，最好的方法是创建一个宽度为 960-100px 和高度为 720px 的新文档，然后将指南拖到所有四个边。

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

然后您可以将文档大小更改为 1280 像素 x 800-960 像素。

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.

你有一个 720px 的指南的原因是因为保证在所有分辨率下都能看到该线以上的所有内容，它被称为“首屏”。优秀的设计师会考虑到这一点，以确保吸引观众探索网站，特色内容滑块是一种简单的方法。

回答by user3531144

incomepitbull, I understand where you are coming from...
I am also a back end developer who is trying to learn Photoshop..
Many front end designers are ignorant of what goes on on development stage...
Mostly the Photoshop moke up depends on the customer specification...
The height doesn't matter; use 960 px (12col,16col,24col), 980 px (12col,24,col), 1000 px (100 % responsive friendly for those not using grid systems) or 1140 (for webs targeting bigger monitors ie not mobile first px...)
After all, as developers, we fix all this problems; but good mockups are important...

收入坑牛，我明白你来自哪里......
我也是一个正在尝试学习 Photoshop 的后端开发人员......
许多前端设计师对开发阶段发生的事情一无所知......
主要是 Photoshop 模型取决于客户规格...
高度无所谓；使用 960 px (12col,16col,24col)、980 px (12col,24,col)、1000 px（100 % 响应友好，对于那些不使用网格系统的人）或 1140（对于针对更大显示器的网站，即不是移动优先像素.. .)
毕竟，作为开发人员，我们解决了所有这些问题；但好的模型很重要......