The Hardest thing About the New Dreamweaver Extract Function…

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

Slashdot review

I was very pleased to see this review on Slashdot yesterday. Michael J. Ross did a great job finding the problems and explaining what the book is about. He even commented on some things that I found annoying, and I wrote the book! 🙂 But of course, my favorite part is the last paragraph:

“Despite the aforementioned blemishes, this book is definitely worth a look, because it is currently one of the most complete tutorials for learning how to use HTML5 for creating mobile apps and web sites.”

I have already addressed some of his concerns, such as getting the code samples and errata linked from the site navigation (oops!). And I’ll be making notes of the errors he found to correct for a future printing.