how to convert

PSD to HTML/CSS

The definitive guide for converting

Adobe® Photoshop® designs into HTML/CSS.

Analyze

Write

Check

E A S Y 3 S T E P S

AnalyzeAnalyzing the design before getting to work

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.

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.

WriteGetting to work

.fl {

float:left;

}

.fr {

float:right;

}

.cl {

clear:both;

}

fl (floatleft)

Floats elements on the left,

regardless of type.

fr (floatright)

Floats elements on the right,

regardless of type.

cl (clearing)

Clears any above elements, both

on the left and on the right.

Don’t repeat yourself.

#logo h3.incl a { height:51px; width:182px;}

Save & refresh for results.

Don’t. Repeat. Yourself.

Use the Photoshop’s Marquee Tool

to get the width, height.

Check for results. Regularly.

CheckVerify your results for maximum compatibility

List below which parts don’t match:___________________________________________________________________________________________________________________________

Firefox 12 (12.0)

the header social icons aren’t aligned.

Hunt the 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.

Internet Explorer 7(besides IE8 bugs)

Be patient.

Get this step-by-step guide.

It’s available at:artmov.com/ebooks/how-to-convert-psd-to-html-css

artmov.com