ART114.

tut_graffiti 56 15/8/05 1:43:09 pm

 TUTORIAL |

PHOTOSHOP • FLASH • ILLUSTRATOR

GRAFFITI-STYLE FLASH
French graffiti artist turned graphic designer Nicolas Dhennin reveals how to create distinctive layered graffiti-style
imagery using Photoshop and Flash’s under-used, and much undervalued, bitmap capabilities

Whether you’re a web designer who

ON THE CD uses Flash routinely or a graphic
You’ll find all the files designer looking for a brand new style,
you need to complete getting to know Flash’s bitmap tools could
this tutorial in the folder be really worth your while.
marked Tutorial\Graffiti
on the cover CD.
The Trace Bitmap function, which
enables you to convert bitmap images into
TIME LENGTH vectors, has been available in Flash since
1-2 hours the earliest versions, but few of us use it.
The secret is in the preparatory work in
INFO
Nicolas
Dhennin is a
Photoshop, which enables you to use the
threshold function to turn a portrait photo
1 First open the Tibo.jpg image from the
cover CD in Photoshop and then start to
draw an outline around the character using
4 The Threshold tool reduces images to
simple black-and-white bitmaps. Go to
Menu>Image>Adjustments>Threshold.
freelance into a vector illustration. the Pen tool. To ensure an accurate selection Adjust the Highlights and Shadows with the
graphic As with any work of this type, however, zoom into the image and then move around it slider to pick out the character’s features.
designer the final result is only as good as the source with the space bar held down for fine control. Aim to strike a balance so the features are
based in Lille in northern material. You need punchy contrast images only just defined without too much detail.
France, who has been to work with, so take your photographs in
involved in the French
good light and get into the habit of shooting
graffiti scene for the
last ten years. You can subjects against a clear blue sky or a solid
check out his portfolio backdrop to make cut-outs easier.
at www.meda1.com. There are a million ways to cut out an
image, from the quick and dirty to the
painstaking and precise. For this kind of
image, a fairly rough approach is not only
necessary but actually adds to the effect.
By using the Pen tool or the Lasso, you can
sharpen edges later using the Bezier tool.
The Threshold tool is the key to creating 2 Once you have completed the outline,
you can create a selection. First go to
the Path window and then choose Make
illustrations from your photographs. It
converts images to 1-bit black-and-white, Selection from the drop-down menu that
appears. Now go to Select and choose
so there are no mid tones, just highlights
Inverse in order to call up the background.
and shadows. Because that middle ground
is missing, you have to work hard to get the
right level of detail in the image, but when
it’s done well it can create a dramatic effect.
The best thing about vector illustrations
is that they can be scaled to any size – from
stickers to posters. Graffiti artwork often
uses just a simple black-and-white stencil
overlaid on to a colourful background – just
5 Your approved image will become the
final rendered character, using
Illustrator. It is also possible to leave the
like the image featured here.
3 You should now delete the background,
leaving only the character you have cut
out. If necessary, you can tidy up the
background. Here, the character is outlined
and isolated. With your character reduced to
a stark black and white image, create a new
Illustration and tutorial by Nicolas Dhennin character accurately by zooming-in as far layer and choose a colour to strongly show
www.meda1.com as possible and removing unwanted pixels the outline. Save the image as a JPEG with
with the Eraser tool set to Block mode. the quality set to Maximum.

October 2005 | 57

ART114.tut_graffiti 57 15/8/05 1:43:17 pm

 | TUTORIAL

PHOTOSHOP • FLASH • ILLUSTRATOR

STENCIL IT
Using the Threshold
function in Photoshop,
and Trace Bitmap in
Flash, you can create
black-and-white images
that would be great as
stencils and stickers.
Just scale up the image
to A4 size and print it off
on some thick paper or
card (or alternatively
mount the paper on
some heavy card). Using
11 Once you have converted the image, the
individual areas of colour will now be
selectable. Because the background is a flat
a scalpel or sharp craft colour you can select it all by clicking on it just
knife, cut out the black once. Delete the background, leaving the
areas and you’ll have a converted character visible.
stencil you can
reproduce anywhere!

6 Open the vine04.jpg from the cover CD. In an image like this, it’s easy to create a selection
using the Color Range tool because the vine and the sky use very different colours. First,
go to Select>ColorRange. Now click in the sky in a typically blue area and raise the fuzziness
to select a range of similar tones of blue and get as much background as possible.

12 You should now export the file you

have created as an Illustrator image.
Choose File>Export>ExportImage and
select the Adobe Illustrator (AI) format from
the drop-down menu that appears. Et voilà!

You can now open Flash. First, create a

7 Now that the sky has been deleted,
create a new layer for the background.
Next choose a light colour that you think
9 new movie with a large stage (800x600).
Next, go to File>Import, and import the
works well against your vine outlines. In this character you have created on a red
case white is probably best. Finally, merge background on to the Flash window stage.
both layers to create a single merged layer.

LAYER, LAYER
You can create more
Within the same Flash movie, import
interesting images by
building up your layers.
Keep it simple with
13 the “vine04” image that you converted
using the Threshold tool in step 8 and then
relatively few colours and change the document colour using Flash.
use swatches to keep Simply select Modify>Document.
track of your colours.
Try to use dark colours
sparingly if you can, and
layer the elements from 8 Repeating the same process as step 4,
use the Threshold tool again to create a
10 The Trace Bitmap tool enables you to
convert your images into vector shapes.
Go to Modify>Bitmap>TraceBitmap. Now set
light to dark and from black-and-white image of the vines. Again the Colour Threshold and area to Minimum.
front to back. you will need to ensure that you maintain This will ensure that as much detail as possible
just the right amount of detail. is preserved when converting to vector.

58 | October 2005

ART114.tut_graffiti Sec1:58 15/8/05 1:43:24 pm

 TUTORIAL |

18 You can now colour the shapes and the characters according to
your desired taste and style. Many additional parts can be used,
too, letting imagination play its part. Interesting effects can be achieved
using scanned drawings, photos, or mixing different types of media.

14 Once the Document Properties

window has opened, select a colour
of your choice, but of course make sure that
it is different to the current image colour.
Once you have decided on a colour, hit OK.

16 Once your images have been

transformed, delete the white around
each one. Some white will still be left, but this
process will make it easier to delete it with the
Magic Wand tool in Illustrator. Now export each
image by selecting File>Export>ExportImage
and choosing the Illustrator (AI) format.

15 Now use the Trace Bitmap feature

once again to convert your black-
and-white vine image into a scalable vector
shape. Using the same techniques you used
back in step 10, go to Modify>Bitmap>
TraceBitmap. You can now repeat all of the
previous steps with the other images
provided on the cover CD, or with any other
images of your choice.

Although Flash is good for

17 transforming bitmaps to vectors, it’s
really only designed for screen use so, to 19 For the illustration featured here I used a range of colours with a
Linear gradient and then placed the vines in the foreground so
create your final composition, create a new that the characters’ feet were hidden. The final composition is up to you,
document in Illustrator and use the Place but remember to think carefully about the way the image is arranged on
function to lay out the individual elements. different layers to draw the viewer’s eye into a striking focus point.

October 2005 | 59

ART114.tut_graffiti Sec1:59 15/8/05 1:43:32 pm