
You may be used to Photoshop’s Save for Web and Devices command, which lets you export a Photoshop file in a Web-ready format. To follow along with the tutorials, download the sample files:Īfter you unzip the files you’ll have a folder named photoshop_site, which contains the files for this tutorial. In this article, I’ll demonstrate both methods of getting Web-ready graphics from Photoshop. In this way, you can make sure that the Web version of an image is up-to-date with its Photoshop parent.

When you insert a PSD file, Dreamweaver not only helps you create a Web-ready version of the Photoshop image, but also notices when the original Photoshop file is changed and lets you re-import an updated version of the image to your site. The second method, new to Dreamweaver CS4, adds support of Photoshop Smart Objects, which gives you a quick and easy way to update Web images to match changes made to a Photoshop file. When you paste the item, Dreamweaver lets you choose optimization settings (such as whether the file should be saved as a GIF, JPEG or PNG file), provide a name for the web-ready image file, and save that file into your site. The first method - copying an image, layer, or selected slice in Photoshop and pasting into a Dreamweaver page - debuted in Dreamweaver CS3. Fortunately, when you move to Photoshop and Dreamweaver CS4, your job is a lot easier, thanks to a built-in workflow between Photoshop and Dreamweaver.ĭreamweaver CS4 supports two methods for adding Photoshop files to a Web page. Whether you need to create a logo, a banner, or a set of navigation buttons, the task of making web-ready image files takes time. As a Web designer, odds are pretty good that you spend a fair amount of time preparing graphics for your Web pages.
