New Dreamweaver Offers Great New Feature

Let me preface this post by saying:

1. I totally understand that using Dreamweaver as an IDE is laughable to many, but, the bottom line for me is that it’s functional, and has always offered a handful of nice features for straight HTML, CSS and PHP coding.
2. I also understand that a lot of designers have long since rejected the notion of designing in Photoshop, but I also know a huge number of designers that are still working that way.
3. Finally, I understand this post has nothing to do directly with WordPress or higher ed, but it can definitely effect your workflow in a positive manner.

With all of that out of the way, on to the post.

The newest version of Adobe Dreamweaver that’s available through Creative Cloud offers an awesome new feature. You can now open a PSD file inside of Dreamweaver, docked to the side of your coding window. Once the PSD file is open, you can select any element in the PSD, and start using its attributes directly in your code. This has already saved me quite a bit of time while working on a simple CSS file (what normally would have taken me about an hour took less than 15 minutes); I no longer have to switch back & forth between the Dreamweaver window and the Photoshop window, make sure I have the correct tool selected, grab the item I want to check, and then figure out how that translates into CSS. Instead, I click on the item within the sidebar of Dreamweaver, and the CSS properties of that element pop right up for me. I then have the option to copy all of the CSS for that element, or select individual CSS properties to copy. If the element contains text, I also have the option to copy the text to my clipboard (obviously not terribly useful in CSS, but helpful for HTML or sample content).

If I don’t want to copy all of the CSS, I can also use Dreamweaver’s auto-suggest feature. Where the auto-suggest feature used to simply fill in the property name for you in CSS, then potentially give you separate options to fill in the definition (for instance, if you started typing “font-s” in a CSS file, Dreamweaver would allow you to press Enter to automatically fill in “font-size:”; then, you’d have a separate set of options with essentially every reasonable pixel size that you could scroll through and click on if you so desired).

Now, though, if I’ve selected an element that uses 14px type within the PSD, when I start typing “font-s” in my CSS file, the first auto-suggestion is “font-size: 14px;”.

What’s really nice is that it also does a pretty good, clean job of creating CSS gradients for you. If you select an element that has a gradient background, you can copy the CSS and paste it into your CSS document quickly; with everything prefixed properly for browsers.

There is also an option to extract graphical assets from the PSD. If you click on an element that is its own graphic, you can click an icon to “Extract Asset”. Then, that element is extracted from the PSD, with the option to save it as JPG, PNG-8 or PNG-32. You can also choose to extract the element at 2x scale (for retina, etc. displays, if desired). It appears that the asset is stored in CC until you actually use it in one of your files. Then, Dreamweaver automatically downloads it and places it where you told it to. For instance, when working on a CSS file, you go to use the background-image property; you let auto-suggest fill in the information automatically, then Dreamweaver gives you the option to adjust the filename. Once you adjust the filename, Dreamweaver saves the asset to that location/filename automatically.

A few caveats:

1. It doesn’t open the PSD locally. Instead, within the sidebar panel, you choose a PSD to upload to your Creative Cloud files area. Dreamweaver then opens the PSD from there.
2. When copying various sizes, there doesn’t seem to be any way to have it use/add rems or ems (for instance, it will only insert “font-size: 14px;”, but won’t give you the option for “font-size: 0.875rem;” – assuming a base font-size of 16px – or anything like that).