There are numerous new features in the Dreamweaver beta, for more information on them all, go to the Dreamweaver beta page at Adobe Labs. Over the next several posts, I will share with you five of the biggest features that will help your workflow in creating web experiences with Dreamweaver. The first is a demonstration of Photoshop Smart Objects.
Using Photoshop, web designers can create assets for integration into web sites using Dreamweaver; however, if the asset is changed in Photoshop, the change wasn’t readily identified in Dreamweaver. Photoshop Smart Objects makes this workflow much more seamless.
First, the designer creates a Photoshop design:
In Dreamweaver, you add a new image to the web page in Design view, pointing to the Photoshop .psd file. The image is then displayed the page, it isn’t the .psd itself, but an optimized version (JPEG, GIF, or PNG) that can be customized in Dreamweaver:
If you notice, there is a small icon in the upper left hand corner of the image. This indicates it is a smart object. With smart objects, you can resize the image and it will re-render from the original Photoshop .psd based on the optimization settings in Dreamweaver.
You can go back to Photoshop and change the original .psd, changing colors, filters, text, or other attributes:
After the image is saved and switching back to Dreamweaver, you are notified of the change with a red smart object icon indicating that the image is out of sync with the source .psd:
By right-clicking on the image, you can re-sync with the original .psd asset which has been updated:
The rendered image in the web page is then updated to reflect the new design modified in Photoshop:
If the image was resized in Dreamweaver, it would respect these changes, rendering the updated image based on the size specified.
This is just one of the new features that is in the new Dreamweaver beta. Be sure to check out the beta by downloading it from Adobe Labs.
