将PSD转换为XHTML

Question

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

我还没有尝试过，但我脑子里想的是我会根据文档大小缩放图像，如果我的文档太大或太小，它就不会反映出我在尝试在我的网页上实现。

如何在photoshop中设计一个典型的网页，使其布局在大小方面与网页的布局相同？

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

Answer 1

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

Answer 2

这取决于您的目标显示器尺寸。你应该寻找较低的共同点。如果你认为你会得到很多小屏幕，那么 955px 是一个很好的尺寸（目标尺寸是1024），但如果你认为你的网站将在更大的显示器中查看，你可以高达 1140px （定位1280个屏幕）。

这实际上取决于您计划定位的对象。对此没有一个答案。

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

Answer 3

1. 首先分析您的用户群。主要是移动用户吗？笔记本用户？桌面电源用户？
2. 根据您的分析，查看最流行的屏幕分辨率的一些统计数据。
3. 决定您是要采用固定大小的布局还是流畅的布局。对于刚接触网页设计的图形设计师来说，固定尺寸会更“舒适”，因为这意味着，一旦设置了最外宽度，您的大量决策就会基于精确测量。流体稍微复杂一点，但它具有可扩展性和灵活性，足以应对不同显示器尺寸等问题。

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

网上的头号规则是放弃控制一切的需要。有些战斗并不值得付出努力，而且你经常会发现网络上那些根深蒂固的惯例试图产生一个与这些惯例背道而驰的设计，这往往会给你带来更多麻烦（当你试图从设计转移到代码）并在此过程中混淆用户。

祝你好运！