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

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

on

  • 10,158 views

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

Statistics

Views

Total Views
10,158
Views on SlideShare
10,148
Embed Views
10

Actions

Likes
7
Downloads
163
Comments
4

6 Embeds 10

https://twitter.com 3
https://si0.twimg.com 2
https://abs.twimg.com 2
http://us-w1.rockmelt.com 1
http://colegioyaruquicomputacion.wikispaces.com 1
http://www.mefeedia.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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 !
    Are you sure you want to
    Your message goes here
    Processing…
  • You can convert it online as well as using tools available on the internet like- psd2htmlconverter.com/en
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 it down into smaller pieces and seewhich of those can be reproduced with CSS propertiesor which can’t.
  • 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.
  • WriteGetting to work
  • 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.
  • 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:_________________________________________the header social icons aren’t aligned.__________________________________________________________________________________
  • 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.
  • Get this step-by-step guide.It’s available at:artmov.com/ebooks/how-to-convert-psd-to-html-cssartmov.com