|
******************************
*** DesignGeek ***
******************************
Tips and techniques for the digital designer
In this issue:
Web Design Tricks in the Creative Suite
-- Flash from Illustrator
-- Vector Animations from Photoshop/ImageReady
-- Capture Web Sites as PDFs
-- Find Out More
Issue 41, 7/27/05
Written by Anne-Marie "HerGeekness" Concepcion
... for her clients, colleagues, random contacts and interested subscribers
(c) 2005 Seneca Design & Training, Inc.
==========================
Web Design Tricks in the Creative Suite
==========================
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:
http://www.thecreativesuiteconference.com
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.
|| top ||
-----
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.
|| top ||
-----
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.
|| top ||
-----
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!
|| top ||
-----
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.)
http://www.senecadesign.com/handouts/pixelperfect.pdf
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)!
http://www.thecreativesuiteconference.com
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!
|| top ||
*^*^*^*^*^*^*^*^*^*^*^*^*^*^**^*^*^*^*^*^*^*^*^*^*^*^*^*^*
ANOTHER TRAININGGEEK AT SENECA
Sherri Austin (sherri@senecadesign.com) is Seneca's newly-minted Training Coordinator, helping to coordinate my own schedule and those of my training freelancers (the Associate Geeks). Sherri's been with me since February, starting out as a short-term temp until I realized how great she was and refused to let her leave. If you've called here recently you've undoubtedly had the pleasure of speaking with this warm, witty, and friendly person.
Do you like what you read in DesignGeek? Find anything useful? Bring me or any of my hand-picked Associate Geeks in for a session or two of hands-on training for your workgroup; here in Chicago or any other city near an airport, and you can have this level of expertise all to yourself. All training comes with three years of 24/7 follow-up support for each student by phone or e-mail.
To learn more, or hear what other clients have to say, contact us or fill out the no-obligation "Request a Training Quote' form on Seneca's site:
http://www.senecadesign.com/training/request.html
Recent training clients in Chicago and throughout the U.S. include Edwards & Kelcey (InDesign, Photoshop, Illustrator); Quill Corporation (InDesign); GE Consumer Finance (QuarkXPress); Setting Pace (InDesign and InCopy); Group Publishing (InCopy); American Legion Magazine (InCopy); ST Media Group (InDesign, Photoshop, Illustrator); Playboy Enterprises (InDesign) (no, we didn't hold class in the grotto -- I tried though); Loyola Press (InDesign, InCopy); Stralfors (Dreamweaver); and the Chicago Tribune (GoLive).
*^*^*^*^*^*^*^*^*^*^*^*^*^*^**^*^*^*^*^*^*^*^*^*^*^*^*^*^*
|| top ||
--------------------------------
DesignGeek is a free bimonthly publication written by Anne-Marie "HerGeekness" Concepcion, a cross-media designer and authorized Adobe and Quark training provider. She owns Seneca Design & Training, Inc. in Chicago, Illinois (http://www.senecadesign.com/).
To subscribe to DesignGeek or read archived issues, go to its home on Seneca's site:
http://www.senecadesign.com/designgeek/
To unsubscribe, follow the link at the bottom of this page.
Contact Seneca by phone at 312-946-1100 or e-mail at info@senecadesign.com
Copyright 2005 by Seneca Design & Training, Inc.
Please forward without cutting. Please contact Seneca for reprint permissions. We don't guarantee accuracy of articles. Company or product names mentioned in DesignGeek may be registered trademarks, we use the names in an editorial fashion with no intention of infringement.
--------------------------------
If you had received this by e-mail instead of reading it on my web site, your unsubscribe link would appear right here.
|
