Chicago InDesign User Group

Meeting Notes Archive

May 6, 2006

Coming attractions for Adobe InDesign and Creative Suite Conferences in Chicago, with Adam Pratt and Anne-Marie Concepción
Hosted by Digital Bootcamp, Chicago, thanks to Mike Carruth, Commander in Chief

Presenters: two pros who will be presenting at the upcoming conferences

Adam Pratt
Sr. Systems Engineer, Adobe Systems
Anne-Marie Concepcion
Seneca Design and Training, Chicago, IL
amarie@senecadesign.com

Good to know that Jim Maivald, our recently appointed group leader, has started an excellent new ritual of Q&A at the start of our meetings. Please feel free to bring your problems to the group and most likely you’ll get an answer.

Adam Pratt, a longtime Adobe employee and author in his own right (Sams Teach Yourself Adobe GoLive 6 in 24 Hours; The Adobe InCopy CS2 book), started us off with “a random smattering of stuff”—pulled from his top ten tips & trix list, Advanced Screen Compression Techniques. And in plain English that means, there’s at least one place where smaller is better—when you’re making web graphics. Each of his ten points saves you 10% on file size so if you use all 10, you’ll have ZERO file size (just kidding!) Adam shared three of his hot tips.

First principle in reducing file size? Choose the correct file format. If your image is continuous tone, like a photograph, use JPEG. With logos and flat-color art, use GIF. Adam showed the same photographic image saved as a GIF, 16K—but saved as a JPEG with quality 40, it’s only 4K, big savings. On the other hand, a logo saved as a GIF is 1K, but saved as a JPEG, quality 50, it’s 3K. Seems like small potatoes but that’s 300% bigger, multiplied by an entire site of graphics, can make a big difference.

Two. Never resize a web graphic. Don’t scale it down on the web page, go to the source file and resize it there. An 64K image scaled smaller on a web page is still 64K, compared to that same image that’s been pre-sized to 8K.

Three. Design for the correct size. Great tip, take a full screen shot of any web page viewed in the desired browser window, like Safari or IE, so that you see the browser header at the top. Then open it up in Photoshop, remove the content of that page and you have a blank template for the exact area you can design to. Be sure to first set your monitor for the target size, 800x600, 1024x768, whatever.

Adam showed some fast moves in GoLive, his favorite web app—not just because he works for Adobe, he claims! After all, he’s got his Dreamweaver certification, as well as his GoLive. SmartObjects is his current favorite GoLive thing, a very cool technology that let’s you size and otherwise transform your web graphic as often as you want and it always looks good and fresh. That’s because it goes back to the source file automatically so you don’t have one transform piled on another (recipe for disaster). The key is to place in GoLive a native Illustrator (.ai) or native Photoshop (.psd) file and have GoLive convert that to either JPEG or GIF using the Save for Web dialog, which opens automatically. Then when you scale or rotate it on the web page, the transform actually takes place on the native file instead. Using SmartObjects you can even update the text in a graphic while still retaining its graphic attributes (color of the graphic and its drop shadow, for instance). Drag a native Illustrator file into GoLive and you can scale up your graphic on the web page as much as you want, again it’s always going to the source file and making the results look great.

When you want to repurpose your text and graphics from your InDesign layout to your GoLive page, just do File>Package for GoLive from InDesign. You get a PDF to see what the layout looks like in GoLive and all the content “assets” to go with. In GoLive, turn on HTML preview, then drag and drop from the PDF onto the GoLive page. Caveat: you get your assets in GoLive, not your design. That you must recreate on your own.

Anne-Marie Concepcion, our local gal who’s hit the big time, finished the evening with a bang with her self-proclaimed “My Fancy-Schmancy Presentation” slide show and demos, starting with tips from her Pixel Perfect for the Web demo coming up at the conference. Let’s say you have a bunch of art items on an Illustrator page and want just one of them for the web. Use the Slice tool, a tool many have abandoned along with tables in favor of building pages with CSS (Cascading Style Sheets). Surround that item with the Slice tool, then File>Save for Web, choosing Selected Slices option, not All Slices. When you click OK, Illustrator creates a JPEG or GIF of just the selected slice, not everything in the document. While you’re working in Illustrator you can show and hide your slices with View>Show/Hide Slices. But slices made with the Slice tool stay the same size even if you resize the graphic it’s supposed to isolate. So an alternative is to create “live slices.” Select the artwork you want to isolate into its own slice and choose Object>Slice>Make and now the slice scales with the object. Illustrator, by the way, is the only program in the Creative Suite that can export text as HTML. Select the text frame, choose Object > Slice > Make, then in Object > Slice > Slice Options, change the type of slice to HTML Text. When you export this slice via Save for Web it creates an HTML file of live, editable text with HTML mark-up.

Anne-Marie is a champion of Adobe InCopy, which is being quickly adopted by many companies as a way for designers and writers/editors to work collaboratively in an electronic workflow. She will be doing two seminars at the show on InCopy and gave us a preview of how the workflow works. Editors open actual InDesign layouts from InCopy’s File> Open menu and can see text and images in the layout, just the way it looks to the designer. But, they can’t edit any stories until the designer starts the process by exporting the stories to InCopy format from InDesign. Editors can view the entire layout and check out any story they want to work on. Spell check, Find/Change, even apply paragraph and character styles. They can copyfit exactly to the layout and not leave it up to the designer to figure it out from marked-up paper proofs. When the writer saves changes, the designer is immediately notified of the change with a small icon in the upper left corner of the edited story, indicating it’s time to update to the latest.

Next, previewing her Version Cue seminar, she showed how the program works. It’s the least-adopted aspect of the Creative Suite even though all CS2 apps have VC turned on by default. Whether you’re a single user or collaborating in a workgroup, VC helps you and your colleagues keep track of whatever has been designated as the “latest version.” A good way to get to VC is through Bridge, the “hub” of the Creative Suite. In Bridge, there’s a Favorites list in the upper left. Select Version Cue there to see all your projects being tracked by VC. To create a new VC Project in Bridge, you can do Tools>Version Cue>New Project. To show how versioning worked starting with a “regular” (non VC) file, Anne-Marie opened an InDesign doc she created, called “The Big Wave—My Nightmare in Hawaii by Anne-Marie Concepcion”—an unforgettable saga, no doubt! In InDesign, do File>Save and using the Adobe version of the standard dialog box, you can see the Bridge Favorites and select VC. Navigate to your work space and save to that project folder. Now you can continue saving changes to the InDesign file as usual as you work. But if you reach a point you want to do a “Save As” with a different name (such as “Big Wave-v2.indd”), don’t! With VC it’s not necessary. Just choose File>Save a Version, and add any comments you want in the Save A Version dialog box. VC lets you keep the same filename while retaining all versions of the file (all “Save As’s”) in the same document. You can select an older version and promote it to the “current” version. Review all your versions in Bridge or from the Versions command in the document status bar at the bottom of any CS2 document window. In Bridge you can use Find/Change to search for metadata or comments in all of a file’s or project’s versions. Good tip: make your VC project folder a Favorite in Bridge so you can get files in and out of there more easily. With VC, you can even look at previous versions of InCopy stories and placed images and promote older versions to current. Some clients say they “can’t live without VC” and others just tear their hair.

The raffle prizes were especially abundant this evening because our former group leader, Clint Funk, is about to move away and had emptied out all kinds of goodies from his recent years touring with Adobe. Premiums galore and some InDesign product as well. Join us next time for an InDesign projects show and tell.

—The Chicago InDesign User Group meeting notes have been prepared by Eda Warren, Adobe Certified Training Provider and Adobe Certified Expert on InDesign CS2, http://www.go-training.com/ and with help from Anne-Marie, thanks!

Meeting Notes Archive
View notes from past meetings of the Chicago InDesign user group.
• Read notes from other meetings!

Meeting Topics Archive
With user group chapters across the United States, Europe, and Australia, we have gathered quite a bit of information from presenters, Adobe representatives, attendees, and industry experts during the past four years.
• Read all of the notes