PSD网站模板的最佳尺寸？ [关闭]

Question

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

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

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

另外，既然我们是在讨论这个话题，你们是否有任何指向图像收藏的好资源的链接，这样您会发现在创建模板时最能帮助您？我是一名程序员，众所周知，大多数程序员都不擅长图像......我只是想加强我的另一半大脑:)

提前致谢！

Answer 1

我建议采取以下行动：

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

然后，当您想更加努力地思考这一切时，请直接阅读这篇文章：A tale of two viewports，作者 Peter-Paul Koch。

Answer 2

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

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

我可能会使用 1366 或 1440，因为这是大多数人会看到的分辨率。当你发一个1920宽的样机时人们认为网站太小了，当内容仍然是他们所有的940-980时

编辑：

我自己做 PSD 的宽度是 1100 像素或 1440 像素，主要内容总是 940-980 像素宽。

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

Answer 3

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

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

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

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

Answer 4

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