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, and Fireworks, about their new CSS Designer Starter Kit for Photoshop. In describing the $19.99 training product, the company writes:
- Designed to show Photoshop users how to create graphic comps with CSS in mind
- Basics of CSS covered
- Specific instructions for converting a graphic comp into a Dreamweaver CSS layout
- Interactive, self-paced training
- 2 professionally designed comps included in PSD format: one to follow along with step-by-step and another for practice.
If that sounds appealing, check out the feature tour on the product page.
Elsewhere, PSDTUTS lists a set of 30 Brilliantly Flexible Templates & WordPress Themes. Each one goes for $15 or so. Meanwhile, PSDtoWordPress will have a real person do just what it says, for a fee. [Via] Adobe Blogs use Movable Type, so I can’t evaluate either offering, but I certainly see the appeal: I found skinning this blog fairly painful.
For “effortless conversion of your Photoshop designs into standards-compliant, CSS-rich webpages,” check out MediaLab’s SiteGrinder 2. The plug-in runs entirely within Photoshop and promises to require no hand coding. Check out the product’s feature tour for more info.
If you know of other good tips or resources in this department, please feel free to share them.
Update: How I could have failed to mention Fireworks, I don’t know. FW offers excellent PSD import, and in CS4 its CSS-generating chops are better than ever. See John Wylie’s notes on Exporting CSS and images in Fireworks CS4 for more details. [Via Kevin Stohlmeyer]