DESIGN

WEB

V IDE 0

EDUCATION

THE HOW-TO MAGAZINE FOR EVERYTHING ADOBE

JANUARY/FEBRUARY

2 009

iStockphoto.com I The world's leading stock destination

[COVER

STORY]

Z8] Negative Space

Be i n g neg ative isn't a Iways a bad th i ng. Take sp ace, for exa m pie. Place the word "negative" in front of it and what do you have? YOLJ have less work. Negative space=zero design elements=less work. Get it? And the kick is negative space is a powerful design technique. Powerful design, less work. Wow, life is sweet_-Jacob Cass

E

" u

"'

::

~ [FEATURE]

m E

en L

'" ,.

,"' ---'

04

34] Taking It to the Desktop

If you're already a Web designer or developer creating applications for Web browsers, then you're just one step away from creating powerful applications for the desktop_-Lee Brimelow

[TUTORIALS]

42] Adobe Photoshop Lightroom 2:

Get It Together with Lightroom 2 and Photoshop CS4-Chris Orwig

48] Adobe Photoshop CS4 for Photographers:

Making a Better Mask-Sean Dugg.ln

52] Adobe Photoshop CS4 for Designers:

Wate~, Water Everywhere-Dave Cross

59] Adobe Illustrator CS4:

Text Messaging-Corey Barker

66] Adobe InDesign CS4:

Fast Layout in CS4- Terry White

70] Adobe Acrobat 9 Professional:

Build a Better Portfolio- Taz Tally

76] Adobe Dreamweaver CS4:

Edit a,n AJAX Drop-down Menu -Janine Warner

82] Adobe Flash CS4 Professional:

New Timeline Animation in Flash (54 -lee Brimelow

88] Adobe After Effects CS4:

Flower Power-Steve Holmes

92] Adobe CS4 Production Premium:

Powering Search with Audio Metadata -Richard Harrington

pagE' 28

[COLUMNS]

16] Design Makeover:

Make lt Saucy-Jake Widman

20] Artistic Expressions:

A Brush with Inspiration-Corey Barker

38] The Digital Camera:

Feel the Photograph-Rick Sammon

64] The Art of Type:

Reading Between the Lines-James Felici

86] Digital Video Solutions:

Photography, Videography, and Cinemetography Converge-Rod Harlan

[DEpARTMENTS]

8] Letter from the Editor 12] Layers News

24] The Digital Canvas 26] Designer Spotlight

104] Tips & Tricks

106] Creative Suite Q&A 122] Desi g n Contest

[ a N

THE

pa~e 24

COVER]

As the Vice President and Art Director of Color and Magic, Inc., an Atlanta-based creative firm specializing in photography and design services, Ben Sutherland has worked with high.profile companies such as Coca-Cola, Delta Air Lines, and Hilton Hotels. Look for Ben's art throughout this issue of Layers.

[REVIEWS]

99] Permanent Press=Jay Nelson

98] Toon Boom Digital Pro-Cyndy Cashman

99'] Epson P-700D Multimedia Photo Viewer-Steve Baczewski

100] The Cerise Quad-Core Workstation-Bruce Bicknell

101] Epson PowerLite Home Cinema 1080 UB-Chris Main

101] YouSendlt-Jay Nelson

102] Badia Printools 5-David Creamer

102] AKVIS SmartMask 2-Dave Huss

05

,ib,J Whenever you see this symbo.1 at the e. nd 0. f an article, it means there's either addition.' al material or a download ... for that story at www.layersmagazine.CQm. So be sure to visit the website end check it out.

'I I I

'"' " " "'

E " u

.; ;;

N m cr-

'"

E

on L .. >

"' -'

www.layersmagazine.com/categorylenewsletter

Want to keep up to date on allthe latest tutorials on both the Layers website and in the magazine, as well as all the latest industry news? Visit the Layers website now and sign up for om monthly s-newsletter.

[LAYERS

TV]

Hosted by Corey Barker and Rafael "ReN Concepcicn wwwJayersmagazine.com/tv

Be su re and join Corey' and RC in their weekly video podcast. From killer tips and tricks to full-blown tutorials, Corey and RC cover all of your favorite print, Web, and video apps.

[DESICjN

[ONTEST]

www.layersmagazin.e.com/designcontest.html

Every issue, we have a new Layers Back Page Design Contest where you can show us your skills, Be sure to visit the Layers website for a:1I the details a nd to se e the cool p ri zes that yo u cou I d wi n,

[NEWSLETTER]

06

[TUTORIALS]

We're always adding new tutorials to the Layers website, so be sure to visit often. In fact, we've kind of gotten in the habit of addi ng a !lew tutoris I every day of the week. So every morning while you're drin'king your coffee and eating that nutritional, nonfat donut, be sure to click on yOUT Layers bookmark to check out the latest tutorials on YOlJr favorite Adobe apps, And don't forget to sign up for our 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.comfcategory/photoshop Background Experiments with Photoshop and Illustrator (Video) With a little expenrnentation (a,nd a little fun) you can create your own trendy, techno backqrounds for your desig-n projects=-Deve Cross

[ILLUSTRATOR]

www.layersma.gazine.com/category/illustrator Animate a Flying Bird Using liJustrator and Flash (Video):

In this two-part video tutorial, learn how to draw a bird in lllustrator and then animate it in Flash,-J. Schuh

Mapping Photos to 3D Objects in Illustrator (Video): Have you ever wa nted to wrap a photo around a 3D object in lilustrator? It's easier than you think, an d we'll show you how.-Corey Barker

[FLASH]

www.layersmagaz.ine.com!category/flash

Flash Video the Easy Way (Video): In this three-part video series, find out how to get your Flash video up on the Web using Flash and Dreamweaver.-Tom Green

[DREAMWEAVER]

www.layersmil9i1zine.comlciltegory/dreilmweilver Using iframes in Adobe Dreamweaver (Video): Learn what ifrarne s a roo a nd how to crea te and take adva ntaq e of ilrarne s in your website designs.-Geoff Blake

[AFTER EFFECTS]

www.layer5ma;ga~ine.CQm/category/aftetetfects Animated Handwriting in After Effects (Video): Learn how toa nim ate text using th e stroke effect in After Effects. -Corey Barker

•

I

,,,.

www.mediaJab.com ~ medialab

o Qsno;p P u ln

Finally, a Photoshop plug-in that converts your designs into standards compliant, (55 rich webpages.

***

Photoshop Magazille - 5 Stars

Take .. , .

f· ownershi

o your website

Effortlessly convert your Photoshop designs into gorgeous webpages without leaving Photoshop or writing a single line of code.

Create web pages as perfect as your designs

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

Web Standards XHTML/CSS

No coding az.-"..' Required

Fun and Fast!

. .

Microsoft Windows

Mac UnlllermJ

E

" u

oi

N '" '"' 1'11,

E

en, '-

'" >-

ru

08

looks like w

made it

HOW WE SURVIVED THE YEAR 2008

I think anyone in the publishins business will tell you that 2008 was a tough year 'for the rnaqazin e industry; Welt I guess 2008 was a tough year fer Just about every' industry (except for the oil industry, of course), BU'j as we stand here today moving into 2009, l'rn thankful ~and incredibly relieved) thai 2008 tu rned out to btl a year of _g.reat growth for Layers maqazine, both in advertising {whien Is key to ,a maqazine's success) ana subscriptions (freaky, I know).

As excited as I am about the maqazine's growth in print (an d believe me, I'm thrilled), the growth in Web traffic at www.layersmagaline.com (the rnaqazine's companion site) is even more" amazing. Our traffic, year over year, is up 267%! We're particularly psyched about this because in 2008 we put a lot of work into making the website a real extension of what we do here in the magazine-a place where our readers can go between issues and stay cu rrent on Illustrator, Drearnweaver, InDesign, Photoshcp, Flash, After 'Effects, and allthe rest 0,1 the Creative Suite a.pps.

We post a new tutorial every weekday on LayersMagaline.com, which is pretty amazing by itself. But beyond Jusl providing more. content, the heart and soul of the site is our own Rafael "'RC" Concepcion, who writes the daily Living in Layers blog (which is packed wit;h info you won't find anywhere else) and co-hosts Layers TV (along with Corey Barker), the weekly Adobe "how· to" show produced by thisrnaqazine (and available right on the homepaqe).

l. .we put a lot of work

into making the web-

site a real extension

of what we do here

He has made th E! site 0 continuation of what we do h ere in the rnaqazine, and if yQU haven't been by the site, Y0l! hove to slop by and just dig in, I really think you'lllove iI-I believe you'll be amazed at the depth and breadth of what's happening there, and you'll see for yourself why our traffic has literally taken off, and continues to soar.

Here 011 the print side of- Layers, I'm very fortunate to have Chris Main as my Managing Editor, who has dedicated himself to bringing In nothing burthe best, most talented, gifted, and giving writers and trainers on the planet, and it's this dedication that hasblessed us with such a fiercely loyal subscriber base and following. Each issue" Chris tries to take it up a notch-and our cover story for this issue is no exception,

It comes from a real rising star in the worldwide design cornmunlty, Australian-based designer Jaccb Cass. I~ his feature, "Negative Spate," he demonstrates why what you. leave out of your deSign 'js jU$1 as lm portent as what you put in, and he looks 0,1 holl/' this relates to print, Web, and 1.090 design-it starts on page 28. After you've read his piece, make sure you visit his popular site,

www.justcreativeaesign_com, to see more of his work.

Also in this issue, Lee Brimelow gives us a feature called "Ta.king It to the DesktQP," where he shows hew to take your existing Drearnweever, flash, or Fiex skills arid create desktop apps that run in Adobe AIR .tt starts on poge 34.

Anotherthing that's been a big hit with readers is our "DesignerSpotlight,"wilere we feature the work of a cuttinq-edqe desl9,nerthroughout the mag<lline .. lhis issue we're honored to fe~ture the work of Ben Sutherland. For more of BS'fJ'.s work, visit his website at www.co.IDrandm3gic.wm/design.html.

of course, all your favorite regular columns, article" and the' industry's most trusted reviews are here as well,

I want to give you my personal thanks for your support this past year-support that helped make both the magaZine and the website a: hL(ge success. which has enabled 'Us to provide mote content, more news. more reviews, and more. tr aining than ever before. Thanh to everyone wf>o subscribed, every company that advertised, and everyone who bought a copy on the newsstand, I,t means a lot,

Aid my best,

4rfCOl

0'1;1 Kel

EPSO:N· P-6000 I P-7000 Multimedia viewers

P-6000 80gb

P-7000 160gb

With ",uprmor ImBlJ" '1""/11]1 u."" .. Multtmed/B vi_ant am essential for backing up and vlf1'lilng Imllges, lapl;op frea!

~ EPSON· Artisan 800

~ AII .. ln .. One

• Print. cOPY. sea n, photo. fax. wi- fi

• Photos in as fast .as 10 second s

• Ultra H D photos Is st 4x 10 nge r than lab ·2 -year limited W8 rranty wi th registration • Auto document feeder, 3,5" LCD

Ultimate Studio All-ln-One Printer

EPSON· Exhibition Fiber Paper Combining the artistry of traditional photography with the ease and control of digital output.

Features

• Fiber base

• 13 mil thick

• Soft gloss

• Instant-drying

Mail-in Rebate! BUY 3 get one FREE

For a limited time buy three, qualifying boxes of selected Epson Exhibition fiber Paper amJ receiVe a reba1e (by mall) for the cost of one box, Offer ends 10/15/2006.

Full line of SUDDlies (Call for Calalogl FREE shippillg on all ordurs ovor S99

1.800.111.9665

www.itsupplies.!com

5100 Newport Dr. Suite #6 Roiling Meadows, iL 60008

L

YERS

THE HOW-TO MAGAZINE FOR. EVERYTHING VOLUME 5 • NUMBER' • PRINTED IN USA

www.laye rsrn agazi n e.com

E

Scott K.lby

MANAGIN,G WITOR AS,OC1ATO WITOR' AS\OCIAH wlTOR ASSIST AMT WITOR TR AFFIe DI ~ECTO g

DYNAMIC MEOlA IED!TO~

Chris Main

Mike- Mackenzie Barbara Thorn pso n I"" S mizen bac h Kim Gabriel

Rod Harlan

GRAPHICS/NEWS EDITOR Aaron We,tg.te

CONTRI BUTIN G WR ITERS SIeve BaGZO"" ki - COfOy Barker

Peter B~ uer • Bru ce Bl ckn ~II • Lee Brimelow . Cyndy Cashman- Jacob Cass • "RC Concepcion- David Creamer • Dave Cross· Sean Duggan james Felici . Ma reus Geduld . Ri chard Harrington • Steve Hclmes . D,l've Huss - Jay Nelson· Chris Orwig. Rick Sammon - Tal Tally - janine Warnef Terry While • lake Widm",;

CRE'AlIVE DIRKTOR Felix Nelson

PROD UCllON M ANAG E.R Dave Do mstra

ASSOClA H ID,SI GN ~R T afry Orlowski

ASlOe IA IE DESIGN ER C hri ,ty Wi rt tOT

PRO DU CTION 10 Ell GN (~ Dave Ko rrnan

VP. SALES Kev i n Agre n 813-·433 -2370

ADVERnSING COOROINATOR Jeaone [illeba 877-622-8632 ext, 215

ADVE.RTil5ING [)'ES'IGN'ERS Margie Rosenstein. I. Nicole Prccunier Le,1 i e Mo n ren egro

DI<tECTO~ Of ORClJLATION

~lJBU.'HoR EXECUll VE ~ U BUSH m WSINESS MANAG<'~ CH IE, FI N ANCIAL Of FICER

DIRECTOR OF INFORMATION SYSTEM, WEB PRODUCER WEB TEAM

Rorml O'Neil

SCOII Kelby Davld Morer lean Kendra Paul Parry

Mkh a el Ritchie Annie cushing

Tom my Malon e y • Fr.ed Maya

PUBLISHED BIMONTHLY BY KellJy Media Group

333 Douglas Road Ea." Oldsmar, ,L J4677-H22 Pho ne: 813 -4 33-50 1 0 www.~elbymodiagroup.col ... ihfn@l<iyersm~g3z._ine,t"om

SUBSCRIPTIONS $29,.95 (U.S.) Call (colt-free) 877-622-8632; subscribe online at www.layersrnagazine .. ,c'om

(OVER Of SIGN Cover image courtesy of Ben S u th erfan d

COlO~HO~ Produced using Adobe InDesign (5.3, Ado b e P heros h op (53, an d Adobelllusrraror C53. Body copy

is set ,j., Avenir. Headlines are set:

in Solex, There's nothihg like rhar new-computer smell No<hing quite

co m pare, to th e srn ell of stretched packi ng rap e, and [he round of tearl ng corrugated cardboard. Then you see ir-lTeshl pristine, as. if untouched

by huma n hand,~your new lapro p. Unless, of cou rse, you hove an

in sensi rive room mace wh 0 ~ narches that virgin moment from under your ""'ry no", by open i ng it ft rst,

All contents © COPYRIG HT 2,000 KeIbJl Media Groop, me. All ngtrts reserved, Any use or the- oo.ilien~ of th is pUblic,,:illion Wilh.o\J1 1he e::.t,p;re5el Writtel1 5:lermt$$ion 0' j-e publisher Is s.'lrI~UV prohlblted; ~rs maqazlne Is. ~n IhOOflil!lllllil:!nt [ournal not amfl~ Sited witfi Adobe Systems. rno, Adobe, me ,A.dobe toao, Acrobat. AdOOe Prernrere, Arli:!:r 1;1 lccts. ~DI'tl~mweawt_ FI.:l:!:h, mosearor, InOB:!:;lgll, Llghtl"9Om, artd' Phctoshcp ale. either registerl3'd, trademarks or naocmerks oj Ad600 SYStems Incorporated, Jn the Uniled S~alel5o .a nq/or cfher coonroee. All; outer \1"aI!jem:;ll~$ ere ~ne. properly or thetr respective owners. Some: of the views expressed by oonbbuiors may not be ~Jl e repreeectewe views 01 the. puDliSlk:ier.JSSN 155J......:ll,sX

Visil www~mpix.com 10 see our full nne of photog rail hie and press products.

a y e r 5 n e w 5
qr ap at t s OE'SIyn news· new prODUCTS. DICjITaL VIDeo news • OTHer STUFF Adobe takes their Flash platform to the MAX

Inc' rolled out the new Flash Media Interactive 'Server 3. 5 and Flash Media Streaming. Server 3.5 software.

This updated software includes new options for delivering Flash content, such as dyna mic stream i ng to provide users wit.h highquality, uninterrupted viewing; enhanced H.264 video and High Efficiency AAC (HE·AACj audio support; and new Digital Video Recorder (OVR) functionality thet enables Users to pause and seek within 11 live. video stream.

Adobe Flash Media Streaming Server 3.5 is offered act $995 with an upqrads from Adobe Flash Media Streaming Sewer 3 for $249. Th e Flash Media Interactive Server 3.5 goes for $4,500 with the upgrade. for $349. Both products are available for preorder and expected to be available in eady 2009.

Adobe Flash ;;tlld AIR for ARM platforms-And fi(lally at Adobe MAX, Adobe and A'RM announced a technoloqy collaboration to enable Flash Player 10 and Adobe AI R for use on ARM Powered devices. ARM tschnoloqy powers billions of electronic devices, includinq the vast maJority of srnartphones, digital TV.>, and por' table navigation and personal media devices.

According to Adobe, the collaboration is expected to accelerate mobile graphics and video capabilities for mobile devices and consumer electronics worldwide. The agreement will allow ARM and Adobe to deliver an optimized Flash Player 10 for th e ARM architecture. The collaboration is also expected to lower power consumption for mobile devices running Flash Player 10 and AIR content. For more information, visit www.adobe.corn.

Apple reinvents the MacBook

• 12

Apple MacBook

Adobs Systems Inc. (www.adobe..com) revealed some of Its new products at the Adobe MAX 2008 conference in San Franclsco. One of the major announcsrnsnts was of a group of additions to the Adobe Flash Platform that introduces Adobe Flash Catalyst, as weir as the next version 01 Adobe Flex BUilder. Adobe also announced the avail ability of Adobe .AI R 1. 5 and a n alpha version of Adobe Flash Playe.r 10 for 64-bit l.inux operating systems.

Adobe Flash Catalyst (formerly code named Thermo) is 11 design tool for creatmg application interfaces and interactive content without coding. Catalyst allows designers to import artwork: created in Adobe Creative Suite 4 with full fidelity and quickly convert it into dynamic components, such as buttons, scroll bars, input fields, and more. Adobe plans to have a public beta version ava ilable on Adobe Labs in early 2009.

Meanwhile, Flex Builder offers new development capabilities to create rich Internet applications. The new version also has improved capabilities, such as the debugger, profiler and, code editor.

Adobe Flash Media Server 3.S-According to the independent research firm com'Score, 81 % of worldwide online videos are viewed using Adobe Flash technology. With all eye toward lncreasinq that majority and improvinq media delivery capabilities, Adobe Systems

:E a u

With its usual fanfare and media attention, Apple Inc. recently drew back the curtains and welcomed in a whole new growp of laptops The new line of produ cts in cI u des the M acBook and 15" MacBook Pro. Both models have anew unibody enclosure made from a single block of aluminum, resulting in thinner, more durable, and sleeker designs,

The new MacBook family is built around new features, such as NVIDIA g.raphics, LED-backlit displays, and la rge glass Multi-Touch trackpads that offer almost 40% more tracking area and support more Multi-Touch gestures-all at an entry price that's $700 less tha n the $1,999 price of the MacBook Fro.

The 13" aluminum MacBook starts at $1,299. The powerr ful l S" MacBook Pro, at 0,95" thin and weighing 5.5 lbs, starts at '$ 1 ,999. Apple has also updated the MacBook Air and the 17 '. MacBook Pro. Visit www.apple .corn for more information.

Olympus adds artistic options to latest digital SLR

Olympus America Inc announced the new 1 Z.3-megapixel Olympus E-30 digital SLR_ This midrange camera with in-body Image Stabilization is slotted between the E·S20 and the flagship E-3 models, and offers a host of new features, such as Art Filters and a Multiple Exposure function, The new Art Fi Iters attem pt to re-create styles of shooting

in which the captured image is i ntentionally altered for

effect. The E·,30 replicates these dramatic effects using the Autofocus l.ive View swivel LCD. The Art Filters include Pop Art, Soft Focus, Pale & Ught Color, Ught Tone, Grainy Film, and Pin Hole Camera.

The camera's Multiple Exposure function combines images shot in different locations and moments, opening another dramatic dimension to photog. raphers, Th e esti mated retail price of the E-30is $1,299 (body only). Visit www.olympusamerica.com for more information.

Watch all your stored media in high definition

Western Digital Corporation (\ND) released the WD TV Media Player that provides a simple way for consumers to play their stored digital content on their HDTV in full-HD l080p resolution. It connects to a user's TV or home theater via HDMI and plays digital movies, music, and photos contained on external drives,

Users leave the WD TV H D Media Player connected to their TVs and simply pi ug in up to two My Passport USB drives or other USB mass-storage devices, Using the remote control, users can navigate and play their content.

The WD TV H D Media Pla.yer is available now for $129.99 at WD's online store ~www.shopwd .com) and select retailers,

Font management gets an upgrade

Extensis has released Suitcase Fusion 2, its next-generation software for single-user font mana-gem ent. Suitcase Fusion 2 boasts a redesigned user interface and code base,

The interface features interactive font and glyph previews, floating (drag-and-drop) previews, and dynamic search and find. Suitcase Fu si on 2 centra lizes fonts in a secure d alabase and uses Font Sense to fi ngerpri nt and a utornatica Illy activate the exact fonts used in your InDesign, Illustrator, and QuarkXPress documents, It promotes a stable font environment by using advanced font corruption checking and repair.

Suitcase Fusion 2is available immediately for download at a retail price of $99,95 from the Extensi s website at www .extensis.com.

••

•• Upcoming Events

1'1A(WORLO [OI'IFERENCE [, EXpO January 5-9, 2009

The Moscone Center

San Francisco, CA www.mecworldexpo.corn

p~'A 0'3

March 3-5,2009

Las Vegas Convention Center Las Vegas, NV www.prnai.orq/pmauvhome .aspxj'id= 11224

pHOTOSHOp WORLIJ CONFERENCE G EXpO

March 24~27, 2009

John B_ Hynes Convention Center Boston, MA www.photoshopworid.corn

I-lABSHOW 200'3 April 18-23, 2009

Las Vegas Convention Center Las Vegas, NV www.nabshow.corn

AI~ EVE~IT ApART: FOR pEOpLE WHO MAKE WEBSiTES

May 4-5, 2009

Bell Harbor Confe rence Center Seattle, WA

www.aneventapa rt.corn

FLASH Ol~ TAp

May 28-30, 2009 Park Plaza Castle Boston, MA www.flashontap.com

HOW IJESICjN [m~FEnEN[E June 24-27, 2009

Austin Convention Center Austin, TX www.howconference_com

news J

Go large with Canon's

new imagePROGRAF printers

The imag,ePROGRAF i,PF-6000S Large Format Printer is a new addition to Canonseiqht-color, 'large-format printer line. According to Canon specs, the iPF6000S call print up to 24" wide, both on roll and cut sheet. Using LUCIA pigment ink and microscopic four picoliter droplets, IheiPF6000S produces hiigh-quality, vivid photographic images at notably high speeds. It maintains a speed that's more than 30% faster than its 12-color sibling, the iPF6100, and the iFF-6000S can flnlsh an A l-sized (23,6>(33,1 ") print on glossy photographic paper at 2400)11200 dots per inch (dpi) in the high~quality print mode within four minutes,

Just I ike th e i PF6000$, the imagePROGRAF f,PF6200 also uses Canon's LUC IA color pigment ink and offers a la-rge color gamut. This model is optimized for printing digital! photographic imagery, Based on the :iPF6100 platform, the iPF6200 includes EFI Colorproof XF eXpress Software RI P,

and an internal hard drive to create" streamlined workf!low to assist photo-

gr<i phic professionals.

To view additional information about Canon products, visit www.usa_canQn.com.

Canon imagePROGRAF iPF6000S

New lpson Stylus Pros offer UltraChrome HDR Ink technology

Epson America, lnc. {www.epson.com) announced its next generation of professionat inkjet printers-the 24"' Epson Stylus Pro 7900 and the 44" Epson Stylus Pro 9900.

The Stylus Pro series incorporates Epson's MicroPiezo TFP print. head with new Epson UltraChmme H DR Ink technology. The 1 O-chann el, hiqh-precision MicrdPielQ print head has. a maximum resol ution of 2:880x1440 dpi and 11<1 riabls-sized droplets as small as 3,5 pi coliters, The. Epson UltrllChrome HDR Ink technoloqy offers new orange and green inks, and is designed to provide enhanced print quality with fi'n e photographic blends 13 nd transitions, plus highly accurate hiqhliqht-to-shadow detail"

Epson Styilis Pro 7900

Other features of the Stylus Pro series inc! ude: E pson e Pla--ten Media loading Technology. a ,new rotary cutting system, and a higl'Hapacity ink system

The 7900 and 9900 are both compatible with myEpsonPrinter .com (currently ill beta), a Web-based printer-information and -rnanaqernent system that enables commercial printers to monitor print jobs and consurnables virtually in real time. The Epson Stylus Pro 7900 and 9900 are available for a s1-(9- gested retail price of $3,995 an d $5,99S, respectively.

E " u

w z:

16

[OESlyN MAKEOVER] JAKE {y} WIDMAN

client:

Mikee] [www.mikee.com

make it saucy

The product distribution is still pri"marily retail, but about five years ago, Mikee started seHing their sauces over the Web_ The purpose of the website, however, is less to build up a mail-order business than to continue to serve loyal customers who may have moved out of their retail distribution area but still want their Mikee marinades. Nevertheless, Kaufm an says, he recognizes that the site has to be attractive and functional even if it's just serving repeat business.

The main th ing Ka ufman likes about tfl€' current site (d esig ned by his wife, who is a designer but not a Web designer) is the underlying concept 01 a "family" of sauces: Asian, Fisherman's, Teriyaki, and Specialty But the site is incomplete, he says, and he's not sure that it really communicates the nature and character of the business. He'd like a site that's interesting, fresh, and modern: "There's nothing wrong with having a history:' he says, "but you don't want to be stagnant either." With that in mind, we challenged three designers to Whip up a heW site to meet Mikee's tastes

IY ikee makes Sauces Accordinq to current president Alan Kauf• I man (representing the fifth generation in the food business), the line started in his father's butcher shop in Queens, New York. The elder Kaufman loved Chinese ribs and was determined to come up with his own recipe. When he delivered food to local Chinese restaurants, he'd peer around their kitchens and make note of the ingredients he saw on the shelves. Then he'd buy the same i.ngredients and start experimentinq with different combinations.

Once he came up with a recipe he liked, he started selling meat already marinated in the sauce. His customers beqan asking if they could just buy the sauce, and the light bulb went off. He started bottling the sauce, designed a label, and named the new company Mikee, after his nickname. Since that time~about 30 years ago~the line has grown to include more than 30 items, from the original sauce th rough other Asian sauces (the number one seller is their teriyaki sauce, says Alan Kaufman) to more standard marinades and barb ecue sauces. In Alan Kaufman's words, "It took us 30 years to become an overnight success."

There's nothing wrong with having a history, but you don't want to be stagnant either. J

before

[Jake Widman rs e wrjter and editor w.ho lives in Son Francisco. He1-::; be,en cbver'tng the irHersection of computers Bl"ld graphic desigrl for about 20 yeere now--.since back ] when il was "II olliled 'desktop publishing:

makeover SUBmISSIOns

We're I:ookingfor product p-ackaging or labels, print advertisements, and magazine covers that are currently in the marketplace forfuture "Dssiqn Mllkeovers." So if you or someone you know has if desfgr! that you'd like us to consider making over, or if you're a dssiqner and you'd like to be considered for a future "Design Makeover," drop us a line at letter5@I~yersrnaga2ine.com_

after

DESIGNER: Ryan Sorenson] [www.bozell.com

Because thE' consumer's first encounter with the product is through the packaging, we Featured the bottles large and

on a background that complements

all the various package designs.

he main focus of our redesign was usability. There's nothing wors e for a co n 5U m er the n ru n n i ng into difficu Ity find ing the information they need. Besides the functional problems (much 01 the naviqation didn't work), Ih e original site is hard to navigate, the hornepaqe only shows portions of the product labels, the ;imag;es on the product pages are all very small, and the layout distracted from th e goal of pu rchasi ng. We set out to create a site th at's easy to navigate a nd puts the product first

First. we moved the navigation bar to the top of the site, where (Us" tornars can find it easily,. and added a tab to tell visitors exactly where they are. Because the consumer's first encounter with the product is through the packaging, we featured the bottles large and on a background that complements all the various packaqe designs. We Updated

A B OUT

THE

DESICjNER

the site's color palette, Using a yellow that combines the old yellow and oranqe and adding 11 teal to replace the dated bright green. This new palette of yellow, teal, and grays gives the site a more modern feel, complemented by the use of the clean Frutiqer font.

We highlighted a lew areas with gradients 10 add to the energy of the design and added a subdued stripe pattern to break up the. solid gradient.

OUT vision 01 the product page continues to focus on the sauces and buying. To. update the product page, we dearly identified the families o.f sauces and added shaoows behind each product (I tea to give dimension. With a clean design that also. shows a little "sauce" of its own (via the vector graphic of a splash in the background), the new M ikee.com site showcases the product-which is what people are looking for.

Rya.n Sorenson] [Bozen

Ryan has always been a winner. At the early age of seven, his soccer team made ,it to. the semifinals of the 1986 Cornhusker State Games. And then in high school, his morn gave him a ribbon proclaiming him "World·s Best Son."

Ryan holds a Bachelor of Fine Arts from the University of Nebraska and is currently putting his winrJing attitude to good use as an Art Director for the advsrtisinq firm Bozell in Omaha, Nebraska. He has held severa I previous art director positions, working for national clients such as Blue Cross Blu.e Sh-eld, Sue Bee Honey .. Gateway, Compact Power, Leupold, First National Bank, and countless regional and local den ts.

Ryan's hobbies include wasting time, playing Nintendo Wii, solving his Rubik':S Cube, and looking th rough paper sample books. He loves his job, his morn, and iiny puppies

APPLICATIONS USED: Adobe Photoshop (S3 and Adobe Illustrator (53

17

.. CI CI ..

r= '" -<

..

" on

" N

2 ..

... m ..

te

E " ..

AppLICATIOn USED: Adobe Photoshop C53

[design makeover]

after

DESIGNERS: Beth Berst-Gregory] [www.sunberst.com

-

AI ~Ol.l cml,lff,

tilt.' t ste 01 ulIlg ~Iand'

he ove rwh elm ing black co lor of the current site dominates th e bea utifu I !Xl ckagi ng de sig n of the prod u ct. Add ition ally, th e hornepaqe doesn't convey that there are four main product lines, each with a distinct theme. Overall the site feels heavy, unbala need, and without a focus.

My first goa I was to create an immediate recognition of what Mikee is, award-winninq kosher sauces from Long Island. I abo wanted to bring a dean a nd modern leek to the M ikee bran d and rea Ily let the product stand out again st a predominantly white backdrop. I placed a map of Long Island behind the simple product shot to serve both as a design element and a reference to the company's roots.

The secondary goal was to make it easier to find and buy the prod. uct, I highlighted tne four main lines within the Mikee sauce collection and added direct product links under each category. Each category is color coded, using colors that harmonize with th e product packaq-

I wanted to bring a clean and modern look to the Mikee brand and rea Ily I et the product stand out against a predominantly white backdrop.

fng. I set the lam ily names in Present, a font similar to the one used in the logo. Too much Present can be overwhe:lm.ing, so for my secondary typeface I chose the beloved sans serif Helvetica. Everyone loves Helvetica (just watch the documentary Ii 1m by Gary Hustwit), and it displays well in most browsers.

For a bit 01 interest and elegance, I added a subtle Chinese lattice pattern to the background, a nod to Mikee's predominantly Asian flavor. The new site feels gourmet and modern. More importantly, it communicates what Mikee's award-winninq sauces and marinades are all about.

ABO U T

THE

DESICjNER

Beth Berst~Gregory ] [Sunberst

Born and raised in 'Illinois, Beth has embraced her artistic Journey in life. A grad\.late of the American Academy of Art Chicaqo, she received ner Associate's in Comrnercel Art and has des'igned and illustrated for a vanety of companies, appearing. in both Web and print While she enjoys the thrill of the digital world of graphic and Web design, she counterbalances that with old-school art techniques such as painting. and printm.aking.

A lover of texture, detail and imperfection, Beth recently received a Diana toy camera and has been trying her hand at experirnentallo-fr photography. When she's not designing .. she's busy cooking, drawing, crafting, and fix· ing up her tiny ltalianats home with her art teacher husband Chad and Blaine, the super mutt.

w z:

after

DESIGNER: Ryan Wagner] [www.visualrush.com

The deep red, gold, and black color scheme was sampled from Mikee labels across all the lines, and it helps pull the various members oFthe 'family together,

y goal for the: M ikee redesign was to give the website some

unique character and make it fun. After hearing about how M ikee got started in the family-run butcher shop, I felt the company

history could provide a rich backdrop over which to feature their sauces. Several hours of brainstorming and concepts eventually led to a rustic wood surface with dripping sauce. The deep red, gold, and black color scheme was sampled from M ikee labels across ail the lines, and it helps pull the various m embers of the lam ily together. Actual Mikee bottles were traced in Illustrator to create the silhouette menu running down the left, which offers the visitor a quick, visual way to jump to the four varieties 01 sauce. I chose to set the main navigation items in Trejan Pro for its sleek condensed look.

Integrating a show/hide menu' et the bottom of the hom epage that slides up and Ieaturesall the Mikee sauces gives the site some

A B OUT

THE

DESIgNER

Web 2 usefulness whi:le gaining SE~ points with Google and other search engines.

An occasional newsletter is a great way to communicate with customers, so we added an easy siqn-up box. The photo is part of a rotating Flash banner that would feature delicious dishes made with Mikee sauces, then links to the Recipes area. In this :part of the site, customers can upload thei r own recipes made with Mikee sauces.

The product page was simplified to feature just the sauces. Users can jump directly to any category in the slideout menu to the 'left, or move through th e sauces individuelly by clicking on the smaller photos. Mikee's current Zen Cart shopping cart system could be revamped and integrated using a custom (55 template that matches the rest of the new design.

Ryan Wag ner ] [ VisualRush

Ryan Wagner is the owner and creative director of VisualRush website and design solutions, a g,raphics and Web design studio located in Evansville, lndiana.

Using his degree in Advertising and Graphic Design from Murray State University, he has gained diverse g,raphic experience in new>paper print advertising, Web design, magazine publicetion.Icqo design, billboards, and identity branding. His strength lies in keeping his clients focused on maintaining their brand integrity.

After working in the corporate world, Ryan realized his potential as a freelancer and pours every ounce of his creative energy into ViswalRush where he helps clients promote their services .all over the world.

Owning his own successful company at 32 has allowed him uhe freedom to spend more time with his wife Heidi and their four beautiful girls.

APpLI[ATIONS USED: Adobe Photoshop (53 and Adobe Illustrator (53.'"

19

r= '" -<

po

" on

:t>. l£l

" N

2 po

... .. ..

.. CI CI ..

..___-----------------------I[ the digital studio J

E " u

and artists alike.]

[ARTISTIC EXpRESSIONS]

COREY {/;} BARKER

J

a brush with inspiration

[ ... th i s extremely versatil e

Feature [brush enqine] has

become the indispensab Ie

w z

tool For photographers

ao

Of all the creative features in Photoshcp, there a re few that offer the possibilities that the brush engine does. Introduced back ill Photoshop 7, this extremely versatile feature has become the ind ispensable tool for photographers and artists alike. With its wide arrEY of features, YOll can spend hours just creating special effects brushes in this one panel. Here we'll examine this small, yet powerful feature and get into creating and modifying our own custom brushes .

ii: '. • • • •
I.! IJ 10 II
iI • • • • • •
.. L9 l. ~I II as ~
Ii' • • . .
4. 6CI j • ...
~ o.~mt:lt. ... IH""
Ii
i' Irri:J;lJC f(~Y ~
Ii'
i'
~ AOUM[n!s.~
ri - .. h~ui; All features in all brushes

At first glance, the Brushes panel (Window>Brushes) can seem daunting, but in actuality, it's pretty straightforward, It's remarkably intuitive and once you start playing with the settings. I, think you'll awee. First off, Adobe has managed to put all the features related to all brushes in one conven ient panel. I say all brushes because not only can you modify the behavior of the standard Brush tool, but also all other tools that use brushes, such as the Clone Stamp, Eraser, Dodge, Burn, Blur" and Smudge. to name a few, You simply select the desired brush tip in the Brushes panel. activate the features you like, and modify the parameters within each option

When we think of brushes in Photoshop, we tend to think of simple round" hard-, and soft-edged brushes but that's only the tip of the iceberg: You have the ability to take a simple brush End make it sornethinq totally different; you can select from the sta ndard set of brushes or load a number of specialized brushes that come with

Photoshop (more on this in a moment),' and you can define your own custom brushes using artwork, Ones you have l! better gr-asp of how the brush en'g,ine works, I guarantee you won't look at brushes the sarrte way,

A word on presets

_As mentioned above, Photoshop comes with a variety of built-In brushes call ed "presets." To access any preset, stmply open ihe Brushes. panel, dick on Brush Tip Shape near the topof the list on the left of th e &aI09, and choose a ny of tlie available brushes, Select ony size brush tip and then modify its behavior by clicking on the va rious options in the list on the left.

To load a specie lized gr9up of brushes" dick on the flyout menu (at the top Tight of the panel) and toward the bottom of (he menu choices" you'll see several "effects" blushes separated into various categories. Just click on the desired set and

BasIc Brushes Cal!igraprnic Brushes Drop Shadow Bruslil's Dry Media Brushes Faux Fln's.h Brushes Natu nil Brusne'S :2 Natural Brllsnes Special Effect Brushes Square. ,Brushes

Thick Heavy Brushes Wet Media Brushes

a dialo£l a ppears where you have the option to either Append that set of brushes to your e:<lsting set or ReplacE ~he current brushes with these brushes,

When you sel"ct. a brush, the preview at the bottom of the pa ne I she ws th ebru sh on a simple linear path as if someone painted a smooth, continuous stroke. This is because the preset was saved only- as a brush tip and its behavior hasn 't been modified using the options a! the left of the panel. It's up to you te modify the brush for your needs,

Another typE! of presei is known as a "teol preset." Unlike brush tips, which are only the actual shapes of the brush, tips, tool presets are a little mora involved. They not only include a defined brush tip but also a:rl of the other parameters set up in the Brushes panel options. It's important to remember the difference between these two types of presets as they're handled in different ways.

To access your tool presets, look for the icon of the tool you're using at the far left ofthe Options Sa r; Click on the ,down-facing

arrow beside the icon and the Tool Preset picker op_ensit's a menu of built-in tool

R resets" CI kk on one and you',11 see lts various properties ,in the B rush es pan e L

,

Even though a tool! preset has built-in properties, you can modify it even further to your :I,iking and 'then save it as a New Tool Preset. This gives y,ou the option of creating 8 custom brush us"n9 Efther a too I preset a s a sta rti n 9 poi nt orfro m scratc h,

(ustom brush tips

Sometimes you'll encounter a- scenario that demands a special type of brush or perhaps a spedfic behavior for a brush. Creat(ng B custom brush is simple enough but it's important to understand how Photoshop defines brush es. And it's also important to ke<;lp in mind thst pretty much any graphic element (an be defined as a brush-you can even define an entire image as ,a brush, if you want!

When you tell Photoshop to. define a brush it's going, to 'look at the enti re range of tones in your image to determine its overall den" sity. The white areas of your defined brush will be completely transparelli and the black (or darkest) areas of the defined brush will be 100% opaque, Any in-between gray tones will have varying degrees of transparency. This is also the case when you define a brush based on a color image. All gray tones closer to. black will be mere opaque and any tones closer to white will get proqressively more transparent. I'd encourag" alittle practice with this so that you get used to how Photoshop analyzes the pixels when creating' a brush,

Brushes in action

So let's put what we've-learned into action by creating .a custom brush, then applying some specialized properties, and then cre.ating a tool preset.

STEP ONE: ere·ate a new document (File>New) with a' white BackgifOU'nd. For this, I recommend creating a sCi uare-shaped document, say 5xS". What we're going to create is a stylized scatter brush that wi II give us a sert 01 fairy-dust effect as illustrated in the opening ~mdge on the opposite page. (It's based on a tutorial I did recently OD the NAPP member w.ebsite.)

STEP TWO: Click on the Create aNew Layer icon (at the bottom of the Layers panel) Grab the LBS50 tool {l) from the Toolbox alld draw

'/:, -'.-

~ ..... _, .... J

a very. abstract shape on this layer_

Tip: Draw your "brush" fairly large and then after you define it, size it doWM in, the Brushes panel. If you make it too small, it can lose qUality when you try to size it u.p later in the Brushes _P<1.neL

STEP THREE: No"V that we;ye treated our selectlon, we need to fill th e sha pe with a coloc J ust SI;) 'you can see h ow thevaryinq tones affect the transparency of a brush, let's apply a slight gradfent to' this selection. Select the Gradient tool (G) from the Toolbox and drag a simple Black, \!Vh lte gf"adient throuqh the selection (th i5 i.5 the third g.radient in. the Gradient Picker up in the Options Bar). Press Command-D (PC: Ctrl-D) to. deselect, (Note: You don't necessarily have to deselect since you have a white background, but I did it to make a point in the next step.)

21

N CI .-0 ..

r",. -< m

'" ..

'"

E to u

the digital studio J

SlfP FOUR: Many users wHI first make a selection of a shape before deli ning it as a bru sh-but 'it isn't always necessary to do so, We learned earlier that when PhQtoshop defines a brush, it ignores the white area a ndleaves it transparent, Si nee our graphic is on a white background in this example, a 1:1 we need to do is go under the Edit menu and choose Define Brush Preset. You'll notice in the preview windoW that only the areas with the various tones of black. have been defined as the brush. Name

Define Brush Preset. L-

your brush and you're done.

Oefin.e Pattern ...

c- ,-, 01 r,

I, .. !.h Nilnle ;;;'_L~'----_

r. --------- ( QK

N~m e IScatte r 1

~,el 'I

STEP FIVE: Now that we've treated our brush tip, we need to modify its beha vier in the Bru she s pa n eL First, make su re tha t the Brush tool (B) is selected in the Toolbox, then open the Brushes panel by clicking the icon at the right"hand side of the Options Bar, or go under the Window menu and choose Brushes. Click on Brush Tip Shape and locate the brush you just created-rt should be the last one in the menu.

STEP SIX: oick on the words "Shape Dynamics" in the list on the left-hand side of the Brushes panel to open that menu. Drag the Size Jitter all the way to 100%_ 'if you're using a pressure-sensitive tablet, go ahead and set the Control to Pen Pressure.

Further down the menu, you'I'1 see Angle Jitter and Roundness Jitter options; set both of these to 100%_, as well Notice in th €I preview window a t the bottom how the brush changes as you adjust each settinq.

; - ,tlll"S;;"';;

,.. ~'jM l ...... """ ,

;;, '~~tj~,~ iii

f'Uf.I.!!l "
!loll" •• "
QI. .... ~.n ~i!t.,Jtt''J'
ou...rO,,1Llf'il1 Iii
"'-'>< Ii D-o., ..
-ldr." Iii" 0:.">11_ "
J.ifI)f».6ft Iii
;fiji.f\Ml'ii ~ i'
I'ftI.ltrlT-.),~ iii' :U1'f'41.n'hJITlIJ~III~ SHr SFVfN: Now dick on the Scattering option, Make sure that Both Axe. is checked on a nd then just drag the Scatter 51 ider to the right How much is really a matter of preference, so watch the

preview window as you adjust the sl ider,

All you need to do now is go to a new blank canvas, set yourForaground color swatch (at the bottom of the Toolbox) to th €I desi red 00.10 r. and sta 11 painting with your new brush .If you fi nd th €I bru sh not behaving exactly the way you like, just modify th €I settings and centin U €I,

STEP EIC,HT: Now that you've applied all these modifications to your brush, there's a good chance that you'll want to be able to use them again later. But if you select another brush and change any of the settings in the Brushes panel, you'll lose all your previous settings, Which can be frustrating, especially if you took some time creating that brush To make sure this doesn't happen, dick on the down-facing arrow beside the tool icon at the far left of the Options Bar to open the Tool Preset picker. Now just click on the right-facing a rrow at th €I top rig ht of the picker to

"Scf\ 8vT-col

"Show All To.ol Pl'u.1J Sf,,,,, t:lJ".nt ro~\ P, ... I>

Tf"fOniv

"Sm.lllJl\ Lo,~. U ..

IW.! Tool ~"~I All Tooll

tmli!!'rttt.;.n.l:9t1r,_, iRHC'1 Tool :P.r~uli.l. ~dT'""II'r .... ", s.v. fo.t P", •• ", _, ~~pll<' T~GI Pr~j~l$ ••

......_ HI"otV

en..h."

C",,, o,ndM.'Q"" 1 ... !

access its flyout menu and choose New

Tool Preset In the dialog, give it a name and dick OK, Now, anytime yo u need th a t b rush with tho se specific s etti n g5, th ere it is.

The goal here was to give you a better understanding of how the brush engine works-and understanding how something works in Photoshop is half the battle, So now you have the tools necessary to embark on some seri 0 u s exp I ora tio nand crea te some rea 11 y 0 utra g eo LI s brushes, And if you're feeling ambitious, why not combine your experimentation

wi th laye r styl es to get some really cool effects, Here's an example of a sea tter brush I created with a modified Bevel and Emboss layer styl e to ach i eve a Water splash effectall with just a brush and a I ittl e crea tive exploration

[- C'''''Y 8ark,'" is ao Education and Curriculum Developer 10, rille Na tion .. 1 Assocra tiM of Pho t6,~Op Prokssionals. Hi' expertise in Adobe P~b toshop and Adobe lIiu'trolO' I"" ~,rred I,j", 1 num emus ~\V8rdS in )IIustniJ [jon, gr:aphjc d@-.sign, ana photographY.

E "

ill 'to'

'"

E

'" ....

"' >-

m --'

24

------------------------------[ q aLL E' r Y 1

[THE OICjITAL CANVAS]

SHOWCASING THE DESIGN WORK OF OUR READERS

Design: The Hidden Identity II Client: Sciencewerk Exhibition II Desi,gner: Ee Venn Soh II Software: Adobe Photoshop and Adobe Illustrator II www.behance.net!vennsoh/lrarne

Des ign: Domain 11 Perso n a I: Work 11 Desig n er: Be In" n y Spe nee'

I [ Software: Adobe Photoshop C53 II www.vacuum.layer.deviantart.com

Design: Break the Grid 11 W'S DTUTS Based on Personal Work 11 Designer; Alex Beltechi

I [ Software: Adobe Photoshop C53 and Abobe lllusuator C53 11 www.behance.nellalexbeltechi

Photogra ph: T lIttered Flag an d Autumn Sky

I [ Personal: Work [[ Photographer: Jim Crotty I [ Software; Adobe Bridge C53 and Photornatix I [ www_jimcroUycom

Photoqra ph, 1-1 srvesr Moon in I-Iocking l-liII,;

I [ Personal Work [[ Photographer: Jim Crotty I [ Software; Adobe Bridge C53 and Photornatix [[ www.jimcrotty.com

Photograph: Cedar Fail" Autumn

['I Personal Work [[ Photographer: Jim Crotty ['I 5 oltw a re: Ado be B rid 9 e CS 3 and Ph otomati x ['I www_jimcrottycom

Th e staff at I_ayers mag aZI ne a pprec rates the tl me and effort involved In the creative process, no matter how larg e or sm a II the project. With this in mind, we offer you the opportunity to display your work on The Digital Canvas Please submit your print, Web, or packaging dasiqn Upeg or eps fermat) to cmam@l~yersmag~zme.com_ Please Include name of piece, dent name (If applicable), applications used, and any websi te where our readers can view more of your work.

25

r.. -< on ;n ..

'" ~

'" N

z on

-q m

"'

E "

'U

w z;

26

_-------------------------I[be n suthe rl and J

Ben 5 u the r 1 and g"w"pi'AI,b,m,,"dm'Joc,di"~'_''"9i_ri"9''theU"'~i~

of Alabama. Starting his own business at the age of 22 led to a lifetime of entrepreneuria I pursu its. Studying a rt and design in his rnidtwsnties, Ben developed a love affair with images that comm unicate and sell ideas. The fun part for Ben has been working with great compan ies, such as Delta Air lines, Coca-Cola, Anheuser-Busch, Ford, Toyota, Hilton, and many govemmental agencies, both federal and 'local Ben is corrently Vi<;e President and Art Director of Color and Magic, Inc.

Layers,: Ok ay, there must be a story behind your poignant Wall Street illustration. Care to sbere?

Sutherland: For a number of years during rnidlife. I was a stockbroker making my way through the jungle of high finance. Fortunately for me, I was able to escape with my Hie, My Wall Street illustration attempts to give the viewer a feeling of what it's like to be eaten alive by a monster we all refer to as the" marketplace." Th is predator is neither good nor bad; it Just punishes bad decisions, It's" Feeding Time" and you're the lunchl Today, I guess a lot of people can identify with this image. I never felt that the bull and bear stuff said much ill the average person.

Layers; Do you start your illustrations on paper and scan in your sketches or do everything digitally?

Sutherland: I. do both. I feel., however, that the most creative sessions often beg i n on pape r as th e tria l-and-error portion of discove ry returns quicker feedback. Once the ideas evolve, they can be quickly transferred to digital, media. There's just something about a pencil: or brush and a piece of paper

Layers: What applications do you work with regularly? Do you have a favorite?

Sutherland: Photoshop, IIlustrator,lnDesign, Flash, Premiere Pro, After Effects, Audition, and 3ds Max. My favorite is definitely Photoshop, followed closely by Illustrator.

Layers: How do you approach brainstorming designs? Do you howe techniques or tools that help you conceptualize your designs?

Sutherla nd: I usually begin by taking the most politically incorrect approach I can think of-something that's very funny (to me) and usually inappropriate. 'It's sort of my way of getting outside of the" box." Meliissa" my partner and wife, occasionally has to take

[CONTACT] Ben Sutherland www.colorandmagic.corn

a switch to me, but these I ittle journeys out of bounds have a wonderful effect on the creative process

Layer5~ Do you have <! favorite project you've worked on? What made it your favorite?

Sutherland: Any project for which I'm being paid is my favorite! Benjamin Franklin and ,I are good buddies. I, will say that some of the most fun projects have involved developin 9' visuals for contact sports, such as jiu-jitsu and amateur wrestling. There's something very pri mal and risky about combat sports.

Layers: Your illustrations are very rich in color. Do you approach the use of color by what looks good to you or use the sophisticated colorgenerating tools offered in today's graphics apps?

Sutherland: I love color. I spend a lot of time studying what great artists and designers are doing with color and what the corporate world 'is buying. You can tell a lot about a company by the art they hang on their walls. I think one has to develop an intuitive skill with color. Doing something by the numbers may get you a paycheck, but the final result should be to elicit some response from the viewer. This is what your client really wants. This is not always an easy thing to do, but it's fun trying .•

AU IMAG ES BY BtN SlJ1HE~LAN[I

By Jucob CuSS

WVtCtt !:jou LeCtVe out is just ~VlA;pOytVl!At VIS WVtVlt ~OU Let;rve .... ' ~

. '

, ~. -' -_ ""

_._

. . -

wlr1eHiev [tis iA Logo, Cl VlilClgClzLVLe piAge, or Cl websLte, sOVllLetLVlILes tlr1e tlr1LVLgS

tJ0lA. DiOVL't DiesLgVL ewe VlILove powevflA.l tlr1ClVL tlr1e tlr1LVLgS tJiOlA. Dio. Tt1Ls Ls ofteVL ClcnLeveDi btJ tlr1e use of VLegCltLve spClce. IVL this ClvtLcJe, we'Ll teClclr1 tJou wlr1Clt VLegCltLve spClce is. now Lt wovtQ, ClVLDi WniAt beVLef-ts Lt CIAVL IADiDi to tJouv OWVlDiesLgVLS, IAloVLg wLtlr1 SOVIAC e,x:ClV1Aples to lr1eL-p tJou ClLoVLg tlr1e WCltJ.

wkti.f is IttgMiVl? SpMt?

When composing a piece of artwork, we generaHy work with three elements: the frame, the positive space, and the negative space (also called white space). The frame is the bounding size of the artwork, the positive space is the subject, and the negative space is the empty space around the subject. The three images below will give you a basic understanding of this principle.

~

C>

~

.... un

~

'3 .,.

~ ~~ ~i

The positive space masked in black

Negative space helps def n e a subject. so su bjectivelyspeakinq, negative space works when there's <I balance between the positive and negative spaces. Negative space also works when it draws the vi ewer's eyei nto th e su b j 00 ct at ha n d.

To show how neqative space works, look at this personal :logo design for Peter Ryan, Did you notice how the middle of the letter R

is cleverly utilized to become the letter P? This has been achieved by revers i n g 0 lit the p osi ti ve spa ce of th e I ette r Pinto neg alive space.

To put t'h-e importance of negative space and th e frame into perspective, think about this: Do you ever wonder why When you watch a movie at the cinema, it's more beautifu I than if you watch it at home on a square-format TV? The cinematographer has composed the scene knowing that his frame was going to be viewed ln the widescreen format of a cinema screen. However, once the movie gets cropped down to the square forrnat of a non-widescreen TV, much of the beauty, negative space, and composition of the scene is lost. making for a less-appealing image.

Reproduction of Rubin's Vase shows neg~tive spa ce as an optic a I ilJus; on-two fa ces or a va se?

The point to remember here is if the subject moves in any direction,inside or outside the frame, the shape and amount of neqative space will, change, so it's always important to readjust your frame to the subject at ha nd.

Wky sse Kt!iMrVt SP4Ct?

If you work with negative spaces rather than on the subject (positive space), you'll often end up with a more sccurete and aesthetically pleasi ng design and balanced composition. Let's look at this picture

of a toucan, as it's an excellent example of neg~tive space. The positive space of the photograph is at th e forefront of the' desig n, a s you, can see in the im age where the toucan is masked in bl ack. The positive .space cons: sts of not only the bird but a lso the railing that it's perched on. The negative space is all the other space that's not at the forefront of the image.

Did you notice th at th e neg alive spa ce is actually sh apes with ina frame? N eqative space i sn 't the absence of space but rather the space that defines the positive space, These shapes are even easi er to see when you turn the neqative space upside down.

Take one more look at the image where the positive space is masked in black, Notice how the line of the railing leads us into the image of the tou can. Th e positive space of th e railing gu,ides you r eyes to the rna i n subject of the irna ge i the touca n, and then contin u es on to ex it the image. Th is is ach ieved beceuse of th e relationship of the positive spaces of the railing and th e toucan to the negative spaces of the environment in which the photograph was taken.

COltcetttre.te 0., tke ttttf(OlflHi(ol'

More often than not when we're designing something, we start from what we have in our memories, This focus on the positive space rather than the negative space can leave a design that's not

entirely balanced. The best way to take advantage of negative space is when we have to design something- that's difficult or something that's not ve ry fa m id i a r to us. Pretend tba t you h ave the lovely ta sk of d ra wi n g you r grandmother's beautiful, wrinkly feet Rather tba n Iocusinq on the details, . .such as the wrinkles, toes, and nails, start looking at the unfamiliar negative spaces, such as the spaces between her toes. the distance from the ground of each toe, and the relationship with the edge of the frame (i.e. the piece ofpaper you're drawing on),

If you concentrate 011 th e unfarn iliar, you'll stop workin 9 on autopilot and become more focused. The result will be a much more accu rate and polished illustration, This doesn't work Just for illustration, but all forms of design, 50 let's take a look at how to use negative space in a variety of mediums.

Ne~"'ive spe.ce i., p~flto~l'e.pky

In photography you're dealing with aperture, shutter speed, lighting, and focus at every moment, and whether you know it or not, you're also dealing with negative and positive space . .As we discussed earlier, we define negative space as being: the empty space around th e subject of the image, It's this space in photog" raphy that's the most crucial 'aspect in nearly all compositionshaving too much or too little negative space can completely ruin a potentially good photograph

Negative "pace flipped (in black)

If you've been taking photos with your camera and everything is right tech meally but you feel something is missing, then it could well be your composition. Pay close attention to the negative space around your main subject, as cha nging the sl ightest thin 9 can improve or reduce the quality of your photos. Consider this example: The two compositions use different amounts of negative space. The generous use of negative space in the second image of the plane makes it much more pleasinq, as it draws the viewer to the subject and stabilizes the image.

-< rn ;n III

pretation of the subject. In theory, if we focus on what doesn't exist (the negative space), we can more accurately define the bou ndaries of what does exist

In this example, we can see a chair even though the chair hasn't actually been drawn? If you focus on the negative spaces first and then fill in the details, your final illustration will be much more realistic. Another tip for c~ating more I:ifelike illustrations is to look at your design mirrored-this wUI make you look at things in an unfamiliar way, helpinq you to spot flaws in your design.

Less negative space

More negative spa ce

The best method to learn how to master the use of negative space in photography is to practice. Remember that negative space is always related to the edge of the image (i.e., the frame) and it's not constant, so you must continually readjust, just as you would your aperture, shutter speed, and lig.hting. You can also observe the irnaqes and designs of others. Have a look through this magazine and see how the photos and a ds a re put to g.eth er. How have th ey used neg ative spa ce in th eir designs? Does the cropping (i.e., framing) ofthe photos add impact to the design? If not, how could you improve them?

o.b . .rtl'vt sk",pu "'Nkilld tke skbiect

As touched on earlier, when we compose a drawing, we often create objects based on our existing knowledge and memories. When we outline something that doesn't look correct, it proves difficult to change because we keep coming back to the same method oi observation We're trying to make the drawing look as we remember it, not how the object looks in reality.

To solve this problem we have to observe the negative space, which is something. that we're not normally prone to do. If we observe the shapes around the subject, then this will help us fix our false inter-

NegativB space drawing of ~ chair ""versed

-q rn ..

'" o

o ..

i'i?sigJII YOM' website witk "egMive sp«ce

In between columns, images, oopy, and just about everything else on a website, there's negative space, It's our job as designers to rnaxirniza this space to its greatest potential so as not to orowd a website, We must use negative space to intelligently organize text and qraphicsto g~e visual relief to the user's eyes" and we can do this by treating negative space as a crucial design element, Take notice 01 how much spacing is between your margins, columns, images and lines 01 text to effectively de-clutter your website.

For example, in this mockup website for a watch, generous amounts of neg a tive spa ce con vey a sen se 01 good taste and re Ii n emen t, Th i s amount of negative space may not be appropriate for your design, To guide you in your own designs, take the time to study how other good webpage layouts use negative space.

Use "wkfte sp«ce" iJil priJilt desiqJil

Th e use of neg eti ve spa ce in p ri nt desig n is olte n ca II ed wh i,te spa ceit's the space that doesn't hold any content and it's usually the key aspect of what makes or breaks a design. It's also worth mentioning that white space doesn't have to be white. Your background can be any color you wish; however; be sure to leave empty space, The effect will be the same as if the empty space was ac-tually white.

White space in print design ,is used purely for semiotic value: a presentation that transcends econom ic values by insisting that the presented image ls more important than the paper it's printed on. For example, take this DL 'flyer for a fashion product Strai.ght away you can tell that the edgiest and most valuable fashion product would be the last design shown below, This is achieved by using an unpredictable, asymmetrical belanced composition with a lot of white space, showing that the image is more, valuable than the paper itself

PRODUCT

FASHION

PRODUCT"

'--' ... _ ...... '.-1---..,. ~""'"~., ..

Although the other two designs are acceptable examples, they don't communicate as much prestige and class as the one irnrnediately above this text. This shows just how much power white space can gi.ve to a design.

Although there are numerous ways to apply negative space to a deSign, the best way to come to grips with the concept is to practice, In the same way martial: artists have to spend hours and hours practicing simple techniques, graphic designers have to do the same .•

[ ~acob Cass ;s B 21-ye<J r~old designer from S~rJeYI ~u5traIial who f~.f'jance5 under ~]J's busif'les~ Just C:~a~v.f' De~jgnj wh i~h =: doubles .... a 5 a popular design blag, Jacob's talen t has broUght] h,m m"~y "W"rd, ."d h,' work 1.0$ been plJblrS,iled Jo books worldwrck. To Ie"", more "boo! Jacob. VISit ~trpj!lustceeallW,de",q",c"", ,

AU. 'MA~ ,,5 BY JAC06 CA-55 U N('<55 OTH E .... ",Ie H OT<D

32

til g;

~

'"

irl

IT]

~

I:

•111111111111111111111111111111111111111111111111" 0

[')j

QI

It's cre'1ive "Hod. COS1-S«viH, /101. rogo desigHo

The use of negative space in logo design is probably one of the most cost-saving and creative techniques available to logo designers, Negative space reduces the amount of colors needed to produce a logo, which in the long run means you'll pay less, as you're not using as many colors in your print jobs,

The' Use of negative space in logo designs can 8,150 give logos a subtle third dimension, creating a layered look. The best example of this would have to be the Fed Ex logo. Visit www,fedex.com and toke a dose look at their logo, Have you ever seen the hidden arrow found in between the letters E and X? If you haven't noticed it before, then you'll never look at this .Iogo the same way again, The hidden arrow portrays the speed and precision of the delivery service in a creative, simple, and clever manner.

How could you use negative space in your next logo design? Try turning the company name or part of the symbol into negative space. by dropping the color out of that area, Usually, you'll need some sort of background shape. to do this, For example, in tile Peter Ryiln logo we showed earlier in this article, the letter P has used the letter R as the backg. rou n d to create th e neg ati ve space,

Finding a creative solution lor a log;o that incorporates the use of negative space ta kes al 0 t 0 f experi men ta n on and sketch i n g; however, rt can really payoff, as the finished result wiH certainly stand out,

***********************

Images for all

4 million stock images startingfrom 14C. Call 718-577-1321 or visit:

, www.!otolla.com

~ ********~*~~********~**

-""'--'"""_'"

Rdobe RIRturnf .

Web developer:r into defHtop developer:r

-- ...... ..._-~~ .~ ...... --..

look and behave very similarly to one another. Most consist of different groupings of form elements an d menus, and they usually share the same default Iook and feeil for whatever operating system they're being viewed on. Now let me first say that th is is u su any preferable so the user has a consistent experience, no matter what they're doing on the computer. However, there a re times when users don't get the full experience that could be pcssi ble if developers h ad the a bility or desire to think outside the box. Apple is prcbably the best at provid i n 9 nicely designed, original desktop experiences, but it has been extremely hard for most developers to create similar applications. That is until now.

The world of desktop application development is one that typi cally required many years of advanced study in la nguages such as C++, Java, or Objective-C. This put it out of reach for most Web designers and developers, who have a whole set of skills and languages of their own to learn, Adobe recognized that their own commu nity already possessed the potential, for creati n g the next generatio n of a p pi icati 0 n s for th e desktop. Th is led to the development of Adobe AIR, which sole purpose is to allow the Web design and developer communities to bui'ld desktop applications using the skills that they already have.

epplicaticn is that the user has the AI R runtime installed On his/her system. If they don't, th ey'll be prompted to do S0 du ring the installation of your application-a, very seamless experience.

Limitationl of brouner .. bored appl

At this. point, you may be wondering why you'd ever want to build a desktop application. It seems that nowadays eve.rything is moving into the browser, so what benefits can be gained by being: on the desktop? lf we take a look at some ofthe problems that a,re encountered when an application runs in a browser, we can discover some of the benefits of AIR applications.

Branding limitations: No matter how great your brand's experience is within the browser, it's still confined within the walls of that browser. Your message will always be enclosed by an unknown number of browser features and chrome. It could be viewed in Firefox with a very minimal set of browser controls, but it also could be viewed in lnternet Explorer with a myriad amount of toolbars and buttons infringin9 on your brand. AIR solves this by breaking. out of the browser, allowing. you take full control of the look and feel of your application,

Only available online: Th is is a huge limitation of Web-based experiences. Your application may be g,reat when the user is connected to the lnternet, but as soon as they disconnect or close their browser, your app is no Ion ger available to them, A classic example would be that of airline travel. Your application works nicely wh ile the traveler is in the terminal connected to the free ai rport Wi"'Fi. But es soon as the flig.ht attendant doses the door to the plane, your appl'ication is unreachable until the plane lands and another Internet connection can be found. AIR doesn't suffer this same fate, as your applications work seamlessly regardless of

I nternet connection.

'" o

o ..

It'l in theRIR

Adobe Al:R is a cross-platform runti me a I,low,ing dssiqners and developers to create desktop applications using their existing Web development skills. Okay, so what does that mean? It means th at if you're a F lash developer, you can now build desktop applications usi ng Flash that run exactly the same on Wi ndows, Mac, Linux, and eventually mobile devices. This also holds true for traditional HTM Land JavaScript developers There's a misconception that AIR requires the use of Fiash technology. This is absolutely untrue, as developers have the ability to create desktop applications, using nothing more than HTML Of c-ourse, there are advantaqes to using Flash in your AIR applications, but more on that later,

The other important thinq to note about AI R development is that it doesn't cost you a penny to use it. AI R is simply a runtime that allows YOLJ to run Web applications on the desktop and doesn't require you to buy any additional tools. If you already use Flash for Web development, you ca n sim ply use Flash to create your AIR desktop applications. Using, Dreamweaver for Web design? No problem. You can simply continue using it to do all of your AIR development The same holds true for Flex develope rs u si ng FI ex B u i Ide r.1 n fact, you ca n dow nl oa d the free AIR SDK (software development kit) and write your applications in Notepad or TextMate if you wish, although to make development easier, it's highl:y recommended that you use a tool with built-in support for AIR.

After developing your application, just publish it from whatever tool you're using to an AIR file, then distribute it to the public so that users can install it. There's no need to provide different 'versions for different operating systems, as the AIR file can be installed anywhere. The only requirement for instalHng your

No operating system integration; Apps that are run within the browser have very I imited access to the user's operating system, They don't have the ability to easily read and write files, receive t.hings via drag-and-drop, or accept the full spectrum of keyboard commands. They do what the browser says they cen do~and nothing more. With AIR, you're creating a fully trusted desktop epplication with the power needed to interact with the user's operating system, reg:ardless of whether it's Windows, Mac, or l.inux. This often ileads people to think that AIR is a secu rity concern. Yes, it's true that an AIR application could be built that maliciously deletes files from your hard drive; but th is is just as easy to do with other desktop technologies such as. NET and Cocoa. So just as you shouldn't install a traditional desktop application from sources you don't trust, you should have the same vig,ilance when it comes to AIR applications.

Limited desktop presence; This is similar to the first limitation regarding branding. When you run your message in the browser, not on Iy are you surrounded on all sides by the browser, but you also have very limited options when it comes to placing your brand in other areas of the user's computer. AIR addresses this by a.llowing you to place your brand in places such as the Dock on Mac systems, the System Tray on Windows, and of course,

_ th e u sers desktop. You ca n set you r a pp I i catl on s to ru n at syste m startup as well as being- able to run in the background with no user interface whatsoever.

Getting/tarted with RIR

Hopefully, you're now ready to go right out and start building your own AIH applications, so let's focus on getting started. One thing you'll definitely need in order to build AIR applications is the ability to do basic programming in either HTMUJavaScript or ActionScript 3.0. Having said this, you don't have to be a hard-

• core developer to bu ild some really cool applications. There are

essentially th ree routes you can take to create AI R applications. f

Which route you take is primarily based on your existing skills as 'i7'1ift~

wellasthe tool, that you're W~"., usinq. '?9.,rtlAt.~

~-;;c,A..-~~~~~~ >'7¥Jyt r

Now that you're awa re of some of the benefits that can be gained by running outside the browser on the desktop, I want to make it clear that AIR isn't trying to replace browser-based experiences, AI R is meant to en h ance that experi ence by allowi ng greater integration with the user's desktop As an exa mple, take a movie website, The site is the central place for viewing the trai'ler, reading the synopsis, and perhaps playing some games associated with the movie. A site like this could take advantage of AIR by allowing users to watch the trailer and play those games while they're offline. Perhaps the application would pop up a branded desktop alert when the movie begins playing in theaters. The possibi I ities are endless.

How about lome eHompleJ

I can write all day long about the benefits of buildinq AIR applications, but let's take a look at some examples that back up what I've been saying. Adobe AIR was official'ly released in early 2008, and already the community has created a ton of great applications. They range from more-traditional enterprise applications to completely wild branding experiences. Here are just a few of my favorites:

TweetDeck (www.tweetdeCk.COm)

There are many, many Twitter clients built on AIR but this one is unique. I.f you're not familiar with Twitter, it's a social networking! site that a Ilows you to keep track of what your friends are doing right now-a kind of micro-blogging. Even Layers maqazine is on Twitter (www.twitter.com/LayersMagazine). With TweetDeck, you can set up various columns of Twitter content. givi ng you a broader overview of your Twitter feeds. This allows you to stay informed about not just what you and yom friends are up to but also the technology community 'in general-a great way to track current developments. For instance, I tan set up a column that shows me every message someone writes with the word "Adobe" in it. Sometimes it's pe inful to read, but it's actualty g!reat. uncensored feedback from the community.

E

" '-'

De.rtroyFlickr (www.de.rtroytodoy.comlindeH .php?e=Project&id=De.rtroyFlickr)

Despite the sca.ry name, this application delivers an amazing experience for viewing your Flickr photos. This application can run in full-screen mode, is very well designed, and includes some really nice transitions between screens. The really cool part of this application is that when you view either your own photos or

those of your contacts, you're actually creating virtual workspaces. At any time, you can zoom out to see a high-level view of all your workspaces and then zoom back in to the one you want to see.

Derktop Heeley (www.therun,co.uhlderktopheeley) Th is a ppl ication is a great exa mple of taking a fresh. approach to branding. The Sun isa popular British newspaper that's quite a bit more risque than the papers I'm used to reading in America. One such risque feature is the "page 3 girl" that shows scantil:y clad women in various poses and provides celebrity gossip and other pieces of lighter "news." The Desktop Keeley AIR application combines a simple RSS newsreader with video dips of Keeley Hazell walking 'around yom desktop in various outfits ranging from conservative to, urn, less conservative, At anytime you can Control-click (PC: Right-click) on the application's icon to make Keeley come out for a visit.

~,

r·~

f ~

1~(.1 ""''i', mI'!"lE!l=mt!Jml!~rtkJ~'4 9

Bui/ding HTML and JavaScript AIR applications: If you're currently a Web designer or developer who uses tools such as Dreamweaver to build HTML-based websites, then you can continue that same workflow to build AIR applicaticns. You don't have to know or use Flash to create applications with AIR Draamwaavsr users can downloada free extension from Adobe at www_adobe.com/ products/air/tools that adds support for creating AIR applications,

Once yotl have the extension installed, creating your first AIR appl ication cou ldn't be easier. Let's say yotl a I ready have some existing HTML content that you'd like to package into an AIR application. AI,I that's required is to select Preview in Adobe AIR from the File>Preview in Browser menu. All of the settings for your a pp I icati on ca n be a ccesse d by ch oosi n g AIR App I icati on Setti ng s from the Site menu. Now obviously you'll more than likely want to take advantaqe of some of the AI R-specific fu nctionality so that you cen better ,integrate your application with the user's desktop For more details on programming AIR applications using Dreamweaver, make sure to visit the Adobe Developer Center (AOC), which focuses specifically on this topic. You can find that by going to www.adobe.com/devnet/air/ajax.

Cnmm.nd, Sire Wkndaw Help

ru< lit-I

• 1.1) Tra,ns t t t]

.>

~ ii5! ,"". " .. '

Prolli, .. In Sat.rI.app '\:'12 'g/rRi~

Prolli.w In FLldo •.• pp

'Pre,; .... In Op"",-.pp

IPreView in Device ell'! Inr:~,'1 ... '"( F12

texl/htm\: C'

Ed iIB"'W5.r US! ...

Building AIR applications using Flash: If you're currently building Web experiences using Flash, then you'll be happy to know that Hash is one of the best tools for creating AIR applications, If you're usi ng Flash C54, then you a lready have built-in support for building AIR applications right out of the box. If you're using Flash CS3, then you'll want to download a free extension at www adobecom/products/air that enables the same functionality.

Much I ike the Oreamweaver extension, you can turn an exist" ing Flash project into an AI'R application by Simply changing the publish setti n gs to ta rget Adobe AI R instead of the browserbased Flash Player. New AIR projects can be created by simply

'. fl .. hm.~!kr~ptJl.Il!l • ~.lnl

.n.. ... tim.tAdiiinhr.!.p:l1J!j

I_ ~~n~r~AlII;I & rIn:nd

• ~lnl'1 "Ilii ~i.tI;I~II.I. I., PltIJl.lO!ifNI'IIIIto ~

f"~llhl I~I'II tII:o~, iIIQdI:;!!Il~, ,;tru:ll'l'lElrl' .In. Adli'bdI .. IiI::I.III1 Horn.£.

choosing Flash File (Adobe AIR) from the Hash Welcome screen. All of the details about how you want your application to look, such as window chrome and icons, can be set by launching the

AI R settings dialog from the Flash C54 Properties inspector.

It's important to note that you must use ActjonScript 3_0 to build AI R applications in either Flash or Flex. Th is is yet another good reason to upgrade your skills to the new language, To learn more about Flash-specific techniques for building AlII applications, be sure to check out www.adobe.com/devnetlair/flash at the AOC.

Building AIR applications using Flex: The Flex framework allows developers to quickly create Rich Internet Applications (RIAs) using Flash technology, You can essentially think of Flex as "Flash for developers.' Typically, developers aren't very comfortable inside Flash because of the abundance of drawing tools and the timeline-based approach to animation. Flex and Flex Builder, which is the Eclipse-based IDE (integrated development environment) for creating Flex applications, are meant to appeal directly to developers who come from backgrounds such as Java and ,NET. Flex applications w~lllook and behave more like traditional applications an d can utilize an advanced set of components for things such as charti ng and data visualization,

Adobe .AIRis a first-cless citizen within Flex Builder 3. When creating a new project. you simply choose Desktop Application (Runs in Adobe AIR) from the New Flex Project dialog_ To find out more about building AIR applications with Flex, check out www .adobe.com/devnst/air/flex at the AOC.

z m

'" o

o ..

... r

~1IoIII'IIIt1"""~Ii~'IIIIri "~l.og;J;lo!1o AAI:M:Ild~'IIIIJ~

o ~fLII'llloltlCilla.'IkH!IIt'ilI'i:I.""F1u"iIIII~ t6 Duhll!i51 iItiIlIlO'IMI j'II'" in ~1kIIIII .I1il1Q

Srootr~'hJ'l~ ~tIDlII!.afIrB'tlp!::~14 J'

ttl

Regardl ess of wh i ch route you take, you'll have the ability to create powerful, unique, desktop applications without the need for learning yet another language, AI'R applications can range from simple widgets to full-blown enterprise applications, 1.1 you've ever said something along the lines of, "I wish someone would make an application that did this," well you; can stop sitting around waiting and just build it yourself. •

• [ lee Brvnelow j,s..a Platform Evangelist with Adobe and is an ,a'1'lard~winfljng ] interactive' designer. Lee .runs t"e free tutorjal site at www.gcHoandlear.tl.com ."d" ~1.sh",.I.Md blog or www_d1efi.shblog.com. 1-1. is .Iso the ."thor 01 s@veral tittes for Lynd.:;l,com dealing with Flash .and After E~cts,

38

--------------------------------------------------[photographyJ

E " "'

the shoot ... ]

feel the photograph

[ When you

take control,

you become

the director of

w z:

"I don't think, I feel." That's what Keith Richards said about playing gU1itar onstage in Shine a Light. the Martin Scorsese film of the Rolling Stones' performance at the Beacon Theatre in New York City, A must-see, ill my book!

I like that philosophy and have thought about photography the same way for years. I feel that a photographer must know exactly what all the buttons, knobs, dials, and settings do on a camera so that when he or she sees a shot, the process becomes more about feeling than thinking about the tech nical side of photography (this must become second nature),

In this column ,1''11 share a few of my favorite ph ilosophies about feelings and photography that I've gathered over the yea rs. So sit back and don't think about RAW versus JPEG, white balance, ISO settings, etc, I nstead, think about the feel of a photograph.

The camera looks both ways ...

When it comes to photographing people, the most important photo tip I can share with you is this: "The camera looks both ways-in picturing the subject, we're also picturinq a part of ourselves," "Every picture is a, self-portrait" is another way of conveying that point. Let me explain:

When you're looking through yom camera's viewfinder, viewing and framing a subject, if you realize that the feeling,. emotion, attitude, and energy you project will be reflected in your subject's face-and eyes-you'lll get a higher percentage 01 pictures that you like. That's because, by your actions, you're subconsciously directing the subject to mirror the way you feel,

I don't have to tell you what I was feeling at the moment when I snapped the photo of the Buddhist monk that opens this column. Well, even though 1 don't have to tell you, it was a feeling a great respect.

Make pictures, don'tjust take pictures

Rather than simply taking pictures-pointing your camera, composing the scene, setting the exposure, and focusingtake your time and make pictures.

Making pictures is not on Iy fun, it's part of the creative photoqraphy process. When you take control, you become the director of the shoot, just as a movie director takes control of the scenes he or she shoots,

In this cowboy portrait, look closely a nd you'll notice the reflecti on of a horse in the cowboy's sunqlasses That, of course, was no accident. The horse and the cowboy were carefully placed in such a way as to capture the horse's reflection. The relatively plain background was also no accident. I selected the side of the red barn so that the subject stood out prominently ill the scene.

Be aware of body language

Sometimes we get 50 caught up in the technical aspects of photographing people and their facial expressions that we forget how body :Ianguage affects how we feel about the subject. Compare these two photographs of a woman I photographed in Marrow Bone Springs, Texas. In the dressed-down photograph, the woman is gripping the post with" man hands." In the other photograph, she's holding it in a femini ne manner. By the way, the woman is a model. and is actually the person who taught me about man hands.

Portrait vs. environmental portrait

Basically, when you take pictures of a person, you have two choices:

You can choose to take a portrait (head or head-and-shou lders shot) or an environmental' portrait (a picture that shows the subject in his or her environment). Both types of portraits can be effective, and I often photograph a subject both ways.

The first picture of Iaraino women, taken in Amazonas, Brazil, is my favorite environmental. portrait from my brief photo session in the

village, wh ich lasted only about an hour. Looking at the photograph, you can see the su rrounding ra i nforest, and you also get an idea of the women's clothinq and body painting. Those elements help tell the viewer something about them, where they live, and what it might feel like to live in the location.

Check out this shot. It's a nice portrait of the woman on the right in the first photograph; however, because we can't see the envi ronment, we don't feel as thoug.h we're "on location," so to speak, with the photographer.

39

r~ ~ m ;n ..

N o o ..

E " "'

w z

40

--------------------------------------------------[photographyJ

Convey the feeling

Compare these two pictures of some daneers at the Columbia Restau ra nti n Ybor City, Florida. For one picture, I set my camera on the Program mode and used a flash. It's not a very creative photograph. But more importantly, it doesn't convey the beautiful movement of the dancers.

Check out the other shot. Here, I. set my camera on Manual, set the shutter speed to 1/6 (a relatively low sh utter speed), turned on a flash, and sh ot. The combination of using a slow 'sh utter speed and the flash hel ps the viewer to feel the emotion of the scene.

Be there and be aware

Most of the photog raphers I know agree with th is expression: Th e hardest place to take pictures is in your own backyard, That's why we travel to different locations around the country and the globe: to get inspired=to feel an affinity with the subject

I took this picture (at top right) in Kingdom of Bhutan, which sits on the right shoulder of India. How can you not get inspired and be driven to taking the best possible pictures when experiencing a scene like this one?

So bei n g there ina new, interesting, and insp i ring location is important for m any ph ot:ographers.lf you can't get to places like Bhutan, go someplace that's new to you where something interesting is happening-someth ing that will motivate you to take pictures.

Being aware of everything that's going on around you isimportant, too. You must have your radar activated, not only looking for interesting subjects but for interesting scenes. What's more, you need to anticipate what might happen,

This photograph of the Buddhist monks was the result of my anticipatmq what might happen. Moments before I took this pic" ture, all the monks were praying inside the temple. I was observing quietly. A bell rang and they all Jumped up quite quickly and put on their sandals. I anticipated that they would be outside in a flash, so I dashed outside and grabbed th is shot Being. there and being aware will help you get good pictures.

Be yourself-enjoy the moment

I'm sure you've heard the expression, "Stop and smell the roses," When it comes to photography, we need to keep that expression in mind. We need to totally enjoy the moment; however, that usually comes when we have a total and complete understanding of our cameras, so we don't have to th i nk about the technical side of the creative process (as I mentioned and as Keith Richards suggests). This pictu re of school children in Lombok, I ndooesia, helps convey that point, which is basically to have fun and to enjoy the moment_

[Rick Sommon i, an instructor and author. You can leam mom about lightil1g and phot09rophing pooplo in his online 10"00.' at www.kelbyrraining.com. Riok', lotest book. F."" ]

to Face: The Complete Guide to Photogl.aptJ~ng People, also offers, complete information on the topio(l .and his Iighhng DVD from Wiley, Rick Sammon's Basic Guide to Lighting, '

covers m~ny ref)ectot atld dUfl)ser se~ups. Visit wnh Rick.;:lt www_n"cksammOll.com. ,

ALL 'MAGeS By R,CK S,wMO'l

E

" '-'

"'

::

N

'" "" ,"'

E

en L

"' >-

,It! --'

42

get it together with Lightroom 2 and Photoshop (54

It's exciting that lightroom 2 and Photoshop CS4 are finally here. And now is the time to ask, "Is this new version worth the upgrade?" For me, the answer is a resounding yesl These two new programs have revitalized my workflow and creativity in unbelievable ways. On that note, the intent of the following tutorial is to help you take better advantage of these programs.

[AOD STARS AND LABELS]

After importing your images into Lightroom, it's time to find the keepers, First, press G to enter the Library module Grid view, Scroll through the entire set of photos to become familiar with them. Then go back to the top, dick on the first image. and press E to enter the Loupe view. Use the Right and l.eft Arrow keys to navigate through the images. When you find a keeper. press 1-5 to give it a star rating. or 6-9 to assign a color label. The star and label ratings appear in the Toolbar below the images.

[FILTER TO FINO KEEpERS]

With your images rated and ran ked, use the filter features to sort the wheat from the cha ff. Th e. qu i ckest way to access the filters is to press Command-F (PC: Ctrl-F). Next, dick on the Attribute tab and choose an option for filtering (we're sorting bssed on a one-star rating and red label.), Now, you'I:1 only see theirnaqes you tagged with those rating values. To focus on the images, press the Backslash key (\) to hide the Library Filter menus. To minimize the interface even further, press Shift-Tab to hide the Module picker, Filmstrip, and the left- and r.ight-side panels areas.

Ie

[OEVELOP MOOULE BASICS AND TIPS]

Press D to navigate to the Develop module .. Open the Basic panel by clicking on the panel name or by pressing Command-1 (PC:

Ctrl-l). Move the sliders to improve the image. For more control, press Option (PC: Alt) while moving the Exposure, Recovery, or Blacks sliders to switch to a view that reveals a dipp:ing mask. For faster image processing, press the comma and period keys to select the different adjustments in the Basic panel. The adjustment option wi,11 appear as an overlay on top 01 the image (as shown) Then press the plus (+) or minus H keys to increase or decrease th e va lues, respectively.

A fIe r Adjus!me nt B ru s h used to improve shadows

Before Adjustment Brush

[USE THE ADjUSTMENT BRUSH]

Now it's time to work on more specific or localized aspects of the photo. Choose the Adjustment Brush(K) from the Toolbox, then modify the sliders for the type of effect you'd like to create, such as Exposure. Next, select a brush Size, Feather, How, and Density. Feather controls the edge transition of the adjustment. Flow controls the rate of the adjustment (typically a lower a mount works best). De n s ity controls th e overa Iii n te n sity of th e e ffeet. Turn Auto Mask on to limit the adjustment to a specific area; tum it off to make a more general improvement. Paint the adjustment on the image.

[ADjUSTMENT BRUSH SpEED TIPS)

The Adjustment Brush is one of the most revolutionary improvements in Lightroom 2; therefore, it's worth learning how to quickly work with this tool. Press the Left a ndRight Bracket keys ([ ]) to decrease and increase the brush size, respectively. Press Shift-] I to decrease a nd increase the brush Feather. Press 0---9 to change the Flow amount. After you've sta rted to use the tool, press the o key to turn the mask overlay on and off. To better evaluate the mask, press Shift-O to cycle. through the different mask colors (black. red, green, and white).

43

" '" " N

"Z '"

'" " " CD

N III

'" ra

E

tn L

'" ,_

m -'

44

,

[OpEN IN PHOTOSHOP AS SMART OBJECT]

After completing. your work in l.iqhtrocm, you might want to take the photo into Photoshop to add some finishing touches. You can open images to Photoshop several different ways, but here I want to highlight the new Open As Smart Object option. This technique give, you extra flexibility once in Photoshop, In Lightroom, press the G key to enter Grid view, Control-dick (pC: Right.clickl on the photo, and select Edit In>Open As Smart Object in Photoshop.

[WORK WITH SMART OBJECTS IN PHOTOSHOp]

With the image open as a smart object in Photcshcp, you can continue your normal Photoshop workflow; for example, you could add a Curves adjustment layer, apply a filter, etc. The advantage of uslng smart objects 15 that they preserve the source image, allowing you to make nondestructive editing to the layer The photo layer will appear with the smart object options. Double-dick the Smart Object thumbnail to open the RAW image in Adobe Camera Raw to modify or change any of the RAW adjustments. As you can imagine, this added bit of lIexibility is extremely helpful.

I:

[CONVERT TO BLACK & WHITE]

After completing and saving. yom work if] Photoshop, it's time to head back to Li_ghtroom. And let's say you want to convert another imag,e to black and white. Select the photo and press D to select the Develop module. Next, press Command-S (PC: Ctrl,3) to open the HSUColor/GraY-5cale panel. Click on Grayscale to access the Grayscale Mix controls Move the sliders to darken or brighten differ·ent areas of the photo, or click on the Target Adjustment tool (circled) and chck-and-dreq up or down on the image to increase or dec rea-se the bri g htn e 55 of th a t a rea, re specti vely_

[LHjHTROOM CjRAYSCALE AND VIRTUAL COpIES]

To evaluate yom progress, press the B ackslash key N to tog9 Ie between before and after views. The problem is that when converting to grayscale, the before view goes all the way back to the oriqinal color image. makin g it impossible to compare different types of black-and-white adjustments. To remedy this problem, select your grayscale lmage and press Command-: (PC: Ctrl-') to create a vi rtual copy. Next, make further grayscale adj ustrnents and th en press \ for before and after views.

conooued on p. 46

46

/ON II ... "",

"t~~n. ..... ~" ..

ill

[OpEN AS LAYERS IN PHOTOSHOp]

V.irtu al copies allow you 'to crea te ~wo different versions of the same image. In this example, one version has no sharpening and a high luminance noise-reduction amount to reduce the noise and soften the sky, while the other version has normal sharpening applied. To take advantage 01 both settings, press G to enter Grid view, Select both images. Control-click (pC: Right-d ick), and choose Edit lnxOpen As l.ayers in Photoshop. This will open both photos in one layered Photoshop document.

Black o:>nceals tnelo ",ground

il

[LAYER MASKIN(j IN PHOTOSHOp]

The layered document contains two photos: one processed with the sky in mind and the other processed for the foreground To combine the two photos, select the sky layer and dick the Add Layer Mask icon a t the bottom of the Layers panel. Next, choose the Brush tool (B) and paint with a solt-edged black brush across the lower portion of the photo. Th is will conceal the foreground so that only the sky shows through. If the mask edge is too sharp, Photoshop C54 now has the ability to soften the edge by increaslng the 'Feather amount in the Masks panel (WIndow> Masks) to better blend the layers.

r·~ -". - - 'It -:- - I fI- - -

I

~1'!!IIq.j.",. ~~"'~ ~!III!ItVi~~iIIII4I~'~

[USE LI(jHTROOM FOR PHOTOSHOP pANORAMAS]

The new Photoshop (54 auto-blend and a,uto-alig,n features are better than ever and are used for awlde range of purposes, including creating panoramic photos. To take adv<lntage of these features, in Lightroom press G to enter Grid view. Select the files you'd like to combine, then Control-click (PC: Right-click) and choose Edit In> Merge to Panorama in Photoshop. This will open Photoshop and the Photomerge dialoq, It's usually best to choose the Auto option. New to CS4 are the options for Vi,gnetteRemov31 a nd Geometric Distortion Correction for better results with photos captured with wide-anqle lenses. Click OK to create the pano.

[CROp PANO IN PHOTOSHOp]

Now you'll need to crop your panoramic photo. Choose the Crop tool (Cj and dick-and-drag over the imaqe. The grayed-out area shows wha t will be cropped. Move any 0 f the anchor points to resize the crop, Press Retu rn (pC: Enter) to a pply the crop. For faster results, double-click inside the crop area. Anoth er great way to crop is to use the Rectangular Marquee tool (M). Clickand-drag over the area ofthe image you want to keep, then choose Image>Crop to remove the unwanted area .•

[ Ch n's Qrw"Jg. Fhot. ~g.r<;Iph_~f ,and acthc r, is on m,g photo¥rosph y facu(w at .th C' fJroo.kS. rnsDnn;e in Santa Barba ra.r Caj;~ ~j~. His p~bjk::arronS' indrJd@ FI ~vm,p"r OT oesr-s,dling Ugh uoo~ ] :and Photoshop training tltJes at Lynda,coml as we/I as hl:S books, Adore Photcshcp CS4 Hew- los: 1 00 Essential Techniques anzr Adobe Photcshop Ug~~roDm 2 How-res: 100 Essential Techf1l~ques by Adobe Press .. For more- rnsp1r61Norl, visit hIs websi~e M ~1"Nw.ch(i.sol1Nig.com.

Ale. IMAG ES BY ClI~IS ORW'G UN LESS OTf'ERWISE NOTED

Master Flex, AIR, and RIA's in no time

Breaking Out ·of the Web Browser with Adobe AIR

Michael Lsbrictaand Jeff Ta,ppel 432 pages,. S49.99

Adobe AIR with Ajax:

Visual QuickPro Guide larry Ullman

384 pages, S39.99

Adobe Flex 3:

Training from the Source

Jeff Tapper, Michael Labriola and Matthew Boles with James Talbot 696 pages, S59.99

Check out

P ..... . h it Vid···

eacp _ .. eo

on Demand

Hot new videos on UX and C55 from Robert Hoekman, Andy Clarke and more ...

www~peachpit.comlvideo

To learn more visit www.peacbpit.,c.omlAir

Save 35%, off the list price, plus enjoy free domestic U.S. shipping. Go to peachpit.com and enter coupon code LAYERS·JAN when you reach the checkout page.

Offer expires 5131/2009.

------0

B[~ IUIH!ERlANO

E

" "

"'

::

N

'" "" '"

E

en L

"' >-

IrtJ --'

48

making a better mask

With the new Masks panel, Photoshop C54 has greatly improved the way essential masking techniques are implemented. Key controls are readily available and you no longer have to relly on convoluted workarounds to apply essential mask-editing modifications. In this tutorial we'll go over some of the new ways to work with masks in C54.

[creating new masks with color range]

-/7<.

[OVERVIEW]

I recently visited myoid junior high school in Boise. Idaho. A new school had replaced it and only the entrance of the original bui Iding was left standing. My nostalgic pilgri mage occurred 'in the late afternoon, shortly before sunset and the edifice was backlit. These cha Ileng..ing lighting conditions meant that in order to get a decent exposure of the wonderful educational graphics over the window, the late afternoon sky would be blown out. We'll drop in a new sky using the Color Range command and the new Masks panel in CS4. (The new sky has already been placed in the practice file as a separate layer.)

[ADO A pIXEL MASK]

Click on the Build inglayer in the Layers panel to rna ke su re it's active. In the Masks panel (Window>Masks), dick on the Add a Pixel M ask icon in the top-right comer of the pa nel (it's the icon on the left) You'll see that a layer mask has been added to the Building layer in the Layers panel. Now click on the Color Range button near th e bottom of the Masks panel to bring up the Color Range dialoq,

[H you'd like to doweloed the imag.e used in t"'is tutorial to practice these techniques, visit "Arww.t~yersmaga!zine.com and 1'1.a v iqate to the Magazine section, All fil-es are for personal use on'y.]

(SAMpLE COLORS WITH EYEDROppER]

----

In the Color Range dialog, make sure that the Invert box is checked on and the Fuzziness is set to 40. Use the Eyedropper to dick on the sky above the building. Most 01 the white sky is immediately masked, revealing the new sky layer underneath. This is very useful because you can see the mask bein g created live. In previous versions (and if used apart from the Masks panel in CS4), the result from using Color Range is always a selection, not a mask. Use the plus Eyedropper to dick in the lower-left windows to make those. areas totally black in the Color Range preview. Click OK,

[fine-tuning with the masks panel]

Mask Density 100%

Mask Density 50%

[CONTROL DENSITY OF MASK]

The Masks panel offers two dynamic sliders (Density and Feather) that can be adjusted and readjusted at any time. Density controls the black areas in the mask: 100% is total black and anything less than that becomes gray. This functions like an opacity setting for the black areas of the mask. Choosing a lower Density will allow more of the original white sky to show through, and thus minimize the brightness of the new sky layer underneath. In the past, this type of mask editing had to be made using Levels or Curves. For this example, we left Density at 100%.

Feathe, = 0 px

Feather = 5 px

[CONTROL FEATHER OF MASK]

Feather controls the hardness of the mask edge. In previous versions, this was accomplished by either feathering a selection before you turned it into a mask (not ideal, because YOll couldn't see how much feathering you might need) or by using the Gaussian Blur filter on the layer mask. As this is a dynamic control, meaning it can be changed at any time, it's a we:lcome masking improvement in CS4, For this example, we need to apply the edge modifications another way, so ,leave the Feather set to 0 pixels

11:"[..<

_.------_

~III'LIIII~c[M~-iIIIl''IIII.~~I'II~.t.U.. Prwr t.C)lQ!. L ....... r .... ~..-_..., ..... ~IiI,..~ .... ,..~

[THE REFINE MASK DIALOg]

There are a few errors on the mask edges in some areas, particularly along the vertical window frames. To fix this, click the Mask Edge button in the lower portion of the Masks panel. The controls in Refine Mask are the same as Refine Edge, but they affect a mask and not a selection, allowing you to see in real time how the edges of an adjustment layer's mask are affected. If you're creating a selection that will be used to create a layer mask, apply your edge modifications in the Refine Mask dialog where you have a better view of what's happeninq=-see next Step,

49

'" " " CD

E

" u

"' t::

N til

"" '"

E

en L

"' >-

,,.

-'

51)

Aft"r

[AOjUST SETTINgS IN REFINE MASK]

Choose View>Actual Pixels to zoom the image to 100%. ln the Refine Mask dialog, dick on the Standard preview icon (circled above). This shows the mask as a selection edge, wh ieh is tota Ily useless if you're working on a mask beca use it obscures the very edges we need to see, 50 choose Cornmand-H (PC: Ctrl-H) to hide the selection edges. Set the Feather to 0.8 pixels to slightly soften the edge, then set the Contract/Expand slider to -35 to "fit" the mask edge tighter to the building. Finally, set the Contrast to 20 to further fine-tune the edge. Click OK.

[SELECT THE SKY IN THE WINDOWS]

The adjustments we made in the Refine Mask dialog did a good job at creating a better fit for the layer mask, but we still need to do some manual touchups. For this photo, we'll use the Brush tool to fill in areas of bright, specular highlights on the vertical window frames that were initially selected by the Color Range command. Click on the Eye icon at the bottom of the Masks panel to temporarily disable the layer mask. Use the Qu ick Selection tool 0/11) and drag across the sky area inside each of the window frames while hcldinq Shift to select those areas.

,

[pAINT WHITE ON MASK]

Choose Select> Inverse to select evsryth ing except those sky area s. In the Layers panel, click on the layer mask to be sure that it's active and also to enable the mask. Use the Brush tool (8) and paint with white at 100% Opacity. Depending on the selection, you may need to apply further edge feathering.

[AOD CURVES]

As a final touch, I added a Curves adjustment layer that applied a sliqht contrast boost to the building layer. With the Curves layer active ,I clicked the third icon from the left at the bottom of the Adjustments panel to clip the adjustment so that it only affected the building .•• ~

[ S~,j~l Dugga~ is co-author ofTh~ Cre.at~ve DigttaJ Darkroom and Photoshcp Artistry. He teaches. regular workshops on PJJOtoshop .and Lig~tr'oom for photogfsprers. Sign up for' his free] dlgJ r5l1 d.a ~kroom r~ew$leUer a ~ f'J1.5 websl re, WINW. seandlJggan . .;:;om.

A L IMAG E5 BY SEAN DlJGGAN UN LE>S OTHERWISE NOTED

"There i~ no easier wa~ to find, apply and (uS!omlze fra me 5 a.nd edges, aU I n real-time, Ilia n with the new user Inlerfac.e In 'PhotoFrame 4."

-Krrln KubcrQ

o...flMlOjI r~_~I.,PfjO/ogrfjl! ... IoIJi.! ... 1IiI'

PholoFrame 4 keeps your favorite frame'Swllhin easy reach with a new !rating and filter system 50 you can gel to the frame.s and layouls you lI~e the best.

PhC!toframe 4 really puts you Into the digital darkroom.Nol only iI PhotoFrame 4thI' easiest way 10 add realist!ic film and darboom edge elfert.5 to your ima.ges, you can also add anistlc ed'gesllke torn paper, brush Wokes or eVl'n (INtI' full-on layout. with batkgrouncll, lelCtures and adornments. Gel Cfeative and stacil multiple layer! to create YOUI own unique look and then 5<!ve it as a preset and share it with a frlen.d. You (an l'Ven add your favorile frameHlght Inside of Adobe Pltotoshop lightiOOm or Apple Aperture. Wllh the new balch 'proce!.lng l'ngine you (an even prepare images for youl website 01 slideshows by resiling, adding a ~ame and a watermark all at once.PhotoFrame 4 adds the perfect finishing touch to your .images With a complete library of professionally <reated edge effects and design elements allowing you to create an Infinite number of effects that really make your Images 5tand eut

For m(m informotion, free 30-day triols and video tuloriols ...

www.onOnesoftware.COm/pSD

S259.95 r'role\,," 111 ,,1, in

PhotoFrame 4

5159.95 \"n<l.,,~ II·,,"

onOne software

The perfect finishmg louch for your pholos

Software that Gets You Back to Shaetinq"

B[~ S UIH'lRlANO

water, water everywhere

One of the many great things about Photoshop is that you can start with a basic idea and then just start experimenting (a.k.a, playing) to see what you get. Although the following technique was originally designed to make water droplets (and discovered through playing-I mean experimenting). it's easy to apply the same idea to type and graphics of any kind.

E

" "

"'

::

N

'" "" '"

E

en L

"' >-

,,.

-'

52

[MAKE NEW OO[UMENT; ADO EjRADIENT]

Create a new document in the size you need and fill the Background layer with a color or a grad'ient. I n this case, we used the Gradient tool (G) with two shades of blue. To create a custom gradient. dick on the gradient previ ew thumbnail in the Options Bar to open the Gradient Editor, Double-click on the color stops below the gradient bar to change their colors a nd dick 0 K. With the Gradient tool, click-a nd-drag from th e left edge of th e document to the right edqe.

[ADO STRIp ES; FLATTEN LAYERS]

We need to add a series of slightly darker stripes. Click the Create a New Layer icon, choose the Rectangul.ar Marquee tool (M). drag out a selection across you r backg round, and fi 1.1 it with -a de rkar color Press Comrnand-J (PC: Ctrl-Jl around 10 times (depending on the size of your document), then u,sing the Move tool M. Shiftdrag each of the darker stripes to a new location, ,Ieavi ng space between. Do this until your document is filled with the alternating pattern. Select all of the stripe layers, then click the Distribute Top Edges icon in the Options Bar. Choose Layer>Merge Down, and change the blend mode to Overlay.

[DRAW CIRCULAR SELECTIO NS]

Click on the Create a New Layer icon in the Layers panel. On the new layer, draw a few circular marquee selections using the Elliptical Marquee tool. To draw multiple selections, hold down the Shift key. (rip: To reposition a selection while you're drawing it, press-and-hold the Spacebar [make SLJre you're still pressing th e mouse button], move the selection to the desired location, release the Spacebar, and then finish drawing your selecti on.)

[USE LAYER STYLES TO ADO OIMENSIOt~]

Fill the selections with any color and then in the Layers panel, lower the Fill opacity to 0%. Click the Add a lHyer Style icon at the bottom of the layers panel and select Bevelllnd Emboss. Experi ment with the Depth, Size, and Soften settings to create a soft edge. 0Ne used Style: Inner Bevel; Technique: Smooth; Depth: 61;. Direction: Up; Size: 24; and Soften: 14.) Change the Shadow Mode to Soft Light and dick its color swatch and chang;e it to white. (Optional: Change the Gloss Contour to add to the effect here we used Rounded Steps.) Click OK .

..........

[CREATE A "DROpLET BRUSH"]

- ----

Click on the Brush tool (B) and then use the Brushes panel0Nindow> Brushes) to edit the brush settings. Start with a 3S-pixel hard-edged brush, dick on Brush Tip Shape, and change the Spacing to 9S%. Then ln Shape Dynamics, change the Size Jitter to SO%. Minimum Diameter to 10%., Angle Jitter to 25%, and Roundness Jitter to 50";1,. In Scattering, use a high value for the Scatter (we used 650%), a Count of 2, and a Count Jitter of around 40%. Of course these are just guidelines: Take advantage of the preview at the bottom of the panel to tweak your results,

,

[pAINT IN SOME DROpLETS]

--- - - --

On the layer where you originally created the ovals, press Command-A (pC: Ctrl-A) to select the shapes and then press De'lete (PC:

Backspace) to delete them. Now you can paint with your new droplet brush. (Since the Bevel and Emboss style is active on this layer, your brush shapes will automatically have the look we want) (Note:

Make sure that the blend mode of the brush is set to Normal in the Options Bar and that the Opacity and Flow are both set to 100%.)

53
r=
,.
-c
m
"
""
'"
"
::: '"
"
~
a
'"
"
"
."
rn
"
'"
"
'"
"' [ADO TEXT]

Use the Type tool (T) to add some text using a handwriting- or grungy-style of typeface (we used A Bite, available from www .dafont.com) Hold down Option (PC: All) and dick-and-hold an the word" Effects" u nd er th e d ropl etlayer in the Layers pane I and d rag it onto the type I ayer (to copy the Bevel a nd Emboss layer style), Lower th e Fill opacity of th e type layer to 0%. If necessary, double-click on the Bevel and Emboss effect to adj ust the settings for the type layer. In th is example, we lowered the Size and Soften settings and set the Contou r setting back to Li near.

-

..... .-. ,.-

. ... _j" ".-

,

f:

[MASK pORTIONS OF THE TYpE LAYER]

'If you used a smooth-style typeface as shown in this example, you'll want to beat up the text a little to add to the water effect. Click on the Add layer Mask icon at the bottom of the Layers panel to add a layer mask to the type layer. Wi-th your Foreground color set to black and a small round brush (not the droplet brush), paint over several areas of the type to create gaps in the text.

III

[AOO ELEMENTS TO COMpLETE LOOK]

[LIQUIFY THE BACKCjROUNO]

To add to the look, we'rJ liquify the areas under the droplets. First, hold down Command (PC: Ctrl) and click on the thumbnail of the droplets layer to load these shapes as selections, Then hold down Shift-Command (PC: Shift-Ctrl) and dick on the type layer thumbnail to add the text to the selection. With the Background layer active, choose Fil'ter>Liquify. Liquify wi'H open with a mask based on your selection, Use the Forward Warp and B'loat tools to paint over the droplets to distort the stri pes.

In our final example, we added additional text and an image to create an ad for bottled water. I el1courage you to experiment with this technique on objects, as well, Just use the Marquee tool to select any object, such as a persol1 or can of soda, and then drag-and-drop the selection onto your striped background, After creatil1g a layer and filling the selection with a color, lower the Fill opacity to 0% and copy the droplet layer style onto this layer, Then added a few more drops with your droplet brush as needed, •

E

" u

"' c;

N til

"" '" E

en L

"' ,.

,,.

-'

~ [ D;J v e croS, . s is Senior Developerl Education an, d Curriculuml fer tile NiJtJ"ona) Association of Photoshop Professionals. He is the author of Pbotosbop Finishing, Touches and The ].

" Phorcshop CS2 Help Desk Book, ond Is featured on • serie, of Pho(osilop trainin9 DVOs,

••• •••• ••

BEN 5U1HER1AlW 59

text messaging

This time around, we'll explore the many ways you can manipulate text in Illustrator. By combining color and effects, you can create really fun and eye-catching text in no time at all.

[TYpE THE TEXT]

To begin this text effect, we must start with the most critical element-the text. Select the Type tool min the Toolbox and click in the artboard to set a text obi ect. Enter whatever text you like. We entered "WOW" in all caps using the font Gill Sans Ultra Bold. Once entered, scale the text as necessary.

eo;: " u

ru

:;

N III

'" m

E

en L

'" ,_

,",

60

Just in case you want to go back and change the text later, drag the type layer in the Layers panel to the Create New Layer icon to duplicate the text object. Cl'ick th e Eye icon next to th e 0 rig ina I text layer to hide it Select the duplicated text with the Selection tool M and convert it to outlines by going under the Type menu and choosing Create Outlines. For the sake of visibility, set the Fill to white and the Stroke to black,

iTfV\ 5F.:OR

N ow we need to distort th e i nd ilii dua l lette rs, For th is, we'll use th e Free Transform tool, which Q3n be a bit tricky. First, make sure all of the letters Ere unqrouped (Object>Ungroup) and select the first letter with ihe Selection tool, Switch to the 'Free T ransforrn tool (El, and dick-and-hold on the top-left corner of the transform box, Press-and-held the Command key (PC: Ctrl key) End drag the corner to manipulate the shape of the letter. The 'Free Transform tool takes alittie practice if you've never used it. Continue to do this to the remaining letters, VErying the distornon and position of ea ch

Select all the distorted letters and create a duplicate of these letters just as we did earlier. Move the duplicate off to the side of the artboard for now and reselect the original transformed text In Illustrator CS4, open the Appearance panel (wnderthe Window menu) and set both the Fill and Stroke to black using the drop-down menu for each property_ Also, set the Stroke weight to 40 pt. (In CS3, set the Fill and Stroke colors and the Stroke weight in the Control panel.l

JOI"

.... tragc_,

Slmp1ifv···

Add AI1a.Of P"I~U Remove A .. har Points Dt",d~ Obj«!> Gelo",

Spll! In!a C;nd,

CI •• n Up".

- ~. ~ - - ---. ------------.

- , [gLlTLtN~ 5TROI(~] .------=-....!

With these objects still selected, go into the Object menu to Path and choose Outline Stroke .. This will' expand the shape area out to th e stroked area, rnakinq it a regu lar shape

61
'r-
,.
-c
m
"
'",
OJ:
»
..r1
,.
~
'Z
,m

"
z
""
m
"
'"
"
,0
ir~ CD Open the Pathfinder panel from the Wi,ndow menu, Olick the Unite icon, which is the first icon under Shape Modes. (In Illustrator C53, the Unite icon is called the Add to Shape Area icon, and after you dick the icon, you also need to click the Expand button.) This will combine all the expanded shapes into one single shape. This shape wil'l act as our outer border effect. (Note:: If you see any stray points inside the shape, Lise the Elilipse tool to draw a shape over the. points, select everything, and dick the Un ite icon again.)

Now we need to change the color of this shape. Open the Swatches panel and set the Filii color to blue and the Stroke color to red. Open the Stroke panel from the Window menu. Set the Stroke weight relatively thick, depending on the size of your art-we used S pt in this example, Click the center icon next to Align Stroke to put the stroke on the in side of the shape.

•

Now go and get the duplicated text that we distorted earlier and position it on top of the border sha pe" Cha nge the FiH color to an orange and the Stroke to black. Don't make the stroke too big: make it just enough to define the shape so the two shapes don't appear to be combined (1 pt in this example).

l ~~:::' . pi

!h,r r.-P'~-_~

@lClIler. O.,...n....!

•

Select just the last letter. Go under the Effect menu to Stylize (under the Illustrator Effects listing) and choose Drop Shadow. Enter -5 pt in the X Offset so the shadow appears more to the left, Enter 5 pt for the Y Offset and enter a 3 pt Blur, (Note: These numbers will vary depending on the size of your art.) Click OK.

E'
"
"'
t::
N
'"
""
'"
E
L
"'
>-
,,.,
;i [
"
"
62 II

Select each of the other letters individually and apply the same effect by choosing Apply Drop Shadow under the Effect menu. Apply it to the bard er sh a pe beh i n d th e letters, as we I L

Now we're going to apply some subtle highlights. Grab the Pen tool from the Toolbox, Set the Fill color to white and the Stroke color to non e, Then at va rious comers of the I etters, d raw some very sm all comer shapes to give the letters a little rna re ,i nterest, Cantin ue th i s on all th e letters but don't get ca rried away-it's easy to overwork someth i n g u nti I ;it doesn't look cool anymore. That pretty much does it. You can see the possibilities here and the many different directions you can go with this. Have funl

Corey &~ker is. an Education and Cum'rutum [Jev,eloper for the Ncrtion~1 Assoc.iation ot Photoshop P'rtJfessiona/s, His expertise in Adobe F'llo~oshop ~fid Adobe Iltus~raror h.as.eamed him ] numerous awards in ilh..lrtrationr graphic design, .and photographY

---------------------------- t~ P 0 9 ra P h Y 1

[THE ART OF TYpE] JAMES {l} FEllCI

_l

E " u

more importantly, readability. ]

reading between the lines

'Leading is an aspect 01 white-space management that g'ets far teolittle attention. Properly set leading is vital to harmonious page layouts and, more importantly, readability. It's a key element in the even texture we call' "good type color,"

Now, when I use the term, "leading;'I'm using the mainstream definition: the distance, in points, from the baseline of one character to the baseline of the Ii ne 01 text above it. The word comes from the lead alloy used to create the metal stamping blocks in handset type. The vertical dimension of the face of these blocks equals the point size of the type. The computer-type equivalent is the height of the bounding box that surrounds each character you set.

In computer type as in metal type, when you set lines of these character blocks one on top of another with no added intervening space, you're settinq your type sotld. When you add space between lines, you're adding lead, In a solid set, the type's point size and leading are equal, for example, when 12-point type is set on 12 points of lead. This is typically written 12/12, pronounced "'12 on 12." Adding 1 point of lead gives you 12/13, or "12 on 13."

Just say "no" to automatic leading

The first step to asserting control over your le~ding is changing the "a utomatic lead i ng" va I u e in all your programs, I n the absence of a decision by you, this val ue determ i n es what your leading will be, based on the size of your type. Never surrender this decision to a computer program' But since the "automatic" option exists, you may as well set it to a useful value.

[ Properly set leading

is vital to harmonious

page layouts and,

uJ z

A.

-

Extreme leading is often used for artistic effect, as in this coffee-table book, but it's not very useful for normal text. Here, 12-point Baskerville is set on 24-points of Jead

In all Adobe programs, the default value for auto" rnatic leading is 120% of your type size, Sometimes this may be appropriate, but itslike having a broken watch It's accurate twice a day, but u sel ess th e rest 01 the time, It's far better to have" automatic" lead ing default to a logical integer val ue that's the same as your type size,

With no documents open, open your program's Paragraph panel, click on its menu (top right of the panel), and choose

J ustification. In th e J ustification dia log, change the Auto 'Leading value to 100"';' and click OK.

Thenceforth, your automatic Ie.ading will produce. a solid set. If you forget to speQifya leading value, this has the merit of uSllally being more noticeably wrong than ·a 120% settinq, which may be just dos.e enough to beil;lg correct as to 90. unnoticed.

Getting the lead in

So what leading value should YGU select? Since there 'should be harmon)! .among the proportions of all the white space systems on your page.-traGking, gutler width, measure (and by inference, margin widthJ-lhe answer is, "It depends." One t!:JiJ1g to know is that in most cases, leadinq measu red in whG le- orh alf-polnt increments serves perfectly well, Using fraction'S finer than a hali-poiot is really CI case of splitting hairs, and is unlikely ill 13 ccornphsh "myth ing ,

The most important lactOf in determin,ing a proper leadii19 value. is you r type's measure, O'r line length. Here'S; B handy rule of thumb:

When yO'U r type size (in points) equels you r measure (il1 picas), S solld set uS'-i-ally works fine; for example, 12-poinl typ,e over a 12-pka rrwasilre When your rneesure (in pleas) is- twice your pomt site {in PO'i nts), add 1 PO'i rrt of lead. When th is r.atio gO'es to 3: 1 r add two points of lead. This doesn't always work, but it wMI get you close,

There are two reasons to increase. leading as you increase your measure .. Firs1, 'the. space between lines serves as-a path 10 ste,er you r readers' eyes from the right margin back to the left so they can start rei3ding the next line. Narrow lead ing makes this transit more di,ffkult, Second, tight leading in a wide column simply makes the text block look gray and lin invitin g-suHoca-ttng.

Th e point size you choose makes a lesser difference. As point size. increeses, so does the amount of negative .space. in Bod around the characters. Both 'Character and word spaong appea-r somewh3t looser. The type appe.ars to hal'S more breathinq room. This can allow you to use slightly tighter lead,ng in ~arge type. But generally, )lour choice of point size is related to the 'measure you use, which brings us back to the previous point

A more important consideration is. the choice of typeface itself.

M QSt se rHfe d typ €! fa c e s fo r text a re so -ca II'ed "GIld -styl~," whi ch have a moderate amount of contrast between \heif thick and 'thin strokes and work. with ene' rule-of-thumb for leadingl outlined above. But so-called "modem" faces, such as Boden i iH]d Didot, have much greater contrast, with exaggerated thin strokes, giving them a brightness on the page that somewhat dlminishe.s thelr readabliily. n ey als .. ;] have large counters, tf\ e open spaces 'in characters such as e and a, w~.ich give them an siry appearance 011 the page. Just as these faces suffer from tight trackinq, they suffer from tight leading, because this fighls .against the openness of the letterfoerns themselves. Adding lead helps.

Likewise, sa ns-serif faces used in text settings, as· on this page r a lso suffer when set with tight trackin g' and leading. In this case, it's because sans-serif faces ~re i n'herently sOiT!eWnat les$ legibl e than seriffed faces (serifs provide Visual dues for quick character recognition), .so tight tr.ackil19 slows readinq, AIO'ng with the looser charaeter fitting that typmes sans-serif faces must eorne looser leading as well,

A thararter attribute?

In Adobe programs, lead i n 9 IS nominally a ·cha racter attribute set in the Character penel. But this is badly implemMted To see how b~dly, select a single chaeacter i[1 the tnlddll;! a~ a p--ar<lgraph and double its leading value and you'll see th~t the whole hne takes on the leading of that single cha rat:ter, B'ad:1 Your supposed character ~ttribute is in fact a. line attribu,te, If leading were properly irnplernehted as a- character attribute. doubltnq tha! characters leading-wQu'ld simply' push that one character down until its baseline was the specified -di·stiince below that of the prevlocs line.

To mov€ single ch~racre,s up and down 'like this in Adobe pro" grams, you have to use the 6~sellne Shift command, which 10 a ha If-baked lrnplernenteticn of true character-based leading,

Negative leading

Cornputenzed typesetting rrrtroduced hegative.le?ldingj where your leading value is (ess than your type's point size. It'" rarely use*LlI in body text, but if:; often handy in display settings. That's 'because as poi nt size in creases, wh ite spa ce appears to grow faster th all ~he char~cters themselves, As "normal" tracking looks too loose in large. sizes, sc does "normal" I'eading, As fong as as.;erlding and descending cha ratters don't colllde. you can use negative lead ing to gootleffect in headlines Md titles, especially in all-caps or taps" and-small-caps matter.

One lastpoint: Nobody said I~adin.g 10'3'510 be-consistent within <I single passage of dispilay type, either. When one line of type lacks ascenders, for example, its le'ading will appear to be greater tha,n other lines in the text blockjas shown beloW). The absence of ascenders and descenders between the first two lines oj the u;ppe:r sample (set in 24124 Bodoni Bold)' make the leading seem wider than that betweeJ1 the last twa lines. In the lower sample, th .. leading of ths second line hag been, reduced 'to 22 points, ~reating the effect of more. balanced spacing,

Board hattIe looms as COlnpany pays poor third-quarter dividend

Board battle looms 'as comp,any pays poor third ... quarter dividend

N'eg~tive leading in action

Likewise, a line with few or no- descenders can' make the Leading of the foil. owing line look too .slack. Don't be afraid to select these lines and (using: the so-called character sttribute as a I ine attribute) tweak the leading until' the spacinq between all the lines looks even, Because in type, what looks right is right, •

65

r,..

-< .. ",. ..

..

N CI co ..

[JamE'!i" FeUd i~ tho- a uthor ~t Th~ Complete Man Udi. of TYfJo,graphy fAdabe Prr:s.s)r formor m.trl'Jaq.~iJ9 1iJditor of Pubiiffi mE!~it']e, and contnburor EQ- Th(! S(!!ybold Report, ,M'<;iCYJorld mag~in(l! ] PDf;:""". co'n,. and R~bli!f'r,rorn

E

" "

"'

::

N

'" "" '" EO

en L

"' >-

,",

--'

66

fast layout in (54

Every now and then an app gets an update that really impacts your daily routine, and I'm happy to say that In Design C54 has some new-and-improved features that will do just that. InDesigin is a page-layout app, so anything that helps that process is a welcome addition. Let's take a look at how C54 will speed up your day-to-day work.

[smart guides]

. -- - - - - - - - -

, - -.,.

r r I •.

- ..

[OpEN DOCUMENT; LAUNCH BRIDgE C54]

We're going to take a look at proportional placing first You can either work with an existing document or create a new one, To create a new document, choose New>Oocument from the File men uand accept the default setti,ngs. Although you can place images from the File menu in InOesign, it's actually easier to do ,it from Adobe Bridge. Choose Browse from the File menu, which will switch to, or launch, Bridge. Navigate to the folder containi ng you r images, select one image, and choose File>Place>ln InDesign. This will take you back tolnDesign with a loaded cursor

THE SHOOT

On the set of Double Identity, Mark SOU5i1

Off the set. rumors ~aged that he and the

[pROPORTIONAL pLACE]

At this point you could just dick on the page and InDesign would dynam ically create a new frame and place the image at 100% size. However, in InDesign C54 when you drag out a frame on the page. the frame will maintain the same proportions as the image. When you release the mouse button, the image will fit perfectly in the frame you just drew. This is a huqeimprovementl Deselect the frame by hitting Command-Shift-A (PC Ctrl-Sbift-Aj

lHESHOOT

01'1 the sel 01 Double identity, Mark SOO.w pu t In 2Q.,houH'ay Off {he set, rumors raged lMI he and the female lead wefl! 1

[pLACE IMAyES AT THE SAME SIZE]

Now let's take a look at the new smart quidss in InDesign, Make su re you have smart quides turned on by choosing View>Guides & Grids. Click the Bridge button in the Control panel to go back to Bridge. Select another image and choose File>Place>ln In Design. Back in InDesign, Hne up your cu rsor with the top "right corner 01 the first image that you placed and drag out the new frame. As you drag, smart gUides will appear to let you know when the neW frame is the exact same size as the first image,

[smart te xt refiow]

Num'be' I 1\1) " )II!C'UOn OJ:1II lon, ... lobi. o! CO.,..,I>, ,

,.,._~.~-; ,,,1:1, t.'CilumnJ; ...

:l;l!Iltr'G"ud!3l .

" ..... CVOi .

a.voul ~t1.i Imt~ n , .. ~

First P'I;~ :p.P'IjIIf;lU"P,jl1jlt

11l$~tPil!)es .... MQ'lt1'! 1P~~e~ ... o..,pllo are Spmtd (leI,," P .• ~_

":' '.ooll' .... <!Orto P.g .. ~ b - It 1!!!!!!~gl' ~

--.1 1i.1 III'

too '0 P)~"-. too &0.

,

[ADO ANOTHER PAt;iE]

The next feature we're going to look at is smart text reflew, In order to use smart text reflew, you need at least two pages in your document. So if you don't already have a document open with at least two pa'ges, go ahead and insert another page. Choose Add Page from the l.ayeutc-Paqes menu,

- nl!!'~1 of Oo!.b/rldrntiry.I.tl,k Sou..,..., pU't IIIZo.»c,urd",y ••• I~" hard luc~ d rrth~ '''', ",roo" '''!Jed' ha! h" and the f~:mi>1e Ie.od wI'."" ;m .. .,. rab/ .. ,

.: ~ "!..

\ - ... ~'

,. \"l"'~ .

------

[EVENLY SpACE YOUR IMAyES]

----- --

Smart g uidas C'i3 n also even out the spacing between multiple images. Place a third image to the right of your first two images. {Note: You can select multiple images in Bridge and place them one by one without having to go back and forth between the two apps.) Now drag the middle image until you get the arnourrt of spacing- you want between it and the first image, The magic comes ,in when you drag your third image into position. When the spacing between your seco n dand th i rdima ges match es the s pao n g between you r first and second images, your smart gUides will kick in to let you know the spacing between all three is the same.

- ...

_ ... - _._

-_._

-.

-

-

--

-.. _

--

1iI1 .... ~~ ....... IIIIt' •• """11 j!,"ttw:a.a...

~~1IiII!!' 1~.IIII:oi-_

1*d'.~lIIIl ""'.

[SMART TEXT REFLOW PREFERENCE]

InDesign C54 defaults to only sHowing 'smart text reflew on master page text Ira meso We wa nt to use this feature 01] reg U lar text frames, 50 we'i'j need to make B change in our preferences. Open your Type preferences by choosing Type from the InDesign (PC:

Ed it» Preferences menu". Be sure to uncheck the Limit to Master Text Frames box in: the Smart Text Reflow section and dick OK,

67

e;: " "

'"

:;

N III

'" ra

E

en L

'" ,..

III -'

0<

" "

: 69

d

~

o~~ .. ~ __

ii.

z Ie Q

'"

~

or

'" '" o

~

Qi.

IC

[THREAD TOIiETHER TWO FRAMES]

For smart text reflew to work, yow 'II need to th read toqethe r at least two text fra, riles on two separate pages, So grab your Type tool m and create a new text frame on the first page. Switch back to th e Selection tool (vJ, dick the out port of the. frame you Just created, and drag 'out a new text frame on the next page, The second frame will be automatically threaded to the first frame. If you wont to see this link visually, choose Show Text Threads from the View menu.

[ADD SOME TEXT]

Switch back to your Type tool and dick in the first text frame you created. Your cursor will be flashing ready for you to type. For the sake of example, you can choose Fill with Placehclder Text from the Type menu _ This will nil both frames with text-

Havinq InDesign create pages automatically as needed is great; however, what happens when you remove text and no 'longer need the additional pages? We can turn on 11 fsature that will autornatic<llly remove those extra p~ges that InDesign created, Choose Type from the InDesign (pC: Edit}>Preferences menu. Enable the Delete Empty Pages option in the -Smart Text Reflow area and click OK.

Now if you remove enough text from your threaded frames, InDesign will automatically delete the extra P'lge, Keep in mihd that this only works if the page is empty of any other items_.

[ rn Ilrs GLlm'fl~ role as Dll1S!ctor fo",North America CreiJI.b"", . Pro Core Bu,sJness· (or Ad-obe Syst~ms. tnc., Terry W,hFte JeBds a teet» of creative ptofes5i:onaj pIOduct ~E'edalists, He's- also the. ] ""thor 01 Secrets 01 Adobe e<id~e ~"d co-"~lho' ",rlnO.sig" CS/eS2 Kilrer Tips and The iPhone eoo~ 2nd ~d;'ion_

~LL IMAGES COU"~2SY Of ADOBE UNLESS OTHeRWISE NOTED

1~1_'r"''''''''''ll"iijl(i'''''.'~''''-''I~ .c:,..~""';" \Jill..,. ~_..,.,..,,_

"'~~IIo~"'i~""'HJIIr.ot-ll"

~,,~.;,~"":~~,'T~

~1,,!5II ........• t.!l!ljt"'<4 _"I' .. ,iii IIijI

[ADO MORE TEXT]

Since your text frames are now full of text, 'if you add llny more text you'd normally be in an overset situation; however, because you

have smart text 'feflow enabled, adding more text will now add an additional pa_ge, So if I put my cu rsor at the end of the text on the

second page and continue typing, InDesign will add a page with a new threaded frame fo~ the additional text.

·1· ~

•

[REMOVE: EXTRA pAgES]

WE KNOW THE

Since 1995, our FlightCheck8 products embody Markzware's patented pretlighting 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!

If IIIIE

RJGHTCHEII /

:tIll

iE~ SUIHERlANO

E

" '-'

"'

::

N

'" "" '" E

en L

"' >-

"' --'

70

build a better portfolio

In Acrobat 9, you can combine documents from a variety of sources-including text, spreadsheets, image files, PowerPoint presentations, page-layout documents, and even CAD files-into one editable, searchable, compressed PDF portfolio. In a PDF portfolio each document can be viewed, edited, and saved separately.

[CREATE A pOF pORTFOLIO]

To begin the process of creating a PDF portfolio, choose File>Create PDF PortfOlio .. This will activate the portfolio workspace. Through this workspace you can gather your various documents; define a layout for how your portfolio will be organized and presented; format your portfolio (with headers, background images, and color schemes); edit existing portfolios; as well as save, preview, manage, share, and publish your portfolios. This Portfolio workspace is a special, separate workspace within Acrobat Now Choose File>Save Portfolio to name and locate your portfolio (here "50 Hikes-Photo Marketing"')_

[LOCATE AND ORCjANIZE YOUR FILES]

-- - - -- - - -

You may find it useful to use Bridge to locate, gather, name, and organize your folders and images prior to placing them in your portfolio. You can manually organize your files and folders in Bridge and then use the Batch Rename tool for quick alpha or numeric renaming of your folders and files. Usi ng Bridge to organize your files and folders is not required, but may save you some time.

Ie.

[ADO FILES AND FOLDERS]

You can add individual files, entire folders of files, or you can create portfolio folders in Acrobat into which you place files, You can access these commands at various places: the File>Modify PDF Portfolio menu; the Modify menu at the top of the document workspace; or more easily, simply dick on the appropriate buttons located in the I ower· left comer of the portfolio dialog, You can also Control-dick (PC: Right-dick) in the preview area to access a pop-up menu that includes these same options. And finally, you can drag files from any location on your computer into your preview area,

[DEFINE YOUR DISpLAY COLUMNS]

--- - - - - ---

In List view you can display certain criteria, such as file name and size, to sort or to simply view file information, To manage your display criteria. dick on the Specify File. Details tab located at the bottom of the Edit PDF Portfolio pa nel (this will switch you to List view), Check the boxes of the criteria you'd like to display, To create your own custom criteria, type in a new column name (here "Document/Image") in the white text field located at the top of the Specify Fi,le Details panel, select the type of criteria from the drop-down menu (Text, N umber, or Date), and then click the Plus (+) button.

[SORT YOUR pORTFOLIO]

Use the In itial Sort drop-down menu at the bottom of the Specify File Details panel to sort your portfolio files by any of the display criteria you activated in the previous step. You ca n a lso sort by' ascend ing or descending va lues. If you'd like to create a custom sort, you could assign sequsntia I alpha or numeric values to the various files and folders in the Description column. Just double-dick in the Description column next to one of the files to type in a value. Once you've entered all you r values, simply sort by Description.

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

• ~'li'O " •• __ ._

-- - - -- ~ ---

I

[SELECT A LAYOUT]

To select your layout, dick on the Choose a l.ayout tab located in the Edit PDF Portfolio panel'. You can choose from several layout views, including Basic Grid, ;Revolve, and Sliding Row. Here we chose the .Revolve option, which is a good way to view one portfolio item at a time. You can use the Basic Grid and Sliding Row to vi'ew multiple portfolio items simultaneously. To navigate your portfolio in Revolve or Sliding Row, Simply dick on the white triangles to either side of the preview area. Double-dick folders to view their contents and then navigate back using the folder path at the upper-left corner of the view window (here Home/50 Hikes Book}.

71

"" m

"

',"

" " "'

E

" u

ru c;

N III

'" m

EO

en L

"' >-

rn -'

[ADO A BACKyROUNO IMAyE]

If you'd I ike to displ ay your po rtfol io items over a background image, dick on the On An Image layout option located under the Basic Grid option Then dick the Pick an Image icon that appears next to the Create New Folder icon at the bottom of the dialog. To control the scale .and placement of the background image, drag the slider directly under the image to scale it, and' click-and-drag directly on the image to adjust its position.

• •

[pREVIEW pORTFOLIO FILES]

YOl.) can preview many documents and images without having to open them in their native applications To preview an image, simply select the file and dick on the Preview the Selected File icon (it looks like a page) located in the upper-left comer of the dialog. Or you can simply double-click on the item to activate its preview. If Acrobat can display a preview of the file, a large preview will appear. You can control the seal e and orientation of the preview using the appropriate icons located <It the top of the preview. Click the Open button to open the image in its native application

[MANAyE YOUR pORTFOLIO ITEMS]

Any document or image in your PDF portfolio can be deleted, exported, edited, or converted to PDF. The eesi est way to access these options is to simply Control-click (PC: Right-dick) on any portfolio imaqe or document (make sure you're not in Preview mode). From the pop-up menu that appears, choose the appropriate action. If you need to reduce the file. size of any item in the portfolio, convert it to PDF. Good news note: lf you open and edit an irnaqe or docurnsntin its native application, this editing wlli not affect the oriqinal file, only the file contained in the portfolio.

[ADO A WELCOME pAyE]

Click on the Add WelGOme& Header tab located in the Edit PDF Portfolio panel, then click on the Welcome Pag'e tab. Choose whether you want Text Only, Image Only, Image & Text, or Flash Movie (we selected Imag,e & Text). Click on the Add an Image and Add Text areas that appear to import images and type text, then woe the formatting tools that appear beneath content. When you place an image, you: can control its scale, opacity, and background color, Dick the Done button to complete the process.

comin ued on p. 74

[ADD A HEADER]

Click on the Header icon below the Welcome Page icon. Choose from the various text, logo, and image options (we chose Logo & Structured Text). Click on the active image and text areas and use the format tools that appear for each header element. View the results of your Welcome Page and Header additions by clicking on the Open the Welcome Page icon located at the top of the dialog. Note: All yeur portfolio contents including your welcome pag.;! and headers <ire searchable th rough the Search field located in the upper-right corner.

[ASSlc;jN A COLOR SCHEME]

To control the colors used in your portfolio, cI ick on the Select a Coler Scheme tab located in the Edit PDF Portfolio panel. First, dick on the various built-in, well-matched complementary Color Schemes to find a set of colors that works well with your portfolio. If you want to try your hand at assigning colors, click on the Customize Color Scheme area. Color swatches will appear for the backgreund, text, and card colors. To adjust a specific color, simply click en one of the color swatches to' activate a color picker,

[pUBLI5HINCj YOUR pOF PORTFOLIO]

You have several output options for your PDF portfolio including saving, printing (whatever portions you like), ernailinq, placinq your portfolio en your own website, or using Acrobat.com_ You can access these various eutput functions either threugh the Save, Print, and Share icons located at the top of you portfoliO dialog, or by clicking on the Publish tab located in the Edit PDF Portfolio panel, Tip: Prior to emailing/uploading you r portfolio, perform a Save As and check its file size by choosinq File>Pertfelie Properties and clicking the Description tab to make sure it's an appropriate size. Large portfolios can be shared via Acrobat.corn, 11

E " u

ru

:;

N

'" ~

'" E

'"

L

"'

,_

m

--'

i [ Tal T,ally is the author of Acrobat and PDF Solutions from Wiley Press, as well.85 nwnerous other Cl~gHaJ im.agJl19 books Of] Photoshop, scanning. dIgitaJ photography, :and prepress"]

,. Visit Toz'; web,ile, www,"wn.llypholograpiJycom aed WWw_(."~mill'fS,oom,

74

WO R L D

C LAS 5

FOR PHOTOGRAPH,ERS & CREATIVES

heBes Te che -Online

Have you ever wanted unlimited access to the greatest photography and creetlve minds on the planet? You know, one convenient place where you can learn from the very best photographers and creative gurus in the world. We know ... stupid question.

Welcome t.o K.elbyTraining.coml

$1922 ~R $199

QM.)UU. I 1 W8;11'*.

NAPP Members 117.99 a month or '179 ~ year.

Learning digita photograpny, Adobe PI 0 os op and the

entirt. Ch!. ive Suit has neve 0 orda Ie.

Visi.t www.kelbytrai.ning.comorcan 800.201.7323.

0\ a. Kelby:MediaGroup company \:::y ( (00; btchl.dCffllI,1'l

Creanve Suite 4:

Suite Integratio,n Inmhowmlab ........ cllhI!

III1l'OOM1y gila fluid k1 1'hoI~ .Iumml and k1Mp (S4.

I'LInnillj .1Id arg.nUl"'l A<Illllllilte<l feilore; ~~li!!JOnind Mode Iert ornl GRphiI $Iyle

PII("g~r'lIhln Clm(l" Raw i1n~ Smvl Cbjf(1)

e:

" '-'

"'

::

N

'" "" '" e:

en L

"' >-

'" --'

76

edit an AJAX drop-down menu

Adobe Dreamweaver CS3 and CS4 include the Spry framework, a set of widgets you can use to create drop-down menus and other advanced features. The Spry menus make adding a drop-down menu in Dreamweaver easy, but editing the styles that control the color, size, and other attributes of a menu can get complicated. This tutorial shows you how to customize a drop-down menu

U6EKT

a SIltY O~l~ Set [J Spry Region LZ! Sj;ry R~at ~ Spry R"peat LiSt

I!O Spry Validation Text Acid g Spry ~alidation r '""~"" •• E3 Spry ~alldoI:.m thedibox !jI SlJoY Valldatfon Select

E6 Spry Validation Password SPrY VaII~n (Qnfnn Spry Y'aliMtlon R~", Gr<q>

Spty Accordion

Spry Couapsible Panel Spry TocI..,

To insert a Spry menu, first chose Spry from the drop-down list at the top of the Insert panel (or in the Classic workspace layout, open the Spry Insert bar at the top of the workspace by clicking on the Spry tab), Place your cursor where you want to create the menu in your web page and then click on the Spry 'Menu Bar icon,

As you insert a Spry Menu Bar, you have the option to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar, or a vertical menu bar with submenu options that open to the right of the main menu rtems. You must make this choice during the setup process by clicking on the corresponding button and then clicking OK to insert the menu. Once the menu baris inserted, you can't change its orientation,

"',~1IdNo ",,_;11

1at.1~",g

~."""~ ,~

.. , ............. ~ I

o_l,_~_"o_lul

""I __ oI(j,~

",_oI<l

... r ".....", ~~~~li~ 1'rI.!IJIQln

~"~

~dl\

~

77

".,1.

'" " " lJ)

Open the CSS Styles panel (Window>CSS Styles). Click the All button at the top of the panel and twirl open SpryMenuBarHorizontal .css, Click-and-drag the top of the Properties pane in the CSS panel, (shown here) until you call see the list of your styles and their defined rules, A good way to start is to click 011 each of the style names ill the All Rules list and review their settings in the Properties pane Look for color, font" and size settings, which you'll !Iikely want to change. In the next few steps, we'll cover several ofthese styles specifically.

, -

,_ -..

~ .~n!

Il!!::.t'"'*;jn ~I

IIIIiIItiJ ...-M

~

",,""I ] ..

l.ike most options for a horizontal menu, the alignment is controlled by a CSS style. By default, the horizonta I menu aligns to the left of the page, but you call align it to the riqht by chanqinq the definition of the style named, "uL MenuBa rHorizontal li." Click 011 the name of the style ill the C5S Styles panel and then in the 'Properties pane, click just to the right 01 the Float field to use the drop-down hst, and select Ri9'ht instea.d of Left I!I you prefer, you can double-dick the style name to open the CS5 'Rule Deflnitioll dialog.

The trick to changing the colors of the drop-down menu items is that in C55, these colors are assigned to the link styles, which have multiple states, To chanqs the badkground and text colors of links as they display when a page first loads, you'll need to edit the style named, "ul .MenuBarHorizontal a," To change the colors that appear when you roll a cursor over alink, edit tihe background and text colors in the style, "ul. Menu-B'arHorlWlltal a.Menu8arltemHover, ul. Menu8arHorizoiltai a.Menu ... " (Note: If you created a, vertical menu, these st~lie names wHI include "Vertical" instead of "Horizontal. ")

EO

" u

ru c;

N III

'" m

EO

in L

"' >-

rn -'

78

Many changes to these styles are only visible when you view the page in a Web browser or in me new Live View option (available in Dreamweaver C54). If you dick on the Live View button at the top of the workspace, you can preview the pcge and test interactive effects, such as rollovers, without leaving Dreamweaver. This is a handy way to check things, such as whether the rollover color is set the way you want it. Don't be afraid to experiment: you can always change the style definitions back if you don't like the way something looks,

By default, a Spry drop-down menu will display in the font specified in the body style-or in the closest parent style-for the page, You can alter you r drop-down menus so that the font is different than other text on the page by adding a font style to the style named, "ul.Menubarl-lorizontal." Double-click on the name of the font to open it in the C55 Rule Definition dialog (shown here) and then enter a font face or choose a fon t collection from the Font-family drop-down menu,

rdlIF~ ,,~~.

- Mil!n..flWA..-tM............ _,

"'~~10.1

~~tl~ "'J~~LtIl ",.~~_.i.J d~d~ ",,~~Lt ",.~!II,.

.... ~.~j .... .MIni( I.fr~.~iIit~

:t===~~~

~iIII_~m.6II\5u1

1jj.~~IlII~~~ Ii-~tr.n. ~~~-;

,_. -
, ... ...
r ... _ .-
IP-J.Y"""hlil' -
f.-..;!!i .,
~ ... "
I--~
''''_ " ""
II You can chanqe width settings in the style named "ul.Menufsa+lorizontalli." By default, the width is set to 8 em. For those not familiar with the em option, it specifies sizes based on the size of the letter M in the font face used in the style, Th is flexible opt jon is a great way to set the width of these link boxes to best fit their contents, If you have longer names and they wrap, you can increase this size, for example to 10 em, to get all of the text on one line. A little goes along way with em sizes.

-~ ... LII,l'!IiIIv.i!iI!t~L.~ u.~.6mH

•. ~~III I~~.UI "1~LRd.aI\III!!i~~ !J,~...,.ItI!iI(ald.'

,~iAllhI'III"" d,~Irin-'uI,l!I~ !J~~ald iIaI,~r,mrgIl

,~~~,I1~ UI,~.wtq~,,~ UI,I'IIi!!t!~IDWt.j!(l~ltI!!IIGJ ~.~~iIJ.!I,~JII~'I~ ",~tq~4'~ (j,~IMrUI"'&~1::I!IIT 'III,~Il&I!Urfr., ... u.~'fCi'tcm:alL~bIftt._

If you want the drop-down items to display in the same width as the main menu items, you'll have to adjust the Width setting for the drop-down list in two other styles. Again, a little goes a long way when adjusting em sizes, and you'll notice <I slight difference with these two. II you chanqe the main link width Irom 8 em to 10 em, you should change the 8.2-em Width setting' to 10.2 in the styles named "uLMenuBarHorizontal ul" and "ul.Menufsarl+orizontal ulli."

contiflued on p. 80

~fCr ~awt, iJ,e~.J:'1H\I'1-(\o.~ e:verj{,W"'S'" t;...t p~~J...o~t" e)..Vz.,...opl.~-u.~to""",

1o\OI'''''''RO:@-

.. t,tvJliII\W'$O-~'i{..p"f;S-><,""""'~sI~pr~ ~.

,.f;f-tll'S \o.t.tvJl\O\>'lI~tprt~"I!V".8".~~ lJ'.'

>"'" .t"'J_""W<-"\'~- c:

"'n~ .... tWJ,............·~fCS~"""""e~~ef;_Vi~

~ ... ~V. t,I.<<;. P'<' .. ~ \1-(OOOt. ~\o.O\I'.~' ~a.<e. {,WI W!\",-Ja

'","" I""'· - '.)

~ ~'

MfK

5/5

-If,lf~Al\Y j:'MPOV'T'<1trr'·

T'Ae.¥"e.'S '<1 ",e.W t==-('e.e.~y ve.f'SiO"" Ou.t, 6.0" vrrt,.1.\

~ ",eVl Ac;tjio", t"'~ aO""Ve.~s. Yl~s.'" Viek8Of...o i?W>""e-view~ble. ~le.sl. t't:s 30t S.OMe eketectOll\. ~s. we.n - sell\.s.e.s v,A..e.II\.. s.o""8O",,e.OIl\. ~\II, ['PI...o""e tnes.loo~~ ~ {,I.o.e. PL.-V .~.\I\J. '.1U.toM~3ia~\~Y s.Wi-ta"'es to ~",ot) .... e.r ~le., 0>('

eve.", ~ to{,~\ly J.i~~erelo\t t'~8e. (cool I). ,If.j;

When a menu bar is inserted, Dreamweaver includes placeholder text for several menu items arid submenu items, such as Item 1, ltem 2, etc. To edit menu and submenu items, dick the blue Spry Menu Bar tab (at the top-left of the menu in the workspace) to select 'it and then use the settings in the Property inspector. Simply dick on the menu . item or submenu item that you want to change and then select the text in the Text field on th e ri 9 ht and th en typ e ove r it to rIO pi a Col it.

To add menu or submenu items dick the plus (+) sign at the top of the corresponding menu field, or dick the minus H sign to delete an item, For example, you can add a third-level; menu item by selecting a submenu item and then clicking the plus sign above the third menu field. B'e su re to change or add text in the Text field in the far right of the Froperty inspector .

i

To fully test a drcp-down menu, you'll need to preview your page in a Web browser, such as Safari, Internet Explorer (IE), or Firefox. Idea Ily, yo u sh ou ld test U si n g a II th fee of these browse rs (a nd oth e rs) to ensure that the menu works well for all your visitors. Drop-down menus can be especially tricky when it comes to displaying in different Web browsers. If you're havil1g trouble with IE and you're viewing the menu on your 'local computer, make sure you click to Allow Blocked Content at the top of the browser window.

EO

" u

ru c;

N III

'" m

EO

en L

'" >-

ru -'

i [ == ~Brnef ~a~ authored mo~e ~th . .ar'i' a. doze,n boob_ abowf the InMrnet, j-~Cludi~g 'D~~amweClv~~ CS4 fot Dljm~l~eS, She's ~/50 the ~ost or rncre than 50 hours of web]

;5; desIgn Video t'rarrlrr'i9 For' Total Tr'a'nmg. A popular speaker, ..she has been w:ork'r.!g Orl'trie smce- 1995. ToO ream m01e1 VISit www.JCWamet.com.

To tum any menu item into a link, select the item in the Property inspector and enter the URLin ~he link field. You can also use the browse button (hint it looks like a yellow file folder) to locate and select any file in a website and set the link automatically, If you're setting a link to a to p-I.eve I menu item, you can also select the text in the main workspace and set the link in the Property inspector, or use the Hyperlink icon in the Common Insert menu.

E

" '-'

"'

::

N

'" "" '" E

en L

"' >-

'" --'

BZ

BE ~ S UIHERlANO

new timeline animation in Flash (54

If you're already familiar with how to animate things in both Adobe After Effects and Adobe Flash, you'll know just how primitive the old method of animating things in Flash used to be. Luckily, thinqs have changed in a huge way with the release of Flash C54. Much like After Effects, Flash now has auto-keyframing, a full-featured motion editor, and-most importantly-the ability to animate each property of an object separately from one another.

[OpEN A NEW FLA FILE]

, .or download the fLA from the Layers magazine website and open it. The download is an ActiorrScript 3,0 Flash document that's set to publish to Flash Player 10. If you want to be able to take advantage of some of the cool new featu res such as 3D, you'll need to obtain this new version of the Flash Player. But the new Timeline and animation features can be used no matter what player you're publishinq to, This HA file has a single movie dip of the Flash icon that we'll use for our animation on the Stage.

CI ••• ,, ---' /

.. ~ Sornn;. p~opnnil

fPS", J lll!

~I.. S~Q 400 PK ~ ... g··D

[I[ you1d like to download the files used it'! this tutorial to practice these techniques. visit www.layersmeqazine.ccrn and navigate to the Mag.a.z.ine section. An files ar'€! for personal use only.]

[SIMpLE pOSITION ANIMATION]

- - -

Let's start out with the easiest possible animation where you simply animate the X and Y position of an object. With the new Tirneline there's no need to manually create or delete keyframes. Simply Control-click (PC: Ri'ght-ciick) the movie dip on the Stage and choose Create Motion Tween_ This creates a motion tween on the Tirneline and puts down one second's worth of frarnes. Si nee our movie is set to 30 ips, you should now see 30 frames on the Timeline. Now sirnply move the subject (in this case the butterfly) to a new position to create the animation, Hit the Return (PC: Enter) key to preview the animation.

Ie

[MOTION pATHS]

In Flash C54 there's no need to use motion guide layers like in previous versions of Flash, as a motion path is automatically created for every animation. In the previous step. you should've seen the green motion path after you created your animation. You can easily dickand"drag on that path to modify the route tha t the movie dip takes 'to get to a new position _ With the clip not selected, cliek-and-draq on the qreen path to create a curved motion path and h it Return (PC: Enter) to preview the animation,

[ADD SOME COMpLEXITY]

Now that you have a nice curving animation, let's add another keyframe in the middle to make the curve a little more interesting .. Move the Current-Time Indicator (CT1) in the Timeline to frame 15 and: then move the clip to a different position. Notice how the motion path adjusts nicely to make the animation as smooth as possible. Move the cI ip to new locations and take note of how the motion path is redrawn. To finish. make a motion path similar to the one shown in the scresnshot above.

[AD i USTINc;j ANIMATIO N LENgTH]

This is an area that was very frustrati n 9 in previou s versions of Flash _ lillagine you. have an animation with SO perfectly laid out keyfrarnes. Then you're asked to slow down the animation a little without affecting the rest of the movie. There goes your lunch hour, With Flash C54 .all you have to do is grab the end of a motion tween in the Tirneline and adjust its length; all of the keyfrarnes inside of it will be adjusted for you. 50 place the mouse over the end of the motion. tween in the Timeline until yOel see the scrub icon. Now dick-and-drag to adjust it so that it takes 50 frames to finish.

83

'" " " Ul

" .n

" '" a ,",

e;: " u

ru

::

N III

'" "'

EO

en L

'" >-

m -'

84

,

[TRANSFIJRMINg AN ANIMATIIJN]

What if you want to resize or move an animation without affecting the moyie dip? Good luck to you if you're using an earlier version of Flash, With Flash (54, you can use the Free Transform tool to easily modify an animation's size or position. Hit the Q key to get the Free Transform tool and then dick on the motion path of your animation, not on the dip itself. From there try scalinq the animation up and down as well as moving the entire animation to a new position. When you're finished, press Return (pC: Enter) and observe the animation, Very cool stuff

(THE THIRD OIMENSIIJN]

One of the most exciting new fea,tu res of Flash C54 is the bu ilt-in support for manipulating objects in 3D space. This support takes the form of two new tools: the 3D Rotation tool 0NJ and the 3D Translation tool (G). Hit the W key to activate the 3D Rotalion tool. Now dick on the movie dip on the Stage and you '1',1 see the rotation handles that allow you to rotate the object on the X, Y, or Z axes. Move your mouse over the green handle and drag it clockwise to rotate the dip on the Yaxis.

• •

[EXpLORINg THE MOTION EIJHOR]

The real power of animation in Hash (54 comes when you use the new Mobion Editor panel, Choose Mobion Editor under the Window menu to launch the editor, Now select your movie clip on the Stage to see the properties for your animation. You may need to expand the pa nel so you can see it better. At the bottom of the panel you can adjust the viewable frames 50 that your whole animation is shown. You should be able to see the keyframes that were created for the X, Y, and Rot~tlon Y properties.

~:

-

[ADjUSTINg ANIMATIONS iN THE MOnON EDITOR]

Once you've done your rough animation on the Tirneline, you can easily fine-tu ne it using the Motion Editor. You can even do all of your animation inside of the editor and bypass the Tirneline altogether if you wish. With your animation selected, place the CTI at frame 25. Click in the Rotation Y section to maximize this property so you have more room to work Now scrub the value slider shown in the screenshot toa new value. Notice how a new keyframe was automatically created for you at frame 25.

~II

[ADD SOME EASIN(j]

For more life-like animation you'll want to apply some easing effects to the animation. Flash C54 comes stocked with a bunch of easing effects to choose from. Scroll to the Eases section at the bottom of the Motion Editor panel arid dick on the plus sign. From ilere you can select one of the available easing types Choose Stop and Start (Fastest) for this example. Now scroll to the top of the panel. and ill the Basic Motion section, select your new ease type from the Ease pull-down menu and test your movie to preview it, What's really powerful is that you can apply different easing effects to each property creating really complex animations.

i

[CUSTOM EASIN(j]

While the eases that come with Flash CS4 are nice, you may decide that you want to create your own effect instead. Expand the Eases section of the Motion Editor and dick tile plus sign again. Choose Custom as the ease type and Flash will then create a blank easing curve for you to tweak. Click the Custom ease section to expand it and then dick on the left-most point of the curve to expose the Bezier handles. From here you can tweak the curves to create any effect you want. App.ly it to your animation the same way you did in the last step.

- n'~~liu\tl'.' _

/. 1~'1'. ~~fl " ~ or In ",.1' '!)(IItt ~m ;' 'tr 1" (.II", I .. ~I

~ ~II, 1111. fl~M rW-ln lili lId FI ...... llllfOfKluI

[ACCESS MOTION PRESETS)

let's say you just created a n incredibly complex animation u si ng tile Motion Editor. It would be' nice if YOll could save that work so you can apply it to other objects later on. The Motion Presets panel allows you to do just that. Open the Motion Presets panel by selecting Motion Presets from the Window menu. In the panel you'll see 13 bunch of presets provided by Adobe to help get you started.

J "

IiIt~!IIrv.,I''' ",,3iD-T\I!i'f!fr.

Oun:tn F;Qo Jr:a.~b, f...-~ ,,"iradlDR

lfi1~"11 , • .,) R:c1ft0li0't'~1 "fi"

11I'I~~rl rill".

[SAVE YOUR OWN MOTION pRESETS]

To S13ve your own preset" Control-dick (PC: Right-click) on the motion tween up in tile Tirneline and choose Save as Motion Preset, You'll be asked to provide a name for the preset, so name it, and then dick OK, That's all there is to it .• ,.

[lee Brimelow 15 fJ Platform EvangeIiM with Ado~e and anaward-wlnniflg interactive designer. LeE" runs the. free- tutorial sire at wI/L'W,gotoandleiJ!m.com and a ~Iasj,~re!ated bIog at] www.,nefi •• hblog,com, H. is "isorhe ""tilor 01 sever.i lilies lor Lylld",com d •• ling Wil" FI.,I, .nd Afler .!fecl,.

85

I'

'" " " "'

» ..n

" '" :z im

_____ ---------------------------1 vi d e 0 9 rap h y ]

E " w

w z:

all the components of the var-ious disci pli nes under 0 ne roo f. ]

photography, videography, and cinematography converge

[ ... it was bound to happen that someone would eventually bring

86

The release of the Nikon D90 and the Canon EOS 5D Mark II saw the introduction of video capture to digital SLRs., This convergence of media acquisition has a lot of people wondering what the future will hold for these kinds of hybrid photo/video devices, A glimpse into a possible future direction for this new category of devices has been announced by RED Digital Cinema, RED is the brainchild of Oakley Sunqlasses founder Jim Jannard, and until this announcement, was primarily considered to be a technology Gompany that was focused on revolutionizinq the video and onemaindustries with its RED ONE video camera. The RED ONE camera was unique because it could shoot video at a resolution of 4,000 pixels {much higher than HD) in a very compact and modular unit. Now it looks like the company has their eye on the digital photography market with their DSMC system (Digital Still and Motion Cameras) that they're lookinq to begin releasinq in Springl Summer of 2009.

If I only had a brain

The whole DSMC system revolves around two new camera systems named Scarlet and Epic Combined, these two systems have a choice of usirtg one of eight d:ifferent sensors as the "brain" of each device. Conventional wisdom suggests the larger the sensor, the less noise and shallower depth of field you're 'likely to have. The 2/3" sensor j,s capable of a pretty average 4,9 rneqapixels 'The 535 sensor can do 13.8 meqapixels, The FF35 can do 24 meqapixels, The Epic 645 .se n so r ca n ca pture 65 meg a pixels. And th e Epic 617 sen sor tops out at 261 rneqapixels=-and no, that's not a typo!

While going through all of the tech specs, I found that the various sensors had a dynamic range of up to 13 or more stops. That's huge and I think redefines the term high dynamic range (or H DR for short), Right now we can only accomplish HDR by cornbininq multiple exposures, or on the film side, by scanning color negative film (a process

I don't fully understand), These sensors basically capture all of that information right inside the camera from the moment you take

a picture or recorda piece of footage. In practical terms, it means you'll never have blown-out highlights again!

Piece by piece

As impressive as the sensors ma.y be, it's tile modularity of the two systems that has most people excited You start with one Clf the sensors as your centrel module and then build the rest of

--

.-

,(J

..

REDhandle

Sensor

Lens mount

DSMC 110 module

Monitoring

Battery

Rewrding module

REDmote

you r camera around It, from the handle to the view screen to the lens mount. and everythinqln between. The cameras are said to be able to take any Nikon and Canon lenses, as weH as a specia I lin e of RED camera. lenses, and Ma rniya, Linhot, and ALPA cinema mounts on the high end. This means that your existing investment in lenses is reusable with this system, and 'if you ever want to trade up to. a larger sensor, all YOI..I have to do is swa p out the central "brain" module while keeping all your other accessories and modules intact. Howe\ler, none of this will come cheap, with base conligurations starting around $3,000 and easily going over $100,000 for the larqest sensor with appropriate rnodu les. (yOLI can see a ful:1 set of ima.ges and tech specs by going to; www.red.corn/epic.scarlet.)

The Adobe workflow

Adobe has announced a lonq-terrn partnership with RED Digital Cinema and has released a n importer pi uq-ln (currently in beta) bringing native support for RED R3D files to Adobe Premiere Pro

(S4, Adobe Encore (S4, and Adobe After Effects CS4 _ This allows 4K resoluti on native R3D video flies to be dropped straight onto the timeline without transcodiriq or rewrapping. I would expect (although I don't have. any specific knowledge) that by the time C55 comes out, all of the other programs (such as Photoshop, Flash, and maybe eve.n Lightroom) will have direct access to the. Redcode RAW format that RED uses to capture all of its images lor both stiils and video. That would certainly make the format easier to work with,

Wi1:h photography, videoqraphy. and cinematography being siblings 01 the same art forrnit was bound to happen that someone would eventually bring all the components of the various disciplines under one roof, While we'ee not quite there yet, I'm betting that 10 years from now these types of devices will be common iri, the hands of artists allover the world. Here's to an exciting and ever-changing future!'

With the modular RED DSMC system, you can go from a digit~1 S!.R to or high-end cinei"rJ.a camera

[ R~ H~ rfan is ~ . video Indusu,,: l/~lQrafl'. qtl~ {Dun cer or th G' Digital ~jd~ Profr2.SSJ'Ofl(lls. 'r= ra tiOfl. Thro_ugh. his c'Om~afl y Dr;~G'DV Jnc_~ R~d works on spedBI projects for ~OfttJ~t.:J sco ] dlents such as AdDbe iind onvate il1stltr..rrJons such as the NAF'F: hiLS papular mdu5(fy blog j5 packed WJth trpSI rutonals1 :and Industry msrgJ,t >3nd can be found at DVconfrdent'l.atcolTl.

87

r'" -c

m

'" In

l> ..,

l> ...

" m

-.. m ..

'" " a

..

BE~ SUT~ERlANV

E

" u

.;

<:

... '" o-

'"

E

on L .. ,..

m -'

flower power

Combining vector art and shapes inside After Effects can yield some great and unexpected results. In this tutorial, we'll show you how to set up the popular "popping" animation effect with very little effort. Then we'll add the new C54 Wiggle Transform operator combined with the Repeater to explore some fun and random animations.

eo

[pREpARE LAYERED ARTWORK]

I always prepare my graphics in Illustrator, because of its vector qualities. This workflow allows me to keep all the layers (as with Photos hop) and yields a much dearer and crisper result even when scaled up within After Effects. One important note: Make sure to set the layer structure correctly and always name your layers in a logical manner. Working in an orqanized way will make the animation process faster, making life much easier if you need to go back and change things later on.

[IMpORT FOOTACjE; CREATE BACKgROUND]

Import your artwork into After Effects: File> lrnport=File. Be sure

to set Import Kind to Composition and Footage Dimensions to Layer Size. The spec for this project (Composition>Composition Settings) is a square-pixel camp of 720x534 pixels (from the Preset drop-down menu, choose 'NTSC D1 Square Pixel-these are the new CS4 corrected PAR dimensions for NTSC and should come up automatically if you set it in lllustratorl, 29.97 fps, and 5 seconds in length. Doubleclick the imported camp (ours is "Flower Power") to open it, ensure nothing is selected, and then double-click the Rectangle tool (Q) to create you r first sh a pe backg rou nd .

sa

{if you'd like to download a finished movie for this tutorial. vistt www.tayersrnagazine.comandnavigatetotheMagazinesection.A1·J files are for personal use only,]

[OESlI;iN BACKyROUNO]

Select Shape layer 1 and in the Ioolbar, set the Stroke to 0 px, dick the word Fill, choose a Radial Gradient, then dick OK. Next we'll define two suitable colors that will blend well with the design. Click on the Gradient FHI icon in the Toolbar and click on each color stop to set the colors to fit your design (we used dark purple and Warm orange). Press OK to confirm, then return to the Selection tool M, and drag the tiny right circle on the screen until you've reached the edge of the cornp, which wiH define a nice even gradient from the middle 10 the edge of the screen.

• 1J - I ",.uti ..

•• l~ , lJl'~1 • /

" ... , ... ~./ -

. I

I ~ '" h~J'. I .~. ~ I /

, rI ......

[REORDER LAYERS; CLICK SOLO]

- -- - - - -

With the shapslayer selected in the Timel ine, press Retum (pC:

Enter), [€name 'it "Backgr-ound," and then use the keyboard shortcut Shift-Cornmand-] (PC: Ctrl-l) to send it beneath all the layers.

Next, we want to set an interesting popping animation that reveals all the layers sequentially We only need to set it lor one layer and th en use the sam e settings for the oth erlayers. with m in or ad] ustments as needed. Let's start by selecti ng any on e of the artwork layers and press 5 to show the Scale properties. At this point, I'd also suggest clicking the Solo switch 10 visually isolate this layer,

[CREATE MAnJ "pOp" ANIMATION]

Go to 10 frames along the Timeline and click the Stopwatch next to Scale to seta keyframe with the current value of 1 00%. Retum to the first frame (0) and ch ang e the Sea Ie to 0%. N ext, we wa nt to cha nge th e velocity and the ease so the animation will glOW a bit beyond full size before ending at 100%, and we can use the Graph Editor very nicely for this. Click the Graph Editor icon in the Timeline, select the last keyframe, click the Ea,sy Esse In icon to convert the keyframe, then adjust the curve handle upward to extend the scale above 100%, before it drops back in.

•

•

Click the Graph Editor icon to retu rn to th e regu I ar Timel i n e view, then Shift-select both keyfrarnes for the Scale property. Copy them to memory (Command-C [PC: Ctrl-Cl). Now, select the rest of the layers in the cornp (excluding the Background and the layer you're copying from). and Paste (Command-V [PC: Ctrl-V)) to apply the same animation to all of them. "UnSolo" the layer YOI.l worked on originally, then pres> 0 on the keypad for a RAM preview, and confirm thatall layers now have the same" pop" scale animation.

89

" '" " N

z '"

." m

"

.'"

" " .",

90

DISTRIBUTE

Our basic animation is now in place, but the timing is the same on all Iayers. Let's fix that with a few short steps, First, select the bottommost artwork layer (not the shape background), then hold down Shift and select the topmost artwork layer. This is very important, as it will set the order of the layer sequencinq. 'Now go to 10 frames on the Tirnalina, press Option-] (PC Alt~]) to trim all the layers to 10 frames, then Control-dick (pC RighHlickJ on any selected layer and choose Keyframe Assistantz-Sequence Layers

- ~ ... ,.. - .

. . -- - - - - - - - - - - - -

In the Sequence Layers dialoq, check the Overlap box on, set the Duration to S frames, and Transition to Off, then dick OK-this now offsets th e layers by S frames in time sequentia Ily_ Now, wh i I e the layers are sti II selected, go to the end of the Timeline and press Option"] (PC:AIH) to extend their visibility till the eno. Create a PAM Prevlewto see the new resul~n'icel

That was easy, wasn't it? But we're not done yet-you'll want to work on each element individually and set the correct Anchor point, so the growing effect will take place from the correct part of the layer.

[AOj"UST ANCHOR pOINTS]

-- - - - - - - -

The easiest way to do this is to use the Pan Behind tool M- Deselect all the layers (F2), select your first layer, and then drag the center Anchor Point to the desired point from which the animation needs to occur. In this step, we selected and adjusted the Leaves layers anchor point, 50 the animation now occurs from its bottom-left corner. Repeat this process for each of you r artwork layers, and you'll really notice the difference!

To enhance the motion, I've added a Rotation spin on top of the scale to the Lines layer, and for my Rainbow layer, I've used the Radial' Wipe effect to reveal it. You might want to add some changes to the timing to add more variations to your desiqn.

Next, we'll spice up our scene by adding a few elements from inside After Effects, starting with a simple shape layer in order to take advantaqe of the brand-new Wiggle Transform operation in C54.

Deselect all, choose the Ellipse tool (nested under the Rectangl!e tool (01), and create a small circle in the center of the screen. Move this layer to begin at 1 second along the Tirnsline. Solo this element, and let's modify it. Twirl down the EIJipse 1 property in the Timeline and shut the Eye for the Gradient Fill Twirl down Stroke 1 Use the Eyedropper next to Color and sample one of the colors (bright green in our example), and set the Stroke Width to 5 px Name this layer "Bubbles" and let's have some fun with it ..

Select the Bubbles layer and in the Timeline choose Add>Repeater. Twirl open Repeater 1 and change the Copies to 20. Then twirl open Transform: Repeater 1; set the Position to 50, 0: and set the Scale to 80%. Now for the fun part-from the same Add menu, choose the new Wiggle Transform operator, Before we adlust it, drag Wiggle Transform '1 to below Repeater 1 so it will wiggle all the repeater's copiesindividuellyl Now twirl it open, set the Wiggles/Second to 0..5 and the Correlation to 20%. Twirl down Transform, and change the values until. you're satisfied.

I n my com p, I've set th e [1 umbers pretty high so the circles are Hying allover the place, giving the illusion of fast, popping bubbles. Pay attention to the fact that you must change the default values il you want the Wiggle Transform to work well, Feel lree to change the position of the Bubbles layer until' it looks the best overall, and change its layer order as desired to inteqrate til 10 bubbles better into the design. Finally, set a globa I Scale a nirnation to reveal the whole layer (copy-and-pasts the Scale keyfrarnes as we did in Step 6).

Let's add a sma II a i rp lane to cj rde Ih ea rt. Sel ect th e Text tool. ch oose the Wingdings font in the Character panel, move to 1 sec-ond along: the Timeline, click in the camp, and press Shift-Q (pC Shift-J) for the a i rp I ane symbol. Select the Text layer and create a ci rcle mask a round the art with the Ellipse tool. In the text layer, twirl; open Text and then Path Options and set the Path to Mask 1 to align the airplane to the circle path. Set Reverse Path to On and set keyframe, for the First Margin value at the start and end of this layer, adjusting them until YOl!'re happy with the position and speed of the animation. Enjoy! •• ~

[ S~e-~ Harmes JS the creaTive dt'ec~or a~ :Energi" DesigJ1 In Sausali~Or C.fJllfom"ia. Cfetlf1rT9 aW.;lrd-wll1ning monon gr(lphic:s (lno VV:e.b de:!ii9." for dienrs 1Il"Orfdwrde. He .fJIsc speaks ar ] vanocs desJgn conferences on the subjects of After f'f{ectsl monon graphK51 and typogr.aphy He can be reeched at stel{e@d~ckeJ"Jergl.com.

91

" .n

"

~

2.

'"

4i m

"

'" " " 'CD

E

" '-'

"'

::

N

'" "" '"

E

en L

"' >-

III --'

92

B[~ S UIHlERlANO

powering search with audiometadata

Across the Production Premium toolset, Adobe has provided increased support for metadata ... [pause for audience applause]. What? You didn't clap? Well metadata is pretty dang important-it can speed up your editing, improve collaboration, or even make your videos more accessible on the Web. Sure, it's not as enticing as yet another tutorial on making things glow, but give it a shot

[LOAD YOUR MEDIA IN pREMIERE pRO]

PrOJect: T"H1.~npuo"

EJ lav.,._Abolll_1J5.wav A.ud,,,,

0002 41 101137

.]4100.11 - I ~·bll • ~Iono

You'.11 need some audio to transcribe. Fortunately, this works well with both audio-oniy formats and video formats with audio attached. Here are a few quidelines to improve the accuracy of the transcriptions:

• Try to avoid heavily compressed or lossy file formats like MP3 audio .

• You can normalize the volume in a clip in Soundbooth using the Equalize Volume Levels tool (Processes>Equalize Volume Levels) ·If there's a lot of background noise, try to dean that up. Sound-

booth also offers noiss-redu ction tools if needed.

If you need an audio me, you can use the LayerS_About_Us.wav from www.layersmagazinecom/ma.gazi.ne-downloads or visit the Internet Archive at www.archive.org,

T'~n;Cflpuon.prpIOJ

1 ITem,

•

N:'m~ I~ I fr.lm"Rm
..m S.QY~fltt 0\ • ~9:]7 ff"
• U! r oO'~9" tor Tf~nu"pllo~ •
'4 L;ry.'~.A DOU<_U._ W~V • 4I4100hr [I[ you'd like to download the sesets used in this tutorial to practice these techniques, vi.si,t wl,I\n/Il.1.a,yersmagazin€.com and f1avig,Me to the M';:Ig.a,zine section. All files .a!"€! Icr personel use only_I

[OpEN THE METADATA pANEL]

The Metadata panelis your starting point for speech transcription. To open the panel. choose Window;>Metadata. Ihhe Metadata panel is hidden behind another panel. dick its tab to bring it forward.

Using the Speech Sea reh function takes a wh i Ie to set up. but when finished, all rnetadata for dips wi,l1 be searchable from the M eted ata pail e I. F ortu n ately. th e process ca n ru n i n th e ba ck grou n d. which means you can still edit or perform other tasks. Tile Metadata panel allows you to search by any Word or phrase within the cl ip

n_,,* r -~-,,,--

I~mu.'" i';;';"~lm.

1,111,,1 ' 'I'.

\ .. ,.,. ~

Ie

[SELECT A CLIp FOR TRANSCRIPTION]

93

You need to specify which dip you want to transcribe. In Premiere, you can only select one clip at a time. Select the desired dip in the Projecf panel. Then in the Metadata panel. dick on the Transcribe button. A new dialog opens and asks for more information about the clip.

"' " " lJ)

HI Sp~nl~h ~ l.A"~ AmUIQ

~"Ch ~ Canl.<liI

ff~nc:h FUIIU

.,.11111- II Iy

I(OfNfI ~ Of.

I'D,"U~ • ,@an

[SpECIFY A LAI~~AUc;jE]

In order to improve the accuracy of the transcription. Premiere needs additional, information from yOll. Production Premium applications can currently access 12 different language libraries, but this list is expected to grow. Click on the Language drop-down menu 'in the Speech Transcription Options dialog' and choose your lanquaqe, Be su re to pick the one til at most closely matches yo u r speaker. Note that there are unique choices for Spanish, French, and English, depending on region.

Speech Transcription Options

[SpECIFY THE QUALITY OF TRANSCRIPTION]

Adobe offers two quality choices for the transcription. The default choice is High (Slower), which will take longer to process the files. but offers significantly better translation .. The second choice, Medium (Faster), should only be used when you're very tiqht on time. The results are less accurate, but do process more qu ickly.

In our tests, we used a "2 .4·GHz Intel Core 2 Dl10 processor with 4 GB of RAM to transcribe the lllyers_Abol1t_Us.wav file. The High method resulted in a ratio of 1.8. mearunq the runtime of tile dip multiplied by 1.8 equals the approximate processing time .. The Medium method was nearly four times faster with 1Ic ratio of approximately .5.

N III

'" ra

E

en L

'" ,..

" -'

0<

" "

S4

(

[IOEtHIFY YOUR SPEAKERS]

The transcriptionopiiOf1 can attempt to identify di!f,erent speakers in a dip, In the Speech Transcription Options dialog, you can select Identify Speakers. This takes longer to process, but will attempt to create sepa rate transcripts for ea ch person. This method corn be moreinaccurate, 50 only use it if you have a long clip with multiple voices or want to export the transcript for others to view. When ready to submit your clip, dick OK.

[SWITCH rc THE ADOBE MEDIA EN[ODER C54]

- --

The actual transcripticn is powered by the Adobe Media Encoder CS4 application, which wl.ll automatically launch when you dick Ok in the Speech Transcription Options dialoq. This powerful tool allows you to convert audio and Video f les to many different formats used for tasks such as DVD authoring and Web distribution. The dip you selected in Premiere Pro .shouid appear at the top of the list and be ready to transcribe. If you have more than one dip to transcribe, you can set up a batch.

'N..m.- I'tad , rfiim~lUr.I'I!
• .. Jocbqo fOf l'flll:ll crfP.l Ion •
·t la'tv nj\tlO!.lI.:..I,h.. \IIIIV • 441110 HI'
·4 I'wIlkt ~ • "4100 Iu
.'4{,",> A_llllkt,IIUPI' ~' ~lQDil.t..
'V • 19.91 'IU-
..z 5I!q'*'<e- D1 ,:

[BATCH l"1ETHOD #1]

I f you h~ve multiple dips, organized In Premiere PlfO, switch back to the t application, Youcan s-elect the next desi red dip for process" in9'. Just repeat Steps 3-6 in this tutorial for each dip you want to transcribe. This method works well iof you have lust a lew clips to select. The benefit of setting up ell the dips for transcription is that you can run the task in the background While editing or wOo~king on graphics.

~~ram) 1_-lOI'. -~--;;-::-Y8"i!;

lIit-.'II'".~~, ..... .,_,.,_, ,,'*> Oro> Sorv .. olI_

~'''' ~",Ifa.l"l •• 1oIJbh~1

[BATCH METHOD #2]

If YOLl have several dips to transcribe, you might £nd it easler to Brab an entire folder of media. In the Adobe Media Encoder CS4 application, dick the Add button in the main Window, You can then navigate to a folder and select multiple clips (hold down the Shift key to choose more than one dip). Next, specify Speech Transcription from th e Form at button. You m list then specify opti on s by dicking on the word Custom (if you want to adjust multiple dips at once, Shift-dick to select them all before click!ng Custom). Select the Speech Pararns tab and set the Language, Quality, and Speaker options usi-ng the aforernenticned advice

Scott Kelby

lo.r,"- __ lIIII"~1

The Adobe' ,Photoshop'CS4 Book for DigitalPhot.ographers

By Scott Kelby

Updated for CS4and brimming with new material, The Adobe Photoshop (54 .Bookjor Digital Pho(()graphers shows you the exact techniques used by coday's earring-edge digital photographers step-by-step, Learn exa.ctly which settings to use, when to use tbem, and why .. This new edition also covers all the latestcechniques, tips, and nicks for CS4, plus a newly added chapter on how to process HOR (High Dynamic Range) images. COYer price; $54.99

.. -~--~

---- ...

",.',

. ~ " '.',

I

,"

, ,

-. - .. _--

Order From Kelby Training and Save Kelby Training Price: $43.99

NAPP M.emberPrice: $31,.99

Call 800-201-7323 or go to www.kelbytraining.com

• All p.ric~ln liS d'ol1'~ rs.(Opy rlgh I CI 200E1 Kelb)ll'ra inl n9> In c. - all ri.g hts re$<1rwd. Adobe and Photoshop are regbtl!f(!d trademarks of Adobe System. I neorpera led.

Co nte nt In The Adube PI!Qroshop CS4 .Ilook for DI91roi Phorogf(lpm,rs Is published and produced by Kel by Tr alni ng. In 0;,. 333 Dougla, Roa d Ea"t, Oldsma r, FL 34677,www.l<l11by!rainlng.rom.

0: " u

ru

.::

N III

'" ra

E

en L

'" ,_

m _;

S6

il

[START YOUR ENgINES]

Once you have a II your dips ready to encode, you'll need to start tile Adobe Medi~ Encoder: Just dick the Start Queue button to initiate the transcription process. If you have more th a none CI ip loaded for transcription, tile Encoder will process them from top to bottom in tile Queue. ,II you plan to 'leave your computer; leave the Adobe Media Encoder software as tile foreground application {and '1uit any software you aren't using to free lip RAM). I,f you want to keep working, just switch back to Premiere.

~......._._-4 • .---_ ~ ..... ,_._, _

._._--.... __ • __ .... 4 __

- _-- .. ~ ... -_ - --------

_______ '_4_. . __ . _4_

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

•

_ ....... _- - ------_. - - .. _... - "'....._~- ... _,......_. __ .---- .... _.,-_. __ . _. -t_,,,,"&_. _. __ • __ •. _

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

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

.... .-J~~ __ ~ .. _ ........ _

...__.,_.. _ ___.., -- _ .. _ ---_ .

..... - - - ~- - _ .. - .- ----

-~----- .. - ---- ... -

__ t __ .-, __ ,.-. _ •• _. __ ... _ .....

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

il

(VIEW THE TRANSCRIPTIO N]

When the transcription is completed for each dip, the text automatically becomes available. In Premiere Pro select the clip you'd !ilke to search in the Project panel then dick on the M etadata panel. To make it easier to view, dick in the space above the Speech Transcript area and drag upward to resize the window. You ca n also dose the disclosure triangles for the Clip and File properties to make

more room.

._. ,"_" .. _..- __ _t_ t_. ___

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

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

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

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

"'-_'- ,_--_._-_-....._.-.--..-

. _ .. .___.,._. --.---- ----,~---

....... ~ -,.-. --~- - ........ ------ .. -

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

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

....... _f....-.~. t_.__-.. ot __

~--~~ -- ... __ ._---------'=::.---=- ..... ----- .. - .. - .. - ... -~ .. - _~,_.....,_ ..."..~.-_ ...... __ • "_'t_~

_ .. _ ;- _ -, ..

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

I _ 1-

. ",_ -

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

[SEARCH WITH TRANSCRIPTION]

To find a particular piece of audio, just dick its word. The accuracy of the tra nscription wi II vary (Adobe keeps rei easing updates to improve the Speech Search). A little hit of reading, though, will often help you find a word. To actually search for a word or phrase, dick in tile search field next to the rnaqnifyi ng gl'lsS at the top of the Metadata panel, Then type a word or phrase you want to find in tile audio file, If tile word Of phraseoccursit will be highlighted in the Speech Transcript fiel.d. Click on the word and its timecode location will appear in tile Trmecods In field. The playhaad is autornatically cued to the selected rnetadata and ready to edit,

onll IhU') fin .. h"".r'S PNlg<liJIU' h ,um an .... ulntl~1 'P'lbll hktr If In tl1n 'Mlrld p"~,,~ t~ c~ by ,he il"'1IIrd Wlnnl

y ftl!W pt,Qlot.h(l~~~.r __ _ _Pholfnhop world the aJd

4h 1i!d by Ian V!~~ numbEr OI'II! CDmpuW bed: M1knu

[IMpROVE ACCURACY]

The transcript created is fully editable .. If you want to correct a word, just double-dick it, select til e letters you wa nt to edit, and type, Additionally, you can Control-click (PC: Right-click) on a word to access commands. The entire transcript can be copied by choosing Copy All from the contextual menu. Additionally you can choose to include the transcript file in the final export if sending your Video to the Web via Flash Video.

This feature is in its i nfancy, but should prove its use as it cantin ues to rnatu re Be su re to giv,e it a shot. For more information about XMP rnetadata, see www.adobe,comjgoj,learn_dv_tutorial _xmpcreative_en, ."

[Richard Ha rri{lgtOj~ is, ow. ner 0. f RHED ~. ixe I (Wl,ltw. rhedp fxel. com)1 a visual comm tJ tliciJlti"Ol15 compar1Y In WaS-hit1.'9 ten, O. C. Author of P-hotoshop ftJ r Video ~nd co-a u thor -of Produ Gij"'l.9 ],' video Podcests. Ric-bard IS Frogram M.:magQr for thl!' NAB Post-Pror;!ucdon World Confem:;m9-f) anc a regular speakr;'f.at Photoshop World.

All IMAG~S @RHED PIXEL,UNLESS On'ERWISE NOTED

E " u

w z;

98

[ 1

y

e r 5

a

•

]

eVlews

THe s rr ar q-rr scoop on all THe t.a r e s r qrap a r cs year

loon Boom Digital Pro

INCREDIBLE ANIMATION POWER

If you're an animator who's been looking for a vector-animation program that can do il all, you'll love Iocn Boom Digitai Pro. This professional version ofthe innovative Toon Boom animation program is 11 complete animation studio in one package. Unlike Flash, which combines content creation and application development in one application, Digital Pro is designed solely for creating animation from preproduction through compositing and rendering. Digital Pro's advanced animation tool s include effects, lip-sync, riggings, rnorphinq, inverse kinematics, and the ability to render 2D animation in 3D space. (Note' Toon Boom Digital Pro is offered in commercial, educational, and personal, learning editions, The commercial edition is the subject of this review,)

The first time you use Digital Pro, you may be overwhelmed by the interface with its numerous panels and menus. The workflow is derived from hand-drawn cell animation. While it's easier for animators to transition from paper to paperless animation, digital artists who are unfamiliar with the conventions of traditional animation may inidally rind the workflow challenging, The workspace presets support the three types of 2D an irnatiort Traditional, Paperless, and Cut-out. These presets configure the workspace, based on the type of anim aticn selected, to optimize workflow.

Before trying Dig ital Pro, I drew the m ajority of my an imations using the drawing and painting tools in Flash, which seemed to lag behind at times. By contrast, I found Digital Pro's drawing tools very responsive and easy to use, whether using a drawing tablet or a mouse to create content. In 2D animation, maintaining color consistency throughout an animation is essential. With Digital Pro, this is easily achieved using independent color palettes for each character or element. All project elements linked to the palette are updated if you decide to change a color in the palette.

One of my favorite features is the multiplane camera and 3D space, In the leal world, objects are located at different distances from our eyes. When we move past objects, the closest objects appear to move faster than the distant ones. Creating this perspective effect is extreme Iy tirne-consurninq when done in Flash; however, Digital Pro allows you to place objects at different depths and preserve their perspective using a real-time rnultiplane camera.

Anyone who's tried to manually lip-sync an animation knows it's tedious work, Digital Pro's automated lip-sync significantly reduces

production time by analyzing a sound file and attaching mouth shapes from the mouth chart,

The effects modules contain both special and standard effects.

Effects modules are applied in the Network view, which displays a schematic of how each el.ement in a scene is connected to the final i mag e. Network view is used to orga nize a nd group el ements and prepare the project for rendering.

Digital Pro ships with extensive training and documentation, lncluding getting-started videos and step-by-step introductory guides to the program and the different animation types. The guides are exceptionally well written and user friendly. Additionally, the Toon Boom website includes downloadable examples and user forums.

If you're a serious animator or plan to become one, Digital Pro is one of the best 2D animation products on the market. While the learnlng curve is steep, the payoff is increased productivity, lower production costs, and a high-quality end product.-Cyndy Cashman

Cornpanyfoon Boom Animation Inc.

Prke: $2,999.99

Web: www.toonboom.com

Rating:. ••

Hot Inaeased produdMtv: renoer:!D III 3D ;flilce; res

••

Permanent 'Press

CREATE GREAT VINTAGE LOOKS IN YOUR IMAGES

If you look closely at older printed materials-where ink has been pressed onto paper-you'll see some predictable effects. You may see areas overlap or come apart-the result of plates being out of register. You may see thicker ink around the edges of solid areas, and lighter ink just inside the edges-the result of ink being pulled back off of the paper. In process color printing (CMYK), the halftone dots may be large enough to easily. see, gradients: may becom e solid, and if CMYK plates are misaligned, then all kinds of wacky effects appear.

This rough, "analog" look is difficult to achieve with todey's digital software, so the engineers at Mister Retro took it on as a challenge. They studied the relationships between ink viscosity, plate alignment, pressure, and angle. The result is their astonishing Permanent Press filter for Photoshop.

If your image has several solid areas of color, Permanent Press will identify them and separate them onto separate "plates" that you can drag around. You can then adjust the ink thickness, edge roughness, and press pressure, and apply old-fashioned paper colors and textures. Imag ine usin g this on clip art!

If you have a continuous-tone image, Permanent Press can apply many kinds of old-fashioned printinq processes. My favorite trick is to make text appear as if printed on an old press.

Permanent Press includes many realistic presets, including Comic Book, Concert Poster, Letterpress, Matchbook, Newspaper, Pizza Box, Pop Art, Printed in Taiwan, Vintage Advertisement, Vintage Decal, and Wrapper. The interface lets you control every conceivable aspect of the "print.ing" process, and while the preview window is accurate only at 100%, you can scroll around your image to see any area of im porta n ce .. -Jay N el son

Company: Mister Retro

Price: $99

Web: www.misterretro.com

. .

~sonP-7000 Multimedia Photo Viewer

FLAWLESS PERFORMER FOR THE DIGITAL PHOTOGRAPHER

The Epson P·7000 Multimedia Photo Viewer builds on the last-genera. tion P·5000 with improvements that make it more efficient for photographers to back up their work in the field. At one pound, it beats carrying a laptop, but at almost $80() it's expensive. However, jf you can afford it, it's a sol i d p erfe rm er.

The piece de resistance of the P·7000 is the improved quality of the screen and with it the ability to make accurate assessments of your images. The 4" LCD has a wider color gamut encompassing 94% (up from 88%) of Adobe RGB color space, and the screen's wider viewing angle allows several people to look on. Files are easy to see in bright outdoor light, making culling in the field realistic. Images are sharp, even when zooming in to check detail A multipurpose jog dial has been added, making scrolling through images smooth and easy. As you view you r Ii les, you can displ ay E XI F data, a histogram, and Visually check highlights and shadows.

The P·7000's 160·GB capacity is twice that of the P·5000. II has two memory card slots for CompactFlash and SD cards, with provisions for adapting other popuiar cards. After inserting a card you can copy all your files or browse through your files and copy a desiqnatsd selection. In general, the menus and interface are easy to use and comprehensive, but could use a makeover. The P·7000 supports JPEGs and extensive RAW file formats.

I compared download times between the P-7000 and the P-5000 and, in general, the P-7000 is approximately 33% faster, The rechargeable lithium battery lasted between 2.5-3 hours. It comes with a protective storage case and fold-out viewing stand=-Steve Baczewski

Company' Epson America, Inc.

Price· $799.99

Web: www.epson.com

99

r" ". ~ m

'" tn

z m

'" e

o

"'

E " u

"' 2:

100

The (eise Quad-Core War station

SOMETIMES BIGGER IS BETTER

I have to admit that when I saw the size of the box being delivered-to my front door, I thought I was getting a small appliance for my kitchen but soon lou nd ou t tha t it was' th8 Cerise Quad-Core Worksta hon for this review. All k1ddT!1g, aside, thtsmachine is a model of effitiehcy. From the sleek all-alum inurn towerto tihe retractable 1/0 ports on top 01 the machine, the design ers <it Cerise havt! something pretty good going here. This workstation is truly a unique custom solution that's built for photog raphers. videographers. ~nd multimedia users.

BUlii(s\. let's focus on what it doesn't have. It doesn't have the "g'a mer" [rills (you know, eve-rything lights up: is overd ocked wi thin an inch af its life, and is optimized for gam,ng, not multimedia), I love my g~ mes but my Work co rn es fi rst, so' I n €led my f11<1 ch i ne to be o pt,irnized to run my Adobe, Autodesk, and va ricus other graph ics and muttlmedia apps that I need to earn: -a living. I, can live wlth Halo running a bi t slower but not my' Phctoshcpl

So what makes th is rnachin e cook? ThE) uni t tested r<1n M icrosoft XP 32-Bit Home Edition powered by an Intel Core 2 Quad 06700 (2_66 GHz), 4 GS 0 f SOC-M Hz. DDR2 memory, and a 512- MB Geforce ~800 OT graphics card that prOVided adequate horsepower to tackle the multlrn edia tasks I tossed it$ way Aho in<;loded in this c()n~g urslion are live (yes, five) '500-G B ha rd drives. One ha rd drive is lor the OS and programs and the other four are ~et up i,n RAI D 5 config~(a. lion for editing, ensuring that no datil will ever be los t if there's a drive Iallure. What's really cool about this setup i$ that it uses ~ hardware RAID card instead of the typical software solution. The hardwa re card handles the bottleneckii"lg thai typi~ally h~ppe~s when you're trying to access fil'es on your cornpu ter, allowing you more IJme to produce and less time waiting for things to hsppenI'm always loaking for ways to improve pwducJivity, sa that was a welcomed feature, [The ,Init a lso came with M'18X DVDzR DVD burner a~d 7J channel audio integrated into th8 motherboard)

Th e. com pu tar i s con f 9 u red With strateg i ca11y pis ced fa n sand 0 n e large coolinqverrt that outs through the box to ensure maximum airflow, keeping everything nice and' cool so that it doesn't b,,'(ome a space healer under you r desk. This also helps keep th e machi~e operatinq quietly, 1M fac t, it runs so ~uieily you may find yourself cheCKing to see if the machine is. turned on. The ~n side of the box is pretty impressive as well with every cable, card, ian, and screw in its place and neatly put tog-ether,

I _

~- -

I

"II , •• ,a.

-------

f- 1-- -

.~ 1-

Now thai I've told you a bout th e Ie atUtes, you probably want to know how it actually performed. Sure, I ran

a II of tht! banchm arks (Cinebench RlO: 9526; OpenG L: 5292: PS C53 Action Set O~25; and Windows Medi-a Encoder: 0:54) and yes, this thing is fast The numbers are nice but 'what it boils down to Is real·world pecrformance_ On a'ny given day i~ ITlY studio,

I could be (and usually am) working on anything from photog~phy 10 animation, then throw in some video ed iting and vcicscver work for _good measure. So I loaded everything I had en tn,s box. I can honestly say tbis machine handled eve-rythingl threw at it l\Iithout a gru\1t or lag._ At one point I had more than 20 images open in Photos hop, a 20"minuts Alter Effects compoS,jtion rendering; while twealdng a problem In Maya lor a client-and I had no problems With lag orha~g-ups I! took it like ~ cham p_ And for the month that I used the Certss as my main workstation, it breezed right through even th e most difficult tasks. I do h~ve to say, however, that if you're doing alot 0 f multimedia or anlmelion. I would strongly suggest upgrading 10 a more powerlul video card to. t<lke advant<lgE!' of renderi(1g times.

Forthe price-and capabilities, the Cerise Quad-Core Workstation is definitely a machine worth considering for your workspace, as they can ,set you up With a box that meets your needs, not $,omething that's rnsde for the masses-Bruce Bicknell

Cf)!l1PSllY' Cerise Computers, LtC