Photoshop and Dreamweaver CS3: Making Optimized Graphics with the Paste Command

All Hail Adobe for CS3!

The lovable folks at Adobe have outdone themselves again with all the enhancements they’ve made to the CS suite with the release of CS3. Across the board, I am happy to report that nearly all of the new features are super easy to learn. In this article I will be focusing on the integration between Photoshop and Dreamweaver that now allows users to create optimized graphics on the fly using Photoshop’s copy command and Dreamweaver CS3’s paste command. Truth be told, this trick also works when copying graphics in Illustrator!

Optimizing Graphics for the Web

Until now, when a web designer wanted to create an optimized GIF, JPEG, or PNG graphic for a web site, HTML email, or other on-screen project, she had to use an optimization tool such as the Photoshop or Illustrator “Save for Web” (now called “Save for Web & Devices” in CS3) command under the File menu, or optimize her graphics with one of the popular stand-alone graphics optimization programs such as ImageReady or Fireworks. Once optimized, these graphics could be taken into Dreamweaver or another web design application and added to a web page as needed.

With the release of Adobe CS3 there’s a new tool in town and it’s taken the form of the new Image Preview dialog box in Dreamweaver CS3. While it’s true that the older optimization tools still offer more detailed control over how the output graphics are optimized—including such things as creating complex animated GIFs and rollover buttons complete with HTML and JavaScript—after a couple of test drives, I’m convinced you’ll find working with the new Image Preview dialog box will be a valuable addition to your optimization tool belt.

Follow these steps to use Dreamweaver CS3’s new Image Preview optimization tool:

1. Open the graphic inside Photoshop (or Illustrator) that you’d like to optimize.

2. Select and copy the graphic, as shown in Figure 1-1.
   
   
   Figure 1-1: Select and copy the graphic you want to optimize.

3. Switch over to Dreamweaver CS3 and open up the web page that you’d like to add the optimized graphic to.

4. Place your cursor in the location inside the web page where you’d like the optimized graphic to appear and select Edit > Paste. This will launch the new Image Preview dialog box.

5. Choose your image optimization preferences inside the Image Preview dialog box and click OK. (We’ll explore these options in a little more detail in the next section, entitled How Image Preview Works.)

6. After clicking the OK button, the Save Web Image dialog box appears. Browse to and select the location you’d like to save the newly optimized image into, as shown in the example below (see Figure 1-2), such as the images folder inside a managed Dreamweaver site, and click the Save button.
   
   
   Figure 1-2: Use the Save Web Image dialog box to select the location you’d like to save the optimized image into.

7. Next, the Image Description (Alt Text) dialog box seen in Figure 1-3 will open so you can type in a few words or a short phrase to describe the image. This description will be added inside the image tag as an alt text attribute to assist site visitors using devices other than a web browser to better experience your site, as in this example
   
   <img src="images/myimage.jpg" alt="The Rocky Mountains">
   
   
   Figure 1-3: Enter an image description (Alt text) in the Image Description dialog box.

8. That’s it! Your new image—optimized courtesy of Dreamweaver CS3—should now be inserted onto your web page.

How Image Preview Works

Let’s take a look at the new Image Preview dialog box in more detail. When you first open the dialog box, you’ll notice that it has three tabs at the top, Options, File, and Animation, as shown here in Figure 1-4.

Figure 1-4: Dreamweaver CS3’s new Image Preview dialog box.

Under the Options menu is where you’ll select the file format of the output graphic (GIF, JPEG, PNG). When choosing the options, like the Photoshop Save for Web & Devices dialog box and ImageReady Save for Web dialog boxes, you can view the optimization window as one up, two up, or four up by clicking any of the buttons at the bottom of the dialog box. Figure 1-5 shows how the dialog box changes when you select the “4 preview windows” option.

Figure 1-5: View four image optimization settings before selecting the best one by clicking the 4 preview windows option at the bottom of the dialog box.

To modify one of the four windows, click to select the pane to be modified and adjust the optimization settings on the left side of the dialog box. Select from GIF, Animated, JPEG, PNG 8, PNG 24, or PNG 32. The options for each file format appear below the Format dropdown menu. For instance, when you select the GIF format, optimization settings include Palette, Loss, Number of Colors, Dither, Transparency, and Matte color.

The next tab in the dialog box is for specifying File settings. Here you can set the scale, width, and height of the image being optimized, as well as indicate the export area of the selected graphic should you only want to save a portion of the copied graphic rather than the entire selection. You could, for instance, set a crop area in the Export area part of the dialog box, and then drag the cropped area around in the preview window side of the dialog box until it’s exactly where you want it to be for more precise cropping. For best optimization results, however, my suggestion would be to not use this tab to alter the integrity of the copied image. Instead, only use this tool to save graphics at actual size.

The final tab, Animation, will only become active if you choose Animated GIF as the Format. When you do that, the Animation tab at the top becomes active enabling you to set the run time of each frame in the animation.

When you are finished playing around with the different options and are ready to select one for optimization, remember to click on that square before you click the OK button to save the graphic and follow steps 6-8 above to complete the process of creating an optimized graphic inside Dreamweaver CS3.

The Bottom Line

For those new to web design, I think this new optimization tool will work out swimmingly. For myself, as a professional web designer, would I use this tool now exclusively in place of my formerly preferred optimization tools? Probably not as I’m partial to the more sophisticated settings that using ImageReady and Photoshop’s Save for Web & Devices dialog box allow. But if I were doing some round-trip editing of a particular image or needed a graphic optimized quickly, yes, I would definitely use this new tool occasionally to save a little time. What I love most about it is that it gives me more options as a designer, and that means more flexibility and better control over my design environment.

So go try it right now to see what you think! My guess is that you’ll love it and be happy to add it to your bag of tricks.

Dreamweaver CS3 users can learn more about what’s new in CS3 by taking the CS3 Quick Tour accessible through Dreamweaver’s Start page or by jumping directly to the “What’s New in Dreamweaver CS3” help file, accessible through the Help menu.

To get the full story on Adobe CS3, go to:
http://www.adobe.com/aboutadobe/pressroom/pressmaterials/pdfs/cs3_dreamweaver_whatsnew.pdf