Your SlideShare is downloading. ×
HOW-TO: Convert PSD to HTML/CSS by Artmov
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

9,445
views

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

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,445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
172
Comments
4
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. how to convertPSD to HTML/CSSThe definitive guide for convertingAdobe® Photoshop® designs into HTML/CSS.
  • 2. EASY 3 STEPS Analyze Write Check
  • 3. AnalyzeAnalyzing the design before getting to work
  • 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. 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. WriteGetting 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 Toolto get the width, height.
  • 10. Check for results. Regularly.
  • 11. CheckVerify 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-cssartmov.com

×