How would you approach this PSD to HTML? [closed]

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 years ago.

Improve this question

I have just started pract开发者_如何学Cicing converting PSD's to HTML/CSS. But sometimes you see PSD's and it just seems impossible to craft using html and css.

Like the one here :

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

Thanks alot

---

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:

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

---

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

---

Well, start with the basics:

• 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.