-2

I am learning Photoshop, does Photoshop generates HTML and CSS files, I am a web designer and I am figuring out to convert the .PSD file to Html Css.

  • 5
    Hi Chris, welcome to the site. When I tackle a problem, it always helps to research and try and absorb possible solutions (even if I don't understand them!). Can you share with us what you might have found when searching for a solution to this? – JohnB Aug 2 '14 at 2:39
4

Once you have the design of your website, you can use the sizes of the elements in photoshop to determine the sizes of the elements in CSS.

However you should really write your own code, and not use a HTML/CSS generator to make the website for you.

You could always look at http://www.w3schools.com/ and http://www.codecademy.com/ for help on coding, as once you get the hang of it, you will have a lot more freedom into how you make the websites.

However, if you really want to do this automatically, check out www.psdtoweb.de, it converts PSD to HTML and CSS quite well, but you will probably have to do some tweaking yourself

  • 2
    I suggest you take a look at w3fools before recommending w3schools again. – Dom Aug 2 '14 at 17:55
  • I know how to write Html, Css but let me rephrase my question, how would a web designer convert a PSD file designed by a graphic designer using photoshop? – Chris Einar San Agustin Aug 3 '14 at 4:57
  • just use www.psdtoweb.de – Sam Aug 3 '14 at 12:42
2

I would not recommend that. You will most likely end up with poorly structured HTML, bad inefficient CSS styles.

A good idea though is auto generating the CSS required. CSS hat ($35) & CSS3ps (Free) will give you all the styles need to recreate an element in photoshop. you will still need to write the html though.

  • 1
    They just recently released Png hat, which is also mentioned at the top of Css hat website. Png hat is basically the old Css hat and Enigma64 combined into single plugin. – Joonas Aug 2 '14 at 0:37
0

Chris,

Before you proceed with converting PSD to HTML, you might want to validate Photoshop file to make sure it's properly set up. Try using https://www.oss-usa.com/web-preflight?promo=web-preflight to check for correct font usage, font properties, device-specific size and file organization.

  • Hi Max! Could you olease give some disclosure about what kind of service this is, and whether you are affiliated to it? You post attracted a spam flag, and I'd like you to clarify to erase all doubts. Thanks! – Vincent Jun 8 '16 at 10:06
  • Hi Vincent, Web Preflight is a free service and we are very much affiliated with it, as we build it as our own internal production tool and later made it available to our partners and general public. Not sure how this qualifies as a spam as we build this tool specifically to address production issues we ran into ourselves when converting PSD to HTML, the title of this post. – Max Tokman Jun 9 '16 at 11:54
  • We are rather wary of people promoting their own stuff, even if it's a fitting answer to a question. To prevent astroturfing, we require you to mention that you are affiliated with the product you mention. As per the help center: you must disclose your affiliation in your answers.. Could you please edit your answer to include that? Thanks for understanding! – Vincent Jun 9 '16 at 12:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.