The Hardest thing About the New Dreamweaver Extract Function…

Creative Cloud Extract

Dreamweaver CC 2014.1 offers a new feature that is pretty neat, especially if you are used to designing your web pages in Photoshop and then converting those comps to HTML and CSS. It’s called Extract and all you need is a PSD file to import into Dreamweaver and use the Dreamweaver extract function.

Dreamweaver Extract Function
Dreamweaver Extract Function

In the past, when you’d create a PSD comp of a website, you then had to manually write down the details like colors, fonts, sizes, and so on. Later on, Photoshop added an export function to let you export your files to Fireworks where you could get the CSS, colors, fonts, sizes and so on. Then there was an option to generate image comps or copy the CSS from your layers.

But the Dreamweaver Extract function is more than all that. You can now open the layered PSD file in the Extract feature in Dreamweaver and then capture the colors, fonts and gradients as CSS that you can import right into your Dreamweaver file.

Dreamweaver extract shows page details
Dreamweaver Extract shows page details like colors and fonts.

Note there are still some things missing, like rounded corners and box shadows, but it’s definitely a lot easier to import a PSD comp into Dreamweaver than ever before.

So What is Hard About the Extract Tool?

For me, the hardest thing about it is using the CSS it gives me and not continuing to tweak things. I will go in and change the CSS so that it’s formatted differently (read: I change the indents).

Assuming I can get over needing obsessive levels of control over how my CSS looks, I think I will enjoy using Dreamweaver Extract.

Dreamweaver extract shows layer details
Dreamweaver Extract shows layer details for each layer of the PSD

3 thoughts on “The Hardest thing About the New Dreamweaver Extract Function…

  1. Hey Jennifer,

    Glad you’re getting use out of the feature! If you hadn’t noticed, you can use code hinting in the code editor instead of copy and pasting the CSS from the Extract panel. Try this:

    1) Click on any PSD layer you want to get CSS from
    2) Open up your CSS and push Return in the code editor to invoke code hints
    3) At the top of the code hints, there will be a section of CSS that’s pulled from the PSD layer. Push Return/Enter to commit the code hint

    This will help in some of the formatting you described as you get CSS, and might speed up the time it takes for you to make tweaks. You’ll also get additional styles like rounded corners, shadows, etc. This might be a better route for those who obsess over prettifying their CSS 🙂 (myself included)

    Cheers,
    Sarah
    Product Manager, Adobe

  2. “Glad you’re getting use out of the feature! If you hadn’t noticed, you can use code hinting in the code editor instead of copy and pasting the CSS from the Extract panel”… I didnt even think about using code hinting for the css… So much easier than the cut/paste function and less chance of looking some part of the cut/paste code (happened before)

Leave a Reply

Your email address will not be published.