Learn how to transform a design made in Photoshop into functional HTML/CSS. More: http://artmov.com/ebooks/how-to-convert-psd-to-html-css

1. how to convert
PSD to HTML/CSS
The definitive guide for converting
Adobe® Photoshop® designs into HTML/CSS.

2. EASY 3 STEPS
Analyze
Write
Check

3. Analyze
Analyzing the design before getting to work

4. Converting is like a lego game that has
been already built by a kid.
You need to break it into pieces.
Take any design, break it down into smaller pieces and see
which of those can be reproduced with CSS properties
or which can’t.

5. The buttons have a solid border that can be
done with CSS, so you can remove it.
The shadows can be entirely recreated with CSS3,
too, so remove them as well.

6. Write
Getting to work

7. Don’t repeat yourself.
.fl { fl (floatleft)
float:left; Floats elements on the left,
} regardless of type.
.fr { fr (floatright)
float:right; Floats elements on the right,
} regardless of type.
.cl { cl (clearing)
clear:both; Clears any above elements, both
} on the left and on the right.

8. Don’t. Repeat. Yourself.
#logo h3.incl a {
height:51px;
width:182px;
}
Save & refresh for results.

9. Use the Photoshop’s Marquee Tool
to get the width, height.

10. Check for results. Regularly.

11. Check
Verify your results for maximum compatibility

12. Hunt the bugs!
Firefox 12 (12.0)
List below which parts don’t match:
_________________________________________
the header social icons aren’t aligned.
_________________________________________
_________________________________________

13. Be patient.
Internet Explorer 7
(besides IE8 bugs)
List below which parts don’t match:
_________________________________________
the social icons are misplaced;
_________________________________________
the header bar adds a bottom space;
_________________________________________
the p.category is being cut;
_________________________________________
the custom buttons are being cut also;
_________________________________________
the gray/white split isn’t displayed;
_________________________________________
the footer doesn’t have the bottom space;
_________________________________________
the #blog icons aren’t being displayed.

14. Get this step-by-step guide.
It’s available at:
artmov.com/ebooks/how-to-convert-psd-to-html-css
artmov.com