Computer Arts Sampler

£6.00September2011

computerarts.co.uk

Inside__GoodWivesAndWarriors •BenTurnbullBenSecret •FrédériqueDaubal •JamesWignallTomMac •Chermayeff&Geismar •ThiagoMaiaPOGO • Ice CreamFor Free •MateuszSypien12foot6 • LukeHayman •AndreasRothaugAdd instantdepthwith transparencyustwo • TheLightSurgeons •W&KNewdesign talent&more

192"Thebig fallacy is that youcanmakesomethinggo viral. If youproducegoodwork,peoplewillwant tosee it."RonLim,ATTIK, seepage20

Design yourbest branding yetwithour guide tolong-lasting logosandmagnificentmarques

MAKEMONEYFROMPERSONALWORKTurndesignexperimentsintocold,hardcash…

10jOb-WINNINgWAYSTOIMPROvEYOuRPORTFOLIOBothonlineandoff!

DESIgNFORANDROIDHowtocreatekillerapps for theworld'smostpopularmobileOS

MAKEYOURLOGOSBRILLIANT

Welcome 03Issue192

Subscribeonlineatwww.myfavouritemagazines.co.uk/coap17or seepage66 ComputerArtsSeptember2011

ONTHEDVD

Hello.Whatareyouworkingon thismonth?

Whatever it is, I hopewecan inspireyouandbringyou theknow-howtomake it yourbestproject yet.Lastmonthsawa fewchanges toComputerArts–and this is usually theplaceeditors saythe feedbackhasbeengreat,but I’mnot going todo that as I hopeas youflick through the issue youcanguesswhat the responsehasbeen (OK,I’ll tell youasecret, itwasgreat).

Just to reiterate in case youmissedus last time:Thedesignmanual (startingonpage51 this issue) is aimedatmakingyour life asadesigner aneasier one.Thinkof it asamiscellanyofdesignadvice–everything fromportfolios to typography towebdesign to selling yourwork.

Studio Lifehasalsobeena rip-roaring success for us–and I’m really happy to introduce this issue’s episodeon theDVD.Wepaya visit toustwo,a studio that really doeshave tobeseentobebelieved.Weeven threw in someSergio Leone-inspiredendcredits.Seewhat you think.Oh,andalsoon theDVDwebring youHeroicCondensedLtdBold–a really usableheadline fontdesignedbySilasDilworth.Younever knowwhen it’ll come inuseful.

Finally,youmayhavenoticed theGraduateShowcasefreewith this issue.Thework featured is truly brilliant and, if this isanything to goby,thedesign industry hasagreat future.Thanks toall our judges,sponsorsandentrants.

Asalways, letmeknowwhat you thinkof the issue,andanythingelse for thatmatter (preferablydesign-relatedandnothingkinky) by email,onTwitter or onFacebook.

[email protected]/computerartsfacebook.com/computerarts

w E l c O m EISSUE192

SEPTEMBER2011

Food for creative thought:the things to eatat yourdesk tokeep thecreative juicesflowing_page55

StudioLife.Thismonth’sStudioLifedocumentarytakes youbehindthescenesatustwo.Preparetobe‘Wonka-ed’!

Thedesignmanual:portfolio secrets_page51

Our revampedCreativeSkills sectionhasmore techniquesand includes videowalkthroughs_page68

ComputerArtsSeptember 2011 www.computerarts.co.uk

Who’s themanmouthingoff in themask?Findout in ourustwoprofile _Page 40

04

Output 10Thismonth’s best newdesign, illustrationandmotionwork fromtheglobal creative scene

INDuStRYANALYSIS 26In adigitalworldwhere yourwork is out there for anyone to see,howcanyouprotect your own intellectual property?

OpINION 28-32JustinHarder:whydesigner crushesareagood thing

DanielRhatigan:theneweraof typography isuponus

DanRose:aredesigners the least organisedspecies?

DESIGN BEttER LOGOS 34The leadingauthorities in logodesignget together todiscuss theprocessbehindmagnificentmarques

MOutHING OFF ABOutAppS 40Wevisit ustwo–andmeet the self-proclaimedWonkaof theappindustry–as thestudioprepares to launch itsnewgame.Checkoutthedocumentary goingbehind thescenesat the studio on yourDVD

WEAVING A pAtH OFHER OWN 46Mixedmediaartist FrédériqueDaubal hasspunasuccessfulfreelancecareer fusing threadandgraphicdesign

tHE DESIGNMANuAL 51Themoderndesigner’s guide to everything continueswith10 job-winning tips to improve yourportfolio

CREAtIVE SKILLS 68Discover newPhotoshop, Illustrator,Flash, InDesignandAfterEffects skills inprint andonvideo.Full listingonpage68

COLORIMEtERS 100They’re certainly not sexy,but theyareessential tomaintaina colour-accurateworkflow.We lookat theoptions

ExpOSuRE 106Thebest reader-submittedportfolios onshow

MYDESIGN CLASSIC 114Airside’s co-founderNatHunter ona timelesspieceof design thathas lit upher creative life

SuBSCRIBE 66Saveanamazing50per centwhenyousubscribe to thenewandimprovedComputerArts

C O N t E N t S


Contents 05Issue192

Theworkofmixedmediaartist FrédériqueDaubal _Page 46

BenTurnbull’s heroic collagework_Page 12

Calibrate yourmonitor for colour consistency_Page 100

Treat typewith colour inPhotoshop_Page 74

DanielRhatigan’s futureof type_Page 30

Thedesignmanual– themoderndesigner’s guide to everything_Page 51

Layerupeffects in Illustrator _Page 80

Howtoprotect yourself fromthe IP thieves_Page 26

Design long-lasting logos_Page 34

manualThedesi n

06 OntheDVDIssue192


Studio lifeIn this episodeof our exclusiveHDshortfilms,wepaya visit toustwoandmeetMills– theself-proclaimedChiefWonkaof theapp industry

PhotoShoPHighPass techniques for retouching

illuStratorTransparency secrets

indeSignMaster nestedstyles

aftereffectSAnimatewithnulls

flaShUseprocedural graphics

adaMroWeThe3Dmotiondesigner anddesigndirector’s incredible showreel

andYMartinLovely animatedwork fromtheLondon-based freelancer

BenadaMThecreative knownasBrokenAntler showsoff hismotion skills

calangoTheAmsterdam-basedagency’scaptivatingnew reel

chriSJeVronS/aY-PeCheckout this sleek sting forE4–acollaborationbetweenChrisJevronsandanimator ay-pe

SaraBennettA fusionof different techniques inSaraBennett’smotion showreel

thoMaSlucaSBotanicalNightmareshortfilm

PhotoShoPBruSheSUse these15 freebrushes in yourdesignand illustrationprojects

Plus:creative skills tutorial starterfiles,trial softwareandmore…

Studio Life:You, I andustwo.Theprolificagencyonwhat it takes to conquer theAppStore

AndyMartin’s sublimecharacter animation

Calango’s stunning showreel

Smoothmotiongraphicswork fromSaraBennett Stunningnewmotionwork fromAdamRowe

SeeThomasLucas’BotanicalNightmare shortfilm in full

on th e d V ddeS ign docuMentarY

Pro tra in ing

ShoWreelS

reSourceS & eXtraS

on yourdVd you’ll findheroic condensed ltdBold,a versatile andworkhorse of a font designedbySilasdilworth attypetrust.

NEW!Whereveryousee this iconthere’s a videoon theDVD

FREE FonT

20


BehindtheBrief

themakingofZeus&theHighVoltage tC

thegodswereonAttik’s sidewhen thecreativeagencyproducedan inventive campaignfor the latestScionsports coupé...

ThestudioAttikSimonNeedham (above left) co-foundedAttik in1986with creative director JamesSommerville.Their first location, famously,was an attic inHuddersfield,UK–hence the name.A key forcein the company’s expansion,Needhamhas ledAttik studios in London,NewYork,Sydney andSanFrancisco,and spendsmuchof his timeontheUSwest coast.Creative director Ron Lim(above right) beganhis careerwith the companyas a freelance art director in 2005.Hiswork hasbeen recognisedby an array of awards bodies,includingD&AD,Cannes Lions andClio.He isa key contributor onAttik’s Scion account.www.attik.com

ThebriefHighVoltageTheScion tCHighVoltageRS is one of theToyota-owned company’s special ReleaseSeries vehicles–amuch sportier version ofthe car – andonly 2,200 of themodel have beenmanufactured.This particular RS version boastsa bright-yellowpaint job,customisedTRDbodykit,push-button ignition,black alloywheels anddesign accents inspired by theGreek god of thesky and thunder,Zeus.

Attik hasworkedwithScion fora number of years and knows themarket forthe company’s cars.This campaign involvedTV,socialmedia, thewebandprint,aswell asthe skills of Brewster ParsonsVFXsupervisorAndrewEksner (www.brewsterparsons.com),and talented cinematographer JordanValenti(www.lspagency.net).

Attik helpedname the vehicle:‘HighVoltage’was inspired by lightning boltsassociatedwithZeus.Thebriefwassimply to sellthe vehicle andAttik’s approachwas to highlighteverything thatwasdifferent about the car: itsyellowcolour and its attitude.The teamusedhumour,YouTube and the king of the gods tomake it happen.SimonNeedhamexplains…

01

Behind thebrief 21themakingofZeus& theHighVoltage tC

Subscribe atwww.myfavouritemagazines.co.uk/coap17 or see page 66 ComputerArtsSeptember 2011

Several concepts for theHighVoltageRSwerepresented toScionandwehoned themdownto two favourites.Having done some researchwithin

Toyota,wedecided that the idea centred on theGreek godZeuswouldwork best.Themain theme is thatZeus createdtheScion.As opposed to just showing running footage of a carwith a family in it, this campaign has a youthful tone to it, inlinewith theScion brand,and is fairly daring.The client likedthe humour, too.

While developingZeus,we foundmanyways to havefunwith him.After all,he’s a legendary god andmost peopleknowabit about him,sowe could drawentertainment valuefrom thatwhile putting him in the context of the campaign.Plus,Zeus andhis lightning-bolt power fit perfectlywith theHighVoltage name.

However,we kept things really simple so viewersdon’t have to know thatmuchabout him to understand theideawe’re putting forward: in theTVad,Zeus has comedownto present his car tomortals,while theYouTube footage takesyoubehind the scenes,where he continues to play the role ofgod of godsbut struggles to be taken seriously.The concept iseasy to pick up at any point in the campaign,and aims to stirup somecuriosity so that peoplewant to seewhat funnythingswill transpire.

On thesetwithAttikBeingon thesetduringanAttik shoot

is exciting.Simonneedham isaself-confessedperfectionist,so early on inaproject his attentionis onmaking sureeveryone’s completely focusedon their roleduring theshoot.

following thisbuild-up,once theshotsarebeing takenand it feels as though thingsareprogressing,the vibebecomesmore relaxed.“thefinal pieces reflect the funatmosphere created,”saysneedham.“thiswasdefinitely anentertainingproject toworkon.”

01Zeus creates thetChighVoltagerCwitha lightningbolt,beforehighlightingits key features

02Zeusunleashesthesame lightningpowers that hepurportedly usedto create the yellowScioncoupe

02

22


I storyboarded every frame in the commercialbut the behind-the-scenes bitswere shot from thehip.BradNorman–whoplayedZeus–was a great improviserand gave thematerial his own spin,whichworked reallywell.Weprepped for a three-day shoot – covering ourmain setupsand thebehind-the-scenes vignettes,whichwere all on theset or outside the sound stage–aswell as a day of shootingon location in downtownLosAngeles.

CinematographerJordanValenti shot thecommercial…Thiswas ahigh-profile spot,so Iwent for 35mmfilmbecauseof its rich,beautiful and cinematic attributes. It offers a hugedynamic range compared to other formats,whichwas veryimportantwhen shooting theScion in full sunlit environments.

I believe less ismorewhen it comes to equipment,andprefer tomove fast, lean andmean rather than carryingunnecessary gear.Wedecided on abasic approach,consistingof a hard-mounted 35mmcamera on the front platformof acamera car.The lens heightwas carefully chosen to bemostflattering to theScion vehicle,which is important becauseadjusting the lens height once the camerawas riggedwouldbe time consuming.

05

03 04

06

The rigwasn’t stabilised,sowe chose our locationsnot only for their aesthetics but for the smooth pavements.Onehappy accident during shootingwas thatwe got somegreat late-evening sunlight after several days of cloud cover,sowe shot fromanoptimumangle to capture this.

Visual effectswithAndrewEksner…Simonand the folks fromAttik askedBrewster Parsons tocollaboratewith themon the special effects.Mymain taskwas creating theMountOlympus environment and the skyaround it,which drops in behind the set.

As a traveller andphotographer I have an extensivelibrary of images so,workingwith sunsets fromPatagonia toPolynesia, I created a‘hero look’– thewarm,rich,evening sky.Simon liked the idea of backlight and‘god rays’,so he shothis green-screen stage to accommodate that.Someextraelements helpedmeshowMountOlympushigh in the clouds,including aerial images,mountains anda sea of clouds.

The secondmajor taskwasdesigning the lightningbolt thatZeus holds andoccasionally throws. It had to bealivewith sparking energy,but at the same time it needed tobedefinedenough to be recognisable.We created thefinal

04 WithAndreweksner’s skills andsomeAutodeskflame,the scenetruly seems likeit’s takingplaceonMountOlympus

05Zeusgetshisjuice.Simplepropswereusedduringthe filmingprocess,tobe replaced laterbyheroic effects

06While theVFXonthelightning,for instance,hadto look fantastic,thechallengewastokeep itbelievable

03Wideshotsoftheadsetbefore thevideocompositor artwas implemented

Subscribe atwww.myfavouritemagazines.co.uk/coap17 or see page 66 ComputerArtsSeptember 2011

Behind thebrief 23themakingofZeus& theHighVoltage tC

aestheticwithSimon,experimentingwith various zapdesigns,fluid edges and so on. I think the outcome looks funny,whilestill being as real as possible.

Finally,we treatedpart of the footage of the carrunning. I tried to blend those shotswith the overallmoodof the spot by replacing the background skies.Using somecleaner photography of someof the locations, I was able toretrack the LosAngeles skyline and replace or removeunwanted elements.Our end of the projectwas completedin Autodesk FlameusingPhotoshop extensively.

RonLimonthefinaldetails…Our spot is pretty unusual for aUScar ad;often, they focus onperformance and value.Scion hasdone a little humour in thepast,but nothing overt.Wedid play up the special features ofthis tC,alongwith the price,so the valuemessage is still therejust done in a comicalmanner.

While theTVad is going out to the likes of AdultSwim,CBSSports,ComedyCentral,Fuel TV,MTVand severalothers, the behind-the-scenes segmentswere posted toYouTube andwealso reached out via Facebook and severalotherwebsites.Wehadaplan in place onhow to tag the

spots, the order theywere to be viewed in,and so on.Copywriter AndySciamannaandart directorMikeCornellcameupwith thewholeZeus concept, thenworkedwithJacobFord,our interactive creative director,andJeff Fang,our senior interactive art director, to do all the digitalelements.They thought out how theywanted everythingseeded,uploadedand tagged.Scion’s socialmedia teamwasextremely proactive in getting thework out to bloggersand the newsmedia.

Thebig fallacy is that you canmake somethinggo viral. If you produce interestingwork,peoplewill want tosee it.So far,Zeus hasbeen reallywell received.Thepresshasbeen favourable and the online hits have been great.Even the tweets have been kind,generally,which is nice.

The clients and thedealers love thework,so that’salways goodwhen youfinish aproject.Of course, it’s stillearly days so it’s difficult tomeasure the overall successof the campaign.The great thing is thatwe’ve been able tomake itwork cohesively across allmedia.No elementswere addedasafterthoughts: it’s all beentruly integrated together.

09

07 08

08Earlyprototypesof thedecisionpointsmade inLondon let theLessrainteamfinessetheinteractionbeforetravelling to LA

07Attikexecutedvariousprintadsfor thecar.thislarge-scaleposterwasdesignedforoutdoorusage

08thehighVoltagedigital strategy iscircular:car fanswhodiscover theZeusphenomenononfacebookorYoutubecanfind theirway tootherstickycontentonthewebsite,andviceversa

09Aswellas theprintads,Attikalsocreatedaclassic,widebillboardad forScion’s latestreleaseSeriesvehicle

01 Start by designing the front and back cover for yourmagazine.Switch yourscreenworkspace to theTypography setting underWorkspace or through the drop-downmenu. I prefer using this because it gives you access tomore optionswhen typesetting aneditorial piece.All the tools are under your fingertips and enable you towork efficiently.

NeshanthenyKumanaCanada-based

designer andartdirectorNeshanthenyhasworkedon largeexhibit designandprint projects forVancouverAquariumMarineScienceCentre,and iscurrentlyworkingasa freelancedesigner ona rangeof differentprojects.www.neshak.com

SkillsManipulatepagesizesCreate gatefoldsandcentrefoldsAddaspineMaster basiceditorial design

InDesignCS5or later

MasterthePagetool

NeshanthenyKumanademonstratesaneasyway tocontrolmultiplepagesizeswithina singledocument

Timeneeded1hour

OnthediscYou’ll find the fullsize screengrabsfor eachstepofthis project in theResources sectionof theDVD

InDesign is typicallyuseful for layingout largedocuments thatcontainmore thanonepage.However,CS5and5.5haveopened thedoor tonewpossibilities,with features thatmakesome tasksmuchmore intuitive. Inprevious iterations,forexample,therewasalways theneed to start anewdocumentwhencreatingadifferentpagesize.Now,Adobehasmadeour livesa loteasierwith thePage tool.

Usinga fakemagazine layoutasanexample,we’ll lookathow tomanipulatepagesize,create gatefoldsandaddaspine toaneditorial design.Aftermastering thesesimple steps,you’ll beable toapply thePage tool inmanydifferentways toanyproject.

ComputerArtsSeptember2011 www.computerarts.co.uk

84

02 Let’s give themagazine somedimension by adding a gatefold to the cover.First,select the drop-downmenu fromPagesand turn off ‘AllowDocument Pages to Shuffle’.This prevents the page fromautomaticallydropping down to the next spread and attachesit towhere you’d like it to go instead.

04 This page is too large fora gatefold,so let’s change the size byclicking the Page tool on the toolbarand selecting the newpage thatwe justcreated.When you select it, you get a blueoverlay and the Control panel changes.You’ll notice that you’re able to set it toeither a specific size given by InDesignor a customsize. In this case,we’ll gowith a customsize.

08 Next, let’s set theReference Pointto be on the left side,becausewewant ourspine to appear between the back and frontcover. If this isn’t set then you’ll end upwitha back cover that’s expanded equally on bothsides.Now set theWidth to 38p and you’llnotice that your layout automatically shifts tothe left,with the spine appearing in the centre.

09 Choose the Selection tool andthen click on the back cover to continuedesigning the spinewith themagazinenameanddate of publication.

10 Let’s nowaddpages to ourmagazine by draggingand dropping the A-Master spread into the Pageswindow,sowe can see the different possibilities for amagazinelayout.Click on the Page tool and select pages five and six,so you canmanipulate thepage size at the same time.Selecta set size of 600x300 in thedrop-downmenu.Thismight justturn out to be a unique size for an ad in themagazine.Youcan continue using the Page tool tomanipulatemultiplepage sizeswithin this single document.

05 Select theReference Point to be onthe right-hand side,as you specifically want itto shrink horizontally.Enter 15p in theWidthfield and the page sizewill change.You nowhave aflap toworkwith.

07 Now that our gatefold is done,let’s add a spine to themagazine.Thistime,select the Page tool and click onthe back cover of the publication. In theControl panel,uncheck the ‘ObjectsMoveWith Page’box to prevent the elementson your layout fromshifting around ordropping out of the page.

06 You can then expand the content to cover thegatefold thatwas created or add new content. In this case,we’re choosing to highlight the story behind the cover imageseen on the gatefold.

03 Select page two to insert the gatefold after it.Click on Insert Pages under the samedrop-downmenu.SetPages to 1, Insert to After Page,choose 2 and setMaster toA-Master.Click OKand you should see a newpage appearbeside page two.


Creativeskills 85Pro layout techniques

Documents

Computer Arts Sampler