Vous êtes sur la page 1sur 116

WWW.LAYERSMAGAZINE.

COM

We turned down dates with more than 1 million flies last year because you deserve better Sometimes if hurts to be the pIckiest royalty-free stock agency out there, but irs for the besl Start your stock-love affair for as low as $1.

E

o u

'" '" N ra

[[OVER

STORY]

3[]] How'd They Do That?

If you haven't heard of augmented reality (AR) yet, we have a feeling that it won't belong before you can't even get away from those two little letters. This really cool: technology is popping up everywhere these days, including in smartohones, websites, and movie promotions. Join us as we take a behind-the-scenes look at how GE is using AR in their Smart Grid website. We also spend some time with Rob Chiu to find out how he used After Effects to create his award-winning short film, Black Day to Freedom..-Ch ris Main

~. [FEATURE]

"' L

'" ,_

m ..J

04

36] The Need for Speed

With clients demanding more video, Flash animations, and interactivity on their websites, how do you keep those sites from slowing to a crawl? To ensure that visitors aren't turned off by super-slow load times, read these top ten secrets to creating speedy websites.-Nicole Sullivan

[TUTORIALS]

421 Digital Photography:

Glitch-Free Panoramas and Smooth Water-Sean Duggan

481 Adobe Photoshop CS4:

Splash Dance-Dave Cross

59] Adobe Illustrator CS4:

Stylish Perspective-Corey Barker

66] Adobe In Design CS4:

Going to Press-Terry White

72 J Adobe Acrobat 9 Pro:

The Proof Is in the Pages, Part 2- Taz Tally

76] Adobe Dreamweaver CS4:

Don't Let Quicklime Slow You Down -Janine Warner

82] Adobe Flash CS4 Professional:

Learning the Accordion-Lee Brimelow

pagE' 30

[OEpARTMENTS]

8] Letter from the Editor

12] Layers News

16] Designer Spotlight

18] The Digital Canvas

94] Tips & Tricks

96] Creative Suite Q&A

114] Design Contest

(COLUMINS]

20] Design Makeover:

Handcrafted Website-Jake Widman

24 J Real-World Design Makeover:

Star Wars Miniatures Packaging Gets a New Look-Chris Main

261 Artistic Expressions:

Logo Design from Start to Finish -Jacob Cass

64] The Art of Type:

Following the Script-James Felici

~y~--

--

-

page 18

[ 0 N

THE

COVER]

Working from her Brooklyn-based design studio, extra-oomph, Linda Zacks has created energetic, amazing, scream-asloud-as-you-can graphics for industry giants such as Sony Style, Nickelodeons The N, and Adobe Look for Linda's unique style and fresh voice throughout the pages of this issue of Layers. [lindaZatks]

[REVIEWS]

86] Carrara 7 Pro-Bruce Bicknell

87] Canon PowerS hot 01O-Mike Mackenzie

93] PDF210 v2 Professional-David Creamer

871 CtrlChanges PrO-Jeff Gamet

88 J Nikon DSOOO-Steve Baczewski

90] Vue 7.S Infinite-Bruce Bicknell

92] Manga Studio EX 4-Bruce Bicknell

93] FusionCharts for Dreamweaver Designer Edition-Cyndy Cashman

Ji/l,aJ Whenever. you see this symbol at the end of a.n art.icle, it.m. eans there's either additional m. aterial or a download .. for that story at www.layersmagazine .. com So be sure to visit the website and check it out.

05
r-
,.
-<
m
..:. "
ut
..
,.
.D
,.
N
H
:z
m
tn
'"
"C
-<
0
"
-<
'"
0
0
Ul E

o u

ru

'" N -a L::l' CO E

in L ru ,_

CO ...J

www.layersmagazine.com

Want to keep up to date on the latest tutorials on the Layers website, find out what's coming up in the next issue of layers magazine, and learn about hot new products and industry events? Visit the Layers website now and sign up for our monthly e-newsletter and the tip of the day.

,_ "',

~

""

~r-------~~~~~~~~~~ __ ~~~~~ ~~ __ ~L-_' __

[LAYERS

TV]

Hosted by Corey Barker and Rafael "RC" Conception www.layersmagazine.com/tv

Be su re and join Corey and RC in their wee kly video podcast. From killer tips and tricks to fu II-blown tutoria Is, Corey and RC cover all of yo u r favorite print, Web, and video apps.

[NEWSLETTER]

06

[TUTORIALS]

We're always adding new tutorials to the Layers website, so be sure to visit often. And don't forg et to sign up for 0 u r graphics tip of the day and to read Res daily blog, Living in Layers. Here's a small sampling of some of the tutorials that you can find at the site now:

[pHOTOSHOp]

www.layersmagazine.com/category/photoshop

Realistic Coffee Stain Design Using Illustrator and Photoshop (Video): Using the new Grime Vector Pack symbols in Illustrator CS4 and a few layer styles in Photoshop, you can create realistic stai ns on just about any texture image.-Corey Barker

[ILLUSTRATOR]

www.layersmagazine.com/category/illustrator

Graphic Styles in Adobe J//ustrator (Video): Just like the Styles pan e I in Photoshop, th e Graph ic Styles pa nel in Illu strator allows you to create presets of multiple effects. So with the dick of a button, you can apply you r favorite effects to any object-Corey Barker

[INOESHjN]

www.layersmagazine.com/category/indesign

Using Object Styles in InDesign (Video): If you already know how to use paragraph styles, then it will be a breeze to learn how to take advantage of the just-as-powerful object styles feature in InDesign,-Jeff Witchel

[FLASH]

www.layersmagazine.com/category/flash

Flash [5430 Tools (Video): Learn how to use the new 3D tools in Flash to take visitors on a 3D tour of a group of static 2D images.-Tom Green

[OREAMWEAVER]

www.layersma.gazine.com/category/dreamweaver 5EO Tips for C54 Applications, Part 4 (Video): I n this fourth and final video on search engine optimization (SEO),leam one method of making your images visible to search engines. -Geoff Blake

[AFTER EFFECTS]

www.layersma.gazine.com/category/aftereffects Audio Visualization in After Effects (Video): Creating cool an im ated effects that follow the beat of you r audio track is quick and easyin After Effects.-Tom Green

[pREMIERE pRO]

www.layersmagazine.com/cate gory/premi ere- p ro Spatia! Controls in Premiere Pro (Video): Learn how to Jazz up your videos with spatial controls and motion effects right inside of Premiere Pro.-Franklin McMahon

Adobe

o

+

+

Ideas Inc trnpeuent.Ihat's why th new Adobe- Creative Suite- 4 Master Collection provides adv need Integrdlion ~ atures lhal ellmlnalf' steps and enable you (0 collaborate rnor effiel nlly. YOlI'U spend less time wanin nd more time Cleating as you turn your !dea~ IntO amumg print. web, video, illll'ratUve, nd mobile ieces. F nd your shot cu (0 rlmanl at dob .com olbr:lliian

Shortcut to Brilliant

E o u

N '"

-a

E

in L

'" >-

'" --'

08

EDITOR]

so that's how they did that

LEARNINg HOW THINCjS WERE DONE IS WHAT IT'S ALL ABOUT

How many times have you looked at something in print. online, or on TV and asked yourself, "How'd they do that?" If yo u 're anything I ike us here at Layers, I bet you do it a II the time. Th is very question is what we thrive on. In fact, it's in all of our job descriptions: "If any element, whether static or animated, makes you extremely curious as to how the designer achieved such an effect, you must tell all Layers readers how that effect was created."

Okay, okay, while I may be stretching the truth here just a bit, we do believe that if something is cool, eye-catchinq, or just un iqu e, our readers would more than I ikely be interested in learni.ng how to re-create that effect for themselves. All of this leads to our cover story for this issue, which is entitled (wait for it), "How'd They Do That?" (You didn't see that one coming, did you?) We asked you, our readers, to submit your favorite designs that you've recently seen out in the world around you, and then we promised to pick the best ones and talk to the people behind those projects During the process of going through and researching the various submissions that we received, we came across AR. If you're not familiar with AR, it stands for "augmented reality" That alone was almost enough for us, because really, who doesn't want to have their reality augmented every now and then?

Anyway, we discovered the use of AR at the GE Smart Grid website and immediately asked ourselves, "How'd they do that?" (Okay, I'll stop saying that.) Since then, it seems that AR has been popping up in various press releases and on various websites every few days because this technology is pretty amazing and people are finding differ-

[This very question

ent ways to take advantage of it. So what are you waiting for? Turn to page 30 to learn more about this cutting-edge technology. (Wa it, wait-come back! At least finish read ing th is page that I spent hours and hours on before you turn the page.) Also .in this very same cover story, we speak to Rob Chiu about his award-winning short film, Black Day to Freedom, which was created entirely in After Effects. Rob gives us an inside look at how and why the film was created.

The next stop on the tour is "The Need for Speed" on page 36. We turned to Web performance expert and author Nicole Sullivan for ten tips for creating leaner, meaner, faster websites. Nicole is extremely knowledgeable about this topic, and she speaks at conferences around the world helping people create better Web experiences. If you've ever bu ilt a website and then wondered why it was so slow, check 0 ut this feature-just one of these tips may bring the rei ief you're looking for.

On another topic, the charnpionsh ip match for Layer Tennis (sponsored by Adobe Creative Su ite 4) recently took place over at www.layertennis.com. In this grueling 10-volley match, two finalists had only lS minutes each to design a; file before kicking it back to their opponent. Turn to "The Digita I Canvas" on page 18 to witness the resu It of each vo Iley and to find

[how'd they do that?J

is what we thrive on.]

out who emerged as this year's champ.

Finally, there's Star Wars. Yes, after all these years, we found a way to get Star Wars into the pages of Layers magazine.

In the feature, "ReaJ-World Design Makeover," we show the belore-and-etter packaging designs for the Star Wars Miniatures game from the geniuses at Wizards of the Coast. Join us as Art Director, Paul Hebron, and Senior Designer, Leon Cortez, bring a galaxy far, far away to page 24

And as a.lways, you'll find plenty of our regular tutorials and product reviews to keep you busy. But if you finish this magazine and find that you have a little time on your ha nds while you're wa iting for the next issue of Layers, why don't you take a moment an d drop us a I ine at letters@layersmagazine.com to let us know what's on your mind, even if it's only to ask, "How'd They Do That?" (I know, I promised I wouldn't say that again, but I Just couldn't help myself)

All my best,

{/211!

Chris Majr Managing Editor

rr. Your Discount Imaging Source

1l,.lles •

1l10h:>510n~ ~rdl'hin I~,:I e r "The Next Generation"

Call for current Deals and Rebates

Z3200 Wide Format Photo Printers Ideal for Professional Photographers and Digital Artists!

44" Printer ,includes sta nd

Ca

on

"" 1"~lI~P.OGR""~ " PAct" ••

Unbelievable Print Speeds! 12-colors!

----- ..

f

I

'\ ~ (AI<U }~lfl, Us •

,~~: ~'M42f1!'

fii'nj"") ......... ,.....oUL~j MUSEO

---

maglCL.ee

lUI/line Df SUlllllies {Call for CalalDg] IREE shipping on all orders over S99

1'.8000111.9665

www.itsuppllBS.com

5100 Newport Dr. Suite #6 Rolling Meadows, IL 60008

LAYE

The How-to Magazine for Everything Adobe·

VOLUME 5 ' NUMBER S • PRINTED IN USA www.layersmagazine.eom

EDITOR·IN·CHIEF Scott Kelby

MANAGING EDITOR Chris Main

ASSOCtATE EDITOR Mike Mackenzie

ASSOCIATE EDITOR Barbara Thompson

ASSISTANT EDITOR Issac Stolzenbach

TRAFFIC DIRECTOR Kim Gabriel

DYNAMIC MEDIA EDITOR Rod Harlan

GRAPHICS/NEWS EDITOR Aaron Westgate

CONTRIBUTING WRITERS Steve Baczewski • Corey Barker. Peter Bauer' Bruce Bicknell, Lee Brimelow Cyndy Cash man' Jacob Cass ' Rafael "RC" Concepcion· David Creamer Dave Cross. Sean Duggan, James Felici ' Jeff Gamet' Nicole Sull ivan Taz Tally' Ianine Warner' Terry White Jake Widman

CREA TIVE DIRECTOR Fel ix Nelson

PRODUCTION MANAGER Dave Darnstra

ASSOCIATE DoSIGNER Taffy Clifford

ASS·OCIA TE DESIGNER Chri,ty Win1;er

PRODUCTION DESIGNER Dave Korman

VP, SALOl Kevin Agren 813-433-2370

ADVERTISING COORDINATOR Jeanne [illeba 877-622-8632 ext. 215

ADVERTISING DESIGNERS Margie Rosenstein- Nicole Prccunier l.esl ie M On re negro

DIRECTOR OF CIRCULATION Ronni O'Neil

PUBLISHER Scott Kelby

EXECUTIVE PUBlISHER David Moser

BUSINESS MANAGER Jean Kendra

CH I of F I NA N CIAL 0 FFICER Pa Ltl Parry

DIRECTOR OF WEB DEVELOPMENT

AND PROGRAMMING Tommy Maloney

WEB PRODUCER Annie Cushing

WEB TEAM J ustin Finley· Karey Johnson Andrew Kurz· Fred Maya Aaron Westgate

PUBLISHED BIMONTHLY BY Kelby Media Group

333 Douglas Road East Oldsrn ar, F L 34677-2922 Phone: 813-ti33-501 0 www.kelbyrnediagroup.corn i nfo@layersmagazine.com

SUBSCRIPTIONS $29.95 (U.s.) Call (toil-free) 877-622-8632; subscribe online at www.layersrnagazine.corn

COVER DESIGN Cover image courtesy of Linda Zacks

COLOPHON Produced usi ng Adobe lnDesign CSti, Adobe Photoshop CSti, and Adobe Illustrator (54. Body copy is set in Aveni r, H eadl i n es are set in Solex,

YOI.I can feel ir in the air-the eager anticipation and unbridled optimism.

Th is is when the blood, sweat. and tears culminate in the ultimate prize. When

yo u ca n cry 0 U ~ "Yes, yes, ye.! I have the number one draft pick" So before we

lay 0 lit a si ngle page, before we edit a single tutorial, we'll scour the preseason repo rts and pu c together an unbearable team of superstars that'll awe and inspire even the most unforgiving football gam . That's right it's Fantasy Foo,ball season. Viva los Ricans!

All contents @ GOPy,R I G HT 2009 Kelby Media Group, I no, AUrigh I. reserved. Any use of the con ten I..S of this publication wi thout (he exp ress written permission or the publisher is slrictly protubfted. Layers maqaztne is an independent [oumal not aHili~ ated wilh Adobe Systems" lnc. Adobe, the Adobe I'ogo, Acrobat, Adobe Premiere" After Effects, D reamweaver, Flash, Illustrator, InDesign I' U qhtrccm, and Photcshcp are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or olM er ccuntnea. All other trademarks are the props rty of their res.peclive ,owners_ Some or the vi ews expressed by contnbuiors may not be the rep rase-nlative views of Ihe Publi she r. I SSN 15&4-415X

MUNE, ACCELEMTE, AND ENHANCE" yOVR. WOuFLOW 000 HIGH p~R.FO~NCE FILTEru AND fPE'Cr~L EFFECn FOR.. YOVR.. COMj)oun ND EorTlNG. THE ANI'\R.D-w,NNrNG nFFEN OF)( CRE~nVE DIGlrAL EFFEm ARE "'MP' YOVR. P.ItEFER.R.ED EOrTlNG ,ymMf FOR. MI'\'lCIMvM pR.ODVCnVfrr:

The Difference is

,. o u

ur z:

N « t:l' « ,.

"' 0::

ur ,_

« ...J

12

[ 1

e r 5

new 5

]

a

y

qrepur cs o e s r qn news. new prOOUCTS • OIyITaL vt o e o news. OTHer STUFf

Adobe sets Acrobat.com free

(and adds paid subscription services)

After a year of being on trial, Acrobat-com has finally been released from public bete. According to Adobe, more than 5 million people have signed up for this pretty cool cloud-based service that allows users to share documents and communicate with others anywhere in the world in real time via a Web browser. There are now two new subscription services for Acrobat.corn: Premium Basic and Premium Plus. Premium Basic ($1499 a month) includes Adobe ConnectNow Web meeting capacity for up to five participants and the ability to convert up to 10 uploaded documents to PDF per month; the Plus version ($39 a month) bumps it up to 20 participants and unlimited PDF conversions. (The free service is still available for up to three participants and the online creation of up to five PDF [iles.)

In addition, Adobe announced preview releases (read public beta) of Acrobat.com Tables and Acrobat.com Presentations. Tables is a spreadsheetlike application that allows users to work with others at the same time on data-intensive documents that can be accessed from any Internet connection. Presentations allows people to work together online to create, well, presentations. For more information, visit https:lliabsl .acrobat.com.

BrowserLab free preview fills up in less than eight hours

Adobe recently announced a free preview of another cloud-based service called Adobe BrowserLab (https:llbrowserlab.adobe.comL but don't bother trying to sign up for it because you'll only get the following message: "Sorry, but the limited free preview for BrowserLab ~s currently full, and we are temporarily not accepting new users." So why did this new service fill up so quickly? Because it allows Web design· ers to quickly and easi Iy test th e i r pages on leading

browsers with nothing but a Web connection, a Web browser, and Flash Player 10. This means that designers on both M acs an d PCs don't need to have myriad browsers installed on their system to test their webpages anymore.

With BrowserLab, you can compare real-time, accurate screenshots of pages side by side in two different browsers. But even better than that, the onion skin mode allows you to overlay pages and control the opacity of the top page. This quickly reveals any variations in how different browsers display the same page. Users of Adobe Dreamweaver CS4 will also be able to test Flash technology-based and interactive site elements, including dynamic widgets, rollover effects, and AJAX·driven content.

Final pricing and availability have not been announced yet, but as soon as we hear something, we'll be sure to let you know at www . layersma gazi n e.com.

ColdFusion 9 released from cold storage

In more public beta news, Adobe announced the availability of both ColdFusion 9 and ColdFusion Buil.der as software previews ColdFusion is used for building dynamic websi.tes and Internet applications, and Cold Fusion Builder is a new Eclipse-based, integrated development environment (IDE) for rapidly developing Coldf'usronapphcations. Builder includes tools for debugging applications within the IDE, remote support and custom code generation, a customized development environment, and support for applications built with ColdFusion 7 and B.

To download the ColdFusion 9 public beta, visit www.adobe.com/go/coldfusion_beta_download. and for Cold Fusion Builder go to www .adobe .corn/ golcol dfusion_builder _beta_down load.

Apple unveils new versions of Final Cut Studio and Logic Studio

Apple lnc. has finally updated its entire suite of products in Final Cut Studio. The new applications include F'inal Cut Pro 7, Motion 4, Soundtrack Pro 3, Color 1 .. 5, and Compressor 3 .. 5. All of these updates together include more than 100 new features for the professional video editor.

Improvements in Final Cut Pro include three new Pro'Res Codecs and Easy Export, which allows editors to export sequences to popularformats such as YouTube, iPhone, Apple TV, DVD, or Blu-ray while they continue working on other projects It's interesting to note that while Final Cut Pro finally has some support for Blu-ray, OVO Studio Pro (which is included in Studio) only received a very minor upgrade and doesn't support authoring Blu-ray in any way.

Motion 4, an animation tool for creating everything from basic titles to motion graphics, has added new custornizable features that add point and spot lights to cast realistic shadows or turn any shape, video plane, or paint stroke into a reflective surface. Soundtrack Pro 3 adds new editing tools such as Voice Level Match, which applies volume information from the vocal content of one dip to another dip without changing any other audio content. Color 1 . .5 adds 4K support for cameras such as the RED ONE, and Compressor 3.5 automatlca Ily detects Quick Time settings and can create Easy Export templates.

Soundtrack Pro and Compressor are also part of the new Logic Studio, which Apple announced the same day as Final Cut Studio. Logic Studio is a set of applications for musicians that allows them to write, record, edit, mix, and perform, and the new release boasts more than 200 new features. Logic Studio includes Logic Pro 9 and MainStage 2_ The new features in Logic Pro include Amp Designer and Pedalboard plug-ins that provide realistic virtual guitar amps and stompbox effects for creating customized guitar riqs. MainStage, a live performance application, comes with the new Playback and l.oopback plug-ins to provide backing tracks and creative, real-time loop recording for performing on stage.

Final Cut Studio retails for $999 ($300 less than the previous release) and is also available as an upgrade for $299_ Logic Studio retails for $499; exisbng users can upgrade for $199_ For more info, visit www.apple.com.

ur

, c:

"..,

u, o >(f) ur ... 0: ::0 o o

Eye- Fi

goes pro

Eye-Fi, Inc. recently introduced the world to Eye-Fi Pro, the latest addition to their fam ily of wireless SDHC memory cards for digital cameras. The new Pro version supports RAW images (a welcome addition for pro photographers) and peer-to-peer connectivity for a direct connection between the camera a nd computer without the need for a router or Internet connection. And with the new Selective Transfer feature, photographers can send only the images they want from the camera to the computer. Both images and videos can also be uploaded directly to more than 25 online photo and video sharing sites, and when users are away from home, they can upload via more than 10,000 Wi-Fi hotspots. The new Pro card even geotags photos. What more could you want for $149.991 Visit www.eye.fi today for more info.

Wi-Fi

4GB

••

•• Upcoming Events

PHOT05HOP C54 DOWN [,. DIRTY TRICKS TOUR

Orlando, FL (August 28,2009) Charlotte, NC (September 2, 2009) www.kelbytraininglive.com

PHOT05HOP C54 FOR pHOTOCjRAp HERS TO UR

September 9, 2009 Connecticut Convention Center Hartford, CT www.kelbytraininglive.com

MAXIMUM PHOT05HOP [54 TOUR Kansas City, MO (September 14, 2009) St. Louis, MO (September 16, 2009) www.kelbytraininglive.com

PHOT05HOP C54 CREATIVITY TOUR September 21,2009

Cobb Galleria Convention Centre Atlanta, GA www.kelbytraininglive.com

PHOT05HOP WORLD CONFERENCE [,. EXpO

October 1-3, 2009

Mandalay Bay Resort & Casino Las Vegas, NV www.photoshopworld.com

ADOBE MAX 2009 October 4-7, 2009

Los Angeles Convention Center Los Angeles, CA

http://max.ad 0 be .com

MOTION09

October 11-14, 2009 Albuquerque Doubletree Albuquerque, NM www.motionconference.com

AN EVENT ApART October 12-13, 2009 Sheraton Towers Chicago,IL http://aneventapart.com

new 5 ]

How fast

can you go?

NVIDI'A's line of Quadro FX G PUs are al ready optimized to enable Gf'lf-acceleration across

all Adobe Creative Suite 4 applications, but Elemental Technologies has taken this to a whole other level for videographers with the announcement of Elemental Accelerator 2 (formerly Rapi H D) for Windows, an NVIDIA CUDA architecture-based plug-in. Depending on CPU and Ouadro FX configurations, Adobe

Prem iere Pro users cou Id see a performance increase of up to 11 x (when compared to (PU-only encoders). The pluq-in accomplishes this by leveraging the eUDA parallel computing architecture to offload H.264 video encoding to the Ouadro GPU. Elemental Accelerator 2 supports the creation of Blu-ray DVDs and Web content using Flash. (Note: Mac users have the option of using Elemental Accelerator 1.2 running on a Ouadro FX 4800.)

NVIDIA also announced exclusive discounts of up to 50% on plug-ins from Elemental Technologies, Boris FX, Red Giant Software, and proDAD for users of qualifying NVIDIA products (www.nvidia.com/adobeplugins). For example, Elemental Accelerator 2 normally sells for $499 but is discounted to $250 for Ouadro FX users.

Empowerinq 3D

in your Aaobe Creative Suite apps

Want to add some 3D power to Photoshop and Illustrator? Then check out Strata Design 3D ex 6 and Strata Enbld 3D CX. Strata Design 3D ex (formerly just Strata 3D (X) ships with six Photoshop e54 plug-ins: Match, Model Edit, Model 'New,Render, TexturePaint, and TextureMaker. According to Strata, version 6 renders up to five times faster, and the interface has been redesigned to be more familiar with Adobe users. Other new features include per-object render controls; new texture controls; guides; and new modeling tools and commands.

With the new Strata Enfold 3D CX, you can create professional folded 3D designs directly in Adobe Illustrator CS3 or eS4. Users can link Photoshop graphics applied to 2D Illustrator artwork, define die-cut lines and folding scores, and then see it allin 3D.

Individually, these products retail for $695 each, but they're also part of the Strata 3D ex Suite (which also includes Foto 3D CX and Live 3D CX) for $1,395. For more information, visit www..strata.com.

Bring your

characters to life

At SIGGRAPH 2009, Smith Micro Software introduced Poser 8, an update to their complete solution for designing, posing, and animating figures in 3D. With more than 2.5 GB (of which 1 GB is new in version 8) of fully textured human and animal figures, along with basic accessories such as hair, clothing, pose sets, real-world props, and 3D scene elements, users can quickly start creating their very own 3D character art and animation. The new version comes with eight brand-new 3D humans, a.nimproved user interface, a new search-enabled library, and a Dependent Parameter tool that allows users to teach objects to interact with each other. Other additions include a Cross Body Part Morph tool, an improved figure rigging system, indirect light.ing for global illumination effects, and much more. For more information, visit http://my_smithmicro_com_

CAREY SCHUMACHER Photographer www.mplx.com/CareySch.vmochtH

FOLDED GREETING CARDS

MOUNTED PRINTS

"Hoving a Jow-dropping hoffday cord 10 send to friends and tomly i5 jU'St tun, but cads aen't jU5t for the ho6doy seasonl Plus. he pearl PQpef is my fovorite."

hlhe printingond mounting ore always gorgeous. and my beach pictures pop 0" the metallic paperl"

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

16

,

Linda Zacks

A

is

for

anyt hin~r _

can't be indexed as one particular artistic species: she's equal parts design, illustration, paint, poetry,

zi p, and zoom. She graduated from Brown University in 1995, where she studied sem iotics and creative writing and spent her junior year at Rhode Island School of Design. Four years prior to launching a freelance career, linda was Design Director at Vhl.com. Since going solo in 2004, she's been hunkered down in her creative laboratory in 8 rooklyn called "extra-oomph," concocting pieces that chu rn with a vivacious energy Sam e recent projects include a mural in the Paris subway; a national "Back 2 School" campaign for Sony Style; parts of a "crazy A" for an Adobe campaign; funky, colorful characters for Nickelodeon's teen network The N; and helping birth a new creative social networking website called VOOI

Layers: You use a lot of hand-drawn, painted elements along with computer-generated art. Which do you usually start with and what's your process for combining the elements?

Zacks: I love working by hand-the messiness, the unpredictability, the accidents, the smells, the textures-I usually start there. I often use the computer as a kind of virtual glue stick: a place to combine handdone elements and weave them together, but never really as a place to originate pictures. I'm addicted to my scanner .. I've been known to scan in some crazy thinqs andl think it's the best invention on earth. I just wish they made them bigger-maybe even desk sized!

Layers: You often mix bright colors in contrast with black and white. How do you choose your colors for a project? Do you start out knowing how the final piece is going to look or does it evolve as you go along?

Zacks: I never really know exactly how something might turn out. The suspense, the twists and turns an image takes as you get in the zone are always surprising and invigorating. I am always open to happy accidents and stream of consciousness. 'I've always been in love with the

strength and grit of black-and-white imagery and strong splats of color straight out of the inkbottle. I never really mix paint-love its naked intensity. Choosing colors-it could be as simple as seeing something minutes before I start to dig in, and the impression is burned into my skull and makes it into the picture.

Layers: A lot of your art has a strong emotional impact on the viewer. How personally connected are you to each piece you create? Where does your inspiration come from?

Zacks: I do a great deal of thinking before I start anything No pen, no paper, no computer. I thoroughly dissect and analyze. It pretty much takes over my brain for a considerable period of time. I make a strong emotional connection to ideas and it carries throu.gh from my brain, to my heart, to my hands, to the paper. Inspiration comes from everywhere-----mostly from the places you'd never expect

Layers: What applications do you work with regularly? Do you have a favorite? Zacks: I use Photoshop all the time and it's definitely my favorite. I use Illustrator from time to time and it is definitely not my favorite.

Layers: Why did you decide to leave the corporate world and become a freelance designer? What was your biggest challenge in making the transition?

Zacks: As Design Director for Vh 1 s website, I was stuck doing Web design for one brandthe commute, the bureaucracy, the headaches. In the evenings and on the weekends, I always found time to work on my own projects, but it was really difficult. I yearned to work with a diverse group of people on all kinds of projects while continuing to churn out personal work. I wanted a life that was less predictable, less 9 to 5. I wanted to be my own boss. Freelancing is full of challenges-marketing, negotiating, discipline, droughts. The lists are endless, but if you can make it work, the rewards are spectacularthe sky's the limit!

Layers: What are the differences in working with big clients, such as Adobe and Sony, versus working with smaller, lesser-known companies?

Zacks: Big clients usually have bigger contracts to read. But other than that, I've worked with some wonderful people from all different kinds of places-and that's the greatest thing about being a free agent..

ALL IMAG ES BY LIN DA ZAC~S

[CONTACn Linda Zacks www.extra-oomph.com

..__------------------------------1 Y aLL e r y ]

E o u

Inman: The half-a-heart remaining was definitely a taunt in response to what felt like a halfhearted return. I just couldn't muster a pixilated parrot ("Po'lly wanta layer?") within the 15-minute time limit.

[THE DlyITAL CANVAS] SHOWCASING THE DESIGN WORK Of OUR READERS

1 a y e r ten n i 5 10 lieu of our typical "Digital C,~," this issue. ~ decided to show you the volleys from the final round of Layer Tennis (formerly Photoshop Tennis) and ta Ik to the finalists. Presented by Adobe Creative Suite 4, Layer Tennis (www.layertennis .com) is a series of online design events where creative pros send files back and forth in rea ,I time. Each match consists of 10 volleys, with each volley lasting 15 minutes. Spectators have the opportunity to watch, post commentary, and vote for a winner after each match via Twitter. On July 10, 2009, Greg Hubacek went head to head with Shaun I nm an in the f nal match, In the end, Inman won the popular vote and was declared the cham pion. (Note: For the full interview with Hubacek and Inman, visit www.layersmagazine.com/layertennis.)

Layers: Before we jump into the volleys, can you provide just a little background about yourselves?

Hubacek:I'm a designer living and working in the Twin Cities (Minneapohs specifically). I'm freelancing currently, but I'll be starting as a Senior Desi.gner at Space 150 in Minneapolis by the time anyone reads this. Right now I'm working on a music video, a couple identity systems, a website, some apparel, print work-the balance is what keeps it exciting and fresh.

Inman: I received a degree in Graphic Design at the Savannah COllege of Art and Design. I'm a self-taught client- and server-side developer. I also dabble in iPhonegame development. I currently reside in Chattanooga, Tennessee, and have been self-employed since the launch of Mint in 2005. Since then, I.'ve been designing, developing, and selling my own Web-based products under the novel moniker "Shaun Inman"

Inman: The obvious advantage is having a, little more time to think about and work on your serve. Rather than use that time to overproduce an elaborate design, I opted to create something simple that encouraged viewers to interact with their physical displays to bring them into the game.

Contrast has been boosted in the first two voliey images just enough so you can read the text.

[VOLU?Y 1]

Tools

Layers: Do you think there's an advantage to going first in Layer Tennis, and why did you start with such a subtle serve?

Layers: Why did you decide to play along with Inman? Did you think Tiffany would get stuck in your opponent's head?

Hubacek.:1 was hard-pressed to do anything after wasting half my time trying to figure out what Shauns layer said. The Tiffany reference is continuing off of his "Are the New Viewers Gone Yet?", as in "Yes, I think we're alone now" (you've scared off all the first-timers).

~!

[VOLLey 2]

Toois used: Ai

[VOLLey 3]

N '"

Layers: Does the remaining half heart straight out of Nintendo's Zelda video game represent how you feel about your opponent or about Tiffany?

-a

E

in L

.. >-

'" --'

18

OPPORTUNITY

[VOLLey 4]

Layers: What the heck is wrong with this Boy Scout?

Hubacek: Nothing's wrong with the Boy Scout. He's faceless; I guess that's weird. But that's really harsh of you to judge him for that. He obviously has larger issues to deal with, like his loss of his left hand, which seems to be the result of a wood-whittling accident.

[VOLLey 5]

Layers: How did you come up with this type trick on the fly?

Inman: I noted the shared characters in "devils" and "details" while brainstorming my serve the night before. When Greg replied with the inattentive whittling Boy Scout, I knew exactly what to do.

[VOLLey 7]

Tools

Layers: You picked up the word "Evil" and the field of stars from Hubacek's previous volley. How did these elements inspire the rest of this volley?

Inman: Honestly, the Evil Galaxy had me at a 'loss sol picked an a.esthetic I was comfortable with (late '90s Web and rave flyer design) and did what I could with existing elements from the previous volley.

[VOLLey 9]

Tools used:

Layers: It seems that you're still bitter that Hubacek planted that Tiffany song in your head. What was it about this piece that you thought would deliver the knockout punch?

Inman: This image is a direct response to two things: the final, word at the very end of the previous volley-after all those" Ravers," a single "Ugh"; and the commentators' early match expectations of more throat-punching designs. Delivered literally.

19

"' '" "0

....

[VOLLey 6]

Layers; A self-muti.lating Boy Scout and now evil permeating the universe-is there something you're trying to tell us?

o n ....

'" o

o

"'

Hubacek: 'I really wasn't sure what he was referencing with the line. If the devil is in the details and there are details everywhere, then the whole world must be evi'l-and have the same awkward kerning.

Hubacek: No, actually the raver thing is a reference to the notchyspacey-rave flyer play of Inman's seventh round. It was a bit of a sophomoric joke that when coupled with the hour it took to get the video up fell with a bit of a thud.

In this animation. the word "Raver," scrolls fr:om left to right a total of 13 times, followed by the word "Ugh," which stops in the middle of the image.

AI

[VOLLey 8]

Tools

Layers: So did you feel that victory was at hand and you were all geared up to party, or is there a deeper hidden meaning to the word "Ravers" here?

[VOLLey 10]

Tools

Ai

Layers: Inman just punched your design in the throat. Why did you go "Beyond the Expected" and do what appears to be lending a he/ping hand to your opponent?

I-Iubacek:lt's not about who punched whom in the throat This is the last layer of Layer Tenn is 2009. As someone who came into the fina Is from the back of the field of qualifiers, I'm not mad at the throat punch. I have a lot of respect for Inman, Draplin, Glass, and all the other layer Tennis players from the year. All wounds are bandaged-no harm done---first round of drinks is on me. II

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

20

[0 E Sly N _M A KED V E R ] JAKE {j'q} WIDMAN

client:

Crone's Cu sto m Woodwo rki n g] [www.cronescustomwoodworklng.com

handcrafted website before

(

rene's Custom Woodwork.ing of Fair Grove, Missouri, didn't

start out as a frame shop. Tom Crone started the business in 1982 as a builder of woode n accessories for limousines-the wet bar in

the back seat, for example. On the company's website, Tom claims to have built more than 2,000 limousine consoles over the years,

Tom's son, Mike, joined the business in 1999 and the two branched out into the home furniture market. In 2004, the two men started making round and ova I picture frames as a spin-off of the furniture business. "We just kind of fell into it," says Mike.

The two tried to market the new business loca Ily, but it didn't attract much interest. At one point however, they uploaded some sample photos to eBay, "just to have something to show people," Mike says And the orde rs sta rted to roll, in.

U nfortun ately, that sou ree of business sta rted to weaken as well, so the two decided to try direct marketing over the Web. They launched www.cronescustomwoodwork.ing.comin 2007 and now attract customers from allover the US and even from Canada and overseas. Mike mamtains the site and he's happy with its success on search engines, "Our SE~ [search engine optimization] is pretty decent," he says. "A search for 'pictu re frames' on Google won't find us, but one for 'ova' I picture frames' or 'round picture frames' will put us on the first page,"

He's not as pleased with the look of the site, however, "Most craftsmen can make an awesome-looking product, but marketing's where many run into problems." He thinks the site is poorly organized and doesn't really I ike the flyo ut men us at the left for the d ifferent fra me subtypes.

The Crones want a site that communicates the custom, handcrafted nature of their wares. Mike says their competition is the "stampedout factory stuff." He's also sensitive to the needs of their dial-up

t'sUstom Woodworking WtkIn.c ~o n.. IJDrrno or IblldmRedRQluld, ud Onll P~tUrt Fnunc9'

D:tjl f=w;; , I'WJ OM

.,,~ ~

Most craftsmen can make an awesomelooking product, but marketing's where many run into problems.

customers: He I ikes the fact that the current site is qu ick to loa d an d that customers don't have to hunt a round for the prici ng_ At the same time, he points out that they don't have, and don't want, a shopping cart area. "All we do is custom," he says. And nobody places an order without communicating with them directly by phone or email.

We asked three designers to build the Crones a new, custom website.

[Jake Widman is a writer and editor who lives in San Francisco, He's been covering the intersectien of cemputers and graphic design for about 20 years now-since baCk] when it wa s a 11 ~~IJed "de.ktop publi.hing_"

makeover SUBmISSIons

We're lookin g for product packaging or labe Is, print advsrtisern snts, and maqazi ne covers that are cu rrently in the marketplace for futu re "Design Makeovers." So if you or someone you know has a design that you'd like us to consider making over, or if you're a designer and you'd like to be considered for a future "Design Makeover," drop us a line at letters@layersmagazine.com.

after

DESIGNER: Joe Akers] [http://brainchildcollective.com

[ I [hose warm, deep browns to give the site a weathered and cozy feeling, like that of a workshop with a rtrh history.

he current Crone's site contains great examples of their custom woodwork, but it lacks the kind of information architecture that's

important for a ny website, especia Ily one that sells a product. I set out with the goal of providing a clean, organ ized site that the visitor could easily navigate, view i mages of the products, get an appreciation of their craftsmansh ip, obtain pricing, and start the process of placing an order.

Simplifying the navigation scheme down to the most essential 121'12- ments was crucial. I consolidated the original's column of 11 buttons (two of which had submenus) to six straightforward choices to provide a more streamlined user experience.

I. chose Helvetica Bold for the navigation buttons and the body copy to maintain a dean and subdued appearance. Knowing that the owner wanted to keep the cross-sections of the frames as a visual aid, I turned them into clickable icons that would allow the customer to choose a frame profile and wood finish as part of the custom order inquiry. Because the owner follows up every inquiry with a phone call,

A 8 0 U T

THE

DESlyNER

I felt this simplification wouldn't compromise the user experience.

To convey the handcrafted quality of Crone's woodwork through both the feel of the site and the color palette, I chose warm, deep browns to give the site a weathered and cozy feeling, like that of a workshop with a rich history I added a texture to the background color to continue the hand-rubbed, worn look throughout and to add depth to the design.

While the oriqinal's concept of a carved wood logo makes sense for the su b ject matter, the logo itself is difficult to read. I designed a new logo that's simple and legible and adds more character. The Adobe's ITC Garamond Handtooled typeface gives it a raised and dimensional appearance. And I chose Creative Alliance's Conga Brava Standard for the logo's subline because its chunky serifs lend a "carved" appearance. Simple line work finishes the design and suggests its conta in ment in a plaq ue that might be handcrafted and displayed in the Crones' workshop.

Joe Akers] [http://brainchildcollective.com

As a former musician and trained chef, Joe has always embraced his innate creativity, and enjoyed sharing his talents with others ... But after spending 10 years working on his feet in various kitchens, it was time for him to find another outlet for h is creativity.

In 2007, Joe co-founded Brainchild Collective in Richmond, Virginia, as a way to bring together the curnu-

lative talents of several friends to create awesome multimedia projects for a variety of clients. The idea behind Brainchild was to provide small-to-medium-size businesses a singular solution for graphic design, Web design, photography, and video. By offering all of these services in one studio, Joe and his fellow collective members can better control the integrity of the brand a nd the qua I ity of the designs an d materia Is they produce for clients.

Finally out of the kitchen, Joe is happy to be behind the desk and the lens full time. He's also gla,d his wife is a wonderful cook.

A P P LI [AT IONS USE 0: Ado be Illustrator C S4 a nd Adobe Photosho p C S4

21

r'"' ""' m

" <II

:;: » .n » N

-z m

o ro ..

'" o

o

"'

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

22

[design makeover]

after

DESIGNER: Stephen Chachere] [www.solaramedia.com

_1o,1M_,oiI __ _ .... __ r _

__ .. __ ~U""~~.~ twI'Iol ... ~~ ....... _It""" ._.......,...,~~ ... ----

--

......... ,...... .. ~_~iIIIaii. .... _ ................. MI!I' .... .............. _

- ~ ~ 1IIfiIIIiIijIIf ......

~ ~~ .....

~-. ~!"~

::===-=--..:.:=====

1*'-

......... _IIIiIIA .. _..,tIi!iiI-...!IR

• I ... • ~ .... •• • •• _ II.. ". • .. I I

- ~"

A white frame lor matjlifts the site from the deep-brown background, and a thin wooden trim [or mnldinq] separates the header from the side panel.

y first step when designing a website is to inventory and arrange

the content in a coherent structure using Microsoft Word, For Crone's Custom Woodworking, I was able to identify the text and images

I wanted to highlig ht and, more importantly, I knew what the site navigation was going to look like before I considered the colors, logo, or layout.

For my second step, I work with the colors and logo, the elements that establish the feel, of the site" In this case, I used Illustrator to set the company name in Bitstream's Centu ry 731, a bold ital ic, serif typeface;

I framed the "C" to convey both the delicate curves and strong nature of the frames; and for readabllity, I, used TheSans from LucasFonts for the navigational: elements. I limited myself to three earthtone colorsbrown, green, and beige-in addition to white, to complement the colors of the wood. I chose muted colors because I didn't want to divert attention from the frames

And my third step is to design the layout. Here, I used a combination of lllustrator and Photoshop to sketch 0 ut various formu las before

ABO U T

THE

DESICjNER

Stephen Chachere ][ www.solaramedia.com

Stephen is co-owner of Solara Media lnc., based in the Hudson Valley (just north of New York City), He was introduced to digital media in 1991 when completing his MFA in photography at the State University of New York at New Paltz. During the 1990s,. Stephen worked as a media designer, providing graphics and presentation services to various Fortune 500 companies, At the same time, he was an instructor in art history and digita.1 media at Marist Col.lege in Poughkeepsi.e.

Stephen founded Sclera Media Inc. in 2000. From inception, the company's emphasis was on interactive multimedia and a less-is-more philosophy of design. Macromedia Director was the preferred platform until a matured FI.ash came on the scene, Stephen creates custom interactive designs for clients in the medical, consumer products, and nonprofit sectors. His medic al education applications h ave been particu I arly successfu lin securi ng awards for his clients Steph e n is also the videographer behind the original digital video featured in many Sclera Media projects.

AppLICATIONS USED: Adobe Illustrator and Adobe Photoshop

deciding on left-side navigation. For the header and side panel, I creeted textured green panels with Photoshop lighting effects to quietly highlight the logo, title, and navigation bar, A white frame (or mat) lifts the site from the deep-brown background, and a thin wooden trim (or molding) separates the header from the side panel. I wanted these elements to be subtle and elegant-the wall on which Crones' frames would hang.

For site prod u ction, my first choiceisu sually Flash, but for Cro ne' s I'd recommend a hybrid site combining Flash naviqation with HTML that Mike Crone can continue to update himself, The samples in each category (organized by shape, wood type, finish, etc) are presented as thumbnails that scroll across the page. Clicking on a thumbnail opens a new window with a larger view. Because the content of each page is presented within the area framed by the header and side panel, the site visitor won't have to scroll down to view content, and the site navigation will, always be onscreen.

after

DESIGNER: Chris Pickey ] [www.chrispickey.com

--

--

--

--

--

--

--

--

w.. .. _ ... 'ii'illlh~iJiiiIf ........... "--.....-..~~ ---~---...,._,.-~ ............. __ IIiIIiII"WII .. __ !IIIiI_~

:a:_~..:-:.~+.--""'''''---

::II!'=- ~ --.._. ![I]

__ iIIIIII IillIIIiIII_~

~ __ __ _,.... ........ ~w.!I

... .. WM_ . I fiii

.-.; ------ ........... - .

- ..

If-iII-"ooi1!!_ '

"" .. ~....... '-

:: :::= :: 0 -ILU: • ., ..... _. 0

specific to shape-that way they wouldn't need flyout menus. And instead of an Idea Page with just pictu res, I created a fictional Create.A-Frame page. In the future, Crone's might possibly allow users to sta rt the desig n of their own fra mes thro ug han on I ine application.

I also w ante d to give Cron e's a n area to feature new oHeri ng s and specla I prom otions, so I created a right-ha nd column for th ose:

C55 would give the items a wooden-frame border with a slight drop shadow to carry through the "frames-on-a-wall" theme

For the homepage, I focused on building the re lationsh ip between customer and company with a text explanation of what Crone's Custom Woodworki.ng is all about. PI us, the picture of the man holding the man-sized oval frame is priceless. On the product page, I kept the examples of their work but consolidated them into a slide show that people could flip throug h, which added more interactivity and helped to keep everyth ing important above the fold.

23

"Z m

o ro ....

'" o

o

"'

-----_ .. ,.........--.--.-

----- _,. - ... --"~ .... ~

_ .. -

:::!-~..:~=!:~-::::-

"-IIII!IIII--_ .. -....,.._-_ ....

..... _ _.....,_ iilrIo...lIi ... _

____ ... _~_.......IClr.~_"'" ~~ __ ." __ 'IIIIiIWI!Ii~,..

------------

--

... - ~,.._,

--

--

--

--

I

.---

IIUI' 11...-1 {qIp. .. ~

-

---

.. .it made sense to somehow display their craft in the header so visitors would quickly get the idea of exactly what they do,

~ III irst, I created a workable logo for Crone's: something Simple.

• a nd elegant, not too slick, but one that wou Id scream, "We work with wood!" I pictured a logo in my head that used a silhouette of an Oak Tree along with "Crone's" stacked on top of "Custom Woodworking." I tried a, few combinations of that snd finally decided the best had the tree on top, with "Crcne'sin a larger classic typeface and "Custom Woodworking" at the bottom. After twice going through my font library, I decided upon Castellar, a Microsoft font original.ly drawn for Monotype. There was something about its classic chiseled look that lit-it was strong and regal, yet organic.

With the logo taken care of. it was on to the overall look. Because Crone's creates custom wooden frames, it made sense to somehow display their craft in the header so visitors would quickly get the idea of exactly what they do. Since I was working with pictures of frames, I decided to have them look like they were hanging on the wall.

I kept the left-side navigation, but made the categories more

A B D U T

THE

DESICjNEiR

Chris Pirkey] [ www.chrtspkkeq.cem

Pickey (that's what he goes by) is one of those jack-of-all-trades: however, he does claim to be master of a few. He cut h is design teeth in 2000 at the Daily News Journal in Murfreesboro, Tennessee, where he worked as a classified ad designer with no design degree. With the help of friends and hours of hard work, he quickly built up his knowledge, skill set, and experience.

In 2002, he and his wife moved to Indianapolis, Indiana. There he eventually became the graphic arts manager of Wild Birds Un Ii mited, the largest specia Ity reta i I franch ise specializing in backyard bird feeding. At Wi Id Birds he got his hands dirty in every aspect of design: print, Web, audio, video, interactive, packaqinq, and so on.

After five years, Pickey left Wild Birds Unlimited to set up shop as a freelance designer. That not only freed up time for his family, it also enabled him to devote more time to his other primary pursuit: being the drummer for the Jake Brothers ba nd (www.jakebrothersmusic.com) ..

A P P U CAT IONS USE 0: Ado be Photoshop (53 and Adobe Illustrator (53. II

[REAL-WORLD DESICjN MAKEOVER]

Star Wars Miniatures Packaging Gets a New Look client:

Wizards of the Coast] [www.wizards.com

before

~ f!t J izards of the Coast LLC, a subsidiary of Hasbro, lnc., is con, a .. sidered the global leader in hobby gaming. Based in Renton, Washington, the company employs more than 300 people. Originally founded in 1990 by Peter Adkison, Wizards rose to prominence in the hobby games market on the strength of the innovative and revolutionary trading card game Magic: The Gathering.

Wizards is the current license holder and publisher of the Star Wars Ro leplayi ng Game (RPG) and Star Wars Min i atu res. The first Star Wars RPG product was released in 2000 and the Star Wars Miniatures game sta rted in 2004. A new ed ition of the Star Wa rs RPG ru les, Saga Edition, was released in June of 2007.

According to Paul Hebron, Art Director for Star Wars Miniatures, most of their products had fallen into the trap of "same carton, just re-skin the graphics." Everything started to look the same and lacked

-+-- Age grade and call to action:

Make more readable without increasing visual space

Collectable game bug: Change shape, remove frame, and position away from il.lustra6on to allow for cleaner presentation of artwork

---Illustration: Allow art to overlap Star Wars logo to maximize visual space

shelf visibility. With the advent of The Clone Wars animated feature and TV series, Wizard's Brand team requested a redesign of the packaging for a fresh look. The timing couldn't have been better, as a full line of new products was being introduced based on The Clone Warsboosters, a starter set, map packs, and a scenario pack Objectives for the new packaging included:

• Reduce size of package while maintaining visual size of illustration and logo

• Consider unique packaging shapes to drive visibility

• Improve readability and message hierarchy by placement and color choices

• Show more miniatures on the package

• Create a distinct look for application to Star Wars Miniatures SKUs.

Back of package: --....::;i:iiiii:m;:;-~!!'1~ Key points should stand out

<--

~I== :"::--!IlIr ••

... -_._ .... _ .. _

-

- .. _-- .....

........... ..,--.,._ ... ,._. .. _.... I_.. .. _,.. -.... __

Product photography: --------.. ,....Ieii.~ .. Showcase miniatures with photos

Expansion name: Make more readable without increasing visual space

Contents: Change position in visual hierarchy for faster read

after

DESIGNERS: Paul Hebron and Leon Cortez

I'" J e invited our Brand and Sales teams to go with us on several " .. , j market walks to view our original packaging ina real-world environment. We considered placement, package condition, and visibility on the shelf against competitive products. I always try to be on the same page with the team before putting pen to paper, and retail is the best place to beg.in the process.

For inspiration, we explored beyond toys, qames, and hobby items by lookinq at anything that might stand out. Because of our tight schedule, we chose to elimmete some concepts at the sketch phase. Leon and I tossed ideas back and forth until we developed a concept that resonated with both of us. From there, I provided volume and scale information based on contents, factoring in our sustainable package goals (smaller package).

OUT

THE

DES I g N E R 5

Leon used Adobe Illustrator to create a die-line to scale. After several paper mack-ups and making adjustments to the die, we passed the information to our vendor for cost estimates and pack-out feasibility. While this was in process, Leon applied graphics to our preliminary design using Illustrator, Photoshop, and In Design. We used these mcck-u ps to present to Lucas licensing and our internal teams for concept approval.

The new boaster pack design reduced materials and sh ipping by 20%. Th is design also translated successfully for a II su bseq uent Star Wars M iniatu res prod ucts, including boosters, a starte r set, map packs, and a scenario pack. Star Wars Min iatures: The Clone Wars was announced as the best miniatures line at the 35th Annual Origins Awards in June 2009. The packag ing illustrations for th is series, by Terese Nielsen, were selected for Spectrum 15 and 16 as among the best in contemporary fantastic art.

Paul Hebron] [Art Director

Paul Hebron started working at Wizards in mid-2003 shortly after moving from Los Angeles. In Los Angeles, Paul owned a design studio for nine years specializing in entertainment-related design. His clients included Fox Entertainment, Paramount International, Saban, and Warner Brothers. Prior to establishing his studio, he was Director of Creative Services at Live Entertainment (which later became Artisan Entertainment and was purchased by l.ionsqate). Since 2003, he has worked on Star Sisterz, a collectable charm game for girls; Code Name Kids Next Door TCG; D20 Modern RPG books; and of course Star Wars Miniatures.

leon Cortez] [Senior Designer

After graduating cum laude from the University of Southern Colorado with a Bachelor of Science; Major in Art degree, Leon Cortez spent the next several years in the apparel industry designing T-shirts and graphics for Tyvek Jackets. In 1998, he started at one of the top merchandising agencies on the West Coast as a Sen ior Designer for their Consumer Products Division designing toy packaging. Working for til is fast-paced agency, Lean gained a lot of solid experience, which has allowed him to excel in his current position as Senior Designer for Wizards of the Coast since 2004 .•

------------------------[ the dig ita 1st u di 0 ]

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

and great execution, ]

[ARTISTIC EXpRESSIONS] JACOB {.7} (ASS

logo design from start to finish

[ ... .a great IDgD usually

comas down to tWD

things: a great concept

26

Logo design in today's world is totally underrated. People don't understand how important a good logo is and how valuable it is to their business. Let me guide you through the basics of what makes a good logo, while also walking you through the process of creating the identity and logo design for one of my recent clients, Vera, a limited liability company based in Miami, Florida. Hopefully, this will give you an understanding of what actually goes on behind the scenes while creating a professionally designed logo.

What is a logo?

To understand what a logo is meant to do, we should first know just what a logo is: It's one aspect of a company's commercial brand or economic entity, and a logo's shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other noncommercial entities. A logo's design should make us immediately recognize the company-cit should inspire trust, admiration, loyalty, and an implied superiority.

What makes a good logo?

A good logo is distinctive, appropriate, practical, graphic, simple in form, and should convey one message An effective logo usually has a concept, or meaning behind the logo, that allows it to communicate the intended message. It should be printable at any size and be effective without color.

With these thinqs in mind, it would be safe to say that a great logo usually comes down to two things: a great concept and great execution.

The design process

When creating a logo, follow a .Iogo desi.gn process that ensures the final design suits the client's needs (not their wants). Here's a list of what's essential to the logo design process:

• Design brief: Start with a questionnaire or interview with the client to get the design brief.

• Research: Conduct research focusing on the industry, its history, and its competitors.

• Reference: Look at logo designs that have been successful and current styles/trends that may be related to the design brief; however, don't follow trends Just for the sake of it. Longevity in logo design is key.

• Sketching and conceptualizing: Develop the logo design concept(s) around the above-referenced brief and research.

• Reflection: Take breaks throughout the design process to allow your ideas to mature. This also helps to renew your enthusiasm and get feedback.

• Positioning: Position yourself as a contractor or build a long-lasting relationship with the client; for example, the client tells you what to do or you guide the client to the best solution. The latter is usually best

• Presentation: Present only your best I.ogo designs to your client.

PDF format usually works best. You may also wish to show the logo in context to help the client visualize the identity.

• Celebration: Drink beer, eat chocolate, sleep, then start on your next project.

Getting the job

Now that you have an insi.ght into the logo process, let's go through it in more depth, using a. recent job as an example. When the CEO of Vera contacted me late last year (he found me through my blog), the company was looking for a complete branding package for a new business they were launching Not only did they want a logo and identity design, they also required the design of the actual product

After going through the Vera business plan, numerous ernails, and having them fill out a questionnaire (it's available on my website). I had a good idea of what the whole project entailed So, I did the math, sent them a proposal and agreement (never call it a contract!), and received a 50% deposit.

The brief

Before walking through the design process, here's some background information on the project along with the design brief.

Sparked by environmental concerns, many hotels and restaurants have recently stopped selling bottled water and, instead, they're serving either plain or filtered tap water. Vera offers restaurants, cafes, and hotels an eco-friendly bottled water alternative. The company uses the latest in microprocessor-controlled, waterpurification technology to purify, chill. and carbonate (if needed) tap water at the point of use.

Without going into too much detail, the brief was to design a "South Beach chic" glass bottle that made people "feel cool drinking it." The bottle should scream " practicality," "envi ronm entally conscious," and should be something that "a celebrity would be pictu red d ri nking." The target market would be high-end hotels and restaurants-places where people would expect to pay $7 for a bottle of imported water.

In its purest form, the brief was to create a logo that could be placed on a glass water bottle and portray all of these things.

Research and reference

After the brief was clarified, the deposit received, and the agreement signed, the research began. This included researching Vera's competitors, the industry, ta.rget market, location, other logos, and so on. Only after you've carried out a thorough research should you move on to the desiqn development

Sketching, reflecting, and developing

After the client signed off on the bottle shape and tag line ("Earth's Purest Drinking Water"), the project's next phase was to develop the logo. And this is where creativity comes into play. Based on the design brief and research conducted, this is where .1 let my ideas run wild.

I started by brainstorming and sketching my ideas and then experimented with them on the computer. A crucial part of this process is that I' took breaks between these sessions to reflect on the designs and get a fresh perspective on the job at hand. The challenge that

I had when creating the Vera logo was trying to incorporate "chic." "practicality" and "environmentally conscious" into one logo, while also making the logo look like it was for a high-end market.

Brainstorming ideas on paper

Here's a page of my original sketches. I know I'm no Picasso but it's the end result that counts. Remember: There are no bad ideas, just bad decisions.

Original sketches

Computer generation: As you can see, I had the idea of creating a "V" from two "leaves" of water. With a general idea in mind,

I experimented with the concept in Adobe Illustrator, creating some rough, vectorized logos.

v e ~O

Experimentation results in JIIustrator

27

r'" "" m

" '" :l'

» .n » N

:z m

o n --l

'" o

o

"'

E o u

ur z:

N « t:l' « I:

"' 0::

ur ,_

« ...J

28

---------------------------[ th e d j 9 ita 1 st u d i a ]

Tip: This is a good time to advise that you should always design a. logo in vector format to ensure that it can be scaled to any size .. And you'll note that I haven't yet added any color. That's because it's best to focus on th e shape and concept of the logo at the start of the process and then add color toward the end.

The concept for my final logo was based around two leaves forming the letter V, not just once, but twice. The middle V in the negative space suggests the shape of a leaf in a creative and dever manner, making it a memorable and identifiable mark. I left the bottom of the letter V open to suggest that the source was renewable-as if the leaves were coming out of the earth.

Typeface: After experimenting with a variety of logos, I then tried out typefaces Keeping in mind the considerations stated in the design brief, I chose Bauhaus Light for its geometric, dean linesthese type characteristics will give Vera the look of a modern, fresh, and susta inable company. Bauhaus Light is also a very pretty typeface, which makes it great for display purposes and

it looks great in both horizontal and vertical formats. The added spacing between each letter gives it a touch of class and luxury.

e

vera

r

o

Bauhaus Light works very well for both vertical and horizontal versions of the logo

Presentatlon and color

Now that the typeface and logo concept were finalized (though this is never set in stone), I sent through one concept to the client. Why only one? It's important to show only your best logo design concepts, not a large array of options. You're the designer and should know best. You're not there to say, "Here are 20 concepts, pick one," This may just confuse the cI ient.

The logo was approved straight away and we moved on to color choices. I experimented with a large variety of colors, keeping in mind how the logo would look on the bottle design and what each color would portray (your knowledge of color theory is vital here),

Experimenting with colors

After coming down to a few select colors that reflected the values stated in the design brief. I sent through these options and we agreed that the blue/light-blue variation was the best color for Vera.

e

vero

r

o

The final approved logo

Iime to celebrate

The client agreed to the final colors, logo, and tag line and sent the final 50% payment I then completed a mock-up of the bottle design in MAXON CINEMA 4D. The horizontal version of the logo is featured on the back of the bottle. (As this article is being published, the bottle is being manufactured in China and a website will follow soon thereafter.).

Mock-up of bottle

[ t: b Cass is 8 21-ye3,cold designer from Sydney, AustraUa, who freelances unde, his business "arne, Just Creative Design, which doubles as 8 popula, design blDg. Jacob's talent has] brought him m3ny awards and his work has been published in books worldwide. He's in the process of writing his own book focused on logo design. To learn more 3bout Jacob, visit

h tlpi /justcre~ tived~sign. com.

ALL IMAG ES BY JACOB (ASS UNLESS a Tl-mRW'SE NOTED

BY CHRIS MAIN

In a recent issue of Layers magazine, we asked readers to submit their favorite print, Web, and video designs currently in the marketplace. In turn, we promised to track down the original creators and force them to tell us their secrets (as it turns out, all we had to do was ask politely-everyone we spoke to was very nice and accommodating). Anyway, after going through all the submissions, there were two that really captured our attention: the GE Smart Grid Augmented Reality (AR) website and the Black Day to Freedom video by Rob Chiu. In fact, we asked so many interview questions about these two projects that we ran out of room for any of the print submissions. But don't worry, we've sent all the print submissions to Corey and

RC over at Layers TV and have asked them to cover "How'd They Do That?" in a future episode. So after you read th is arti de, be su re to keep an ey'e out on www.layersmagazine.com/layers-tv.



Changing Your Reality

AR will have you seeing things in a different way

When the GE Smart Grid Augmented Reality website was brought to our attention, our productivity took a major hit for a good 25-30 minutes. If you haven't seen AR in action, then you'll have to check this one out for yourself. So before you read any further, launch your Web browser and head on over

to http://ge.ecomagi'nation.com/smartg r'id/#!a u gmented_reality. Follow the instructions for Getting Started on the right side of the screen, because you'll first ne.ed to print a page to use. for the demonstration and you'll need a we'bcam. Don't worry, tale you r time. You'I,1 find that magazine pages can be very patient.

(What's taking you so I,ong?)

Oh, there you are. Welcome back. Pretty mind-blowing stuff, eh?

AR has actually been around for some time now, but it's a technol'ogy that hasn't quite made it into the mainstream yet, so it's still new to a lot of people" But as we were working o,n the story, AR seemed to be popping up in the news everywhere we turned.

According to the G E website, they used FtARToolKit (FL for FI,ash and AR for augmented reality). FLARToolKit~developed by Tomohiko Koyama (a.k.a. Saqoosha) and Ryolizuka~is an ActionScript 3 version of A:RTooIKit, which is the original C version of the application, ARTooIK,it was originally developed 10 years ago by Hirokazu Kato, a Professor at the Naralnstitute of Science and Technology in Japan, and then commercially licensed by ARToolworks (www.artoolworks.com).

,.'

Emotions in Motion

How video can help us better understand our world

The Layers' reader who recommended Rob Chiu, recommended his entire body of work, so we spent the better part of an afternoon reviewing all the pieces Rob had available at http://theronin.co.uk/Motion. From the technical beauty to the eye-catching, seernlessly integrated effects to the strong emotional impact, we found ourselves completely engaged in every single video,

Based in London, Rob has worked in the field of short film and motion design since 2000. Under the working alias of The Ronin, he has produced narrative-based works for clients such as l.eica Camera, BSC, Greenpeace, EMI Records, Nokia, Channel 4, and 20th Century Fox. His short films have been featured in a number of film festivals lincluding Edinburgh, onedotzero,RESFEST, and Clermont-Ferrand. In 2005, his three-minute, animation-based documentary on psychosisfor Channel 4JAPT Fi.lmswon the award for best animated short in Canada. His short films Black Day to Free~ dam and Things Fall Apart have toured extensively as part of the festival circuit, winning numerous awards along the way.

In fact, it's Black Day to Freedom that we're going to focus on here. According to Rob, the film was "created as a fictional backstory to the global problem of the displacement of peoples. It

Armed with this knowledge, we decided to start with ARToolworks and trace the path that AR took to end up on the GE Smart Grid website. (By the way, if you find yourself wanting to venture into the world of augmented reality, ARToolworb offers commercial licenses for both versions of the Toolkit. 'For the open source download of ARToolKit for noncommercial use, visit http://sourceforg e .net/projects/ a rtoolkit.)

In the Beginning: ARTooIworks

For the first stop on our journey, we'll speak with Mark Billinghurst from ARToolworks. Mark is one of the founders of ARToolworks and was also involved with developing ARToolKit with Hirokazu Kato when they were both at the Hum an Interface Techno.logy Laboratory at the University of Wash ington in Seattle,

ALL BlACK DAVTO FREEDOM IlLLlSTI1ATIONS BY STEVE CHIU

portrays a city in turmoil with the loss and tragedy of a young family at the center of the tale." After we recovered from some the very powerful imagery contained in the film, we learned that Rob animated it entirely in After Effects~he hadn't used any 3D applications at all. It was time to ask Rob some questions.

Layers: Lets begin with a little bit about you. You originally started out as a print designer: When did you first know that you wanted to be a filmmaker?

Rob: I've always wanted to tell stories whether through music, design, or film. I started in print design, as that was the easiest route back then, I was heavily influenced by the likes of David Carson, Neville Brody, and Attik and was drawn into the world of Photoshop. I naturally

r> -< m

" "'

J: > .0 > N .... :z m

o n ...

ru o o <II



E

" u

'" '"

N ra L:l'"

"' E

LI1 L

'" ,_

"' ...J

-

Changing Your Reality (continued)

Layer5: So, Mark, would you define the term "augmented reality" for us? Mark: Au g merited rea I ity is te chnology that overlays com pute r graphics onto the real world in real time to create the illusion that three-dimensional virtual images are part of a user's real' environment. Computer scientist, Ron Azuma, says that augmented reality has three key characteristics: It combines real and virtual images; it's interactive in real time; and the virtual' images are registered in 3D.

Layers: How did the concept for augmented reality first come about and how was it developed? ..

Mark Augmented reality has a long history, beginning..!"ith early experiments with head-mounted displays by Ivan Sutherland over 40 years ago. Since then a lot of interesting resea rch has be.en done by

Emotions in Motion (continued)

moved into After Effects after discovering that it was relatively similar to Photoshop with the added bonus of a Timeline. The first version I used was 3.1 , so its going back a bit now. Whi,le I was working in a designa.gency, I studied for a BA degree in Graphic Design and used the course as an output tor my personal work. After teaching myself the basics of After Effects, I submitted a short AE-based film as my fi nal piece, and then used that to launch my' career in moving images. l'rn now slowly moving away from pure motion design and moving into live action film directing-but it basicailly aJI evolved from a love of print design.

Layers: You're also a photographer. Does your photography play a factor in any of your productions?

Rob: Mainly, I use photography as a tool to ex.periment With framing, lenses, depth of field I then take away what I've learned from taking stills and apply it to my f 1m-based work. It a Ilows me to get on the same page with a DoP [director of photography] really quickly and definitely allows me to be more confident when directing something. Secondly, I use my photography for storyboarding and style



• • the military and in university tn'd industry laboratories-but using

very expensive, specialized technology. However, in the last 10 (,

years, AR has become cheap enough and easy enough to'use that

it's getting fa r more widespread. A key pa rt of this was the develop-

ment of ARToolKit by Hirokazu Kato 10 years ago. That soffware'

uses computer vision to track the user's viewpoint and overlay virtual

images over live video of the real world .. For the first time, this made

it easy for programmers to create AR applications. Now, people

can have an A'R experience through their game console, personal computer, Web browser, or mobile phone, so millions of people can

easily have access to the technology.

Layers: What kind of hardware and software is needed to create and view augmented reality?

Mark: To view AR content, a user needs a camera, computer pro~ cesser, and display. For most people this means plugging a USB camera. into their desktop or laptop computer, but other devices

such as mobile phones can also be used. To create an AR experi-

ence, people can use low-level tools such as ARTooIKit, in which

case they'll' need to be comfortable with computer programming. However, the development of FiLARToolKit means that people with

Flash programming experience can build their own AR websites.

Most recently, tools such as BuildAR by the HIT Lab NZ (www.hitlabnz .0rg/wiWBuildA'R), also based on ARToo,IKit, can be used by nonprogrammers to easily create AR scenes.

frames. When I boarded the Webbys intra, I used a series of photos that I had taken over the years as a reference for the client as to how I intended to shoot and grade the piece. Lastly. I occasionally do the odd illustration for magazines such as .net or Computer Arts and I base my designs on photographs that I take.

Layers: Can you give us a short list of the equipment that you use, including cameras and software?

Rob: It all depends on the production. I don't own that much klt and the stuff I do own is used mainly for personal projects, as it's not professional gear. ·1 recently shot a short film on two RED cameras-one hand-held, the other on steadicam---but there's no way on earth that I could afford to actually own this kind of gear. As far as my own gear, I own a couple of Macs-a MacBook Pro and an older GS tower, which I'm soon getting rid of for a new iMac due to the space limitations at home. Cameras I have include a Canon HV20 HDV camcorder with a Letus adaptor with Nikon lens mount. This allows me to put prime lenses on the front of the Canon so that I can get some depth of field. I shot Left Unsaid entirely with that setup. I also own a Nikon D200 with a few lenses .. Installed on my Macs are CS4 Master Suite, Final Cut Pro, and some fontmanagement programs but that's about it really.

, '. ... ~

Layers: Where do you currently see augmente.d reality heing used BOd how do you see it being used in the future?

Mark: Augmented reality has many possible applications. Currently, it's being used as a fantastic marketing tool, and also in computer games and certain niche areas such as medical visualization and industrial manufa.cturing. In the future, mobile phone-based AR will become more common and used for activities such as personal navigation or location-based social networking. [See "AR goes mobile. "~Ed.11 think the technology also has grea.t potential for educational applications that teach in entirely new ways.

AR goes mobile

Wa.nt to see some really cool AR applications for mobile? Then check out the Wikitude AR Travel Guide (lWIw.mQbilizy .cornl. Developed for the Android p'latform, this app is based on Wikipedia, Gype, and Panoramic. Through the use of AR, digital information about landscapes and landmarks is overlayed on the live view image of the cell phone.

SPRXMobile also just recently announced their first mobile AR browser at http://layar.eu. Just like Wikitude, Layar uses a combination of the phone's earners, GPS, and compass to overlay real-time dig ita I infonmation on top of the mobile device's screen. Layar can help you find ATMs, houses for sale, hotels, etc. Be sure to watch the cool video demo. Currently; this app is also only available for Android devices, but we can't imagine that the iPhone would be too far behind now that the new

."

Layers: Where did the concept for Black Day to Freedom come from and what was your ultimate goal for the film?

Rob; Way back in 2004, The University of Huddersfisld approached me about filming some computer training sessions they were putting on for asylum seekers in the UK. I ran around followinq these courses and quickly realized there was little point to the film and it Wa.S going to end up being a missed opportunity. ,I proposed that we should talk to the asylum seekers, find out why they were here, and have them write some poems and stories on what had happened to them that made them leave their homes .. II then took all this material and collated it into one story, which became Black Day to Freedom. The name came from one of the poems; it's actually incorrect, as it should be Black Day for Freedom, but as that was what was written on the paper I kept it, as it felt right

My ultimate goal at the time for the film was to show people what was happening overseas with the whole invasion of Iraq and the mass displacement of people. At the time there was a 'lot of negative press about asylum seekers takinq all the money and housing, but no one really gave much thought to why they were even here. We packaged it all up as a DVD with a book that featured over 30 illustrators and designers worldwide and then sold it online for a short while. The film did pretty well in short film festivals and really helped cement me as a motion designer and short filmmaker. Even to this day when I talk at conferences, this is the most well-received piece out of everything I've done. I'm really proud of it!

;

33

Layers: When did you first learn abqut ARTooiKit, and why did you feel there was a need for a Flash version?

"' o

o

"'

r"" -<

m

" Lii

Let There Be Flash: FLARToolKit

Now it's time to move on to the Flash version of ARTooIKit. We think this is the version that most of our readers will be interested in, As mentioned earlier, one of the developers of the FLARTool Kit was Saqoosha, eTa of Katamari lnc. (http://katama!tco.]pl-a Web creative company in Japan. He also has a blog at http://saqoosha.netlen.

3' :0- .0 :0- N

" m

o " ....

Saqoosha: I read an article on ARToolKit in June 2007 [http:// kouqaku-navi .. netiARTooIKit.htmII. That was my first contact with A,RTooiKit The original C version of ARTooliKit required you to download and install the application to experience AR. Most people don't want to bother with a procedure like that.

Butl was very interested in AR technology and intended to tell a lot of people about ARloolKit Flash Player is widely installed, so I thought that if AHToolKit could be used on Flash Player, many people could easily experience AR

Layers.: What kind of projects have you used FLARToolKit for? Saqoosha: My first project using FLAH was Desktop Fireworks [http:// vimeo.com/1634128]. This was very experiments I and a very simple example of how to use FLAR I recently did another F!LAR project for a campaign that supported the Japan National Soccer Team with messa.gesfrom supporters. The messages input at the stadium fly out from the marker Ihttp://vimeo.com/50123991.

Layers: Why did you decide to use only After Effects to animate Black Day to Freedom?

Rob; Mainly because I had no other way of achieving the epic scale of the film with any other tooL It was impossible to film something like this, and at that time I had no idea how to even go about doing that. The other reason is that I have, absolutely no working knowl'edge of any 3D program, so I decided to do it in AI, which was a chalj.enge, but I think gives the whole piece a very unique look and tone.'

,

• •

.



E

" u

ru

'" N ra t:J"

'" E

'" L

'" ,_

'" ...J

Changing Your Reality (continued)

And North Kingdom Said It Was Good.: GE Smart Grid The GE Smart Grid site was developed by North Kingdom (www .northktnqdom.com), a Swedish interactive design firm founded in 2003. According to North Kingdom's mission statement, "Our talented team of artists have a single, unified vision to push brands to new places, bringing every facet to life through interaction, imaqination, and innovation-it's what we call our design DNA" They've proven this with their creative use of AR In addition to GE, they've also done work for Coca-Cola, Toyota, and Vodafone. We'll speak with one of North Kiingdom's co-founders, Roger Stiqhall,

Layers: When Goa.dby Silversfein & PartnerslGE first approached North Kingdom about the Smart Grid project, was AR already part of the grand scheme? How did the AR p~rtion of the proj;ct progress from beginning to end?

Emotions in Motion (continued)

Layers: Could you briefly run us through how the film was created?

Rob: After writing out a rough treatment, we shot friends and ourselves for the characters; 'in fact, anyone we cou Id get to stand in as a reference. My brother, who is an illustrator, then hand drew each character and created the illustration style. These were then individually scanned and cut out in Photoshop. I created the [buildings u.sing textures and line. drawings-a bit of a mixture of the two really, Everything was built as a three-dimensional object in AfterEffects, so if you look at it properly, it's basically just loads of boxes, etc., but it worked out okay by using textures and trying to push AE as far as I could.

I even managed to just about pull off some helicopters! There was one scene where the helicopters are flying above the buildings; it's a 1 O.seccnd dip and it took forever to render out because of the complexity of th e buildings. In hindsight, I would have created some low-res proxies of the buildings, but at the time I was sti II learn i ng how to do it and kind of making it up as I went along, so I putthe camera really high up and used the full-size buildings, which were something like 6000 pixels high each. Crazy!



Roger: Goodby were the ones to bring up AR as a potential' ingredient for the campaign. For a long time we had been curious about' AR, but never actually got our hands really into doing it. Since the. field was quite unexplored to both us and Goodby, we got a couple of weeks to do R&D, to figure out what was achievable. We had a lot of fun (and certainly also frustrating times) trying to make the most out of the AR experience.

We had a very organic and open approach to the development of the AR experience. We set out with the idea that the object should come out of the marker and somehow be interactive, and then we added new features along the way. Some ideas were tested and canned, the ones you see survived. The simplicity of FLARTooiKit is its main'feature, so the implementation of the kit was very fast-basica.lly the first thing we did.

Layers: Can you tell us a little more about how the markers work for AR? How important is the design of each marker? And do you really even need a marker at all for the FLARTooIKit?

Roger: FLARToolKit only works with so-called template markers (black frame with a design inside), but there are plenty of other al.gorithms that use other kinds of markers or, as you suggest, even no marker at all. This is called natural feature tracking.

Layers: In certain sections of the film, the scene switches to color for a brief second and jumps around. How does this technique, as well as your general use of color throughout, add to the overall impact of the film?

Rob: I came up with that effect by mistake. I had rendered out a clip of the scene with a sky and one without, as .1 was trying to decide whether to go with a sky or without. I was turning one off revealing the other and back on again and thought that it looked pretty cool, So when the moment of violence real:ly starts to get crazy, this whole qlitch-type effect occu rs, jolting the viewer momenta rily.

:1 think it worked pretty well when combined with the audio dropping out except for the sound of a reporter's voice. It's actually my favorite scene in the film and the one people usually ask me about. Throughout the rest of the film, there's very little color, which is why it works so well, I guess.

, '.

._ ~



When designi,ng a template marker, the most important thing is that the desiqnmside the frame must not be mirrorable-if you turn it around, it should look different from all 'angles. For example, if you put a circle in the middle, when rotating the marker it 'looks the same all the time. If you put that circle in one corner, the design looks different in all angles. It's also important to have very little detail and high contrast.

Layen: Did you use any other apps for the AR besides Flash and the FLARTooIKit?

Roger: Yes, we used 3ds M ax to modeland animate the 3D objects, Photosh op for all the textures, and Soundbooth for the sounds.

Layers; How advanced does a Flash developer need to be to really take advantage of FLARTooIKit?

Roger: You don't need to be a. star. It's very simple if you have a basic understanding of 3D graphics. There are loads of very good tutorials that any AS programmers could wrap their heads around. [See llWhere to start?"-Ed.[

Layers: Does North Kingdom have any future plans for AR? Roger: Certainly, this is a fun and eye-catching area, so we'll continue to play with this as long as we think we can create interesting experiences in this field. We are concepting some interesting. A'R ideas that hopefully will come to life this fall

Layers: We were very impressed by the use of shadows in the film. Why does a shadow or silhouette of a person sometimes have more impact than the real thing?

Rob:. I had some drawings of soldiers but quickly realized that they didn't come across as powerfully as I. wanted. By only seeing the shadow, we're not 'led along a path that says this is a soldier from country A or B. We actually don't know whether these soldiers, if soldiers at all, are here to help or to kill, The scene at the end with the guy with his hands on his head oriqinally had a shadow of a soldier

as if he was being captured. I rendered it out and the shadow didn't • appear, and I realized that without the shadow, you're either looking

at a guy who is being arrested or you're looking at a guy regretting

what he has just done. I liked that it was up to the viewer to decide,

and more importantly, it actually says more by showing less. •

Layers: How do you think digital technology has helped the independent filmmaker?

Rob: I think it's now so easy to go out there and make a film without any financial backing or support. You can basically just make a film with a phone camera and a laptop these days. These are good times to be a filmmaker.1I

r~ ..: m

" LfI

~ :to ...r;l :to N

2 m

Practical applications

See how BMW is putting augmented reality to work. Visit www.bmw.com!com/ en/ owners/se rvi eel augmented_reality_workshop_1.html and check out the demo video under Related Topics.

o n -l

ru o o

"'

Some not-so-practieal, but real.ly cool, applications

If you're a Star Trek or Transformers fan like we are, then you'll get a kick out of these AR experiences from Total Immersion (www.t-immersion.com). You',II probably need to mstall the plug-in for your browser, but it's worth the effort.

Where to start?

For a video tutorial on the basics of auqrnented reality and how to get started, visit www.gotoandlearn.com/ play?id'" 1 05.



he designer is the first person to get blamed when a website is sludgy .. The engineers start asking

g.. ...

about the rounded corners, the product manager wonders about the choice of fonts, and the client starts

noticing a dip in sales or retention. A designer who isn't armed with knowledge about periormance can oflenfall into the trap of blaming the rounded corners-they remove important design elements or engaging features, just hoping the site will get fasler.

With clients demanding more video, Flash, and interaction from our websites than ever before, how do we fit in all that functionality and have a fast site that users wHllove? AHerreading the 10 tips in this article, you'll know what matters to performance (and what doesn't!) and be ready to design fast websites.

Speed Tip #1.: Create library of smart objects

Duplication can happen in any project when we 'lose sight of the designs we've already created and add new features that are just too similar and don't add value, The rule of thumb is that if two desiqns are too similar to be used on the same page, they are too similar to be used on the same site. Choose one.

-

Rounded comers from Yahool Personal Finance are too similar Most users aren't sophisticated enough to notice the subtle variation. Each rounded comer module requires additional images and CSS, which slows the page.

A library of smart objects can be used to design new pages in your website, The g'oal is that new designs should only be created when the existing objects are insufficient. Perhaps you're wondering what I mean by objects? lmaqine that all the different parts of your designs were like LEGO bricks that you could mix and match to create new and interesting pages. If contours, backgrounds, block headers and footers, tabs, drop shadows, and lists could all be combined in different ways, it would allow tons of flexibility in page layout and design. The library allows you to quickly find out what objects already exist, and how they were intended to be used. Rather than hunting around in multiple Photoshop and Illustrator files on different designers' computers, a library is a one-stop-shop where you can store these building blocks as smart objects.

The library should be something like a style guide, but less formal, and the objects should be stored in such a way that we can quickly grab an existing rounded corner box, stretch it to a different height and width, and pop it into a mockup for a new page. New objects should be added to the library when the design has stabilized, and stale objects should be removed so they aren't inadvertently used. A library can help you avoid unnecessary duplication,

Speed Tip #2: Use consistent semantic styles

When a new site is born, the style goals are usually dear. As the site evolves, things tend to get a. bit muddled as more people touch the desiqn and the dient changes direction multiple times, The more consistent your styles, the leaner the code will be. Explain to developers not only what something looks like, but when and how it should be used (semantics), and the code will be much more efficient.

A Web developer might call a title "bigGrayHeading," then a few months later, the client prefers blue. If the developer understands your intentions, she can call it "section" or "product," which

will be very clear to people building new HTML pages. Naming layers is helpful, but your thought process won't always be obvious from the PSD. Nothing can replace good communication,

Speed Tip #3: Separate contour and background color

Photoshop naturally makes modules that are transparent on the outside. You choose fill and stroke colors, and it does the rest On the other hand, you can achieve truly fast websites only if you separate contour from background and content. The goal is to be able to combine any contour with any background color, header, footer, image, or other content.

lorem ipsum dolor sit 2met. eensectetue i1dlpisidrtg eM, se-d do elusmed temper nddldont U1 labore et dolan! magna allq ua. Ut enlm ad m nlm vtnli5nl, quls nonrud exerciUloon ullamco

labor is nisi lit alitJulp ex ea commodo consequat.

The same basic glow combined with a transparent (top), blue (middle), and gray striped (bottom) background. A contour that's transparent on the inside requires careful selection of pixels and progressively enhanced PNG8 to keep the curve as smooth as possible,

exe rpt

Body

Foot

The same contour can also be combined with different tvesdets. footers, or even content and images. Because it's tra nsperetn on the inside, the design has loads of flexibility and is very fast..

::17

r» -< rn

'" "'

:z rn

o " ....

o o

'"

E

o u

N -a lJ'

"' E

"' L

'" ,_

'" ...J

Unle55 you're willing to hOlve souare corners in Internet Explorer, yo [) can't have a modu Ie that's sim ulta nee us Iy rra nspa rent on the inside and outside. A module that's above a variable background like an image, gradient, or text won't be as flexible end the site may be slower.

Speed Tip #4.: Optimize images and sprites

Most designers know about the Save for Web feature in Photoshop, but you may not know that you can make images even smaller using techniques that cause absolutely no loss in quality. Pixel. for pixel, the irnaqe is exactly the same, except the file size is smaller. First, choose a reasonable quatity via Save for Web.. Next, upload images to http://smush.it, and any wasteful image bloat win be removed. Most sites can remove between 1 Q....40% of the total weight by putting their imaqes on a diet!

Speed Tip #5: Avoid nonstandard browser fonts

One of the ma in cornpla i nts I h ea r about design ing for th e Web is the lack of typographical control. You want beautiful fonts, but for the moment, the Web makes that impossible. As a workaround, designers often create headings, buttons, and other elements with the text baked into the background graphic.

This can slow the site to a crawl. Even good ideas, like cornblning background images into C5S sprites, can have unintended consequences when we make seeminqly innocuous design decisions. Sprites grow and grow as more text and background color combinations are created .. Text should be real HTML text, not images. This is one of the first th ings to check when a site is exceptionally slow.

al r no ..... wilh I-CI [k

Add loCm will' nu T'ItO D.ly SIIIppIng

Amazon sprites include text as images, a practice that makes their sprites larger.

Speed Tip #6: Avoid height alignment

Height alignment with CSS alone isn't really viable, and still requires expensive JavaScript. Every time your script jumps through the elements on an HTML page, the site will get slower. The more times it happens, the slower it will be. Height alignment requires a lot of these jumps. Insofar as it's possible, avoid designs that require height alignment.

Speed Tip #7: Choose your hling carefully

Every site tries to have something special-a design element or feature that sets it apart from other sites in the same space Unfortunately, if you add too many special touches, frustrated users will only notice how slowly the site loads. Most of the design should use shared elements thatare common and consistent across the entire site. Save the exceptions-the bling-for high-impact situations that really make your site stand out.

Avoid large images or Flash below the fold and in secondary tabs, few users will make it that far, particularly if your site is slow. Every time you consider adding bling to the site, ask yourself how that particular element wi:ll impact the user experience? Is it worth making the site slower?

Keep in mind that tolerance for both latency and visual decoration are often market dependent. Users don't always distinguish Web and desktop applications, so their expectations will be higher. They may also be more or less tolerant of slow pages depending on their motivation for visiting the site, for example, PBS Kids versus M int.com. Be aware of market constraints, and avoid one-size-fits-all bling.

Speed Tip #8: Be flexible (height and width)

Output from tools such as Photoshop is fundamentally different than webpages, and in some cases, this makes it more challenging to design for the Web. In Photoshop, you create a box, set its stroke, choose the radius of its rounded corners, and specify a height and width of, say, 393px. On the other hand, for the Web, most container objects should be height and width agnostic. Why is that?

Changes in module wjdth, background color, or background image are OIn excellent exempte of module reuse on Yahoo! Personal Finance. The module can even contain a carousel.

Setting height or width in pixels limits the ways that you can reuse an element. Reusi:ng the same element in different ways is great for performance; the user already downloaded the images and CSS, so it's very fast. Grids should control the w,idth and content should control the height. That way, when you add another paragraph, the rounded corner box will grow taller to accommodate it, More about grids in the next tip.

Speed Tip #9: learn to love grids

Website performance is all about abstracting reusable elements. Grids are a great way to do just that. Familiarize yourself with the grids used on your websites. Sometimes a few pixels larger or

continued on p. 40

Right inside Photoshop, create stunning C55 rich, standards compliant websites using your own designs, and without writing a single line of code, 5iteGrinder does it all in just minutes, and even lets you build automated photo galleries, Flash slideshows, C55-driven menus, and so much more, into your website. Best of atl, your gorgeous designs remain looking just-as you created them ... gorgeous.

E

o u

N m lJ'

"' E

LI1 L

'" ,_

"' ...l

lJ

40

smaller means your element wil.1 fit an existing grid and you can avoid slowing the site with custom code,

Grids may be used to divide any area into subsections. Gutters are sometimes included.

When choosing a grids system for a new site, it can be tempting to choose fixed pixel widths, but consider using percentages as they respond better to changes in avera II site width when, for example, the number of columns varies or a redesign widens the overall layout. Try the liquid grids from my Object-Oriented (55 open source project to see this effect in action (http://wiki.github .com/stubborn ell a/ OOC5S).

-- __ .. - """ .... .".. art1a. ~ ~ ... .... _ ... - - _"",,"tii"O! __ ....

..... -I>l'--."

,~t!IIi!:f'lill~

The same thirds grid divides the main column of the page and a rra nge5 the content, in this case. photos of sweaters on La Redoute. Using grids consistently throughout a design helps the page load faster as the C55 fiJe stays Jean and efficient.

Speed Tip #1 0: Count your suitcases

Weigh them, too. Part of figuring out how to make your websites faster is accurately assessing how bad things have become. This is easier than it might seem, There are two simple things that are responsible for most performance problems:

• Too many components is kind of like arriving at the 'airport with four pieces of checked luggage and three carry-ons, Each JavaScript, CSS, image, Flash, sprite, etc. counts as one component. Having around 50 components is normal, but if you want to fit more functionality into a faster page, you'll need to bring this number down.

• Out-oi-control page weight is like the traveler who arrives at the airport dragging suitcases so heavy that the baggage handler can't even get them onto the belt. Websites that are too heavy wil.l always be slow; keep in mind that most of our users don't have the fancy computers and fast connections that we take for granted, Page weight is usually measured in kilobytes (which can be abbreviated KB or K). The avera.ge site is around 350K, but with the techniques in this article, you can do far better than that,

First, install Firebug (http://getfrebug,com), a free extension to Firefox.ln Firebug, click on the Net tab, make sure All is selected, and scroll to the bottom. You'll see total weight and number of components listed in the last row. Compare with industry averages or competitors' websites to know where you stand. Dreamweaver shows file size and estimates download time, but components aren't measured properly, so it's best to use Firebug,

•. _ ._ "'

.. art~Y:iII

l1li "'.' ........

.' dll'I-.u,,,,,,,,,,

"COII"'~~'" 1'£n'1~.1

iT'r11l"""1~ ,no

Firebug lists total components (called requests) and page weight (KB) for the Yahoo! search results page.

The finish line

The designers I've been fortunate enough to work with have been amaZing user advocates, relentlessly focused on creating a more interesting and va lua ble experience, After reading the 10 ti ps in this article, you're ready to make lightning-fast speed and interactivity part of that user experience.

Nicole is an evangelist, front-end performance consultant, C55 ninja, and autho, She started the Object-Oriented C55 open source project, which answers the quesUon: how do you scale C5S for millions of visitors or thoussnos of pages? She also consulted with tile W3C for their beta redesign, and is the co-creator of Smush,it, an image optimiZll- 60n serwce in the cloud. She i, p."ion~!e ~bout C55. Web ,!.nd.rd" ~nd sc~l.ble front-end ~rchitecwre for I~rge comrnerciel web,ite,. Nicole ,pe~ks ~t conference, .round the world, including The Ajax Experience and Web Directions North. She co-authored Even Faster Websites, where you com learn all abo LIt image optimization, and blogs at http://stubbornella.org,

II N DA lACKS

E

o u

nr :::

N -a

"" '" E

"' '-

nr ,_

'" ...J

42

glitch-free panoramas and smooth water

Photomerge in Photoshop (54 does an amazing job of aligning and blending panoramas, but occasionally you run into an image where there's a glitch that has to be fixed manually. In this tutorial, we'll take a look at panorama alignment problems and explore various strategies for fixing them. We'll finish with a look at how to get great-looking moving water in high-dynamic range (HDR) shots.

[A pANORAMA ALlyNMENT yLlTCH]

--------------------------------------------

In most cases, the seams created by Photomerge are very successful, but sometimes it may have "issues." This panorama was made from three horizontal ima.ges taken in Santa Fe, New Mexico. And no matter how many times I've tried to get Photomerge to blend these images, it always creates an alignment glitch at the top of the locomotive, Just above the windshield. In this section of the article, we'll create the initial panorama-glitch and all-and then explore a few different ways to try and fix the problem.

-.

-

[CREATE THE PHOTOMERyE]

To experience the steps from the beginning, launch the Photomerge process. I n this tutorial, we'll launch it from Adobe Bridge by se I ectin g th e three th u m bna i I s an d choosi ng Too Is> Photoshop> Photomerge. In the Photomerge dialog, leave the Layout set to Auto and make sure that Blend Images Together is checked. Click OK.

!II you'd like to download the image. used in this tutorial to practice th es e technique s, vi.~ www.l~yer>m.g· az ine.com and naviq a te to theMaq az ine.ection.Alllile.~ re for personal use only.]

[INITIAL EVALUATION]

At first glance it might seem that the most straightforward way to tackle the problem would be to edit the layer masks that Photomerge has created. The problem w.ith this approach, however, is that there are three layer masks and each one is precisely aligned with the other two. Although it's not immediately apparent in the blended result, there's also a problem created by the auto blending, which has changed tonal values in the sky to match the layer masks. Editing these masks wi II reveal this tonal mismatch and create additional problems.

[TURN OFF THE LAYER MASKS]

To see the potential problems created by the auto blending, Shiftdick on each of the layer masks to temporarily disable them You can see an obvious variation in the sky tones just above the cab of the locomotive (in this illustration, the image was darkened with a curve to make these tonal changes more visible). The tonal variation in this area is in the exact shape of the same area of the layer masks for the Train Middle and Train Right layers.

~ ~

[pHOTOMERCjE, TAKE 2: NO BLENDINCj]

Before we try any complicated patching or cloning repair jobs, let's see if we can coax a better result from Photomerge. Close the first image without savinqit and return to Bridge. With the three thumbnails selected, choose Tools> Photoshop> Photornerge In the Photomerge d ia log, leave the Layout set to Auto but uncheck th e Blend Images Together option Click OK_

Photomerge, take 2 witil no blending

Phoromerge, take 2 with rearranged layers

I

[TAKE 2: REARRANyE LAYERS]

For this image, Photomerge has definite ideas about how the layers should be arranged. But one obvious way to try and fix the problem is to simply rearrange the layers so that Train Right is above Train Middle. H opefu Ily, th is wil,l add ress th e problem of the a li gnm ent error on the roof of the locomotive in the Layers panel, rearrange the stacking order of the layers so that TrainRiqht is the top layer, Train Middle is in the middle, and Train Left in on the bottom.

43

-z m

o ro ---<

ru o o

'"

E

o u

N ru L.:f1 m E

"' L

nr ,_

m ...J

44

[MANUALLY ALI~N LAYERS]

Even though we turned off the blending in thePhotomerge dialog, there are still a couple of automated features left for us to try. To nudge these features in the right direction, we'll manually align the layers. Make the Train Right layer active. Double-click the Zoom tool to zoom to 100%. Select the Move toolM and use the Up and Left Arrow keys on the keyboard to nudge this layer up and left until the "Au in the word RAIL aligns with the same letter on the middle layer. This will also al ign the top of the train.

I:

[CUSTOM LAYER TRIMMIN~]

The letter "A," which we just aligned, could conceivably still cause some problems, so let's fix that. Make sure the top layer (T rain Right) is active, choose the Lasso tool (L), and set the Feather value in the Options Bar to 0 px. Make a lasso selection around the letter "An in RAIL and press Delete (PC: Backspace) to delete this chunk of pixels. Press Cornrnand-D (PC: Ctrl-D) to deselect.

[MODIFY THE LEFT SIDE]

Now let's inspect the left side of the image. (reating a seam through the back of this older train car makes no sense. It's better to choose a less-complicated sea.m: on the far side of th is car in the backg round of th e image, where the newer RAil RU N N ER cars can be seen in the distance. Use the Lasso tool with the Feather set to 0 px and make a selection of the part of the Train Middle layer that overlaps onto the Left side layer. The right side of this select.ion should be placed in the distance through the new train ca rs (see ill ustrationl

ill

[MORE CUSTOM LAYER TRIMMIN~]

--- - - -- - -- -- -----

Make sure that the middle layer-Train Middle-is active and press Delete (PC: Backspace) to delete the selected pixels. (In the illustration we hi.d the bottom layer-click on its Eye i.con-to clearly show what areas were deleted) Deselect.

Now zoom in for a closer view and make the Train Left layer active. Use the Move tool M and the Down and Right Arrow keys to align the layers along the seam in the background where the train

cars converge.

[AUTO-AllyN LAYERS]

In the Layers panel, click on the Train Right layer, Turn this layer's Eye icon off and on several times and you'll see how the locomotive isn't aligning with the same areas on the underlying layer-th isis what's causing the alignment glitch.

Make sure the visibility for all three layers is turned on then select all three layers by clicking on the top one and then Shift-clicking on the bottom one. Choose Edit>Auto-Align Layers. In the dialog that appears, choose Auto for the Projection method and dick OK.

[AUTO-BLEND LAYERS]

Now when you turn the top layer off and on, you should see that the locomotive is much more closely aligned with the layer underneath. Male sure that all three layers are still selected in the Layers panel and choose Edit>Auto-Blend Layers. In the small dialoq that appears, choose the Panorama option and make sure that the Seamless Tones and Colors box is checked. Click OK. This time, the blend is successful and the alignment glitch on the top of the locomotive is no longer present.

IIC

[RAIL RUNNER DEBRIEFINy]

As a final step, use the Crop tool (C) to crop the transparent areas surrounding the image,

Most of the time Photomerge works great but for those times when it doesn't, the techniques that we've covered in this tutorial are some things you can try to get a better panorama merge from multipleimaqes. For some images you may need to go even further to touch up alignment problems, for example: using the Clone Stamp (5), the Healing Brush, or creating patch layers, All are good skills and techniques to be aware of when these issues arise,

[how to get good moving water in hdr]

[A SOLID NEUTRAL-DENSITY FILTER]

One of the most common questions I'm asked about HDR photography is how to deal with the strange artifacts that commonly appear in moving water, I use a solid neutral-density (ND) filter to cut back several stops of light: Less light coming through the lens means the camera must use a much slower shutter speed than would normally be feasible in daylight conditions. With long shutter speeds of one second or slower, rushing water is rendered as a smooth, silky blur. Not only does this look cool, it also hides the usual HD'R artifacts that often appear in moving water.

45

-z m

o ro ---<

ru o o

'"

E

o u

N ru L.:f1 m E

"' L

nr ,_

m ...J

46

, .. 'I

[CREATE THE ItHIAL HOR IMACjE]

Let's explore how good water can look with an HDR image made from four exposures taken in Camden, Maine .. I shot the images using as-stop, solid ND filter with shutter speeds ranging from 1/4 seco nd to 2 seconds.

In Bridge, select the four source exposures and choose Tools> Photoshop>Merge to HDR. When the Merge to HDR dialog appears, make sure that the Bit Depth is set to 32 Bit/Channel and dick OK.

~l

[CONVERT TO 16 BITS]

After the merge is done, choose Image>Mode> 16 Bits/Channel to bring up the HDR Conversion dialog. For the Method, choose Local Adaptation from the drop-down menu. Set the Radius to 16 px, the Threshold to 0.50, and adjust the Toning Curve and Histogram curve as shown in the illustration (if you don't see the curve, click the down-facing triangle to show it). Click OK to apply the conversion ..

-,

--

f~ .,.,k ----~----------

""" ..

[ADD SHADOWs/HICjHLICjHTS SMART FILTER]

Control-click (PC: Right-click) on the Background layer and choose Convert to Smart Object from the menu. Then choose Image> Adj u stm e nts> Sh adows/H igh lights .. I n the d i a I og that app ears, dick the Show More Options checkbox to reveal a.11 of the sliders and set them as shown in the illustration. This will help to balance out the tones between the bright sky and water and the rest of the image. Click OK when you're done.

[FINAL CURVES ADjUSTMENTS]

Open the Adjustments panel, click the Create a New Curves Adjustment Layer icon, and slightly increase the contrast as shown in the Overall Contrast illustration. Add a second Curves layer and adjust the curve as in the Darken Skyillustration. Open the Masks panel and click the Invert button to invert the mask to black. With this layer mask active, use the Brush tool (B) to paint with white at 30% Opacity in the sky, trees, and rocks to darken those areas. As you can see from the detail view of the stream, the slow shutter speeds make the water look great with no visible H DR a rtifacts. III:,.J

[ Se".n Dugg~n ~s the co·author oi Tne Cr€ativ€ 0 ig ita I Derkroo m and Photosh op Artistry, He te~ch es reg u/", workshops on Photoshop and Ughtroom for photograph ers and offers custom ized ]

onlme consultmg_ Ch ec.k out h IS website, www_seanduggan.coom. .

AllIMAG'oS BY SEAN DUGGAN UNLESS OTHEII'WISE NOT.O

your camera support experts

E

o u

nr :::

N -a

"" '" E

"' '-

nr ,_

'" ...J

48

splash dance

Perhaps one of the most satisfying gratifications of designing with Photoshop is the ability to create the impossible-making unrealistic things look possible. Here we'll combine dancers with splashes to create a unique "splash dance."

0"

©ISTOCKPI-lOTOIAYAKOVl~V

©ISTOCKPHOTO~ISEGAGN~

[WHITE BACKgROUNDS WORK BEST]

[FIND SOME SpLASH pHOTOS]

Like many techniques in Photoshop, this one will be easier if the photo you choose is on a white background. We've chosen this istockphoto . corn image of a leaping dancer. (Toward the end of the tutorial we'll look at what's involved if the backgrou.nd isn't white.)

A quick search of "splashes" and "paint splashes" on istockphoto .. com provides a. bunch of nice splashes. We chose this one of red paint because it gave a good solid surface to work with, even though the color isn't right. (See the variation at the end for working with water splashes.)

[DRA~-AND-DROp]

Drag-and-drop the splash photo onto the photo of the dancer. (For the purpose of illustration only, we added a stroke to the splash layer so it's easy to see here; but the stroke's not necessary)

[FREE TRANSFORM; LOWER THE OpACITV]

With the splash 'layer active. press Command-T (pC: Ctrl-T) for Free Transform. Rotate and scale the splash so it matches fairly closely with the dancer's leg (as shown). Press Enter (PC Return) when you're satisfied.

Tip: M any times it's easier if you tempora rily lower the Opacity of the layer sliqhtly in the Layers panel so you can see the leg underneath. After transforming, return the Opacity to 100%.

[ADD LAYER MASK TO BLEND THE SpLASH]

With the splash layer still active, click on the Add layer Mask icon (circle in a square) at the bottom of the layers panel. Then, with the layer mask active, use a black, soft-edged Brush (B) to paint and blend the splash into the leg. Note: Depending on the angle of the foot, you may have to use the Clone Stamp tool (5) to clone out a reas of the foot on the Background layer.

[ADD A LAVER WITH A COLORED SHApE]

Click on the Create a New Layer icon at the bottom of the Layers panel to add a new layer above the splash layer. Now select the Lasso tool (L) and make a rough selection that's larger than the splash. Use the Eyedropper tool (I) to sample the color from the dancer's pant leg, and press Option-Delete (PC Alt-Backspace) to fill the selection with that color. Then, press Command-D (PC Cui-D) to deselect.

49

r'"' ""' m

" <II

:;: » .n » N

-z m

o ro ---<

ru o o

'"

E

o u

nr :::

N ru L.:f1 m E

"' L

nr ,_

m ...J

50

[CHANgE BLEND MODE; DODgE AND BURN]

Change the blend mode of this layer (Layer 2) from Normal to Color in the Layers panel, and the color of the splash should match up very nicely with the dancer's pant leg. You may need to create a clipping m ask to ensure that the color only affects the splash. To do this, hold down Option (PC: AI.t) and click on the line between the splash layer and the color layer. Double-dick on the layer's name and rename it "gray" To add to the realism, use the Burn tool to darken areas of the splash slightly and the Dodge tool to lighten areas so the colors match the pants better.

I:

[REUSE THE SpLASH WITH WARp]

We're going to reuse the same splash on the dancer's hand, but we'll make it look different. Drag the splash layer onto the Create New Layer icon and rename the origina.llayer "foot" and the duplicate layer" arm." With the arm layer active, use Free Transform to position, scale, and rotate it. With Free Transform still active, dick on the Warp icon in the Options Bar. Use the Warp handles to make th is splash fit his arm but look different from the original. then press Return (PC: Enter).

[CHAN[_jE COLOR OF ARM SpLASH]

If you had the gray layer clipped, you'll lose the clipping mask when you copy the splash layer. If you need the clipping mask, duplicate the gray layer, drag the copy above the foot splash layer, and dip it again. Next, make the top gray layer active and Command-dick (PC: Ctrl-click) its thumbnail to select it. While holding Option-Command (PC: Alt-Ctrl), click inside the selection and drag it over the arm splash. This duplicates the colored shape we created in Step 6, chanqinq the color of the arm splash from red to black.

ill

[CLONE AND MASK ARM SpLASH]

Fina'lly, use the Clone Stamp tool to add some additional sma]] splashes. Also note that the layer mask was duplicated as well when we made a copy of the foot splash in Step 8 .. Paint on the layer mask using black to hide areas of the splash and white to reveal areas.

conlin lied on p. 52

Co __ trol your __ IKON or CANON DSLR from your iPone

The next generation cabl,ereleasefor' your DSLR

Wlth the latest application from onOne for your iPhone, you can control settings like white balance. exposure, shutter speed, aperture and more. It's perfect for anytime you can't be behind the camera.

I II • III ••••• I' •

",I love this app. It IS intuitive and brilliantly made. On top of that, it works flawlessly:

B,ryal1\. S, - 'Photographer, satisfied customer

ononesoftware.com/dslr

C')~Doi~~!,*1iII'I' k"c..~"tl "'1:1I1""",~ II"f'IiOoWI'-tlflllUitt'l1.lII,~,.;,t"f"d l.Li!iC:I.f1IIl.M .... I....o..t:MIC_i ... P!, III'ft 1l\;t,~ 'Mhillr.,,, ~~atId',~" [.Mu."", .,. .... i:1 JI,..." .. .d~"' .. (irc,M:In .. Milf'lII." ~f' I, Ih •• ' \lobl';~"

onOne software

52

E

o u

You can use the same concept using translucent splashes such as this colored water, All the steps are the same: Drag-and-drop, Free TransformlVVarp, and use a layer mask to blend in the splash, We also used the Blend If sliders to remove the white from the splash and added a layer to "cover up" part of the dancer's foot Since the colored water is semi-see-through, one dipped colored layer in Color mode wasn't enough so we duplicated the colored layer, darkened some areas, and changed the blend mode to Overlay. To finish, we lowered the Opacity slightly as that created a better color match,1I

[IF YOUR BA[K~ROUND ISN'T WHITE]

If the background of your original photo isn't white, the splash will have a very noticeable white box around it after you drag-and-drop it onto the dancer image. Double-click on the splash layer to the right of the layer name to open the Layer Style dialog in Blending Options" Click on the white triangle under the This Layer slider in the Blend If section and drag it to the left slightly (ours is 213) to remove the white. Hold down Option (PC Alt) and click on the triangle to split it and drag the left side to the left (90 here) to make a cleaner transition. Click OK.

[ADD A LAYER BELOW AND MER[jE DOWN]

To remove the white permanently, add a new layer below the splash layer, dick on the splash layer, and press Command-E (PC Ctrl-E) to Merge Down. Now the white box is gone (rather than hidden)

"

ile

[VARIATION: WATER SpLASH]

N -a lJ'

'" E

eft L.

nr ,_

'" ...J

[ D~ve Cro ss i. Senior Developer, Educ~tion ~nd Curriculum, lor the N.tion.1 A ss oci~!ion ,of Photo.hop Profe ss ion~k He i. the author of Photoshop Fini.hin91 Touche, ~nd The ]

Photo sh op (52 Help Desk Book, an d is' featured on a series of Photosh op tra inin 9 DVDs "nd on Photoshop User TV. . .

• •• •• • • • • .~.~.~ ......
• •
• • • • • ...........
• • • •
• • • ••• • • ••••••••
. """""'-_. _.- e;- _

• • • •

. - . • • • • • • • • •

• • • • • • • • • • • • • • • •

• • • • • • • • • • • • • • • • • • • • •••••••••••••••••••••••••••••••••••••••• I ••••••••••• ~ ••••• ~ •••••••••• I

• • • • • • • • • • • • • • ••••••••••••••••••••••••••• • •••••••••••••••••••••••• •

• • • • • •

----------------- -----

After Aug. 28, 2009 eN:"')

stylish perspective

like most things in design, you can make quite an impact by modifying how people perceive things, In this tutorial, we're going to create a 3D effect using simple 2D art, demonstrating how effective a little perspective can be,

"Tllumbrwl Vlffl Smallwt VII~:"'"

I ,~rgr L ht VII'W

Arrol\'S

An'I<I'C TU:lur~. Ctl'tbriltilln tharl~

COI'Ilm u n r( I Ulltl

Optn Svmbo' lobr~rv ..

i)o(uml'rII ice I'I~

001 Pattem lIetlor P,iltk ,Fa$hlon

florid Vee.or Pick F,Iovl('ro;

Hill!" .rd Fur lit 101:100 m

Choose File>New, select BasicRGB from the New Document Profile pop-up menu, and click OK, Open the Symbols panel (Windo.w> Symbols), then dick the flyout menu and choose Open Symbol; library> Grime Vector Pack,

Next, dick-and-drag Grime Vector Pack 09 from the Grime Vector Pack panel onto. the artboard, Go up to the Control panel and click the Break link button, This will turn the art into. a regular shape rather than a symbol instance Open the Swatches panel (Window>Swatches) and choose a bright green color for the shape.

59

:z m

o r't -l

"', o o

"'



,

E

o u

N ru L.:f1 m E

"' L

60

Go back to the Grime Vector Pack panel and click-and-drag Grime Vector Pack 10 onto the artbosrd. Once a.ga.in, dick the Brea.k Link button to turn it into a regular shape. Then choose a red color for th is shape in th e Swatches panel.

At this point we have two splat shapes: a red one and a. green one. With the Selection tool M, tale these shapes and turn them back into symbols by dragging them into the Symbols panel. In the Symbol Options dialog that appears, choose Graphic and give each symbol a name. This will also tum these existing shapes on the artboard into symbol instances.

t! E R 5 P. E [iTi I VE

Select one of the shapes and choose Effect>3D>Rotate. This will allow you to rotate the object in 3D while still being 2D. In the 3D Rotate Options dialog that appears, you can grab the cube and rotate the object freely, or you can input the numbers manually for exact positioninq (click the Preview checkbox to see your changes). To rotate the object on a specific axis, place your cursor where any two sides of the cube meet in the dialog. The colored lines correspond to a specific axis, as indicated on the right. As a final touch, set the Perspective to 1000 to give it an exaggerated perspective that adds more interest.

oV'l'fAMNU.l --
0 Symbol
Con!O>_
~I m IlaQu Ix
---
~tr 00-1;, ... 11

I a ]I 0 I !x. I @ II ..1l I ;i I Repeat Step 5 for the other symbol to apply the same 3D rotation, then position them so they overlap each other, as shown here. If the perspective seems off, you can always modify the 3D settings of either symbol. To do this, select a symbol, open the Appearance panel (Window>Appearance). and dick the 3D Rotate effect.

Fent

,Ro~. nt fOflI~ Silzt

GlVph>

Select the Type tool min the Toolbox. While you may use any word you like, we've chosen to be obvious and use the word SPLATI We're using a very bold font called Rockwell Extra Bold. Switch to the Selection tool, then go into the Swatches panel and choose a color that will go along with the red and green; we're using blue. Now convert the text to outlines by choosing Type>Create Outlines.



[pOSITION TEXT]

With the Selection tool, position this text over the 3D splats and resize to taste. Then, choose EfFect>3D>Extrude & Bevel. Wha.t we need to do here is use the current 3D splats as a guide for the perspective. You can grab the cube and position the text in 3D. Notice we set the Perspective to 125' for a more exaggerated look, Also, set the Extrude Depth to 40 pt. Next, click the More Options button to reveal the lighting controls. Grab the liqht handle on the sphere and position it so it's front and left of the sphere in relation to the text itself. Click OK .



We have the text in 3D, but it needs something extra because it looks like it Just slammed down on the floor. Because the 3D effect is a live effect, we can modify the original shapes of the text and it will be updated as we change them. Grab the Direct Selection tool (A) in the Toolbox and select anyone of the let" ters. Then grab the Rotate tool (:R) and give the letter a slight turn. The 3D effect will redraw based on the new position. Do this to a couple other letters, slightly varying the rotation

[ADD SHADOWS]

Select the Pen tool (P)in the Toolbox and set the Fill color to black up in the Control panel. Draw some shapes at the bottom of the letters that conform to the contour somewhat, as these will be shadows. Once all the shapes are done, choose the Selection tool and Shiftclick each shadow area to select them. Open the Transparency panel (Window> Transparency) and lower the Opacity to 50%. Now we need to put these shadow shapes behind the letters. Click on a. letter with the Selection tool and choose ObJect>Arrange>Bring to Front

61

-z m

o ro -<

ru o o

'"

[MAp ART]

Let's go back to those colored splats we created earlier. We're going to make it appear as if some of the color splashed up onto the letters. With the text still selected, open the Appearance panel and dick on 3D Extrude & Bevel. In the 3D Extrude & Bevel Options dialog, dick on the Map Art button to open the Map Art dialog. The current surface is indicated by a red outline on the art itself. To get to the front face of the letter P, toggle through the numbered surfaces at the top of the Map Art dialog until the red outline selects it,

With the P selected (the outline, not the solid), dick the Symbol menu and find the splat symbols. Select the green one and it will apply to the letter. If the graphic comes in really big, dick the Scale to Fit button at the bottom, then drag it toward the bottom of the letter. Make sure the Preview button is checked so you can see the result. Use the control handles on the bounding box to resize and rotate the symbol as necessary. Continue to add these splats to other letters and this will result in a cool splash effect on the text.

N
ru
L.:f1
rIl
E
"'
L
nr
,...
rIl
...J
~ [
~
~
62 Corey Barker is an Educatjo" and Curricuium Developer for the Nationai A"odati"" of PhoMShop Profe;sio(Jais. His expertjse if) Adobe Photo;hop ""d Adobe Illwstrator haS earned ] him numerous .w.rd, in jiJu,tr.!jon, gr.phjc de.ign, .nd photog'~phy I

'h ·

.... 1 5 is privately owned property.

So is

this,

~

and

and

... nom.atter howyou use it.

The Utile Tree® desiqn is a registered trademark. This means it can only be used by the trademark owner (that's us) and those who have perrnlsslon, In other words, it Is illegal for you to use our trademark without our consent.

To ask permission,e .. maillegal@linle .. trees.corn.

The Tree design, UTn.E TREE, UTTl:E TREES and CAR·FR'ESHNE'R are registered trademarks of Julius $!mann. Ltd. C 2009 by Julius Slimann. Lid

--------------------------------------------------~typography]

[THE ART OF TYpE] JAMES {f} FEllCI

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

all obliged to follow along .. ]

following the script

[ Script faces

play by their own

rules and we're

64

Typographically speaking, the term "script" refers to any typeface that's designed to look hand-drawn. Script faces come in many forms, from formal engraving faces to loose advertising faces to those that attempt to imitate everyday handwriting. They fa II into three general categories (shown here): calligraphic (including chanceries, uncials, and black letter or fraktur faces). roundhands, and brush faces. In most cases, the shapes of their characters move them well beyond the predictable and manageable boxy forms of everyday roman characters,

so setting requires extra attention-often in unexpected places.

ca II igr3ph lc

LTC ZapJ CFtanrery Light lIBRa

QC[Oigttf ~[ath

vUuJrJla~ CJjl~Q

roundhand

~dndante ~A/ clPotf'd

brush

Dom Casual ~SCJUfd H~

Script faces

For example, very few script faces can be set in all caps_ Most just weren't designed to be used this way, and some of the more exotic forms used for script capitals can be unrecognizable without the accompaniment of more familiar lowercase forms to provide some context. Exceptions to the rule are faces such as Impress and Dom Casual, which were designed as advertising faces and derive from the kind of lettering-often in all caps-that you see in hand-painted supermarket signage.

Jolninq script faces

So-called joining script faces-whose characters actually connect-are the trickiest to deal with, even though they'd seem to all but eliminate the use of most of your typographic armaments, such as spacing adjustments.Roundhand faces, whichim itate elegant formal handwriting, are a good example of joining faces. The connections between characters in these faces effectively make the entire word a single ligature, which means that you can't adjust their tracking very much, if at all. If their spacing gets too loose, the letters disconnect; if you tighten tracking

too much, adjoining characters wil'l overlap instead of merely abutting. For the same reason, you can never set join ing scripts with justified margins-the stretching and squeezing needed to fill justified lines will make hash out of these faces' carefully calibrated spacing.

Consequently, there's no need to kern lowercase characters in Joining script faces. On the other hand, you'll almost always need to kern the spaces between capitals and the lowercase characters that follow them (shown in this album cover), Because all the lowercase characters connect, the gaps after capital letters look extra large, as seen in Prokofiev's name, Romeo and Juliet were thoughtful enough to have initial caps that have connecting forms, at least in the face used here, Embassy.

Before

Album after kerning type

The oftenloopy, flamboyant forms of script faces also obliqe you to look for spacing problems in places you'd normally ignore, such as around the ampersand in the album cover type The swerving shape of the Embassy ampersand makes it appear to lean away from Romeo and reach out to tickle Juliet. Restoring typographic decorum demands kerning the ampersand away from the latter and toward the former. You don't normally have to worry about kerning against word spaces, but in script settings it happens all the time, Script faces play by their own rules and we're all obliged to follow along.

Get that calligraphic slant

Most typeset characters are content to contain themselves within the bounds of the normal em square in which they're constructed, but not Joining script characters. To get that calligraphic slant and have all the characters "link hands," one character has to overlap the next. Here, we've selected a single character to highlight the bounding box of such script characters and show how peculiar the spacing of th ese faces really is.

l ~le in lite .9?;,i che/{

1: XTba il \'UfJI.L.-; U'II CI_t:,; ~.i.4£t~ ..-~ ~.nTLo!. l! 'I.~yrtrn;,., .. V V ". r.... ... ~J.L ~ nl "I .M,'U~'I. wu.1h ... ~:ln .• t" ... "ii:d L:- I..+ro Ihu ~'r( o...,..~ .... ' Ir"L:';.'1rI ... ·ir~~"'ti .... l , J'~~\.1 ;r.1~!"~n. IAun t!Atllt"~ .... '~ iJj .. 1I.L11h .1.niU~ 'b. ~N .. t.JJ ... ~ tl..J .A.L:1liJ Kid"",-

,. X Th~" III iIi.'ll'fItCl h' ~r"~;o"U1'!;i -1:. ~I. 11""i1,1 ~'flhlrl!!;l V'V A.l: ~-,;IIJ['"_~1:n.ll r~:JlJIi.i1. wu.ib .... ilJ,'.l""b:!tllro Ii:: .. +rn Ih.!! '1111 h~~f1·'" t.\~~ r ... "l-~ 'tH-:-': fl.. illli\otl., ~ 1t111M. .Ht:. fn,ulI h!l~ilr r"I: ....... III .. lJ.lr~11 ,~"ti-III J 1,;: II ..... II Illllil"1 it.. , ,\lIh,lfr"l R1J'tB.n~

Snell Roundhand (top) and lucia (bottom) samples

For a joining script face, the inclined characters have been constructed to overlap each other in order to connect Because typesetting programs align characters at the margin according to the edges of thei r bounding boxes, tricky al:ignment issues arise in flush-left or -right settings. In midline, this overreaching doesn't have much practical impact for the typesetter, but at either end of the line, this method of constructing characters can affect margin alignments.

Typeface designers have two possible strategies when it comes to accomplishing this overlapping. For example, Snell Roundhand (the top sample) could be called left-handed because the overhanqing parts of its characters occur on the left side of their bounding boxes, By contrast, Lucia (the bottom sample) is right-handed: The overhanging parts of its characters extend beyond the right-hand side of the bounding box. Both accomplish the same end, but with the result that Snell wil.1 hang out beyond the left-hand margin when

it starts a line, and l.ucia can be a struggle to ali.gn flush-right if a line ends with a character (such as one with an ascender) that leans far out of its bounding box. In such cases, you'll be obliged to manipulate the horizontal position of such lines using left and right indents to get them to appear properly aligned.

Lastly, most roundhand script faces don't work well in small sizes.

Many of these faces started life as engraver's faces and were never meant to be used in tiny sizes. In computer settings, they become spindly as their point size decreases, and any kind of competition with the background (tints and patterns, for example) makes them very hard to read. Even in the large sizes used in the sample album cover,

I chose to stroke the characters in black to give them some contrast against their busy photographic background, Reversed script type (set white on black) in small sizes tends to break up, as the black ink invades the super thin strokes. In this, they're like italics, only worsel

[ Ja.mes Felid is.!he suthor of The Complete Manual of Typography (Adobe Press), fOlmermanaging edit,,'ofPubli,h magazine, and contributort" The Seybold Report, Macworld maga.zine, ] PDFZone.com .• nd Publish.com.

65

:z m

o n --l

ru o o

"'

66

E

o u

nr :::

N -a

"" '" E

"' '-

nr ,_

'" ...J

going to press

In each issue of Layers magazine I've focused on helping you learn new ways of using InDesign to layout your pages. Now it's time to take a look at getting all that beautiful layout work you've done to press. Although the title of this tutoria I is /I Going to Press," these tips are aimed at outputting your In Design work properly no matter what your actual printing process-even if all you do is make a PDF and put it on the Web,

[OpEN CURRENT INDESHjN PROjECT]

_ [OpEN NEW pREFLICjHT pANEL]

To get the most out of this tutorial, you're going to need a document open with some text and images on the page, If you're brand-new and don't have one, you can either create one from scratch or use one of the built-in templates by choosing Create New From Template on the Welcome screen, This will launch Adobe Bridge where you can choose your template,

ln InDesign C54 you can take advantage of active Preflight, which will monitor your document constantly to make sure that it adheres to your preferenceslconstra.ints. Bring up the Preflight panel from the Window>Output menu,

'- Pr_t-'.II;gIII.=,. P,Q~I~

_I lI!Io!iIiIIIiI._ ''''' I
' ..... • 0.-.. II
I" ~,~6
,~I,...niI,~"~iIIII~
A ... '
~ 0_""
" E: ... crs - <UCTi
• 0--
0 ..... --- .. -""""
~ ..... 'T~ ..
• LJ '"~
0'- DiI>~ltr~
~~ • D'~~kiI"' •• 1III!Ii!i
n.....,.. .........
~~".~----... ( :5i1W )( C.n<c1 't=Ok~
[DEFINE CUSTOM pREFLIt;jHT pROFILE]

Choose Define Profiles from the Preflight panel's flyout menu. By default, you have a Basic profile that can't be modified. Click the + icon at the bottom of the panel to define a New Preflight Profile. Give it a name and then choose which options you'd like the active profile to monitor. You can choose things such as: missing links, minimum image resolution, missing fonts, overset text, etc. Once you've defined your criteria, dick OK ..

.. .

[ASSI yN pREFLIgHT pROFILE TO DOCUMENT]

Now that you have your preflight profile defined, you actually have to assign it to your document, So choose your newly defined preflight pro-Ale from the Profile pop-up list in the Preflight panel.

I rAQ.S UHKS lAY[J.~ I 'WUGIff! •• 0l!!!:
I ~ I'rcliJl. (Ttf"1)' ~I!'J
e.-r .. , 1,- I
• tu.GES iII>d OIllECTS Ull
.1''''9. !'",oM."" [JU
Fmb.,ddnl cnulU.: I'
'u..i>ukI~d ~( !
Em:iHdd.d w-.phr~ I
,u..lH.dd"d ~hl. n,5j
"'" iMdded Q-opl'tl C " 1,
,Eto~d~hl~ S; •
E.mi>t.d<ltdW~hrc ~ ..
.. Inlo <II III-
ell'lIfon 1':"9U~ 8 .0.11 016 .': [FIX pREFLIyHT ERRORS]

At this point, you'll either have a green or red error light depending on what you defined in your profile and what's in your document. When I chose my profile, I got a red error light (dot) with 11 errors because I defined my profile to have a minimum image resolution. The template contains 11 low-res i.mages, so they'll need to be replaced to meet my profile standards. There's a hyperlink next to each error that also specifies the page where the error takes place. This will allow you to jump right to the item in question and fix it.

"

.""U" III \ DI t IR.E

_.

- .. ~

[SIZE pHOTOS IN PHOTDSHOp]

When you place an ima.ge,lnDesign lets you size the image to fit your frame size. Although this is a nice feature, it's not the optimal solution for printing. For example, let's say you place a high-res (300 ppi), 8x10" i.magein a frame, but then downsize it to fit 1 . 2x 1.78". The Effective PPI J u m ps to 1,685. Therefo re, it's best to size your image to the final size in Photoshop and bring it in at actual size. Note: If you can't see this column in your Links panel, choose Panel Options from the flyout menu and check the Show Column box beside Effective PPI.

67

" m

o ro ...

ru o o

'"

E

o u

N ru L.:f1 m E

"' L

nr ,_

m ...J

68

Mod.

AdjuSHn~I\!5 C;~s(lle

Aut.o Tone <). I

Au to (onlml '('9 t' RC;!I Co lot

lnuqe Sil:t ... C~nl';l!l sr;:~_. lm~ge Rotal on

" 8 RiI]ICflMln~1 16 ail$/Ctiann,1

Trim ...

D~pnQl!t_. Apply Image .•. C41(1.11.1110 n s •..

Tr.lIp •••

[RIiB OR CMYK?]

Before you bring that image into InDesign from Photoshop, you should ascertain if RG8 is okay Only your printing provider can answer that question. RGB has a much larger gamut of colors but CMYK is the standard for offset printing. Some of the newer digital presses can handleRGB workflows but you'll. have to ask to know for sure, To convert to CMYK, open your image in Photoshop from InDesign by selecting the image and using the Edit>Edit With>Adobe Photoshop CS4, then choose Image>Mode>CYMK Color in Photoshop to convert it. Save and Close the image to update the link in InDesign.

........OCJL. ____ ODIe

,.



[SAVE AS PSD OR TIFF]

Although InDesign can accept a variety of different image formats, if you're going to high.res professional output, then you should save your photos as either PSD or TIFF files. Why not JPEG? Because JPEG is a compressed format and takes longer to print, as it has to decompress en-the-fly for printing. So, to make your provider happier, use either PSD or TIFF files.

I, rl.~~

___ f __ 1. Tra".p;o .... t OI>Jeru

)~ ...

[CHECK TRANSpARENCY STACKItH~ ORDER]

In Design lets you use transparency right in the appl ication without having to go back to Photoshop or Illustrator; however, depending on how you stack things, you could create printing headaches. The rule is: Always keep your nontransparent objects and vector text/line art on top. An easy way to do this is to use layers and assign each kind of object to the appropriate layer.

alJECT STYLli

Stroke rmiiJ 100

Fill NlIJrmallO[l

Croup

ill

[COMMON TRANSpARENCY ISSUE]

Even when you follow the rules, you can still have problems. Say you put a transparent object on top of a nontransparent image. For exampie, when you put a drop shadow on your text and then put your text on top of a photo, sometimes this yields a box or outline around the object, The problem arises because some printing RIPs don't process the transparent object properly on top of the nontransparent object. So try this: Select the object(s) and set it to 99% Opacity in the Effects panel, This makes no visible change, but will force it to go through the Transparency Flattener with the object on top .

WE KNOW THE

I

Since 1995, our FlightCheck products embody Markzware's paten ed prefiighting technology saving print shops and designers precious time

,

and money. Now, get ready for FlightCheck

XFR, the new generation of preflight designed by Markzware. Engineered with our 14 years of experience, you are sure to gain unsurpassed quality control excellence for all your printing needs. Exclusively developed for all design and print professionals alike, the new FlightCheck XFR analyzes your files with an agility, speed and comprehensive accuracy unrivaled by any other preflight package. We're confident you will be really impressed. No kidding!

JUDGE FOR YOURSELF!

E

o u

N ru L.:f1 m E

"' L

nr ,_

m ...J

70

(----------------~

il

----------------------------------------------

[CHECK SEpARATIONS pREVIEW]

Next, you want to check how many plates your job will yield. If it's a four-color job, then chances are you want only Cyan, Magenta, Yellow, and Black plates. Having too many plates may cause delays in your print job whi.le the file is fixed. Choose Window>Output> Separations Preview to show the number of plates in your job. If you have more than you should, you need to locate the object generating the extra color and change it. An easy way to do this is to hide (turn off the Eye icons) all the plates except the extra one (make sure the view pop-up list is set to Separations).

N_ CellO' S.,.t<h._

N ... l1n, S.,.t,h ...

Nm Grad tr>1 Sw;udl . Now Iotl·oed I.. Swalth •• N"" Mind Ink CrDUp ••. Ou!!1,go teSwl1<h

[lol.,e S_Uh._

Sw.·U;h Option .. "

Load SMlCbu ...

S;w" SW., <h .....

., N .. ml

Sm .. UHlme Small SwoJIth Lora. SWoII(h

Ink MmIUt,r._ Hld~ Opl"",~

[USE SWATCHES; ELIMINATE UNUSED ONES]

If you're using color inlnDesign. then you should definitely be using Swatches, which allow you to keep consistent colors. You can also change all objects using a specific color by changing the Swatch. If you've created Swatches that you didn't end up using. h oweve r, it's best to rem eve th em to reduce confu sian. Just choose Select AI,I Unused from the Swatches panel's flyout menu, which se lects any swatch es that didn't get used in the job, then click the Trash icon at the bottom of the Swatches panel to remove them.

u .... CI.iaaI'tIII I , ,_

Uyn... ....• ,....I'I!IIJ !IIIIQj~

~ r~ ~"""j,,~I~ .. "lp~CfIIt~

_,

( ..... _)

[pACKAyE IT Up]

You should now be ready to send your InDesign file to the printer. You'll need all the linked qraphics, and to make sure the print provider has the right fonts. send those too. Luckily, InDesign has a Package feature (File>Package) that puts a copy of your saved document, all the links. and the fonts in a folder of your choice. By default. it will run a, Prefli ght first. Just dick th e Package button to continue. Fill out the Pr,inling Instructions and click Continue, Now specify where to save the f les and InDesign wi II create a new fo'ider that contai ns everything the printer needs.

--

~

.......

-

[EXpORT A pDF]

Although your service provider can print your InDesign file (provided they have the same InOesign version as you do). sometimes it's easier and safer to send a PDF instead. Even if you're sending the original In Design file, it's still a good idea to send a PDF, To create a PDF, choose Files-Export. make sure that the Format is Adobe PDF, and click Save. In the dialog, choose the appropriate PDF Preset for the kind of printing you're doing (ours is Press Quality), then dick Export to generate your PDF. II

[In,' hi' current ",/e a,S Dtrector ior North America C"'odV,e Pro Core BL!,'ine., for Adobe Sy>!ems, )"c,' Tefl)' White le"d. a ream of creative profes<ioJ1OI product specisllsts. He'. also the ] auth or of Secrets 01 Ado be B ri dge on d co·outh or olin Desi 9 n CS/CS2 Kille r Ti ps 0 nd The i Phone Book 2~d Ed i lion.

Good· ye C aos.

Hello, Flow.

NOW AVAILABLE. NOW MULTI-USER. NOW INSIDE ADOBE C54.

We built Flow to make life easier for creative pros. Then

we took it to a whole new level with allihe sluff we·ve added since Public Beta.

Our new CS4 Flow Flash Panel puts the power of Flow right inside your favorite Adobe programs. As you work. a mini WorkFlow Map shows you all your project files. how they're related. and where they're located. And with new Share Maps, your colleagues across the network can instantly access

any of those files. no matter what irs named or who created it. By the way, say goodbye to lost files and accidents: Flow can take you back to any version 01 any file. It can even restore a Photoshop document that was flattened.

As David Blatner says: "I've seen the future III How."

We·re pleased to say the future is finally here. To order Flow. visit gridironsoftware .. com

.. ' ...........

. '

."

GRIDIRON~

owe

9 ridi ronsoftwa re.co m

• DIMd Blatr-er I~ the co-host ollnDes,gnS",cr~l"S.con ~nd tile author 01 several de~lgn becks (.$4 and Photushop ere trademarks owned by A(job~ SYS1<"lT1S If}C

II N DA lACKS

E

o u

nr :::

N -a

"" '" E

"' '-

nr ,_

'" ...J

72

the proof is in the pages, part 2

Last issue, we covered composite content proofs and color-separated proofs. This issue we're going to cover soft proofing and color-simulation print proofs. Soft proofing simulates onscreen how your final print will appear, and color-simulation print proofs simulate the appearance of the final print, such as on a commercial printing press, or on a proofing device, such as an inkjet printer.

[soft proofing]

~----------------~

[COLOR pROFILES AND COLOR gAMUT]

Soft. proofing and color, simulation print proofing depend on the use of color profiles to simulate the appearance of an image or document as it wi II appear on a final output device. Both types of proofing are commonly, though not exclusively, used to predict how images and documents will ultimately print on commercial printing presses. Color profiles contain color gamut information (range of reproducible color) about both the proofing device and the final output device. The goal of the proofing process is to match the proofing colors to the gam ut and appearance of the final output device.

-

-

..... - ._.

--

.,Ii' ............ -

- .....

-

--

-

--

..... _...,.

__ ...-

IIII....I! ..... "'......,..

[SET Up ACROBAT COLOR MANACjEMENT]

Activate the Preferences in Acrobat (Cornmand-K [PC Ctrl-Kl), and click on Color Management in the Categories list on the left side of the dialog. In the Working Spaces section, select the RGB and CMYK color profiles you want to use for viewing and printing your images. We've selected Adobe RGB (1998) for RGB and U.S. Web Uncoated v2 for CMYK. Note: These working RGB and CMYK profiles should be consistent throughout your Creative Suite applications. You can create an initial color settings file in Photoshop and then apply that settings file to all the other Creative Suite applications through Bridge (Edit>Creative Suite Color Settings).

[SET Up YOUR DOCUMENT VIEWIN~ ENVIRONMENT]

(reate a duplicate copy of your PDF document. Then, open both documents and place them side by side on your screen, placing the proof copy to the right of the original. This will allow you to easily see the difference between the normal onscreen view and the soft proof of your final print. Scale both documents so they're at the same dimen sions. Note; For the most accurate viewing of you r soft proof, you'll want to calibrate your monitor with an external calibration device, such as the X-Rite i1 Display LT, and provide a neutral gray surrounding background.

011 III"""",

Si mill_I ..... froflhl

All

elllOf \II .>rlUng' Ob,fCt ImlJ('Clor

[ACTIVATE SOFT pROOFIN~]

Select your right-side proofing PDF document. From the Advanced menu, choose Print Production>Output Preview. For soft-proofing print devices, select a profile from the Simulation Profile drop-down menu that matches the press and the substrate (here paper) on which you intend to print your final PDF We selected a. standard web printing press and uncoated stock profile (ll.S, Web Uncoated v2). Next, check on the Simulate Paper Color checkbox. Note the Simulate Bla.cklnk checkbox should also be automatically activated.

[COMpARE pROOF AND ORI~INAL DOCUMENTS]

Once you check on the Simulate Paper Color box, you should see a noticeable reduction in the overall contrast of your document and a significant decrease in the color saturation. Acrobat, usinginformation from the l.l.S. Web Uncoated profile, is attempting to simulate how this document and its images will appear when printed on a standard web press with uncoated stock Feel free to compare and contrast other output profiles such as u.s. Sheetfed Coated and the new G RACoL profiles (updated sheetfed profiles) that have just been added in version 4 of the Adobe Creative Suite.

I

[SHOW OVERpRINTINg AND RICH BLACKS]

To view which portions of your image are set to overprint or print as rich blacks, perform the following: (1) Check on the Sim u late Overprinting checkbox; (2) in the Preview section, select Color Warnings; and (3) in the Warnings section, check on the Show Overprinting and Rich Black boxes. By default, overprinting objects will be colored yellow and rich black objects will be colored blue-green. You can adjust the color of the wa rnings by cI icking on the swatches located to the right of each checkbox.

73

ru o o

'"

"Z m

o ro ...

E

o u

N ru L.:f1 m E

"' L

nr ,_

m ...J

74

[pROOF SpECIFIC COLORS]

In addition to the color-separation techniques we covered last issue, you can also use the Output Preview dialog to view any individual colors that are set to separate during printinq, To view color separations, first select the Separations choice in the Preview area, then check on the colors you'd like to preview. We checked on the Spot and Process B lack colors. If you place your cursor over a portion of the process black plate, the black (K) percentage is shown in the column located to the right of the colors column (84% in this example).

I:

[pOTENTIAL SHADOW DETAIL LOSS AREAS]

You can also use the Output Preview dialog to check the reproduction of shadow detail To proof your shadow detail areas, first check on the Total Area Coverage box. Then use the % field located to the right of this checkbox to select the total ink percentage for the pressand paper on which you're printing. Use the following total ink values as a guidel'ine: Coated Stock: 300-340; uncoated stock: 280-300; and newsprint stock: 240-260. By default, any areas of your image containing ink total volumes exceeding your numeric value will appear as bright green.

[color-simulation print proofs]

[A55ICjN YOUR TARCjET DEVICE]

In addition to onscreen soft proofs, you can print simulated hard proofs on a device other than your final print device. If you'd like to print a hard proof on your inkjet (or other proof printer) and have it simulate the appearance on a commercial print device, begin the process by assigning your final; print device (target device)-here U.S. Web Uncoated v2-in the Simulation Profile drop-down menu locatedin the Output Preview dialog as we did in Step 4 above. This defines the print device you want to simulate The print dialog in the following steps will use this profile setting.

..... , ---- ------- --

... ~~'1..

.....,,_

111

I_c-\

[SELECT pRINTER AND SCALlNCj]

Choose Filec-Print to activate the first print dialoq. From the Printer drop-down menu, choose the proofing print device (we chose EPSON Stylus Photo R2400) on which you'll be printing the simulation of th e web press with uncoated stock, Set the number of Paqes to print. Choose the amount of Page Scaling (if any) required to print the entire document on the paper dimensions of your proofing device. For instance, you may need to shrink your print dimension to include printer marks on an 8.5xl1" document

...

<---

-_ Gii!i!i!!!!~~:__.3!l

~~ ~IIQ iII4....-w~ ...... .-oI ..

'_'~~.~""""ffI _~ TJIIl ...............

........... t~ ........ ~ ... ~~ _ .. ~!l!lllllPJlII!!!'!iIf ..

Ie

[SELECT COLOR HANDLINCj]

-- --- - - --- --- --

[ASSICjN COLOR pROFILE AND pRINT]

-- - - -- -- - - --

To access the Color Management controls, click on the Advanced button located near the lower-left corner of the Print dialog. From the Color Handling drop-down menu located in the Color Management cateqory choose where the color management (the meshing of the target and the proofing profi les) will be accompl ished. Choose either Acrobat Color Management, where Acrobat will merge the two profiles, or Printer Color Management, where the meshing will occur at the printer. Usually, you'll choose Acrobat Color Management. If your proof device has a PostScript RIP you might choose Printer Color Management. Feel free to test both results.

Next, from the Color Profile drop-down menu, choose the color profile that matches your device, paper, and print setup conditions as closely as possible. You can download these paper-/print-specific profiles from most manufacturers' websites. Now check the crucial Apply Output Preview Settings box to activate the meshing of the proof and target profiles (in this example, Epson R2400 and U.s. Web Uncoated v2, respectively). Click the OK button to apply your Advanced dialog color-management settings. Then, dick the Print button in the Print dialog to initiate the creation of a U.S. Web Uncoated simulated proof on the proofing device.:.

[ Taz Tally i< the author of Acrobat and PDF Solutions fro,," Wiley Pre;,. a; well as numerous other digitol imagiflg books on' Photo,hop, ,conning. digital photography, and prepro«.·] Vi,it T~.', website. www.t~.!~l!ypho!og.~phy.comandww.w.t~ zs emina ... com.

AllIMAG~S ,BY TAZ TAllY UNl~SS OTH~RWIS~ NOT~O -

75

" m

o ro -<

ru o o

'"

E

o u

'" :::

N -a

"" '" E

'" L

'" ,_

'" ...J

76

don't let quicktime slow you down

Dreamweaver makes it easy to add Flash Video to your webpages, but if you want to display your video in QuickTime format, you'll have to take care of the various settings and other options yourself. In the following steps, you'll learn how to easily control and customize your QuickTime videos in Dreamweaver. (Note: This tutorial works for both Adobe Dreamweaver (53 and C54. The instructions will also work with Windows Media video and other formats, but the parameters will have to be adjusted for those formats.)

Although you can in sert many different types of video into your pages in Dreamweaver, you'll first need to edit and convert the video in a. video editor, such as Adobe Premiere Pro (shown here)

Dreamweave r's Insert pa.n el (Window> Insert) provi des a ha n dy collection of opti ons, includin g the I nse rt> Media> P I ugi n featu re you'll need for adding video in Quicklime, Windows Media, or any format other than Flash .. If you're using Dreamweaver (54, you have the option to keep the Insert panel at the top of the workspace using the (53 workspace layout (Window>Workspace Layout>Classic) or integrate it into the panels, as we've done here. (Note; In Dreamweaver CS3, this feature is called the Insert Bar and it's only available at the top of the workspace.)

eo........ ... ~ a BI

~ - &. I!!I ~ [J a.. <::>. I trl!I.SWf

.,. :F"j~'P.p~. J!.'·FLV

Shoe""","

.App It

IpiRro

9Art;.,.x

First, place your cursor where you want to add the video in your webpage. Then, with the Insert panel open and the drop-down menu at the top set to Common, click the arrow to open the drop" down menu next to the Media icon and select Plug in (note that the Media icon changes to reflect whatever you last selected). Alternatively, you can ch cose Insert>Medi a> Plu gin

~~IfBft:Ij'dJiI • filli_~ Skfi:dot

ClQtI:UUII

-0' oa·

folio T",

==,,-====,------,1 ~--

l.In... ~'*-~ iIII\IhIII,WIdIi.-w - .. ~ - .... J--"" C!wq ;WAIl .. """'Irrnltwl"'~

If you've used the Insert Flash Video (FLV) options in Dreamweaver, you may be surprised that when you add video in other formats using the Plugin option, you won't be presented with a dialog that contains settings for size or other video options. Don't worry; Just select the OuickTime file for now (as you would if you were inserting an image into the page-Control-click [PC Right-dick] on the Plugin icon and select Source File). You'll get a chance to set the size and other settings in the following steps.

Because Dreamweaver can't automatically detect the size of a QuickTime file, you'll need to specify the size after you insert it into the page. To do so, click to select the 32x32 icon that Dreamweaver inserts in place of the video and then enter the actual size of the video in pixels in the W (width) and H (height) fields in the Property inspector. The video file we're using in this lesson is 720x480 pixels. Once you input the sizes, the icon will expand to the specified size.

77

"Z m

o ro ....

ru o o

'"

E

o u

N ru L.:f1 m E

"' L

With the video selected, you can also use the Property inspector to add a Plugin Page URL. The Web address you enter in the Pig U RL field will be displayed in place ofthe video if the visitor to your site doesn't have the QuickTime player installed on his or her system. lf you're using Quicklime video, the Plu.gin URl is http://www .apple.com/qu i cktim e.

Although you can use the Align drop-down menu in the Property inspector to al·ign your video, the better option is to use Cascading Style Sheets (CSS).ln this example, we've created class styles named Jloat-right and .. float-left using the Float options in the Box category of the CSS Rule Definition dialoq. To create a new class style, click on the New CSSRule icon in the CSS Styles panel, choose Class in the drop-down menu, name your style, and click OK to enter the CSSRule Definition dialog .. (You'I.1 find lots more information about creating and using class styles on the Layers magazine website in the Dreamweaver tutorials section)

PJr,,,,,t..,
!±..EJ BEl
r 'II ..... I
t21
l:'
..
r~ •

To add a border to your video, enter the size you want in pixels in the Border field in the Property inspector. You can also add V Space and H Space (vertical and horizontal space, respectively). When you use H space and V space, you add margins to the top and bottom or left and right. If you define a style in C55 to specify margins and border, you'll have more options and can choose to add margin space to any or all of the sides of the video, as well as change the

,_

~ color and style of the border.

~

~

~

78



Kelp J

-

1<rn...,." U '"' jo.td

~ 1::1 fi..~

IIoIdi.!r

For more advanced options and settings, you'll use the Parameters option in Drearnweaver and you'll need to know the parameter options specific to Quicklime (or whatever video format you're using). To open the Parameters dialog, dick on the Parameters button in the Property inspector (remember, the video must be selected for these options to display in the Property inspector).

continued on p. 80

softpress

1JW.TT'r S(JfjjJ,1C[ SN:[ 1ft!

,HiE ENTREPRENEURIAL SPIR.ITis alive and well. The same call you answered when you launched your business has kept you focused and alert even in the most challenging times. And yes, mere have been challenges. You've probably had to wear many hats and survive on a budget that seemed impossible.

When it comes to your Ute's work, you demand the best. Enter Freeway ... With Freeway, you have all the

tools you need to create and maintain a great website. Everything you need,at a price that makes sense ..

Be free to concentrate on what you do best Try the unrestricted 30-day trial now and keep quality control, in the hands of the one who really cares-you.

Freeway.

Web des'ign for designers.

Available at

'* Appl. Slgr.,~

www.softpress.conv.ia.yers

E

o u

N ru L.:f1 m E

"' L

'P .. lmrun

1+j3 EJS I 01: I
1:- v .... ~ r"'.!<n
rllO

Hot> P IfVI'l.b! n
1l
I±J8 FJEl I 01:
P ... .....ur v ..... I c.n
H10l' ;ifUl!ll
AIItd'Ioy loke
~
I ~ I
To add additional parameters, click the plus (+) sign at the top of the Pa ram eters dialog and then enter each parameter and value on its own line. Another popular QuickTime parameter is Autoplay. To prevent the video from playing when the page loads, enter the Parameter "autoplay" with the Value "false."

If you want your video to play in a continuous loop, in the Pa ra meters d i a log, enter" loop" as th e Pa ra mete ran d "true" as the Value. and cl ick OK. Most parameters work this way with true being the setting to turn an option on, and false the setting to turn an option off. Thus, if you set the Parameter to "loop" and the Value to "false," the video won't loop.

Embed Tag Anrlbute$

Dreamweaver C54 makes it possible to preview the video in the Dreamweaver workspace. Just select the video and press the Play button in the Property inspector and the video should play much as it would in a Web browser with the QuickTime plug-in. You can also preview your work by using the Browser preview option (File>Preview in Browser). (Note; You must have the QuickTime plug-in installed on your computer for the QuickTime video to play in a Web browser..)

nr ,_

m ..J

i [ hn:ne ~.mer_ha~ .ut.ho,ed mo_,.e t= . dozen boob ebcut the internet i~dUdi~g_. D~e~_ mweaver CS4 for Dum~ie,_ She', a'so the host 01 more than 50 hours of web]

:;: deSIgn Video rr"""ng for To!al Trammg_ A popular ,peaker; ,he h;;, been work'ng onlme SJI"ICe 1995_ To learn more, vrsrr WlWI.JCWarnercom.

[MORE pARAMETERS]

You'I'1 find more parameters and Embed settings for Quicklime at www.apple .. com!quicktime!tutorials!embed2 .. html. Another popular option is to include the video controller using the Parameter "controller" and Value "true." To hide the controller; set the Value to "false." And here's an advanced tip: For the controller to display properly, you need to add 16 pixels to the Height of the video in the 'Property inspector .. So the new Height in this example would be 496 pixels.

80 Ai.lIMAGES BY JANINE WARNER UNLESS OTllE'RW'SE NOTED

Geared to get you up and running fast and to have fun while you're doing it, each

video comes with review

materials to keep you on rack and a booklet that provides a topic-by-topic guide. When you're done, you'll be prepped to take the Adobe Certified

Associate level of certification.

Then you'll love the new Learn by Video series from Video2brain and Adobe Press!

Table of Contents nev rmo ethana cl ck away

10-20 hours of high-quality video training

Tutorials-to-Go! Transfer selected movies to your IPhone, IPod. or compatible cell phone

Video player remembers which movie you watched last

lesson files are Included on the DVD

Watch·and-Work mode shrinks the video Into a small window while you work In the software

Check out the trailer and free sample clip now! www.peachpit.com/LBV

II N DA lACKS

E

o u

N -a t:l'

"' E

"' '-

nr ,_

"' ...J

82

learning the accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they're clicked on. In this tutorial, we'll create a basic animating accordion panel that can be used as the basis for a full Flash website.

IiII 10 15 20 25
'\J wiens . I
iKCtlr(hgn i\1 !K~_tin.r'll j
~""
.I
.Kt,Cl1dg,_~ ~,
,.d ...J 'J' a oj
.. l'!fIH...,..J!Q. ... a~ [EXAMINE THE FILES]

Open the accordion folder (from the download files availableat www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you'll need to open to start the tutorial, and the accordion_final.fla fi Ie is a finished version of the tutorial that you can use as a reference There's also another folder named gs, which contains an Action5cript animation library called Tween Lite that we'll use to do our animation.

[OpEN THE FLA]

Open the accordion.fla file in Flash C54 (this tutorial will also work with Flash C53 if you haven't yet upgraded). On the Timel ine, you'll see two layers: The actions layer will hold all of our ActionScript 3.0 code for th is project and the panels layer wi,11 contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame fate of 30, and it's set to publish for Flash Player 9, as we won't be using any of the new Flash Player 10 features.

[If you'd like to download the files used in this tutorial to practice these techniques, visit www.layersma9azine.com and navigate to the Ma9azine section. All file; are for personal use only]

83
r-
'"
-<
PJlOPE.!l TI ES m
"
<II
~ Snape :;:
»
.n
»
N
H
"
v POsmo N.D SIZE m
x M Y. M "'
'U
'0
~i9 w fiOO ft tt Jll& ....
0
v ALL AND SIROK[ ro
....
Ct - ru
./ 0
0
'" [DRAW A pANEL]

Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (bl ue), Dra.g out a rectanqle 0 n th e Stage at a ny site, then in th e Prope rty i nspecto r set the followinq: W (width) 600; H (height) 355; X 0; Y O. (Note: Make sure the chain icon is "broken" next to Width and Height..) Control-click (pC:

Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it "panell ," make sure that Movie Clip is the Type, and click OK.

[ADD A TEXT FIELD]

In the Property inspector, give the new movie clip an Instance name of "panell ." Double-click on it with the Selection tool M to enter edit mode. Select the Text tool m, set the Character Family to Myriad Pro (or another font=make sure it's a clean.Ieqible font, as it will be rotated 90·), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, "Panel 1 ." Switch to the Selection tool, open the Transform panel (Window> Transform), and set Rotate to 90'. Return to the Property inspector and set the type's X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

Duplicate Symbol

( OK "'

Name: p.anel2

( C.nul

r Ad ... nce.d '

[DUpLICATE THE pANEL]

Now we'll duplicate the movie clip panel for each section of the site. In the Library panel, Control-dick (PC: Right-dick) on the panell movie clip and choose Duplicate. You'll be prompted to give the new clip a name, so let's call it "panelz." Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y O. Give the dip an Instance name of "panelz." (Obviously, if you were bu ilding a real site you could name the various dips based on what they contained.)

,

[MODIFY THE DUpLICATE pANEL]

Double-dick on the panel2 movie dip to enter edit mode so you can customize this panel. With the Text tool, change the text to "Panel 2" Then, select the rectangle and choose another color in the Property inspector. Go back to the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels-tha.t means the third panel. will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

E

o u

nr :::

N ru L.:f1 m E

"' L

nr ,_

m ...J

84

~~ ~~~------------------~,

"'",. a,. .... [,;;If&!" 9 ~ eJ(!:iP GI

1 import gs. *;

2 import gs.eastng .. "';

[IMpORT TWEEN LITE]

Select the first frame in the actions layer and open the Actions panel (Window> Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that's required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

1 import gs."';

2 import gs. easing."; 3

4 panell.props 5 pane12.props

6 pane13. props - 7 pane14.props

{1x.:0, rx: 570, i.nd:l}; . {lx :30, rx:600, ind.:2}; {lx:60, rx:630, ind:3}; {lx:90, rx.:660, ind:4};

I:

[SET LEFT AND RI~HT pOSITIONS]

Add the code highlighted here into the Actions panel, In these four lines of code, we're attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it's on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

4 'p<mell.props _, {b::0, "")1;:570, il'ld:l}; 5 .ponelZ.props - {lx: 30, rx:.600 , ind:2} j. €I pane13 .props ... {Ix: '60 , r)(:630, in.d: 3}; I potIe14.props,. {lx:90, I"x:6Ii0, iru:l:4}; 8

9 Ip01ien.oddE\;entl\steiler(Mou:seEvint~Cu:tK;-ontll.ck) o pane 12. oddEventi istenerC~useEvent. ClICK. onC1 i c.k) 1 pone 13. addEventL i. stener(MouseEvent. CLICK. onC1 \ ck) l.pane14. odd venlli stel'ler(Mo1JseEvent. CLICK. onG t ck)

0]

_" function enG ick(e:Mou,seEvent):void '5 {

1&

~., }

[ADD [LI[K EVENTS]

Now we need to set up the dick events for each of the panels so that they can react when one of them is clicked. Add these next hiqhlighted lines of code to the Actions panel. The first four lines set up the cI ick events for each panel. All of them will call a function named onClick that's located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position, a llowing the user to view the full contents of that panel.

9 paneU.oddEvenU tstener(MouseEvent. CUCK, onCH ck) 10 'panel 2 . ClddEventL i stener(lo4ousI!!Event. CLICK. Oilet ick) 11 ,paneH. addEventL t stetler(MOusefvent. ClICK. ooCl tck) 11pone14 .oddE venU i stener(MouseEvent. CLICK. ana rck) 13

:1 4 flfficti on OOCl.l ck (e : MotIseEven t) : wid 15 {

1b vor d icked:MOV1.eCl ip - MClvieChp(e. torget);

7 }

ill

[WHO WAS [LI[KED?]

Since all of the panels will call the same function when they're clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a. reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named "clicked," which refer· ences the clip that was clicked on.

r Ii; lJ 14 15 16 17 18 19

,pone 14. oddEventL heene r (IobU5e Event . (LIar.. onCll.ck).;

function onCtlck(e:MouseEvent):vold

{

'for(va!" I: Int.e; i'<IUr!Clu Idren; i++)

(

val' mc: l-!Ovi.eCHp - lotIvuCl ip(getCI" 1 dAte i.»;

,," )

Z1 } i;..:..._-----------------II

[LOOp THROUyH THE pANELS]

Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a "for" loop. A counter variable is incremented each time the loop is run until: it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named "me" that references the panel, clip based on the va lue of the loop counter i,

_4 ·~no:tl,," mClld(e:H:IU ... Ev ... t) :~,,16 5 { 16 7 U 19

vcr cticked:""'teCHp - NlMtCl\..p{t.tO"lJOt); r .... CVU" ! u,~ ... ; (<II....al!idO' ... , (",,~

{

[ADD CONTENT TO THE pANELS]

Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel'. Check out the accordion_finaLfla file to see an example of a finished panel.

}

[ANIMATE THE pANELS]

Enter this highliighted code into the Actions panel, at the location specified. First, we check whether the index of the current dip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the 'left. If not, it needs to be animated to the right. For each case, we're using the TweenLite.to function to do the animation, The animation length is set to 0,5 seconds and we're using an exponential ease-out effect. 80th of these setti ngs can be customized to change the feel of the animation (see Step 14).

VI]"I" 1IC:M::rvteClip = MovleClip(getChi ldAtCi»: t f(me .prop.s .. lAd. <- c:l t ektd .lIrqps .. j,nd)

Twel!~Lite.toGrr.c" I, {X:IIIC.III"QPS.l.x, oose:8ounce.eoseOut}); elSI!

T .. eenLt tl!. to("'C. 1, {x:mc .prq,s. 1"1i:, eelS,: Sou",t .I!CI5~});

[CUSTOMIZE TWEENLITE]

As mentioned in Step 12, you can change some of the values in the Tween Lite function call to customize the animation effect .. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.ease Out, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for Tween Lite at http://blog .. greensock.comltweenliteas3,. ,

85

ru o o

'"

-z m

o ro ...

E o u

ur z:

N « Lf1 « I:

"' 0::

ur ,_

« ...J

86

[ 1

y

a



]

r e v i e w s

THe STraICjHT scoop on all THe i ar es r qrap ar cs gear

Carrara 7 Pro

3D SOFTWARE FOR MODELING, TEXTURING, ANIMATION, AND RENDERING

Carrara created a narn e for itself by being an affordable, versatile 3D application that includes modeling, animating, rigging, terrain building, and rendering features Carrara 7, available in Express, Standard, and Pro (which we're reviewing here) editions for both Mac and Windows, oHers entry-level. and advanced users a cost-effective alternative to what can be a very expensive arena to break into.

I've been reviewing Carrara for quite a few versions now and have to admit that the new version has some much anticipated (and welcome) features. Carrara 7 Pro steps up the ga,me with the addition of 3D Paint, Multi-pass Rendering, improved content support, UV editing/ unfolding, and a COLLADA export function for Windows,. makinq it more robust than ever before. This software package still has its familiar and easy-to-use interface, providing a professional toolset that will have you creating amazing 3D work in no time. I reviewed the new features materials and was creating scenes in no time with th e models, seen es, and textures that were included in the software. (Sorry folks, the extras are only in the Pro version) So let's take a, look at some of those new features.

Let's begin with the four main workflow tasks Modeling, Texturing, Animation, and Rendering. In itially, you open the project on the Assembly Room where you put the scene together. You can quickly switch between these tasks to speed up workflow and to better visualize the final output

In this version, 3D Paint is a key new feature, which can be accessed from the Assembly Room. It allows textures to be selected, edited, and painted onto an object, as well as giving access to various channels and shading domains (RGB, RGBA, etc.). This tool gives you four standard wa,ys of applying paint to your object: the default paintbrush, an airbrush, an image stamper, and the line tool.

Carra ra I!~~ ? PAD

Another new feature is Multi:-pass .Rendering, which allows you to render the image out as multiple shader layers saved as separate image files. This offers severa I benefits, on e of wh ich is th at it increases productivity: Artists can render out a scene and perform postproduction work on individual layers, rather than having to make changes to the scene and render the whole thing out again.

Here's another new feature that I really like. You can now import DAZ-format content without having to go through the hassle of plug-ins or workaroundsl This means that you can perform DAZ Studio or Poser tasks and have the modeling, rendering, and animation features of Carrara al;1 in one place.

Included in the Pro version is a fair number of models, scenes, and extras that are well worth the upgrade .. In the Standard and Pro versions, the UV Editor has been expanded so you can edit UVs in the main viewport and you can relax UV seams when in the ed itor. The Pro version also gives you the ability to unfold UV maps.

Overall, Carrara 7 has a lot going for it as an entry-level 3D application. The new features definitely make this a worthwhile upgrade, as the 3D Pai,nt, rendering options, and content support (to name a few) give it a lift from previous versions. Its low price and learning curve make it a great so I uti on for stude nts a nd a mate ur desig ners; however, its robust features makes it ideal for the professional crowd as well.-Bruce Bicknell

Company: DAZ Productions, Inc.

Price: $549 (Upgrade $349.95)

Web: www.daz3d.com

Rating: •••••

Canon PowerShot 010

COMPACT CAM ERA FOR THE ADVENTURER

The Canon PowerShot Dl0 is billed as a rugged camera for the adventu rer, and it certa in Iy looks and feels the part, The 01 Ois waterproof to 33', shockproof to 4', and Ireezeproof to 14° Fahrenheit. It incorporates importa nt features, such as a 12.1-megapixel CCD sensor, optically stabilized 3x zoom lens (3S-10Smm equivalent], 25" LCD, and video capability, all in a solid body. Also included is an innovative wrist strap that you Col n attach to a,ny corner of the came ra (a, carabiner is optio na I)

You'll find only essential buttons on the D1O, but all settings are easy to access th rough the fu nction buttons or menu. The zoom lens is fast and quiet, and the LCD is bright and easy to read in all lighting conditions. Battery life is great, requiring only one recharge during testing.

All of these features come together to produce images that are a mixed bag. My first recom mendation is to use center weig hted or spot metering only, as eva luative produced unpredictable results. The exposure and color were correct in some photos, while others had haloes, blown out subjects, or were out of focus. Switching to center weighted or spot metering remedied this, though focus was a bit soft at times.

The ISO range is from 80-1600, with a push to 3200. Noise is obvious at 400, prevalent at 800, and at 1600, the photos are so noisy and soft they're unusable. Why ISO 3200 is even offered is beyond me (plus you have to access it as a scene mode and not through the ISO settings). Macro photos are sharp, and shooting underwater yielded good results when uS'ing center weighted or spot metering.

If you're lookinq for a tough compact camera you can take almost anywhere, use pools-de, or when ka,yaking or canoeing, the PowerShot 010 mig ht be what you're lcokln g for, provided you're not expecting professional results.-Mike Mackenzie

Company: Canon U.s.A., lnc,

Price: $329.99

••

CtrlChanges Pro

CHANGE-TRACKING PLUG-IN FOR INDESIGN AND INCOPY

Tracking changes in text-heavy documents can be a real headache

,

especially if several people are working with the files .. CtrJChanges Pro helps keep your text tracking under control by showing you exactly what's been modified in your InDesign CS3 and C54 files. The plug-in tracks all text changes, shows added and removed text, tracks who made changes and when, can print a list of changes, builds PDF reports, color-codes text chanqes based on author, includes the ability to accept or reject changes, and can bu i Id POF versions of your InOesign documents with changes shown as sticky notes.

CtrlChanges Pro is amazingly easy tc use, and its features are nicely grouped under a special menu item and also in a tool panel. Text change highlighting can be shown or hidden, which is really useful when lots of people are modifying your document's copy, and change tracking can be disabled for documents where text control isn't critical. InDesign an d InCopy C54 users can hover their mouse over text changes to see who made the modifications, along with a date and time stamp.

On the down side, licensing goes smoothly on a Mac only if you're logged in as an administrative user. Entering a license code as a standard user fails without any indication that something went wrong, and the installation instructions don't mention the administrator requirementsomething that could easily be avoided with a simple warning dialog.

Despite some potential confusion when entering license codes, CtrlChanges Pro does its job like a champ. It makes tracking text cha.nges in your InDesign documents wonderfully simple, and its change history makes it easy for project managers to keep up on a document's evolution, too.-Jeff Gamet

Company: Ctrl Publishing

Price: $549

Web: www.ctrl-ps.com

Rating: ••••

87

r'"" ""' m

" '" :;:

» .n » N

-z m

o ro ---<

ru o o

'"

E o u

ur z:

N « Ll' « I: .,

'" uJ

,_

« ...J

88

l r e v r e w s l

Nikon D5000

ENTRY-LEVEl DIGITAL SLR WITH ARTICULATED LCD

The new 12.3-megapixel Nikon 05000 is targeted at people steppi ng up to a digital SLR from a point-and-shoot. It includes an articulated 2},' LCD, a first for a Nikon digital SLR, so it will look familiar to users making the transition. The DSOOO shares some features with the higher-end D90, including the image sensor, Live View, and the ability to record 720p HD movies. The articulated LCD makes using Live View

and recording movies from multiple angles much more practical.

The DSOOO incorporates an effective Airflow Control System to remove dust from the sensor; has a shutter life of more than 100,000 shots; can shoot continuously at a respectable four frames per second (fps); uses SD and SDHC memory cards; and records RAW and JPEG formats alone or in combination. The EXPEED processor features practical, in-camera, postcapture effects, such as Soft Filter and Color Outline, Perspective Control, active D-Lighting to optimize shadow and highlight detail, and correction of lateral JPEG chromatic aberrations. The image quality is very good; however, I have a plea to all camera manufacturers: If you create yet another proprietary RAW format for your cameras, please don't release the camera until the RAW format is supported and ready to go. Buying a new camera and then waiting until the proprietary format is supported is not practical for users. This was the case with the DSOOO_ I shot and printed only highquality JPEGS. Thankfully, the sensor has a relatively wide dynamic range and image quality was very qood.

The test unit included a very good, inexpensive NIKKOR 18-SSmm, f/3.S-S.6 VR kit lens. Unfortunately, the DSOOO doesn't have an internal autofocus motor to support older N I KKOR lenses. The lightweight DSOOO has a pop-up flash and hot shoe for the optional flash and GPS units. The shutter is quiet, the grip is comfortable, and the mode dial

and controls are in convenient reach. The mode dial has the standard Program, Shutter, Aperture, and Manual modes, plus 19 auto preset scene modes. The movie and Live View mode share a dedicated button. An information button accesses an onscreen manager for adjusting frequently used features, allowing you to avoid unnecessary menu scrolling. The ISO range is from 200 to 3200, with a Lo-1 setting of 100 and a Hi-1 setting of 6400. It produces files capable of making quality 13x19" prints.

You can captu re AVI-format video at 1280x720p HD, 640x424, or 320x216, all at 24 fps. Sound is monaural. While recording video, contin uous autofocus isn't ava i I a bl e, so you're left a djusti ng the focal length and focus of your zoom ma nua Ily, which I found cI u m sy. You can shoot a still frame while recording a movie but that ends the recordingan implementation that seems to defeat the purpose. Although video capture is a big advance and the HD quality is good, it's limited to 2 GB or five-minute sequences, making it more a fresh novelty than a professional tool. HDMI output connectivity is included.

The 230,000-dot, low-resolution LCD is unconventionally hinged at the bottom, limiting its movements when mounted on a tripod. Otherwise, it swings down 1800 and rotates 270° for com posing h igh- or low-angle shots, You can even take a self-portrait using Live View. I hope Nikon's next iteration of Live View will include a live histogram for making precision exposures. The low-resolution LCD makes it difficult to judge detail and focus in open sunlight. Live View uses contrast detection for focusing and is slow compared to the responsive l1-point AF sensors in the optical viewfinder. The DSOOO performs very well, produces quality files, and is a giant leap from a point-and-shoot.-Steve Baczewski

Company: Nikon USA Price: $729.95 (Body); $849 (w!18-55mm VR lens)

Web: www.nikonusa.com Rating: ••••

.......

. . ~ ..

.... .

CIOW by Rene BlClm

90

E o u

ur z:

N « t:l' « I:

"' 0::

ur ,_

« ...J

l r e v r e w s l

Vue 7.5 Infinite

CREATE, ANIMATE, AND RENDER 3D ENVIRONMENTS

Vue 7.5 Infinite from e"on software is a standalone product used for creating natural 3D environments from the ground up It was released with Vue 7.5 xStream, which is a more integrated solution for use in Autodesk 3ds Max, Maya and XSI, MA.XON CINEMA 40, and Newtek lightWave (and it casts a bit more as well). They oHer several versions, so there's sure to, be one far every price and level of designer, from begin ner to adva nced.

If you're nat familiar with Vue Infinite, it's an advanced application used for creating, animating, and rendering 3D environments. It's been used by many studios for matte pa inting and specie I effects, a nd has been featured in movies such as Pirates of the Caribbean: Dead Man's Chest and Indiana Jones and the Kingdom af the Crystal Skull. So you can see this is a pretty amazing program that allows you to create some great work with a level of detail that you'll be very pleased with.

Vue 7.5 Infinite enables you to create scenes from scratch, beginning with the terrain, then clouds, water, plants, etc., until you have the landscape that you want The a mazi ng thi ng about how the terra in 'is created is that the scene is always very detailed, even when you zoom in. The overall quality and handling ofthe procedural terrains have been drarnatica Ilyimproved over the previous versions. Improvements began

with version 7, which allowed yau to, choose from two groups of presets: ordinary procedural terrains and infinite terrains (which creates procedural terrains so large that they offer the option of using it to replace the g ro u nd pia ne), This ca rries over in 7. 5, a long with the new features of material mapping on terrains, planetary rendering, improved cloud technology, and ani mated EcoSystem population.

Not to 'be overlaoked, Vue's ability to create realistic 30 plants and trees is truly impressive. To create these, all you have to do is click on the Plant tool' icon. Vue 7.5 has a more robust selection of species (rn ore than 160) an d in cI udes categ aries such as grass, sh ru bs, trees, and more. But that's not all It's not too often that you just want to put one tree or shrub into a scene, so that's where Vue's amazing EcoSystem technolcqy com es in. This allows you to, lead a mixtu re of plants, rocks, and terrain to create a. visua Ily p leasin g landscape. To top that off, the new animated EcoSystem populations featu re enables you to create pop" ulations of elements that evolve over time, such as the growth of a forest.

This review only barely scratches the surface of what this program has to offer I th in k th is is defi nitely a prog ram that you'll wa nt to check out if you're creating landscapes of any kind for the digital world. I use Vue as one of the tools in my creative workflow because it works qreat with my ather 3D applications and it's my favorite tool to compose and render scenes.-Bruce Bicknell

Company: e-on software, inc.

Price: $895 (Download); $935 (Boxed)

Web: www.e-onsoftware.com

Rating:... •

... I' • • •• •



I •

....- .

Not: Expensive; powerful system requirea; steep learning curve

Down & DirtyTricks

pC

Scott Kelby's very first book triumphantly retums!

New look New material. Stilil/Down & Dirty.'

Before there was a PhotoshopUser TVer a Layers magazine, there was a "Down & Dirty" book filled with all sorts of tips and trlcks on recreating the most popular effects of the day, .. for Photoshop 5.5. The very first book Scott Kelbyeve published.

Fast-forward a few years. Now a five-time best-selling author, Scott Kelby revisits the book that started it all in a highly anticipated update for CS4 that shows you:

• The latest photographic special effects

• How to fake studio shots (you'll be amazed at how it's done) $ 99*

• The latest cutting-edge type effects

• The most popular effects used by big movie studios Kelby Training

• The most-requested advertising effects Price

• Commercial effects that clients go crazy over

• The most asked-for current Web effects

• Amazing 3D effects using Photos hop Extended

• Plus loads of effects that look hard, but are easy once you know the secrets

$ 699*

NAPP Member Price

It's all here, in this completely updated version of the Photoshop book that launched a thousand tutorials. You're gonna love it! Cover price $44.99

l r e v r e w s l

Manga Studio EX 4

COMIC- AND MANGA-CREATION SOFTWARE

As an animator, I'm always excited when Smith Micro announces a new version of their products. and the release of Manga Studio EX 4 is no different. Smith Micro tweaked the existing tools and added a host of new features, including a su ite of vector-graph ics tools, professional color set, mesh transformation, improvements to the text capabilities, and much more. Those of you who are Iarnil iar with Manga Studio EX 4 know that it's considered the go-to program for the comics art industry, but artists in many areas are finding the features offered are useful in their fields as well

For those of you who aren't sure exactly what Manga Studio is.It's a vector- and rester-based program that allows you to create drawings using the Pencil tool naturally, as you would with a traditional pencil and paper. It's even better if you're using a Wacom Cintiq tablet (or any Wacom product) as it gives you total control over your lines and inking capabilities. It offers numerous tools for toning, speed lining, lettering, and perspective. It also allows the importing of 3D objects and 2D images and the importing and exporting of file types including JPEG, BMP, PNG, PICT, and TIFF.

Some really cool things are heppeninq in the new version of Manga Studio EX 4 with both new features and improvements to toolsets and functionality For me, the new vector toolkit and the professional color set are the two best new features .. The vector toolkit allows the new vector drawing tools to integrate seamlessly with rasterized pens. This makes it possible to convert a raster layer into editable vectors. The Pen and Li ne tools still fu netic n as they did in the previou s versio n no matter which format you choose, but the vectors allow you to scale up

E smoothly for a, clean image. The professional color set is Just as irnpres-

o u

ur z:

N « t:l' « I:

"' 0::

ur ,..

« ..J

92

sive, as ,it has addressed a huge limitation (lack of working in color) that Manga Studio 3 had compared to other art programs on the market. As with anything, you could work your way around this by assigning a specific co lor to an individual layer, but if you were going to work with many colors, this definitely wasn't the solution, With Manga Studio EX 4, the prob lem h as been addressed. In additio n to the 1-bit (b lack only),

2-bit (black and white), and 8-bit (grays) layers, you now have a 32-bit color layer. This new layer allows you to place all the colors you want onto one layer, making hfe much easier.

As with any review, there's never enough time to go through all of the new features or updates but some others worth noting are the addition of a profession a I fi Iter set th at gives you a suite of a dva need creative filters; a new story editor that a Ilows yo u to enter and edit the text for your enti re story and distri bute it across pages; a nd advanced text in put so you can enter text directly on your page. The most notableupdates are th at yo u ca n ex port to more fo rm ats th a neve r before with th e add ition of TI FF and PDF. Also updated are more 3D objects and fu Ily custom iza ble pattern brushes.

Manga, Studio EX 4is a comprehensive program for creating comics or illustrations of any kind. There's a bit of a learning curve for the begin. ner but there's content a nd tutorials that will get youu p to speed in no time. Professionals will have no regrets, as this is the best program out there for creating comic graphics and boards, bar none.-Bruce Bicknell

Company: Smith Micro Software, Inc.

Price: $299.99

Web: www.smithmicro .. com

Rating: •••••

- ..

. . ,... - ..

PDF21D v2 Professional

CONVERT POFS INTO EDITABLE INOESIGN FILES

PDF2JD now comes in two versions: Professional and Standard. Professional includes all the Standard features, plus three unique features For just the second version of the PDF21D plug-in, it has a nice list of new features.

Two important new features are frames linkinq and the Typeface library. Frames linking does exactly what the name implies-it tries to intell ig ently I in k the fra mes based on similar type styles. It appears that the text linking is limited to single psqes, as it didn't link across spreads. The Typeface library is a repository of saved font substitutions, which can be referenced for future documents-a big time saver when dealing with standard Windows-to-Mac fonts or Type1-to-OpenType conversion s. (In Desig n could use this featurell

Other useful features include the ability to save presets of the conversion settings, and the PDF inspector, which gives general information about the PDF before conversion. The Professional version adds the option of color spaces other than RG B, converting images to CMYK-TI FF, and multiple-processor conversion. It's well worth the extra $100 for those in the printing business.

There a rIO a couple of features I'd like to see in the next version (in additi on to even more accurate translation): Paragraph and character styles named by the typeface and type size to help identify where the styles were used; and the abi I ity to i nsta II the p lug-in in d ilferent versions of InDesign on the same computer (currently, the plug-in removes any previous install, even of the same versio n).

While the PDF21D plug-in works well overall, don't expect seamless translations-even for simple PDFs. A great deal depends on how the PDF was created. This version did a better job converting graphics, but still' had trouble with basic two-column text threads. If you need to convert a number of PDFs, this plug-in can save a lot of re-creation time.-David Creamer

Com pany: Recosoft Corporation

Price: $399 (Pro); $299 (Standard)

Web: www.recosoft.com

Rating: •••

Hot: Easy-to-use conversion R: ug-In

iI· ••

& • I. I

. . .. . . .

. - .

Fusion Charts for Dreamweaver Designer Edition

ANIMATED CHARTS FOR DESIGNERS

If Dreamweaver is your main website-development tool, you'll want to give FusionCharts for Dreamweaver a test run. This extension insta lis in the Drearnweaver Insert. panel and provides a user-friendly interface for creating animated, colorful, interactive, and data-driven charts.

If you don't like looking at code, you'll appreciate the ability to add interactive, animated Flash charts to a webpage without ever leaving Design view. The FusionCharts interface contains three tabs: Data Grid, Chart Selection, and General Options. The Data Grid tab allows you to manually enter data; or import it from either a CSV or XML file. The Chart Selection ta b displays 34 types of 2D an d 3D ch arts from which to choose. The Advanced button expands the panel to display an array of menus that allow you to customize almost every aspect of your chart. The last tab, General Options, provides settings for specifying your chart's dimensions, font size, adding labels, and more.

One of my favorite features is the inteqrated preview. The Preview button is always available so you can view your changes before the final chart is published If you accidentally dick the OK button before you mean to, you only have to select the chart in the HTML page and cI ick the Ed it Chart button

I found FusionCharts for Dreamweaver easy to use and was impressed with the hundreds of presets and styles The on line documentation loads quickly and is easy to understand. The gallery of examples is inspiring. While there are other chart-building applications available, it's worth your time to download a trial copy.

FusrorrCherts for Dreamweaver is available in Designer and Developer Editions. The Designer Edition, which was used for this review, is for users who want to create an irneted charts with out writi ng code. The Developer Edition is for developers who create database-driven websites.-Cyndy Cashman

Company: Extend Studio

Price: Approx. $87.07

Web: www.extendstudio.com

-.: =~

Rating:.. ••

liCI .... '. iTlili;1Rr:I

93

N

"Z m

o ro ....

ru o o

'"

LIN OA lACKS

,. o u

ur z:

N « Lf1 « ,.

"' 0::

ur ,_

« ...J

94

more hot tips for the coolest applications

[ADOBe PHOT05HOP [54]

[ADOBe mnesrqn [54]

B Y

PET E R

8 A U E R

B Y

DAVID

pRINTINCj PANTONE

You want to use a specific Parltone color in your artwork, but you'll be outputting to an inkjet printer, so you can't actually print that spot color. What to do? Cjick on your Foreground color swatch to open the Color Picker, then click on the Color Libraries button, select your spot color, and click OK. Photoshop automatically selects the nearest RG B (or CMYK or Lab) equivalent of that Pantone color, and you can paint, fill, or stroke using the new Foreground color. Already have a spot channel? Click on it in the Channels panel and then select Merge Spot Channel from the Channels panel's flyout menu,

WRAP IT Up

If you use clipplnq paths to knock out backgrounds and then turn on text wrap in InDesign, the text automatically wraps around the image usirlg the clippinq path; however, sometimes the text wraps into areas of the image you don't want If you want more control over the text wrap, in Photoshop create a selection from the path in the Paths panel, save the selection (Selecl>Save Selection), deselect, make Alpha 1 channel visible then active in the Channels panel, use the Brush/Eraser tool to modify the channel, and save the f Ie .. When in In Design, you can change the text wrap to use the Alpha Channel (your saved selection) in the Type drop-down menu in the Contour Options section of the Text Wrap panel.

CUSTOMIZED CjRADIENT MAp Image>Adjustments>Gradient Map is a great way to create interesting images The color to the left is mapped to the image's shadows and the one to the right is mapped to the highlights. But wait, there's morel Click on the sample gradient to open the Gradient Editor and add additional color stops that will be mapped to tonal ra.nges between the shadows and highlights. You could even use a black-towhite gradient with a series of gray color stops to fine-tune a grayscale representation of your image .

BUTTON IT Up

If you're creating aninteractive PDF or SWF file, be sure to check out the Sample Buttons library, available from the Buttons panel menu (Window>lnteractive>Buttons, then dick on the menu icon at top right and choose Sample Buttons). If you have buttons that you want on every page, such as Next Page or Previous Page, put them on a master page. If you put them on the topmost layer, the buttons will: remain on top of all other objects.

[ADOBEl ru.usrrarnr [54]

BY DAVID C'REAMER

Ai

ARTBOARO RULERS

If you show the standard rulers in a multiple artboard document, you'll notice that the rulers extend over all the artboards, making them fairly useless on a per-artboard basis, Also, the standard rulers always measure from the lower-left corner of the first artboard, By se'lecting View>Show Artboard Rulers, each artboard can have its own ruler, starting in the upper-left corner of the artboard. Unfortunately, the X/Y coordinates reflect the global artboard ruler, not the individual artboard rulers.

[ADOBe A[mBcrr 9 pro]

BY DAVID C'REAMER

LARCjER COMMENTS

If the comm ents are looki ng a little smaller since your last birthday, you can increase their size in Preferences (Acrobat [PC:

Edit]>Preferences). Click on Commenting (the first Category in the list) and you'll see the first drop-down menu: Font Size, The only choices in the menu are Small, Medium, and Large, and if Large doesn't cut it, you might have to get a bigger monitor:

DELETE THE FIRST CHARACTER LAST

I recently had the "good fortune" to take a PDF form in EngI ish and create five PDFs in different languages. Now if you've ever h ad to ed itan enti re line of type, you might notice that the type will sometimes wrap up to the line above. This problem depends on how the PDF was created, but it's a fairly frequent problem. The easiest solution is to select all of the text except for the first character, type your new text, then go back and delete the first character,

REpLACE pACjES

If you like to use the thumbnail-drag technique to replace old pages with new ones, you may have noticed in Acrobat 9 that clicking-and-dragging from one document's Pages navigation panel to the other document's Pages navigation panel doesn't work any more, Now, you'll need to hold down the Command-Option (PC: Ctrl-Alt) keys to replace pages,

[ADOBe FlaSH [54 proressronat]

BY CYNDY CASHMAN,

P H

D

Ai

WORKINCj WITH TEXT BOXES

If you have paragraph-based text, you can Place (rather than copy-and-paste) Microsoft Word files, which gives you the option of including the Word formatting and styles, After you place it, you can color the background of the text box by carefully selecting the text box path with the Direct Selection tool (the white arrow). Finally, you can use Type>Area Type Options to inset the text from the edges of the text box. Note: this doesn't work with point type,

pREVIEW FRAME CONTENT

Have you ever wanted to see the content of several frames in the Tirneline at the same time? Then simply choose Preview from the Timeline menu (dick on the icon at the top right of the Timeline to open the menu). Now you can view thumbnail previews of each keyframe's content.

SpRAY DOTS

Why not use the Spray Brush tool to spray patterns of dots? Select the Spray Brush tool (it's under the Brush tool in the Toolbanln the Property inspector, make sure that the Default Shape box is checked, and check Random Scaling if you want to spray different-sized dots .. Click the arrow next to Brush to expand the panel (if it's not already) and enter a pixel value in the Width and Height fields to set the diameter of the brush. Then, just click-and-drag the Brush on the Stage to spray a pattern of dots.

[ADOBe nrearnweaver [54]

BY RAFAEL "RC" CONCEPCION

Ow

ELIMINATE "CLAS.5ITIS"

Wh en yo u s ta rt wo rki n g with CSS on a website, you r f rst impulse will be to create classes for every single element that needs to be styled on a page, creating a condition commonly known as "classltis." Instead, use the Compound type under the Selector Type drop-down menu in the New C5S Rule dia,log to create grouped selectors. By grouping selectors that will share the same styles, you'll dramatically reduce the amount of CS5 code you have to keep up with, mabing editing much simpler

Ow

USE TAB INDEX

When creating a form with multiple fields, keep in mind that many people will fill out this form using the keyboard alonefilling in one of the field s and immediately hitting the Tab key to move to the following field, By giving the fields a specific Tab I ndex number, you can control which form fields you start with and where the Tab key will guide the user, creating a more efficient data-entry experience. When entering numbers, simply start with number 1, and assign numbers to the fields as you want them to appear in the list.

95

r'" ""' m

" <II

:;: » .n » N

'Z m

o ro ....

'" o

o

"'

I: o u

LIJ Z

LIN OA lACKS

sweet answers for suite questions

[0]

[ADOBE' PHOTOSHOP [54]

When I press a number on the keyboard to change the opacity of the Brush tool, the Flow changes instead. What's up with that?

What's "up" is the Airbrush option: When the Airbrush is active, pressing a number changes the Flow, while pressing Shift plus a number changes Opacity. To reverse this behavior, simply deselect the Airbrush option in the Brush tool's Options Bar or the Brushes panel. Then if you type a single number, it changes the opacity in increments of 10% (4 for 40%, 6 for 60%, 0 for 100%), or you can type two numbers quickly for a more precise adjustment.

B Y

PET E R

'BAUER

[0]

I recently saw artwork with drop shadows going in multiple directions but if I try that, when I change the angle for the second drop shadow, the first drop shadow changes too. What's the secret to make this work?

By default, the Drop Shadow, Inner Shadow, and Bevel and Emboss effects have the Use Global Light opt jon checked on to ensure that the perceived lighting in your artwork remains uniform. When you don't want the lighting to be uniform, uncheck th is box and you can change the angle for that layer style without changing the I ig hting angle for any other layer.

[ADOBE' ILLUSTraTOr [54]

BY DAVID CREAMER

[0]

What happened to Picture Packages and Contact Sheets in Photoshop CS4?

[0]

When making a new symbol, I see options for making different types of buttons and 9-slice scalingwhat are they for?

Those functions a re now part of the Bridge C54 Output panel, which you can open from the Window>Workspace menu or by cI i cki ng the 0 utp ut b utto n in th e Ap plication B a r; If you prefer the older versions of these features, they're in the optional installs available through these links:

Mac: www.adobe.com/supportidownloads/detail.jsp?ftpID=4047

Those options are for symbols meant for export to Flash and, unfortunately, 9-slice scaling isn't available for use directly in Illustrator. In simple terms, what 9-slice scaling does is allow graphics to be resized without distorting the co rners of t he object.

PC: www.adobe.com/support/downl.oads/detail.jsp?ftpID=4048

[0]

I've converted an old document to Illustrator CS4, which supports bleeds. How can I add bleeds to the older documents?

Take a trip up to the File>Document Setup menu. There you can add bleed areas, which show up as red guides around the artboards. The traditional amount for conventional pri nting is 1/8" or 9 pts, As a note, bleed guides are added to all document artboards.

B Y

[ADOBe mcssrqn [54]

CREAMER

[0]

[0]

D A V I D

When I import scanned line art into InOesign, the output is never as crisp as the original. ls there a setting in InOesign that will improve output?

It's more likely an issue of how the art is scanned. Scanning line art incorrectly is a common problem, as it's completely different from scann ing color or graysca Ie photos. First, you should scan line art in black-and-white mode, not grayscale or color. (In Photoshop, the mode is known as Bitmap.) Be sure to scan the art at high resolution, between 900-1200 ppi (not the default 300-ppi setting). Then save the file as TIFF with LZW compression (Photoshop PSD format is OK, but there's no advantage). But never save the file as JPEG. Barri ng qua I ity issues with scann er optics, the scan sh au Id look as good as the original.

I create a newsletter every month that prints in black and a Pantone [solid] color. I can easily change the InDesign cotor but the imported art from Illustrator and Photoshop has to be edited individually. Is there an easier way to change the Pantone coior on all the imported art?

It could be handled with the Ink Manager (select Ink Manager from the Swatches panel's flyout menu), but I'd rename the spot colors "Spot Color" in all three programs rather than an actual Pantone-named color. Then just tell the printer what Pantone color you want Spot Color to be every month. The only downside with this method is that the on screen preview might not be accurate, but for simple spot color usage it can save a lot of time.

iB Y

[ADOBe AcrOBaT 9 pro]

CREAMER

[0]

[0]

D A V I D

How can I duplicate pages in a PDF?

In the Pages panel (View>Navigation Panels>Pages), hold down the Option (PC: Alt) key and click-and-drag the page you want to dupl.icate to a new position in the Pages panel.

Is there an easier way to copy a button to every page on a form other than copy-and-paste?

Yes; after you've created the button, Control-click (PC: Right-click) on it, and choose Duplicate from the menu. In the dialog that opens, you can choose which sequential pages you want the button on.

B Y

[ADOBe nrearnweaver C54]

CONCEPCION

[0]

[0]

" R C "

Is there a difference between the comments that you'd use for PHP and HTML?

Yes there is. When you're working in HTML, you usually start a. comment with the <!-- symbols and end with the --> symbols. In PHP, you use a # sign for a single-line comment and /* symbols to start a multiline comment, closing it with */ symbols.

But here's the good part: Why worry about writing out all of this? In Code view, highlight what you want to comment, then dick on the Apply Comment icon (located in the Window>Code Inspector menu), and you'll get a dropdown with all the different comment symbols. To remove the comment, highlight the text and click on the Remove Comment icon.

Where can I go if I'm having problems with my CSS in Oreamweaver?

In Dreamweaver, choose Help>CSS Advisor and you'll be brought to an Adobe community site where you can research some common problems, as well as post your ind ividual issue for a solution.

B Y

[ADOBe FlaSH CS4 proressronet]

D

C Y N D Y

CASHMAN,

[0]

[0]

P H

How do I make an object look as though it's floating in space?

Flash allows you to make a 2D object appear in 3D space by adjusting the object's X-, yo, and z-axes. Select an object on the Sta ge. 0 pen both th e Property in spector a nd T ra nsform pan e I. Use the X, Y, an d Z co ntrols in the Tra n sfo rm panel to rotate the object in 3D space. In the Property inspector, move the object in 3D space using the X, Y, and Z controls. Adjust the perspective using the Perspective Angle control (camera icon) in the Property inspector.

How do I resize the contents of al/ the layers in a Flash document at the same time?

First unlock all of the layers in you r document, then dick th e Edit Multiple Frames icon located below the frames at the bottom of the Timeline. (It's the fourth icon from the left.) Use the Selection tool (V) to adjust the range indicator at the top of the Timeline so that every frame in the Timeline is selected. Open the Transform panel (Command-T [PC:

Ctrl-TD, and enter a percentage in the Scale Width or Scale Height fields.

97

rl> -< m :;JJi VI

" l>

.n l> N

:z m

VI '" "0

....

o n ....

'" o

o

"'

LAYERS

The How-to Magazine for berytl1Jng Adobe"

For adve rtising informati on, please contact Kevin Agren, VP, Sales at B13~433~2370 Fax: 813~433~5013

Email: kagren@kelbymediagroup.com

N

D

E

x

4 Over, Inc, ... , . , . , . , . , . , . , . , ., 1OG-l01 www.4over.com

[ A ]

Adobe Systems Incorporated .. ' . , .7

www.adobe.com/go/brilliant

Adorama Camera, Inc .. , . , . , . , ... , .. ,109 www.adorama •. com

AMCColorgrafix, ,.,.,.,.,.,.,., ,102

www"amc-color.com

Artistic Photo Canvas , . , 29

www.artisticphotocanvas.com

[ B ]

B&H Photc.. www.bhphotovideo.com

,., ,113

BlackRapid . , . , . ' . ' . ' . ' .....•....... .75 www.hlackrapid.com

Boss Logo ..... www.bosslogo.com

.' 105

[ [ ]

CAR-FRESHNER Corporation, . , ..... , .. 63 www.carfreshner.com

Copy Craft Printers wwwcopycraftcom

" ,103

Corel.. ... www.corel.com

., 89

cPanel.

" ,.,., ... , ..... ,., .112

www.cpanel.com

[ 0 ]

Dahle North America,.,.,.,., ....... 112 www.dahle.com

Digita! Photography Book, The, Vol. 3. , . ,98 www.kelbytraining.com

o

F

A

D

v

[ F ]

Fotolia ' www.fotolia.com

, , '" .9

[ G ]

Gridiron Software, Inc , ., ,., .71

www.gridironsoftware.com

[ I ]

iStockphoto.com , , . , ... , ... , . IFC-3

www.istockphoto.com

I.T. Supplies, www.itsupplies.com

., ,' ,10

[ K]

Kelby Training ,.,.,.,.,., ... , ....... 104 www.kelbytraining.com

( M ]

MacMall, ... , www.macmall',com

, ,.,. BC

Marlaware Software . www.marktware.com

' ,' .69

Media Graphix. . . ' 111

www.mediagraphix.com

Media Lab, Inc. . , . , . , . , . , ... , ... , ... .39 www.medialab.com

Mpix '

www.mpix.com

, ... , ... ,., .. 15

[ 0 J

onOne Software www.ononesottware.com

" .51

Every ~!tempt ha, been mode 10 m~ke Ihi, h.ting~, complete es possible, Howev~" its ~ccur~cy cannot be guor.nteed.

E

R

T

5

E

R

[ P]

Peachpit Publishing Group www.peachpit.com

.. ,' .81

Photoshop C54 Down & Dirty Tricks, .... , .91 www.kelbytraining.com

Photoshop World Conference & Expo. ,53-58 www.photoshopworld.com

Print Factory, Inc. , . , . , . , . , . , . , 108

www.GoPrintFactory.com

PrintRunner , www.printrunnercom

""" ,110

[ R ]

Really Right Stuff www.reallyrightstuffcom

[ 5 ]

Shutterstock .. , . , . , . , . , . , , IBC

www.shutterstock.com

Softpress . . . . .. , .79

www.softpress.corn

[T]

Tiffen ..............•...•....... , .. 11 www.tiffen.com

[ U ]

UPrinting.com .. . . . • . .. 106-107

www.uprinting.com

[W]

Wacom., .. ,

,.,., ,.,.,., Al

www.wacom.com/americas

[ Z ]

Zoo Printing .. www.zooprinting.com

............. 112

99

5

'" o

o

"'

r...

"' m

" '" :l'

» .n » N

:z m

o n ..

... 47

SUPER TRADE PRINTER

SUPER TRADE PRINTER

SUPER TRADE PRINTER

SUPER TlADE PIINlU

Vous aimerez peut-être aussi