how to convertPSD to HTML/CSSThe definitive guide for convertingAdobe® Photoshop® designs into HTML/CSS.
EASY 3 STEPS               Analyze               Write               Check
AnalyzeAnalyzing the design before getting to work
Converting is like a lego game that hasbeen already built by a kid.You need to break it into pieces.Take any design, break...
The buttons have a solid border that can bedone with CSS, so you can remove it.The shadows can be entirely recreated with ...
WriteGetting to work
Don’t repeat yourself.                         .fl {           fl (floatleft)                         	float:left;    Floa...
Don’t. Repeat. Yourself.#logo h3.incl a {	height:51px;	width:182px;}Save & refresh for results.
Use the Photoshop’s Marquee Toolto get the width, height.
Check for results. Regularly.
CheckVerify your results for maximum compatibility
Hunt the bugs!                 Firefox 12 (12.0)List below which parts don’t match:_______________________________________...
Be patient.              Internet Explorer 7              (besides IE8 bugs)List below which parts don’t match:___________...
Get this step-by-step guide.It’s available at:artmov.com/ebooks/how-to-convert-psd-to-html-cssartmov.com
Upcoming SlideShare
Loading in...5
×

HOW-TO: Convert PSD to HTML/CSS by Artmov

9,609

Published on

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

4 Comments
7 Likes
Statistics
Notes
  • try visit http://psdtosite.net/service/psd-to-html/ and you can see quality job.I have use this company for some job and im satisfied with project.Let try !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can convert it online as well as using tools available on the internet like- psd2htmlconverter.com/en
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • SlicingArt.com makes responsive and pixel perfect conversions of your any design, Layed PSD are always preferred though.
    The rates are fixed to $22 per hour. And you also get a free estimation before starting with the project. SlicingArt.com is a fast growing site which turns your designs in to Fully Functional web design.

    They also do conversions for CMS like WordPress,Joomla, Magento (Webshops).
    OR, you can also choose to keep it HTML/CSS only with frameworks like Twitter Bootstrap.

    SlicingArt.com makes it pretty easy to get the job done by simple web-management interface.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi convert PSD to HTML this software tool is very useful to users and it is give results like this i got another one site you can visit this http://www.psdtohtmlteam.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,609
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
176
Comments
4
Likes
7
Embeds 0
No embeds

No notes for slide

HOW-TO: Convert PSD to HTML/CSS by Artmov

  1. 1. how to convertPSD to HTML/CSSThe definitive guide for convertingAdobe® Photoshop® designs into HTML/CSS.
  2. 2. EASY 3 STEPS Analyze Write Check
  3. 3. AnalyzeAnalyzing the design before getting to work
  4. 4. Converting is like a lego game that hasbeen already built by a kid.You need to break it into pieces.Take any design, break it down into smaller pieces and seewhich of those can be reproduced with CSS propertiesor which can’t.
  5. 5. The buttons have a solid border that can bedone with CSS, so you can remove it.The shadows can be entirely recreated with CSS3,too, so remove them as well.
  6. 6. WriteGetting to work
  7. 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. 8. Don’t. Repeat. Yourself.#logo h3.incl a { height:51px; width:182px;}Save & refresh for results.
  9. 9. Use the Photoshop’s Marquee Toolto get the width, height.
  10. 10. Check for results. Regularly.
  11. 11. CheckVerify your results for maximum compatibility
  12. 12. Hunt the bugs! Firefox 12 (12.0)List below which parts don’t match:_________________________________________the header social icons aren’t aligned.__________________________________________________________________________________
  13. 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. 14. Get this step-by-step guide.It’s available at:artmov.com/ebooks/how-to-convert-psd-to-html-cssartmov.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×