back

Connecting the dots with Adobe
Creative Suite 3 Web Premium

by Greg Rewis

Within minutes of the announcement of Adobe's acquisition of Macromedia, millions of Dreamweaver® and Flash® users began to fantasize about what this could mean for their favorite products. After all, the majority of them already used both Macromedia and Adobe products — or at least one Adobe product: Adobe® Photoshop®.

Now the wait is over. The product teams have been busily coding away for the last 16 months or so, and with Adobe Creative Suite® 3 Web Premium, the long-awaited integration is upon us. In this article, you'll find out what this means for real-world web production.

Building smarter comps

Let's start where most websites begin — in a bar, restaurant, or café, someone scribbles a site map or sketches a potential layout on a napkin. From there, the concept makes its way into Adobe Photoshop where a designer puts together the pixel-based vision, one layer at a time. Before long, he or she has shuffled the pixels into place to form the first page.

Then, additional pages are produced by creating new layer groups while turning off others. During a recent visit to a customer, we observed one designer working on a comp in Photoshop that contained more than 150 layers — 90% of which were toggled off at any given moment. To show the client, she had to tediously export a JPEG, turn layer groups on and off, re-export, turn layer groups on and off, re-export, and so on.

With Adobe Fireworks® CS3, this process can now be greatly streamlined. Instead of having to work with a single Photoshop file consisting of an unwieldy number of layer groups, you can begin to build Photoshop comps logically: one PSD equals one web page. Then, using the new Pages panel in Fireworks CS3, you can import the individual PSD files as actual pages. Fireworks CS3 now understands the native PSD file format and can maintain the appearance of the layers and layer groups, even to the point of editing layer effects and styles. After importing the PSD files as pages, layers and layer groups can be shared across multiple pages. Imagine only having to create a navigation bar once and then being able to distribute it across numerous comps. Change any element on a shared layer, and it updates on all the pages. Finally, by quickly adding hotspots to proposed navigational elements, Fireworks can export the page comps to the web with one click. Not only can clients now see the proposed layouts, but they can interact with them as well.

Get Adobe Flash Player

Click here for more information.

Putting it all together

From there, you'll need to use Adobe Dreamweaver CS3 to put it all together as a standards-based web design. This obviously also means that you're going to need to get the graphics out of the Photoshop or Fireworks files and optimize them for the web. Here is where it really gets interesting if you've been using Dreamweaver for any length of time.

Let's say that you need a banner ad or another visual element that has been created in Photoshop on an existing HTML page. For years, you've been looking at filenames in the Files panel, trying to remember if the client liked logo_1.gif or logo_1_new.gif. Of course, there is also the Assets panel, but most designers don't use it because the image preview area is generally too small for most graphics. But now, you can choose File > Browse in Bridge to examine your graphic assets in a speedy visual file browser — you can even filter files by name, size, type, rating, and so forth to find the exact file you need. Once you've located the PSD file, simply drag and drop the file from Bridge onto the Dreamweaver page. Dreamweaver automatically launches its built-in graphics optimization engine. In the resulting dialog box, you can select the file type and amount of compression and even compare settings. Once you're satisfied, you can create the file in a user-defined location and place it on the page with a single click.

But no matter how many times the client approved the graphic, there will always be changes. Have you ever forgotten which original PSD file you used for a graphic? Well now you don't have to remember because Dreamweaver does it for you. Select the banner ad image that Dreamweaver created on the HTML page, and you can see a Photoshop icon in the Properties Inspector. Click the icon and Photoshop automatically opens the original PSD. It's important to note that if the image on the page is part of a larger PSD, then you need to manually select the region you want to update. You can now make edits in Photoshop. And when you are finished, simply copy the graphic and paste it onto the HTML page — there's no need to re-optimize because Dreamweaver uses the same settings it used for the previous version of the graphic.

Another important note: If the content you are copying and pasting is spread over multiple layers or layer groups, you need to make a marquee selection and choose Select All from the Layers panel. Choose Edit > Copy Merged. Now you can paste the updated graphic into Dreamweaver.

Photoshop and Illustrator integration with Flash

When surveyed, Flash users indicated that Photoshop is the other application they use the most, followed by Adobe Illustrator®. Therefore, tighter integration between these applications and Flash was essential for Creative Suite 3. As with Dreamweaver, importing a PSD file into Flash was not only nearly impossible but also involved multiple exports as JPEG or PNG files, depending on the graphic.

With Adobe Flash CS3 Professional, choose File > Import to Stage and select either a Photoshop or Illustrator document to import. In the resulting import dialog box, Flash now displays not only the layer and layer group list, but also the individual elements of each layer group. Select a graphic element, and on the right side of the dialog box, you can choose to import the graphic as a flattened element, a bitmap with editable layer styles and effects, or an editable vector graphic.

Text layers can be imported either as flattened bitmaps (although I'm not sure why you'd want to do that) or as editable text. Finally, a huge portion of a Flash designer's workflow is spent grouping elements as movie clips. In Flash CS3, you can select an element or layer group in the dialog box and create a movie clip from it, complete with a user-defined name.

To save even more time, you can create a symbol in Illustrator CS3 and select it on the page. Then in the information bar, you can assign an instance name for the element that Flash can use.

Conclusion

All these improvements and so many more make Creative Suite 3 Web Premium a must-have upgrade for professional web designers or developers. Here are a few resources where you can find demos, drill-downs, and more in-depth information about Creative Suite 3 and the products that mean the most to you:


Greg Rewis is the worldwide senior evangelist for web tools for Adobe and spends over 200 days a year on the road, talking with customers, giving product demonstrations at trade shows and seminars, speaking at industry conferences, and leading specialized advanced training sessions featuring Adobe's web tools product line.