HOW-TO: Convert PSD to HTML/CSS by Artmov
-
Upload
artmov -
Category
Self Improvement
-
view
10.044 -
download
1
description
Transcript of HOW-TO: Convert PSD to HTML/CSS by Artmov
![Page 1: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/1.jpg)
how to convert
PSD to HTML/CSS
The definitive guide for converting
Adobe® Photoshop® designs into HTML/CSS.
![Page 2: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/2.jpg)
Analyze
Write
Check
E A S Y 3 S T E P S
![Page 3: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/3.jpg)
AnalyzeAnalyzing the design before getting to work
![Page 4: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/4.jpg)
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.
![Page 5: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/5.jpg)
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.
![Page 6: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/6.jpg)
WriteGetting to work
![Page 7: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/7.jpg)
.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.
![Page 8: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/8.jpg)
#logo h3.incl a { height:51px; width:182px;}
Save & refresh for results.
Don’t. Repeat. Yourself.
![Page 9: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/9.jpg)
Use the Photoshop’s Marquee Tool
to get the width, height.
![Page 10: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/10.jpg)
Check for results. Regularly.
![Page 11: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/11.jpg)
CheckVerify your results for maximum compatibility
![Page 12: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/12.jpg)
List below which parts don’t match:___________________________________________________________________________________________________________________________
Firefox 12 (12.0)
the header social icons aren’t aligned.
Hunt the bugs!
![Page 13: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/13.jpg)
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.
![Page 14: HOW-TO: Convert PSD to HTML/CSS by Artmov](https://reader034.fdocuments.net/reader034/viewer/2022051322/53fc3ae58d7f72aa518b462c/html5/thumbnails/14.jpg)
Get this step-by-step guide.
It’s available at:artmov.com/ebooks/how-to-convert-psd-to-html-css
artmov.com