{"id":15811,"date":"2009-04-27T08:55:51","date_gmt":"2009-04-27T08:55:51","guid":{"rendered":"http:\/\/blogs.adobe.com\/jnackdev\/2009\/04\/best-practices-psd-to-css.html"},"modified":"2009-04-27T08:55:51","modified_gmt":"2009-04-27T08:55:51","slug":"best_practices_psd_to_css","status":"publish","type":"post","link":"https:\/\/jnack.com\/blog\/2009\/04\/27\/best_practices_psd_to_css\/","title":{"rendered":"Best practices, PSD to CSS?"},"content":{"rendered":"<p>What exactly is the best way to construct a Web page comp in Photoshop, then convert it to a clean, CSS-based HTML layout?  To many designers the process remains a black art.<\/p>\n<p>At Photoshop World I got to chat with the guys from <a href=\"http:\/\/www.webassist.com\/\">WebAssist<\/a>, a developer with a distinguished track record of extending Dreamweaver, Flash, and Fireworks, about their new <a href=\"http:\/\/www.webassist.com\/training\/css-designer-for-photoshop\/\">CSS Designer Starter Kit for Photoshop<\/a>.  In describing the $19.99 training product, the company writes:<\/p>\n<p><i><\/p>\n<blockquote>\n<ul>\n<li>Designed to show Photoshop users how to create graphic comps with CSS in mind<\/li>\n<li>Basics of CSS covered<\/li>\n<li>Specific instructions for converting a graphic comp into a Dreamweaver CSS layout<\/li>\n<li>Interactive, self-paced training<\/li>\n<li>2 professionally designed comps included in PSD format: one to follow along with step-by-step and another for practice.<\/li>\n<\/ul>\n<\/blockquote>\n<p><\/i><\/p>\n<p>If that sounds appealing, check out the feature tour on the product page.<\/p>\n<p>Elsewhere, PSDTUTS lists a set of <a href=\"http:\/\/psd.tutsplus.com\/articles\/web\/30-brilliantly-flexible-templates-wp-themes-via-themeforest\/\">30 Brilliantly Flexible Templates &amp; WordPress Themes<\/a>.  Each one goes for $15 or so.  Meanwhile, <a href=\"http:\/\/www.psdtowp.com\/\">PSDtoWordPress<\/a> will have a real person do just what it says, for a fee. [<a href=\"http:\/\/blogs.adobe.com\/jd\/\">Via<\/a>]  Adobe Blogs use Movable Type, so I can&#8217;t evaluate either offering, but I certainly see the appeal: I found skinning this blog fairly painful.<\/p>\n<p>For &#8220;effortless conversion of your Photoshop designs into standards-compliant, CSS-rich webpages,&#8221; check out MediaLab&#8217;s <a href=\"http:\/\/www.medialab.com\/sitegrinder\/\">SiteGrinder 2<\/a>.  The plug-in runs entirely within Photoshop and promises to require no hand coding.  Check out the product&#8217;s <a href=\"http:\/\/www.medialab.com\/sitegrinder\/screenshots.php\">feature tour<\/a> for more info.<\/p>\n<p>If you know of other good tips or resources in this department, please feel free to share them.<\/p>\n<p>Update: How I could have failed to mention Fireworks, I don&#8217;t know.  FW offers excellent PSD import, and in CS4 its CSS-generating chops are better than ever.  See John Wylie&#8217;s notes on <a href=\"http:\/\/www.adobe.com\/devnet\/fireworks\/articles\/export_css_images.html\">Exporting CSS and images in Fireworks CS4<\/a> for more details. [Via Kevin Stohlmeyer]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What exactly is the best way to construct a Web page comp in Photoshop, then convert it to a clean, CSS-based HTML layout? To many designers the process remains a black art. At Photoshop World I got to chat with the guys from WebAssist, a developer with a distinguished track record of extending Dreamweaver, Flash, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/15811"}],"collection":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/comments?post=15811"}],"version-history":[{"count":0,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/posts\/15811\/revisions"}],"wp:attachment":[{"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/media?parent=15811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/categories?post=15811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jnack.com\/blog\/wp-json\/wp\/v2\/tags?post=15811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}