Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
A central content container. Unfortunately, images only describe the layout with one particular screen resolution, but it looks like the designer wanted a centered element with fixed with, probably 960px.
In that container, two headers. You can use the border-radius CSS property to make borders round, but you'll probably need some background images for some icons.
Add the example text, unstyled so far.
Add the front image. You can probably crop it in Photoshop.
发布评论
评论（3）
您处理此问题的方法与处理任何其他 PSD 到 HTML 的方法相同，将其在您的头脑中分成多个块并从顶部开始。
在这里，我做了一个非常粗略的示例来说明如何划分它：
https://i.sstatic.net/c2yp2 .jpg
The way you should approach this is the same as you would approach any other PSD to HTML, divide it in blocks in your head and start from the top.
Here I made a very rough example of how you could divide this:
https://i.sstatic.net/c2yp2.jpg
使用 Photoshop 中的网格线将图像划分为不同的部分，并从那里创建切片。完成后您甚至可以导出为 html，它也会创建所需的 css 样式。
您可以在这里找到解释如何操作的视频：
http://www.youtube.com/watch?v=DVfxe4pqvo8
Use grid lines in photoshop to divide your image in different sections and create slices from there. You can even export to html once you've done that and it will create the css styles required too.
You can find a video explaining how to it here:
http://www.youtube.com/watch?v=DVfxe4pqvo8
好吧，从基础开始：
border-radiusCSS 属性使边框变为圆形，但某些图标可能需要一些背景图像。Well, start with the basics:
border-radiusCSS property to make borders round, but you'll probably need somebackgroundimages for some icons.