帮助将PSD转换为HTML / CSS

Question

我熟悉CSS和HTML，还看到了一些关于将PSD转换为HTML / CSS的教程。 比如this 现在我有一个PSD模板，我想将其转换为HTML / CSS页面 它提到的模板的图片 现在我很困惑。我不知道在哪里切片并转换为PNG图像。

• 例如Top black 404，我应该 将其转换为PNG图像和放置 在网站上？

• 或者我必须自己写一遍 字体？还有关于Text的错误 放在首页404下。
  

• 我应该将背景切片并保存为 图片并把它放在上面 页面背景？
  

请分享您的经验。

Answer 1

我只想使用@fontface

将文本添加为​​文本

使用以下网站，您可以转换网络字体，甚至可以为您创建CSS。

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

但是，您需要拥有在网络上使用该字体的许可。

Answer 2

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

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

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

Answer 3

如果你可以在同一张图片中同时拍摄这两张照片，那么在制作背景图片和标题的png方面毫无意义。这样可以节省404的响应时间。

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

此外，您需要剪切搜索框以使搜索输入字段的背景和按钮div或按钮输入背景的搜索按钮，无论您喜欢哪个。