Beruflich Dokumente
Kultur Dokumente
Illustrator, Tutorials
Twitter is quite a social media juggernaut as of late. It‟s getting to the point that one has to have a Twitter
account. And what good is a Twitter account without a link to it? And what better way to link to your Twitter
account than with a cool blue bird character illustration? This tutorial will walk you through the steps from
sketch to vector in creating an original cartoon-style character vector illustration.
I currently work in Adobe Illustrator CS4, but most of the steps here can be retro-fitted to earlier version of
Adobe Illustrator — or to alternate vector art graphics software. This tutorial also assumes you have a working
knowledge of Adobe Illustrator, the basics of creating vector paths using the pen tool, and the basic vector art
tools. What follows is a walkthrough of a method to go about creating cartoon-style illustrations in vector art
giving them a clean, yet hand-drawn look. Hold on to your Beziér curves, and let‟s get started…
Typically I scan at 200 or 240 DPI. This gives me plenty of resolution to work on refining the sketch in
Photoshop without having the file size being larger than needed for the eventual Illustrator template this sketch
will serve as. I scan sketches with the B/W (grayscale) setting as I have no need for the color information, and
the “line art” setting will not pick up the nuances of your pencil sketch.
Note that I sketch very roughly in pencil on paper — below I will explain my sketching process in Photoshop,
which allows for much more flexibility when refining the drawing. My full sketch process is 25% pencil, 75%
Photoshop.
I like to work on transparent layers when working on sketches in Photoshop so parts of the sketch can be easily
copied, pasted, or cut without having to worry about the background white. I do however like to have the white
background behind all the transparent layers so everything appears normal when sketching.
Next I start working on refining my rough sketch on the new blank layer. I do all my sketching in Photoshop
using a Wacom Intuos4 graphics tablet. I highly recommend investing in a professional-quality graphics tablet
if you are doing graphics work on your computer. You‟ll also note in this screen shot that I have used the Free
Rotate feature in Photoshop CS4, which allows you to freely rotate the canvas on the fly while you are working
with a document. This makes it very easy to get the right angle while you are working on your drawing.
I always work by using a separate layer for any distinctive part of a drawing, even with a single character. This
allows me to resize, distort and reposition elements of the character in Photoshop to get the right proportions
and design down.
This is why I do not spend much time with paper on pencil; what I do on paper is just enough to get the basic
idea worked out.
Here you can see that I sketched the body of the bird, but decided I didn‟t like the head-to-body proportions.
Because the body sketch was created on a separate layer, I only need to hit Command-T to enable Free
Transform, which allows me to rotate and scale the layer, as well as skew the layer (which I am doing in the
screenshot) by holding the Command key while clicking on a control handle while in Free Transform mode.
Here we have an entire new body, and an entire new approach to the character. I decided as I was working on
this that I wasn‟t keen on having the character standing, as I didn‟t like how the wings were looking just flat at
his sides.
Sketching directly into Photoshop using the Wacom graphics tablet, I quickly worked up a new body, wings and
feet. You can see here how much I utilize as many features of Photoshop as I can when working on my sketches.
While all of this could be done without graphics software, I like to put my tools to work for me.
Here I am grouping all the layers of the sketch so far into a Layer Group folder, for easy management. I want to
keep the layers separate, but also don‟t need them to all be instantly accessible in the Layers palette. Grouping
the layers also allows me to reduce the opacity or apply other layer effects to all the layers within the Layer
Group as a whole.
Note how many layers I am using, even for this fairly simple character. By keeping all the elements on separate
layers,and working on copies of layers, I never have to waste time to go back and re-draw anything. Better safe
than sorry. RAM is cheap and if I want I can flatten or delete all the layers once I have my finished sketch.
The final cleaned up line art. This artwork will be used as a template in Illustrator when creating the vector art.
Next, switch to Outline Mode. Outline Mode is like a wireframe mode, where your vector paths will only show
up as lines, and no color fills or strokes will appear. This helps in being able to see your sketch template as you
work.
Step 16: Create The Vector Paths Using The Pen Tool
Since we worked on the sketch at 200 dpi, we have plenty of resolution to zoom in on the details to create our
vector art.
You can see here that the final line art sketch was created with the vector art in mind. Nothing was left to the
imagination at the final line art sketch stage, so when the vectors are created you do not have to figure out what
needs created. At this stage it‟s mostly a matter of tracing the outlines.
I use the Pen tool 99% of the time when working on the line art, and I create all my vector art by hand-no Live
Trace is used. Not only does creating the vector art by hand allow you to keep the number of anchor points to
the minimum, by doing so it also keeps the lines nice and fluid, allowing curves to flow and blend into each
other. This results in a much sleeker final illustration.
You‟ll also notice that I do not use the Calligraphic Brush tools. In essence I actually trace the line art as if they
were shapes. Primarily this is done to give me much more control of the tapering thickness of the line art, which
I just cannot achieve using a uniform tapered calligraphic brush (believe me, I have tried).
The key here is that each “corner” is actually a small curve. By making these corners small curves, when I go
back and add a central point between two “corners”, that anchor point had control points added and is
technically a very, very wide curve.
By switching temporarily to the Direct Selection tool by holding down the Command key (note that the Direct
Selection tool must be the last selection tool used before you switch to the Pen tool for this to work), I can then
quickly reposition the newly-added anchor point and snug it up to the arc/curve in the line art template sketch.
This technique is much easier than dragging it out while you create and trying to approximate the proper length
the control handles should be.
This technique is much easier to see than to explain, so I have put together a quick video demonstrating how it‟s
done.
Now switch over to preview mode, so you can see how the artwork is looking with the filled in areas. All the
overlapping, obscured line work is more obvious here. At this stage it‟s probably a good idea to save a copy of
the line art layer for backup, in case you need these full shapes later on.
Step 20: Erase Overlapping Shape Areas
To eliminate the unwanted obscured areas of the rear eyeball, select all the shapes comprising the rear eyeball
(outline, pupil and highlight), then switch to the Eraser tool (Illustrator CS3 & CS4 only). If objects are selected,
the Eraser tool will handily only affect (erase) the selected objects.
No, we aren‟t turning the bird into a flying purple people eater. I never fill in color areas with anything close to
the final colors, so I know to choose proper colors and to also make sure all the objects using the same color are
using a Global swatch. Using Global swatches allows me to edit the swatch, and have all the colors using that
swatch in the artwork updated at once.
All the color areas were created on a new layer, underneath the line art layer. This way, the line art sits on top
and the color shapes are underneath and on a separate layer. This allows for more flexibility when adding
shading later.
Another method of creating the flat color shapes is by using Illustrator‟s Pathfinder -> Unite feature on a copy
of the line art, and then releasing the resulting compound path so you can select each interior shape and recolor
as desired. Running the Offset Path feature with 1 or 2 pixels for the offset to add a bit of overlap could also be
done to ensure there are no gaps where the filled areas meet the line art. Place this layer below your line art
layer. It really depends on the illustration — this alternate method works great in some cases and not so great in
other situations depending on the structure of your vector art file.
Here I am consolidating all my “bird body” colors by first selecting the purple head shape, and then going to the
Select menu, then to the “Same” submenu, and finally selecting “Fill Color”. What I am doing here is selecting
one color, then automatically having Illustrator select all the other objects using the same color.
Once I have done this for all the colors in the bird, I can then go back and double click on the global swatches in
the Swatches panel and tweak the colors to preference.
By targeting the layer, we can then apply a Blend Mode to the layer, and this blend mode will affect all the
objects on the layer. This saves us time from having to set blend modes and opacities for each object on the
layer individually. I am setting the Blend mode via the (new to CS4) Appearance palette.
For the shading, set the blend mode to Multiply, and then also reduce the opacity to 40%.
You‟ll notice, if you look back at the Layer target that the circle is now filled in with a dark gray; this indicates
a Blend mode has been applied.
Now we can just create flat color shapes on this layer, and let the layer effect give us the desired results.
Typically the Multiply blend mode will allow you to use the same exact color you used for the flat color as the
shading color. Sometimes however you may need to create a new swatch and darken it up with a bit more K
(Black).
Note: if you are using a version of Illustrator without transparency (versions 8 and lower), you’ll need to just
create a flat color for the shading and skip the steps above.
Hopefully my thought process behind the separating of the line art and the flat color on separate layers is
making more sense now. With the shading layer sandwiched between the two, this allows us to have much more
flexibility and also not have to worry as much about precision since the line art layer sits above all the other
layers.
In the screenshot you‟ll see that my earlier tip about hand creating your vectors and keeping your anchor points
to a minimum comes into play here, making it much easier to grab just a single anchor point and tweak and
refine the line art where necessary.
Illustrator CS4 now has a “multiple artboards” feature, which I am going to use here so I can work on a copy of
the original art on it‟s own artboard within the same document.
This is a great example of why I like to create the elements of the artwork as full shapes as opposed to just the
visible lines. Making size revisions like this is much easier. Unfortunately, I did not create the artwork this way
(or already erased the parts which were full shapes) and I didn‟t save a copy of my line art layer as I
recommended earlier in this tutorial. I will thus need to go back and edit the line art manually. This is easily
done since I hand-created all the vectors in this artwork, as opposed to using the Live Trace feature. Live Trace
ends up creating too may stray vector points, and cleaning up and smoothing out the paths takes more time than
just hand-creating your vectors from the start.
On a side-note, this is also a good example of being able to step back and look at your artwork objectively, even
at the final stages. Ideally, the overall design would be worked out before you reach the vector art stage — but
never let that stop you from evaluating your creations and making sure they are achieving the goals they are
intended to reach.
Here I have selected all the vector objects comprising the beak, and resizing them. Next, I needed to go back
and rework the line art for the head to allow for the resized beak. Again, had I created the head shape as a full
circle, much of this editing would be unnecessary.
Since the end use for this project is an icon one can use on their website or blog to indicate a person‟s Twitter
account link, I wanted the mascot to be enclosed in a rectangular icon, and also to distinguish the bird as a
Twitter bird, I added the chat bubble to reflect the conversational nature of Twitter.
Voila! The final artwork is complete, and ready for use to tell the world you‟re using Twitter. The final artwork
is then exported to desired formats for use on the web. The final Twitter bird artwork files can be downloaded
here, and the ZIP archive contains a CS4 version, as well as a CS1 version of the Illustrator file. Also included
are three sizes of PNG icons for use wherever you need „em!