Adobe Illustrator Create A Vector Art Twitter Bird Character Icon

May 19 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…

Step 1: Scan Your Sketch

The initial step is to scan your rough sketch in to Photoshop (or your favorite pixel editing software). I am using OS X‟s Image Capture here, as the drivers for my scanner don‟t play nice with Photoshop CS4. 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.

Step 2: Open In Photoshop

Scanned rough sketch opened in Photoshop CS4 Step 3: Sketch Prep .

I will run a custom “sketch prep” Photoshop action (which you can download at my blog here). then copy to a new layer via the Cut feature (which gives you a nice white background layer) and then reduces the rough sketch layer to 20% opacity. or cut without having to worry about the background white.Now that the sketch is in Photoshop. I do however like to have the white background behind all the transparent layers so everything appears normal when sketching. pasted. I like to work on transparent layers when working on sketches in Photoshop so parts of the sketch can be easily copied. Step 4: Sketch Prep Results . do a “Select All” on your image. This Photoshop action will reset your color swatches back to the default black/white foreground/background colors. a new blank layer is created for you to start working on the sketch revisions. Finally.

I do all my sketching in Photoshop using a Wacom Intuos4 graphics tablet. Note the new layers in the Layers palette. This makes it very easy to get the right angle while you are working on your drawing. . You‟ll also note in this screen shot that I have used the Free Rotate feature in Photoshop CS4.The result of running the “sketch prep” action. which allows you to freely rotate the canvas on the fly while you are working with a document. I highly recommend investing in a professional-quality graphics tablet if you are doing graphics work on your computer. Step 5: Refine The Sketch — Drawing In Photoshop Next I start working on refining my rough sketch on the new blank layer.

which allows me to rotate and scale the layer. what I do on paper is just enough to get the basic idea worked out. but decided I didn‟t like the head-to-body proportions. I only need to hit Command-T to enable Free Transform. distort and reposition elements of the character in Photoshop to get the right proportions and design down.I always work by using a separate layer for any distinctive part of a drawing. Step 6: More Refining Using the Free Transform Tool Here you can see that I sketched the body of the bird. Step 7: Even More Free Transforming . 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. This is why I do not spend much time with paper on pencil. This allows me to resize. even with a single character. Because the body sketch was created on a separate layer.

and an entire new approach to the character. I use Free Transform mode on the head layer to rotate and move down the head closer to the body. .Again. I decided as I was working on this that I wasn‟t keen on having the character standing. Step 8: New Sketch Here we have an entire new body. as I didn‟t like how the wings were looking just flat at his sides.

I quickly worked up a new body. By keeping all the elements on separate layers.Sketching directly into Photoshop using the Wacom graphics tablet. Note how many layers I am using. Step 10: Create The Final Clean Sketch .and working on copies of layers. 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. RAM is cheap and if I want I can flatten or delete all the layers once I have my finished sketch. I never have to waste time to go back and re-draw anything. even for this fairly simple character. You can see here how much I utilize as many features of Photoshop as I can when working on my sketches. Step 9: Group Your Layers Here I am grouping all the layers of the sketch so far into a Layer Group folder. for easy management. but also don‟t need them to all be instantly accessible in the Layers palette. Better safe than sorry. I like to put my tools to work for me. wings and feet. I want to keep the layers separate. While all of this could be done without graphics software.

Here I create a new empty layer outside the previously grouped layer folder. This artwork will be used as a template in Illustrator when creating the vector art. Step 12: Create Your Illustrator Document . Step 11: Final Sketch The final cleaned up line art. to work on refining the line work in preparation for the vector art stage.

Points work best for me as far as increasing strokes and nudging objects. Step 13: Place Your Sketch As A Template In Illustrator .Now we move over to Adobe Illustrator. and I have some custom starting documents that are set up the way I like to work — CMYK mode with the units of measurement set to “points”. Here you see the new document dialog box.

The sketch created in Photoshop will be placed and used to trace the vector paths in Illustrator. well. template. Go to the File menu. the Photoshop sketch will be placed into Illustrator as a template for use as a. and scroll down to the “Place…” command.Next. Step 14: Check the Template Checkbox .

all automatically. Be sure the check the “Template” checkbox. Outline Mode is like a wireframe mode. Step 15: Work In Outline Mode Next. and no color fills or strokes will appear. Step 16: Create The Vector Paths Using The Pen Tool . The dark bezel you see around the dialog box is the OS X file and navigation utility Default Folder (highly recommended). This will place your Placed Image on a new layer. dim it to 50% opacity and lock the layer for you. This helps in being able to see your sketch template as you work. switch to Outline Mode. where your vector paths will only show up as lines.Navigate to the folder where your sketch is saved.

This results in a much sleeker final illustration. In essence I actually trace the line art as if they were shapes.Since we worked on the sketch at 200 dpi. which I just cannot achieve using a uniform tapered calligraphic brush (believe me. so when the vectors are created you do not have to figure out what needs created. You‟ll also notice that I do not use the Calligraphic Brush tools. Nothing was left to the imagination at the final line art sketch stage. we have plenty of resolution to zoom in on the details to create our vector art. I use the Pen tool 99% of the time when working on the line art. by doing so it also keeps the lines nice and fluid. Step 17: Quickly Create Smooth Compound Curves . At this stage it‟s mostly a matter of tracing the outlines. 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. allowing curves to flow and blend into each other. You can see here that the final line art sketch was created with the vector art in mind. Primarily this is done to give me much more control of the tapering thickness of the line art. I have tried).

so I have put together a quick video demonstrating how it‟s done. By making these corners small curves. that anchor point had control points added and is technically a very. I can then quickly reposition the newly-added anchor point and snug it up to the arc/curve in the line art template sketch. Step 18: Basic Vector Shapes Complete . This technique is much easier to see than to explain. when I go back and add a central point between two “corners”. you‟ll notice I am not dragging out the arcs in the curved areas as I encounter them along the line. The key here is that each “corner” is actually a small 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).Here is a nice time-saver: if you look closely in the screenshots. This technique is much easier than dragging it out while you create and trying to approximate the proper length the control handles should be. but rather adding a central point to the line after the fact. very wide curve.

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. Notice the eyes were created as full circles. All the overlapping. as was the bulk of the body. in case you need these full shapes later on. It‟s much easier to get a consistent. Step 19: Switch To Preview Mode Now switch over to preview mode. flowing line by creating even the obscured areas.Here. . so you can see how the artwork is looking with the filled in areas. and then erasing those obscured areas later. most of the line art vectors have been created.

the Eraser tool will handily only affect (erase) the selected objects. select all the shapes comprising the rear eyeball (outline. If objects are selected. then switch to the Eraser tool (Illustrator CS3 & CS4 only). pupil and highlight). Step 21: Final Line Art Complete .Step 20: Erase Overlapping Shape Areas To eliminate the unwanted obscured areas of the rear eyeball.

the line art sits on top and the color shapes are underneath and on a separate layer. and have all the colors using that swatch in the artwork updated at once. so I know to choose proper colors and to also make sure all the objects using the same color are using a Global swatch. All the color areas were created on a new layer. Continue to do this for all necessary objects. Step 22: Create The Flat Color No. I never fill in color areas with anything close to the final colors. This allows for more flexibility when adding shading later. This way. underneath the line art layer.Here the areas of the eye behind the beak were also erased. Using Global swatches allows me to edit the swatch. we aren‟t turning the bird into a flying purple people eater. .

and then going to the Select menu. and then releasing the resulting compound path so you can select each interior shape and recolor as desired. then automatically having Illustrator select all the other objects using the same color. Place this layer below your line art layer.Another method of creating the flat color shapes is by using Illustrator‟s Pathfinder -> Unite feature on a copy of the line art. and finally selecting “Fill Color”. Step 23: Select Same Colors Here I am consolidating all my “bird body” colors by first selecting the purple head shape. then to the “Same” submenu. 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. 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. Step 24: Create Global Colors . What I am doing here is selecting one color.

Once I have done this for all the colors in the bird. For now I leave the color as-is. which opens up the above dialog box.I then go to the Swatches panel and click on the “New Swatch” icon. Step 25: Final Color Complete . but the important thing here is to make sure the “Global” checkbox is selected (it will not be selected by default). I can then go back and double click on the global swatches in the Swatches panel and tweak the colors to preference.

Step 26: Prep And Add Shading .The final colors.

Next step is to add the shading. and then target the layer by clicking the small circle on the . Create a new layer.

For the shading. 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. Now we can just create flat color shapes on this layer. I am setting the Blend mode via the (new to CS4) Appearance palette. we can then apply a Blend Mode to the layer. Hopefully my thought process behind the separating of the line art and the flat color on separate layers is making more sense now.right hand side of the layer in the Layers palette. Note: if you are using a version of Illustrator without transparency (versions 8 and lower). and then also reduce the opacity to 40%. set the blend mode to Multiply. With the shading layer sandwiched between the two. this indicates a Blend mode has been applied. This saves us time from having to set blend modes and opacities for each object on the layer individually. and this blend mode will affect all the objects on the layer. if you look back at the Layer target that the circle is now filled in with a dark gray. 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. You‟ll notice. Step 27: Tweak Your Line Art . Continue to add all your desired shading. By targeting the layer. You can tell the layer has been targeted by the outline seen around the circle. Sometimes however you may need to create a new swatch and darken it up with a bit more K (Black). you’ll need to just create a flat color for the shading and skip the steps above.

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. Step 28: Duplicate Your Art With Multiple Artboards . making it much easier to grab just a single anchor point and tweak and refine the line art where necessary.Now we are going to go back and tweak our line art. which we can see better in the overall final artwork with the color and shading applied.

Making size revisions like this is much easier. 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. Unfortunately. I will thus need to go back and edit the line art manually. This is easily .Typically the artwork would pretty much be done at this point. Just as the name “Twitter” has a bit of a “cute” ring to it. however while I was looking at this artwork I realized I did not like the size of the bird‟s beak in proportion to his head. more cute feel. and after looking at the color art I realized a smaller beak on the bird would give it a younger. 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. Illustrator CS4 now has a “multiple artboards” feature. 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.

Ideally. and cleaning up and smoothing out the paths takes more time than just hand-creating your vectors from the start. this is also a good example of being able to step back and look at your artwork objectively. and resizing them. Step 29: Beak Tweaking Here I have selected all the vector objects comprising the beak. On a side-note.done since I hand-created all the vectors in this artwork. Step 30: The Final Character Art . had I created the head shape as a full circle. 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. Next. Live Trace ends up creating too may stray vector points. Again. even at the final stages. as opposed to using the Live Trace feature. much of this editing would be unnecessary. I needed to go back and rework the line art for the head to allow for the resized beak.

I think you‟ll agree the smaller beak is working much better. Step 31: Add The Background Elements 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. .The final reworked art. and also to distinguish the bird as a Twitter bird. I wanted the mascot to be enclosed in a rectangular icon. I added the chat bubble to reflect the conversational nature of Twitter.

as well as a CS1 version of the Illustrator file.Voila! The final artwork is complete. and the ZIP archive contains a CS4 version. and ready for use to tell the world you‟re using Twitter. The final Twitter bird artwork files can be downloaded here. The final artwork is then exported to desired formats for use on the web. Also included are three sizes of PNG icons for use wherever you need „em! .

Sign up to vote on this title
UsefulNot useful