April 27, 2009

Best practices, PSD to CSS?

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]

8:55 AM | Permalink | Comments [17]

Monday illustration tips, tutorials

  • Scott Hansen has created a tutorial (with source files) demoing the techniques used to create a Dylan poster homage.
  • Heh–I had no idea that it’s possible to designate a “key object” in Illustrator & align objects to it. Check out Terry Hemphill’s quick tip to learn more.
  • The Chopping Block does symmetry with these Illustrator reflection templates. (Illustrator’s combo of live effects + the ability to target anything from individual paths to groups to layers is enormously powerful–and woefully underused. The Appearance panel in CS4 makes things much easier, but I find that many artists just won’t make the cognitive leaps necessary to harness this power.)
  • PSDTUTS shows how to create insectoid 3D text using Photoshop + Cinema 4D.
7:35 AM | Permalink | Comments [4]
Copyright © 2020 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)