Web Design Tricks in the Creative Suite

July 27, 2005 - 2:00am ||| 0 Comments | Add new

I just came back from the first-ever Creative Suite Conference, five straight days of non-stop information, tips and techniques about every program in the Adobe Creative Suite:

My head is about to explode from information overload. In a good way.

Of course, the fact that it was held in Las Vegas — Caesar's Palace, specifically — didn't help my synapses. Unlike most of the other speakers and attendees who were able to control themselves in a mature, professional manner, picture me getting off the plane with lucky 7's instead of eyeballs … I was like, "Vegas! Five days! Oh, mama!"

I hit the tables for a couple short visits every day — after lunch, during session breaks, on the way back from dinner — it was a novel experience having a full-blown casino just an escalator ride away from sessions on Version Cue and Photoshop Smart Objects.

By the morning of the fifth day I was $300 ahead (some sweet splits at the Blackjack table) but the final all-day session on AppleScript used up all but two of my brain cells. I shouldn't have taken that last escalator ride to loser-dom on Saturday night. I rendered unto Caesar the things that are Caesar's. Children, 3-Card Poker is a harsh mistress.

Uhhh, where was I. Oh, web design tips. Right.

"Pixel Perfect: Web Site Design and the Creative Suite" was the one seminar that I presented at the conference, a topic I pitched to help leaven the print-centric nature of most of the other sessions. I've noticed that other than GoLive, few designers do much web stuff with the Creative Suite beyond making GIFs or at most, prototyping web page designs in Photoshop to hand off to a programmer.

But there's a whole heck of a lot more web-related features buried in Acrobat, Illustrator, Photoshop, ImageReady and InDesign (okay, maybe not InDesign). Here are a few favorites… note these are based on CS2, but many exist in CS1 as well.

Flash from Illustrator
You don't need to know how to use Flash, nor even own it, to create slick .swf art for your web site complete with plug-in detection code. Just create your artwork in Illustrator, then go to File > Export and choose "Macromedia Flash (SWF)" from the Format drop-down menu.

The resulting Macromedia Flash (SWF) Options dialog box offers a ton of goodies, and the following tips are all found here.

To create a static piece of vector web art, choose Export As: AI file to SWF file. Since virtually everyone has the Flash plug-in already installed in their browser, they can see its fine, clean lines without problems.

Note that the "Create HTML Code" checkbox is enabled by default, so you'll get two files: the .swf file itself, and an .html file that contains the Flash plug-in detection code surrounding the reference to the .swf file, just in case someone doesn't have the plug-in. You could copy/paste this code into an existing web page if you want.

If you drew an animation key frame in each layer in the Illustrator file, you can make a Flash animation from that by choosing Export As: AI Layers (instead of AI File) to SWF File. Or if you *do* own Macromedia Flash, you could choose AI Layers to SWF Frames (instead of SWF File) and then edit the frames further in Flash.

New in Illy CS2, you can make a Flash animation out of an Illustrator blend without releasing the blend steps to individual layers first. Just turn on the Animate Blends checkbox, and choose either In Sequence or In Build.

This is actually really fun … use the Blend tool to create a blend from any shape to another, or even an instance of live text to another bit of live text. Zip over to Export as SWF, turn on the Animate Blends checkbox, and open the resulting HTML file in your browser. Woo-hoo! And it's so easy!

One key missing ingredient in Illustrator is the ability to set how long a selected frame (layer) should persist in a Flash animation. (Not surprising, since Flash really doesn't use this method to create animations.)

At the conference, Illustrator guru/pre-press expert Mordy Golding did an entire session on Flash and SVG in the Creative Suite. He showed how you could create multiple duplicates of an Illustrator layer to "force the frame to stay longer" in the final animation, which worked okay but required a bit of experimentation. Or, as I said above, you could just export the layers to Flash frames and modify their timing in Flash.

Vector Animations from Photoshop/ImageReady
ImageReady CS2 can also save animations as Flash files as well as the usual GIF format. It's easier to use ImageReady for this since its Animation palette lets you set the duration of individual frames, and it offers tweening (automatic creation of "onion skin"-type intermediate frames between key frames) to create smooth animations.

Photoshop CS2 also sports an Animation palette with the same features, but it can't save or export the animation as a Flash file. ImageReady can export it to SWF but doesn't have all the vector tools that Photoshop has — not even a Pen tool.

Solution: Create the vector animation in Photoshop using its vector tools, layers, effects and Animation palette features including tweening and timing options.

Then, click the "Open in ImageReady" button at the bottom of the Tools palette. The same artwork opens in ImageReady, vector shape layers intact. Choose File > Export > Macromedia Flash SWF, and there ya go. Best of three worlds.

Capture Web Sites as PDFs
Recent vintages of Acrobat Pro offer the ability to convert live web sites to multiple-page PDFs, but hardly any web designer I've worked with knows about it. In my studio, we've been using the feature for years to archive iterations of client's sites, and to have a convenient "web site on a CD" to carry around for reference.

You don't need to know a web server password or anything; if you can see it in your browser, you can capture it in a PDF. During the seminar I captured the first two levels of Apple's site and a few pages of eBay as well … cool!

With each new version of Acrobat, the feature gets better and better. It captures drop-down menus in forms, translates "includes" into page content, understands CSS, keeps links intact and can even grab GIF animations, Flash interfaces and Quicktime movies.

When you grab more than one page of a site, Acrobat creates structured Bookmarks linking to each page in the site (or you could use the links in the pages themselves). Results are more spotty with database-driven sites but it'll always get something, at least the template.

To try it out in Acrobat Pro 7, go to File > Create PDF > From Web Page. Earlier versions have the same feature but it may be called something else or in a different menu. Check the online help if you can't find it.

In the Create PDF from Web Page dialog box, enter the URL of the site you want to grab in the field provided. If you just want that site's home page (or that page URL you entered), leave the default number of Levels it will grab set to the default "1." If you want that page plus all other pages that page links to (but not the pages *those* pages link to), change the number of levels to "2." And so on.

Go ahead and tweak other settings in the dialog box if you like, but I've found that the defaults work just fine. Click the Create button and watch the magic happen!

Find Out More
During my research, I came up with scores of neat web design features buried in the Creative Suite programs, but only had time to demo three or four during the seminar.

The one that got the best reaction (eyes bugging out and jaws dropping … like heroin to a presenter) was showing how to import a text file *into* a Photoshop image and have it automatically spit out hundreds of different JPEGs or GIFs using that image as a template and the text file contents to swap out layers or replace live text layers.

It's all done via the Image > Variables dialog box. You don't even need a text file, you can enter each "record" (image variation info) individually by hand within Photoshop or ImageReady.

When I stepped through the technique during the seminar, I imported a text file into a simple layered image with a live text layer, chose File > Export > Data Sets as Files, and in a second opened up the resulting web page with 60 GIFs spelling out the lyrics to "Mack the Knife" … remember, we were at Caesar's Palace, baby! ;-)

To learn about all the web features in the Creative Suite (other than GoLive of course, which is a given), feel free to download my seminar handout. It's more of a compendium than a tutorial, but at least it will give you an idea of the breadth and depth of the web features in the Suite. (I'll be revamping it with fresh material and more detailed step-by-steps for the next time I do the seminar.)

Or, start making plans now for the next Creative Suite conference, coming to London (September 2005), Sydney (November 2005), and … perhaps, fingers crossed … my own hometown of Chicago (2006)!

Listen, even if I wasn't a speaker, I have to tell you this is really a stupendous conference for anyone who uses Adobe software. Since I only had to do one seminar in Vegas I was able to attend most of the others. Like the rest of the attendees (I peeked at the evaluations) I was blown away by the rich and useful content in every dang one of the sessions. You have to realize, it's an independent show (not sponsored by or affiliated with Adobe) so the speakers are free to say what *doesn't* work as well as what does. Real world kind of stuff by the top experts in the field — David Blatner, Deke McClelland, Ben Willmore, Sandee Cohen, Mordy Golding, and Russell Brown, to name a few.

And what about little ol' me? Well I won't be in Sydney, but in the London CS Conference, I'll be reprising the Pixel Perfect session, as well as doing an all-day pre-show workshop on GoLive CS2 Essentials and an all-day post-show workshop on Moving to an InDesign/InCopy Workflow. I hope to meet some of my subscribers from over the pond while I'm there!


Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.