你会如何将这个PSD接近HTML？

Question

我刚开始练习将PSD转换为HTML / CSS。但有时候你会看到PSD，而且用html和css制作它似乎是不可能的。

就像这里的那个：

http://i.stack.imgur.com/rx0dl.jpg

非常感谢

Answer 1

你应该采用的方法与你接触任何其他PSD到HTML的方式相同，将它分成脑袋并从顶部开始。

在这里，我做了一个非常粗略的例子，说明如何划分它：

http://i.imgur.com/glZJ5.jpg

Answer 2

在photoshop中使用网格线将图像分成不同的部分并从那里创建切片。你甚至可以在完成后导出到html，它也会创建所需的CSS样式。

您可以在此处找到解释如何操作的视频： http://www.youtube.com/watch?v=DVfxe4pqvo8

Answer 3

好吧，从基础开始：

• 中央内容容器。不幸的是，图像只描述了具有一个特定屏幕分辨率的布局，但看起来设计师想要一个固定的中心元素，可能是960px。
• 在那个容器中，有两个标题。您可以使用border-radius CSS属性来制作边框，但是对于某些图标，您可能需要一些background图像。
• 添加示例文本，目前尚未设置样式。
• 添加正面图像。您可以在Photoshop中裁剪它。