ART171.

tut_illus 90 14/12/09 10:34:52 am

 Technique 91

Illustrator CS2 and later

Cross-
platform
character
design
Ben Mounsey shows
01
you how to create
It wasn’t difficult for me to choose a theme, as drawing on inspiration
from ‘50s icons is always sure to spark my imagination. Once you’ve sourced your
visual inspiration, grab the sketchbook. Sketch out your ideas on paper first to get a
characters that are easily rough composition.

transferable across the

range of modern ad
display mediums
Creative, striking ad campaigns are what sell brands
and stick in minds, and success in producing such output is worth
its weight in gold. A campaign for a product can be diverse in its
range of applications; a client wanting to use the core elements
you’ve created in several different formats, from various print
dimensions to web, is nothing out of the ordinary. In this tutorial I’ll 02 Next I work on my characters. 03 Now to artwork the
be taking you through steps to create a versatile design in I pick a few memorable ‘50s sci-fi icons: characters. I like to break my designs
Illustrator, taking your core design elements from a magazine-style Robby the Robot, a werewolf, the into basic shapes, creating nice a
layout to a web banner. Illustrator is the perfect tool for this, as with Creature from the Black Lagoon, a flying balance of hard edges and curves – the
its multiple artboards it enables us to work with our design across saucer and a 50-foot woman. I sketch Pen tool’s Bézier curves are perfect for
several formats. out the basic design of each character this. Flesh out your characters with
(this can be found in Characters.ai on expression lines, and work in greyscale
the disc). The flying saucer is completed, to really make your product ‘pop’! For
as an example. colour reference, check the Final.ai file.

Ben Mounsey On the disc Time needed

Also known as The files 4-5 hours
‘green glasses’, Ben accompanying this
Mounsey lives in tutorial can be
London, working located in Skills
freelance in the DiscContents\ Using
animation and
illustration
Resources\
Illustrator
clipping masks
Using 04 When you’ve finished your
industries. His client Pathfinder tools characters, copy and paste them into
list includes the likes Handling your Starter.ai file, which you’ll find on
of Cartoon Network textures in
Illustrator
the disc. Distribute them to layers and 05 Copy another rectangle and
and Nickelodeon, hide them. Add a new blank layer at the paste in front (Ctrl/Cmd+F). Take the
and showcased in Using multiple
artboards
bottom – this will be our backdrop. Use Knife tool and make a pleasing curve for
his work is a love of the Rectangle tool to make a new grey the backdrop (this should look like a
‘50s retro, humour, Using Warp
big characters and effects on text (#6E6D70) rectangle the size of our hill). Delete the top half and make the
hats. See www. page. And try to keep organised by bottom half a vertical black-to-
greenglasses.co.uk naming your layers! transparent gradient.

www.computerarts.co.uk Computer Arts February 2010

ART171.tut_illus 91 14/12/09 10:34:57 am

 92

06 Use the Pen tool to rough 07 For filmic ambience, we’ll

out a freehand blocky cityscape in a draw some eerie mist. On a new layer,
slightly darker grey. Don’t worry about use the Ellipse tool and hold down Shift
being too precise. Take the curve to draw some fixed ratio circles. Select a
gradient, copy and paste it in front of very light grey colour. Once you’ve 08 Turn on your character layers and arrange them
the cityscape, and with both elements covered the lower half of the image, behind the mist layer. You can use a background colour
selected use the Minus Front command select the circles and select Unite from grey-to-transparent gradient shape to blend your characters’
in the Pathfinder palette to create a the Pathfinder palette. Set the opacity lower halves into the scene. Scale and shift your characters
seamless cut. for the new shape to around 60%. about until they sit well.

Tracing tip
When tracing artwork, move the sketch layer to be
above and set it to Multiply in the Transparency palette. This
helps you to see what you’re doing more clearly.

10 Now to add the text. I’ve come up with a twist on the

movie title The Amazing Colossal Man. Choose Impact as a font
09 Now we’re going to crowd the scene with a pack of werewolves! Select the and play with the word sizes for a dynamic look. Make it a
werewolf character, copy and paste him, then use the Pathfinder palette’s Unite tool to striking yellow, then go to Effect>Warp>Arc apply an arc styling.
combine him into one solid shape. Make the clone a vertical black-to-transparent Expand the text, copy it, paste the copy behind and offset this
gradient. Duplicate your clone a few times. copy slightly, giving it a black fill.

VisualguCideVto
In pictures: a
rk of
the career and wo
iters
our Technique wr

Ben Mounsey
The Green Glasses man
Skatoony Three-Headed Monster – July 2007 ‘Bus Stop’ – February 2009
selects five favourite A character design sheet for Skatoony, a series A self-promotional piece used for business cards and mailouts. It’s
past projects created by Cartoon Network. part of a series of my images in which I explore texture in my work.

Computer Arts February 2010 www.computerarts.co.uk

ART171.tut_illus 92 14/12/09 10:35:1 am

 Technique 93
Cross-platform character design

11 Turn on the layer named 12 Now open the file 13 In order to sit the trainer in with the mist, I’ve created
Texture1, which will cover your page. Product_brand.ai from the disc, copy a clipping mask. Select some of your ‘mist fluff’, sit it slightly in
Select it and, in the Transparency panel, the logo and trainer elements, and paste front of the shoe, and copy it. Using the Pen tool, draw a solid
set it to Soft Light with an opacity of them to layers above the texture. Nest shape that blacks out the shoe, then paste the ‘mist fluff’ in
80%. This should marry the texture with the trainer in with the mist by adding front. Select both the fluff and the black shape and use the
the artwork, resulting in an aged look to some extra fluff to the mist by repeating Minus Front tool in the Pathfinder palette. Select that new
the piece and adding some subtle hues Step 7. Use a white-to-transparent shape and the shoe behind it, and go to Object>Clipping
to the greyscale elements. gradient to blend. Mask>Make.

15 With your new artboard set up, simply copy across the elements you want in
your new composition using the styling principles we’ve already run through. Note that
14 By now you should have your finished composition. when scaling objects using the Scale tool, have ‘Scale Strokes & Effects’ turned on to
To use our elements for a new composition, we’ll need to create keep your quality of line. You can find my design in the Final.ai file.
a new artboard. Select the Artboard tool (Shift+O) and drag a
new square (don’t worry about the dimensions), then go to the
top bar and enter a width of 160px and a height of 600px (a
standard ‘sky scraper’ web banner). Hit Enter.

‘Banjo Bliss’ –
‘Alice in Wonderland’ promo piece – August 2009 September 2009
Walls/Unilever character designs – March 2009 A promotional piece for my agent, The Organisation, A self-initiated piece to explore the
Character designs for a campaign for Walls ice cream. The brief was to come earlier this year, the theme was to depict an image from use of line in my artwork. It also
up with trendy, cool characters that kids would identify with. the world of Alice in Wonderland. showcases my love of folk music.

www.computerarts.co.uk Computer Arts February 2010

ART171.tut_illus 93 14/12/09 10:35:7 am