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
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
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
Open the graphic inside Photoshop (or Illustrator) that you’d like
Select and copy the graphic, as shown in Figure 1-1.
Figure 1-1: Select and copy the graphic you want to optimize.
Switch over to Dreamweaver CS3 and open up the web page that you’d
like to add the optimized graphic to.
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.
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.)
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.
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
- 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.
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:
Sue Jenkins is a web and graphic designer, artist, writer,
and illustrator. When not designing, she teaches Dreamweaver, Illustrator,
and Photoshop classes at Noble Desktop in New York City, and offers private
training and web consulting to companies across the USA.
Her first book, Dreamweaver
8 All in One Desk Reference For Dummies, is a must-have reference
book for any Dreamweaver user. Her second book, Web
Design: The L Line, The Express Line to Learning, is a rigorous Web
Design classroom-in-a-book that includes pre-assessment questions, tutorials,
glossaries, and test questions, as well as several online tools such as test
banks, additional tutorials, and question and answer sessions.
teaching tool is a Dreamweaver DVD training video
for Designers, available through ClassOnDemand.net.
If your company needs assistance with web or graphic design, see
page for more information, or go directly to her website
learn more about her design services. http://www.luckychair.com.