有关将PSD转换为HTML / CSS的帮助

Question

我熟悉CSS和HTML，也看过一些关于将PSD转换成HTML / CSS的教程。就像这。

现在我有了一个PSD模板，我想把它转换成一个HTML/CSS页面。

所述模板的图片

现在我很困惑，我不知道该在哪里切片并转换成PNG图像。

• 例如，Top 404，我应该把它转换成PNG图像并放到网站上吗？
• 还是我要用同样的字体自己写？也是关于放在最上面的404页下的文本错误。
• 我应该将背景切片并保存为图片并将其放在页面的背景上吗？

请分享你的经历。

Answer 1

我认为，如果您可以在相同的图像中同时使用背景图像和png作为标题，那么这样做是没有意义的。这将为404节省响应时间。

也就是说，我建议将所有文本从"404错误“下面删除，以保存背景图像，然后使用css定位和标准字体定位白色文本。

此外，您还需要删除搜索框，使之成为搜索输入字段的背景和按钮div或按钮输入背景的搜索按钮，无论您喜欢哪种。

Answer 2

我只想用@fontface添加文本作为文本

有了下面的网站，你可以转换你的字体为网络，它甚至为你创建CSS，我认为。

http://www.fontsquirrel.com/fontface/generator

然而，你需要有一个许可证才能在网络上使用字体。

Answer 3

首先，我要重新考虑使用一个大的背景图像，a)使类型难以阅读，b)下载404消息页所需的时间更长。

如果你坚持下去，你显然会想要一张纸的背景图片。

我会将您的'404错误‘文本转换为png，然后使用图像替换技术将其用作h1标记的背景图像，以将文本保留在标记中。或者，您可以使用它作为一个具有适当ALT属性的IMG。