Dreamweaver CC: The Web Development Tool That Opens PSDs?

Originally published at: http://www.sitepoint.com/dreamweaver-2014-opens-psds/

Comp to code

Where is the biggest bottleneck in your web development process? The part where things tend to bog down?

Sure, it varies from project to project, but I suspect for most of us it’s the translation step from design to code — from PSD to HTML. In fact, a thriving HTML/CSS industry has grown up around servicing designers who work in PSD.

Many tools have tried to merge these two very different processes to create graphic design tools that output code. While their intentions have been noble, we all know that it’s difficult to serve two such different masters.

Adobe are taking a new approach to bridging that design/code gap. Dreamweaver CC 2014 is the first code editor (IDE) that lets you interact directly with your PSD comps.

Past applications have tried to auto-generate code by second-guessing your coding decisions — often less than successfully.

Instead, Dreamweaver is giving you direct access to the PSD comp, and allowing you to surgically extract any image, color and CSS value straight into your coding window.

Essentially, this means YOU are still the ‘gatekeeper’ for every line of code that gets written — a situation that would appeal to a lot of us — but the need to constantly switch between major applications reduces dramatically.

It’s an ambitious idea, right? Let’s have a look how it works in practice.

New Workspaces: Extract Panel and Dreamweaver

The first thing you’ll notice on launching Dreamweaver CC 2014 is the new Extract panel on the left side. Fold it out and you’ll see any PSD file that you’ve synced to Creative Cloud Assets automatically appear. You can also load any PSD by just dragging it in there.

The new Extract Panel in Dreamweaver

Select any PSD and you’ll notice Dreamweaver will take a few seconds to prepare it.

Sidenote: You’ll notice on the right that Dreamweaver also now offers SVG as a new file option. Perhaps we’re at a time where SVG is being thought of as ‘living code’ — like HTML and CSS — rather than just another image format? I hope so.

Interacting with PSDs in Dreamweaver

Once it’s loaded, your PSD will display in the Extract workspace, but most of the useful tools are hidden by default. At the top right there are two buttons — Styles and Layers.

Styles

The styles panel gives you a ‘top down’ inventory view of what is being used in your document — colors, fonts, and gradients.

Color, fonts, and gradient choices are collated in the Styles panel

With eyedroppers and various rounding errors, it’s not hard to end up with 2 or 3 slight variations of the same color. Clicking on any color swatch shows you all the places that that color is being used. This is the ideal place to clean up your color palette and perhaps rationalize your font list.

Continue reading this article on SitePoint

I thought brackets the text editor could do all of these things. what is the difference between what Adobe dreamweaver CC does and what Brackets does with PDSs?

1 Like

Brackets is more of a classic code editor – like Sublime Text – and doesn’t have the visual editing components that Dreamweaver has. I’ll actually be writing about Brackets in the next week or two, so I’ll likely talk about the differences in more detail then.

I suspect that a lot of the SitePoint audience would gravitate towards the more text-centric environment. That said, I recently used Dreamweaver when building an email newsletter, and it was absolutely ideal for working with the table layouts you inevitably use in email.