how-to: convert psd to html/css by artmov
DESCRIPTION
Learn how to transform a design made in Photoshop into functional HTML/CSS. More: http://artmov.com/ebooks/how-to-convert-psd-to-html-cssTRANSCRIPT
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