将 PSD 转换为 XHTML答案

【问题标题】：Converting PSD to XHTML将 PSD 转换为 XHTML
【发布时间】：2012-10-23 08:33:56
【问题描述】：

如果我要将 PSD 转换为 HTML，在 Photoshop 中创建典型网页时，我的文档大小应该是多少？

我还没有尝试过，但我脑海中的想法是，我将根据我的文档大小缩放我的图像，如果我的文档大小太大或太小，它不会反映我正在尝试的内容在我的网页中实现。

如何在 Photoshop 中设计一个典型的网页，以使布局在大小上看起来与网页的布局相同？

这是基于居中网页而不是全宽网页。

【问题讨论】：

【解决方案1】：

这取决于您的目标显示器大小。您应该寻找较低的公分母。如果您认为您将获得很多小屏幕，那么 955px 是一个不错的开始尺寸（目标尺寸为 1024），但如果您认为您的网站将在更大的显示器中查看，您最高可达 1140px（定位 1280 个屏幕）。

这实际上取决于您打算针对谁。对此没有一个答案。

另外，请记住，随着响应式设计的出现，您必须针对不同的分辨率设计不同的布局。

【讨论】：

【解决方案2】：

真的很简单.. 您显然知道您希望您的“居中”网页有多宽？在 Photoshop 中创建一个与该大小完全相同的画布。为网络和设备保存，Photoshop 应该会自动为您创建一个该大小的表格。那么你所要做的就是把它居中。

【讨论】：

好吧，这是有道理的 - 但是典型的居中网页的宽度是多少？
我个人会选择 900px-1000px

【解决方案3】：

首先分析您的用户群。主要是移动用户吗？笔记本电脑用户？桌面高级用户？
根据您的分析，查找最流行的屏幕分辨率的一些统计数据。
决定是采用固定大小的布局还是流动布局。对于刚接触网页设计的平面设计师来说，固定尺寸会更“舒适”，因为这意味着，一旦你设置了最外层宽度，你的大量决定都是基于精确测量的。 Fluid 稍微复杂一些，但它的优势在于可扩展且足够灵活，可以处理不同的显示器尺寸等问题。

您应该对一些基于网格的解决方案进行一些研究，例如 Twitter 的 Bootstrap (http://twitter.github.com/bootstrap/)、960gs (http://960.gs/) 或 Blueprint (http ://www.blueprintcss.org/) ... 也有 Photoshop 模板可以帮助您按照他们的规范进行设计。

网络上的第一条规则是放弃控制一切的需要。有些战斗根本不值得付出努力，而且您经常会发现网络上的约定在用户中根深蒂固，以至于试图产生与这些约定背道而驰的设计通常会给您带来更多麻烦（当您尝试从设计转向代码）并在此过程中混淆您的用户。

祝你好运！

【讨论】：