Sites Used in this comic

• Owltastic – by Meagan Fisher
• 37signals

Other posts about contrast:

• Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
• Contrast and Meaning
• 10 colour contrast checking tools to improve the accessibility of your design
• Colour Contrast Check
• How C.R.A.P is Your Site Design?

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Start sketching the image you want to draw in a new layer. In this tutorial, I choose to draw futuristic aircraft fighter. I used the Brush Tool in Illustrator to do that. I named the layer “SKETCH,” then locked the layer.

Step 2

Since I will trace the sketch using a black stroke so I change the outline color to orange.

Tips: never use an outline color the same as the sketch, as you will have difficulty in differentiate them when tracing.

Step 3

Start tracing the body with the Pen Tool in a new layer above the “SKETCH” layer. I named this new layer “main body.”

Step 4

Do the same thing for other parts of the aircraft. As you can see, I divided the object into five different parts, each on a different layer.

OK, this is what the finished outline looks like.

Step 5

Next thing to do is rendering the aircraft. I choose to start from the most dominant part, which is the body. Apply the gradient to it simply by clicking the Period key in your keyboard. Using the Gradient Tool (G), drag the cursor from upper-left to bottom-right. Set the stroke color to none.

Step 6

Go to Gradient panel and change the orientation type to “Radial,” also you might want to change the color combination. I used the colors shown below. Don’t forget to save the colors in your Swatch panel.

Step 7

I want the gradient to have a much deeper color so I added a new slider somewhere in the middle between the two sliders closer to the dark than the bright one. Next, I switched the place of the new slider and dark blue slider. Now add this gradient color to the swatch panel.

Step 8

After I have the basic gradient color, now it’s time to add some lighting effects. I’m planning to set the light source coming from the right side of the aircraft. Create two shapes as shown below. Fill the small one with white and the bigger one with dark blue. Then blend the shapes (select them both and go to menu Object > Blend > Make). Place it above the body below the canopy.

Step 9

Now we have this look where the blended shapes don’t blend smoothly enough to the background, it’s too obvious that they are two separate objects. To have it perfectly blend, there’s a simple trick technique to use.

Select the bigger shape using Direct Selection tool (white arrow), then set its Opacity to 0%. The reason why I fill the bigger shape with the same dark blue is so the yellow blends perfectly to dark blue background. This is the key technique that we will use to create the similar highlight or shadow effect.

I’m planning to have the aircraft flying in the afternoon when the sky becomes yellow-orange, so the overall highlights on the aircraft should be more yellowish. I changed the white to yellow at 24%.

Step 10

Use the Pen Tool to draw the highlighted areas of the aircraft shown below. Now fill them with a yellow to dark blue gradient, and don’t forget to add the gradient to your swatches palette.

Step 11

As for the highlighted area on the wing, use the same technique as in Steps 8 and 9.

Step 12

Add some shadow area on the left of the main body. this will make the body have more dimension. Use the Pen Tool to draw the shadow area, then fill it with a yellow to dark blue gradient, and set the Transparency to Multiply.

Play with the gradient if you are not satisfied with the result.

This is the look I have so far.

Step 13

Add a shadow area on the wing.

Step 14

Now it’s time to work on the under body of the aircraft. I used the same treatment as I did with the main body; the gradient, highlights, and shadows. And add some necessary parts on it, as shown.

Step 15

Next is the canopy. Fill the canopy with a three colors linear gradient that goes from yellow to blue to white, as shown below. Use the Gradient Tool (G) and drag it from upper-left to bottom-right.

Step 16

Create simple lighting effects on the top-corner of the canopy by using the Pen Tool and fill the shape with white.

Step 17

Create a basic glossy effect. Copy the canopy and paste it in front, then fill it with white. Intersect the white canopy with an ellipse shape, then fill the new object with a warm yellow. Copy another canopy in front of the new object, and fill it with a black to white gradient. We’re going to use it as transparency mask.

Step 18

Select both the new shapes and make it an opacity mask by go to transparency panel, click the drop down menu and select Make Opacity Mask. Since they are stacked, it is difficult to select them both using the Selection Tool (black arrow). So, click the circle icon on the right side of the sub-layer, it will automatically select the object.

Step 19

This is what we have so far. I think the canopy looks like its made from metal. That’s not the look I want so I change its gradient color to a blue to green gradient to have it looks like its made of glass.

Step 20

Add some necessary parts to the aircraft.

Step 21

Now move to layer “Fin 1″ and color the fin.

Step 22

Add some necessary details as shown below.

Step 23

Now I’m going to add a shadow of the fin dropped on the wing area. Create two similar shapes with different sizes, as shown below. Fill the small one with black and the big one with white. Blend the shapes and set the Transparency to Multiply. If you’re not happy with the result, just adjust the anchor path using the Direct Selection Tool until you’re satisfied with the result. Then send it to back.

Step 24

Now I add more lighting effects to the body. I also tweak the gradient of the body a little bit; I turn the direction from upper-left to bottom-right into from center spreading wide.

Step 25

Add a rocket launcher at the side of the body. Create two ellipses as shown below. Adjust the angle so it can fit to the body, fill the small one with black, and set dark blue as the stroke. For the bigger one, fill it with a dark blue to black gradient and set the stroke to blue.

Step 26

Color the other fin.

Step 27

Perform any necessary lighting adjustments.

Step 28

This is the final rendering of the aircraft, after adding a stylized highlight across the glass.

Step 29

Next I’m going to make a rocket burst at the tail of the aircraft. First make an orange background in a new layer, and put it below the others.

Step 30

Create three shapes with different sizes and colors (yellow, orange, and white) as shown below, then blend them. Turn the Opacity of white object into 0% (use Direct Selection tool to grab it). Make sure you create this rocket burst in the “Main Body” layer.

Step 31

Now place the burst where it should be, adjust its size and angle. Seems that the burst doesn’t blend smoothly enough to the background; we can still see a little bit of white color in it. So I decide to change the color to yellow at 100, by keep the Transparency at 0%. There are other ways to have it blend to the background; adjusting background color, playing with transparency blending, playing opacity, etc. Experimenting is the best way to get the result you want.

Look at the cool reflection effect it has on the rear side of the aircraft!

Step 32

Now the last step is adding graphical elements to background. In this tutorial I add speed lines in a Kirby’s brush style. Also, I adjust the aircraft’s size and angle.

Final Image

Save your file. The final image is below. Have fun applying these techniques in your own work!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Create a new document that is 11" wide by 8.5" tall. The color mode should be set to CMYK to ensure that colors are printable. Set raster effects to 300ppi for the highest quality print results.

Next, set up your layers. I like to start with a layer named after the character (in this case, "Suko"), with these sub layers:

• g – for character-specific guides (optional)
• d – for top details and line work
• sh – for shading and shine details that will be filled paths
• c – for color and shading with Live Paint

Feel free to use longer names that make more sense to you. You should also create a template layer at this point for your foundation drawing. I dim mine to 60% and set to unprintable in case I forget to delete it.

Center the template image on the artboard and lock your template layer. My pencil sketch is available here. I used a reference for the pose, but the clothing and character design are original. Suko is a character from my comic series, Green Corner.

The swatches for this file, if you’d like to use them, are available here. They are labeled and organized, so it should be easy to tell what each swatch is for. Note that the "main blue" swatch is a spot color so that I can use tints of it.

Step 2

With the “d” layer active, start drawing with one of the calligraphic brushes with a black stroke set to 0.05 pt. Using a small stroke weight allows for a more delicate line. The brushes are angled to give subtle line variation. If you need a copy of the brushes, you can download them here.

It’s easiest to start by drawing simpler lines first and leave the finer details such as facial features until later. I use the Pen Tool for drawing most lines. Use your pencil sketch as a guide, but don’t be afraid to make corrections if you feel a line will look better if adjusted. Switch between the two brushes as necessary, if you find a line to be too thin or thick in a certain place.

A note about using these brushes: If you get the variation you like from a brush, but the weight needs adjusting, then adjust the stroke weight slightly for that path. Try 0.03 pt for finer lines, 0.07 pt for thicker lines. If a path has an unusual thickness in a certain area (like around the fingers and pointy ears), cut the path on a point with the Scissors Tool (C). Cutting on a point helps maintain the integrity of the path but can give you more control over the line quality.

Step 3

Sometimes it’s easiest to draw a continuous line and then cut out the section you don’t need to be visible. The guide through the leg in the image below represents a continuous path that was cut, with the cut section converted to a guide (Command + 5). I move all character guides to the “g” layer as they are created. Make sure you’re back on the “d” layer before you continue drawing.

Step 4

For the eyes, I used the Ellipse Tool to create the iris, pupil, and shine. Remember to cut off and delete the excess of the iris. Alternatively, you can draw the sides of the iris with the Pen Tool. Depending on the view of the face, the Ellipse Tool may not be useful for the iris.

For symmetrical and nearly identical features, such as the eyes and eyebrows, draw one and copy. If you need to flip the copy, use the Reflect Tool (O) and hold down Option while flipping to copy. Then adjust with the selection tools as needed by moving, rotating, and reshaping. The image below shows the process of drawing one eye and eyebrow to creating two of each.

Step 5

Your line work should be mostly done at this point and look something like the image below. Continue adding some more details, like the rose on its own layer above (using the same sub layer structure), but don’t draw the thorns yet. Also, add the belt buckle by using the Rounded Rectangle Tool and the Subtract From Shape Area button in the pathfinder palette.

Step 6

Now is a good time to make sure that the facial features are correct. Unlock and show everything on all layers and sub layers. Rotate everything 90 degrees clockwise with the Selection Tool (V), while holding down the Shift key.

Adjust the facial features as needed, but ignore how the brush styles look altered. Use outline view (Command + Y) to see the paths without styles if that helps you while adjusting. I changed Suko’s expression at this point to a slight smile. When you’re happy with the changes, rotate everything back to the original position.

Step 7

When the line work is done, select and copy all of the paths on your “d” layer. Just click on the circle on the right side of the layer to select all paths on that sub layer and press Command + C. Then lock all the layers you are not using and activate the “c” layer. Make sure that Paste Remembers Layers is off.

Paste the copied line work on the “c” layer and delete the belt buckle. Compound paths can’t be added to a Live Paint group. Then, select everything on the “c” layer and convert it to a Live Paint group by pressing Command + Option + X. You may receive a warning about brush styles being discarded. This is why our line work is on a separate layer.

Step 8

Once you have your Live Paint group, hide your other layers. Then, use the Direct Selection Tool (A) to select any superfluous paths that you won’t need for Live Paint and delete them. Once you’ve deleted all the extras and top details, it should look like the image below.

Step 9

Select your Live Paint group and set the fill and stroke to none. Press the Forward Slash key then X then the Forward Slash key to do this quickly. Make the “d” layer visible again, but make sure only the “c” layer is unlocked. Now you can use the Live Paint bucket (K) to fill in your flat colors. Fillable areas are highlighted with a red outline, like in the image below.

Step 10

If a path doesn’t seem to fill correctly, pull points with the Direct Selection Tool (A), or extend paths with the Pen Tool (P), as shown in the image below. Outline view is very helpful for this, so switch back and forth as you need to by pressing Command + Y.

You may find it easiest to have the Live Paint group deselected and to view in normal view when filling areas. Sometimes the fill color won’t stick in outline view or if any paths are selected.

Step 11

After a while, your flat color should look something like the image below. The belt buckle is on the “d” layer above and filled with a gradient. Use the Gradient Tool to adjust the angle of the gradient. Don’t forget to change the fill color for the eyebrows and paint the irises.

Step 12

Use the Pen Tool to draw in lines for the whites of the eyes. The fastest way to do this is to click on an end point of the lower lash line then continue the path up to the upper lash line. Deselect by pressing Command + Shift + A and do the other side. Make sure to do both eyes.

When you go back to normal view, you may want to adjust the positioning of the points for the eye whites, so that they don’t awkwardly extend past the lash lines.

Step 13

Now we can move on to shading. Lock your “Live Paint” group and choose a bright color that you are not coloring with. I usually use pink. Make sure you have no brush selected and set your stroke to 0.25 pt. You need to see the lines, but you don’t want them too thick as you need to make sure the shaping is correct.

Draw outlines for the areas where you will add your shading. Some areas are easier to create shading outlines for by copying existing paths, ignore those for now. If you shaded your sketch well, use outline view to use your sketch as a guide. When you’re done outlining, use the Magic Wand Tool (Y) to select all the paths.

Step 14

With your shading paths selected, press the Forward Slash key to change the stroke to none then send them to the back of the layer by pressing Command + Shift + Left Bracket key. Unlock the “Live Paint” group and drag your selected paths into it.

The easiest way to drag them is to select the square on the right side of the layer (see the topmost red square in the image below) and drag that into the Live Paint group. When done correctly, you will see only your “Live Paint” group in the layer, but your paths will still be selected.

Step 15

Deselect the paths and fill with your shading colors. Make adjustments as needed if there are gaps between paths that prevent you from filling. When the bulk of the shading is completed for Live Paint, move to your “sh” layer to start adding extra details.

I like to add a shaded accent to the eyes (alternatively, the accent can be lighter than the iris), and add small shading paths for the lips and the nose. You can also add shiny details to the skin and clothing. Use shiny accents on the skin minimally, you usually don’t want you character to look like they have greasy skin.

Step 16

To make the line work more subtle, you can go back to your “d” layer and start cutting your paths (but don’t delete anything) any time a line crosses an area of one color to another. then, select the lines for an area and change the stroke color to be a little darker than your shading color. Leave the pupils black. You can use a dark brown for the eyelashes. Note that a really dark brown may print as a rich black.

For the hair shine, use a white fill set to 60% transparency on the “sh” layer. Having the hair shine below the line work allows the lines to remain dominant while you add dimension.

Step 17

Suko is wearing jeans, so let’s fix the details on his pants to add some thread. Select the paths you want to change and discard the brush style. Then change the color to a dark yellow or light, warm brown. Set the stroke weight to 0.5pt with a 2pt dash and 1pt gap. You can also draw any additional paths you want to look like thread.

Step 18

The rose is drawn and colored the same way as the rest of the art. However, you will need to copy some of the paths from Suko’s “d” layer to overlap the edges where his fingers touch the rose. Cut off and delete any excess.

For the thorns, I draw little chevrons that overlap the stem. The thorns will use the same base color and stroke as the stem. The image below shows the thorns overlapping the stem in outline view and the initial shading. You can add some shine details to the rose as well. Use a pale pink for the shine on the rose petals, and use the skin base color on the leaves set to 60% transparency.

Step 19

To create a shadow for the character, there are two methods. Either you can use the “live paint” group to create a drop shadow (set to multiply and 40% transparency), or you can create a shadow path. If you want to be able to rotate or modify the shape of the shadow, you need to use a path for the shadow.

Since I want to rotate and modify the shadow shape, I copied the outer paths from the “d” layer and pasted them onto a new layer below all other layers, the “shadow” layer. Convert these paths into a Live Paint group and fill with a single color (I used a 40% gray).

Make sure you leave the appropriate blank holes that coincide with the art above. When you’re done filling, expand the “Live Paint” group by clicking the Expand button in the top toolbar or selecting Object > Live Paint > Expand from the menus. Then click on Merge in the pathfinder palette to remove any overlapping paths and simplify the shape. You will now have a compound path. If there are any stray points in the middle of your compound shape, select them with the Direct Select Tool (A) and delete.

Step 20

Soften the edges of the shadow by selecting Effect > Stylize > Feather from the menus. Set the feather radius to 10 px. Adjust the positioning of the main shadow path and scale to 99% horizontal, 95% vertical (Object > Transform > Scale).

Rotate the path slightly. Use the Ellipse Tool to create a shadow for the rose. Set the feather radius to 8 px, and don’t forget to move the path a little below the rose.

When you’re done, it should look something like the image below. Remember to set your shadows to multiply if you will be adding a background. Depending on your background color, you may also want to adjust the fill color of the shadows later.

Step 21

Now’s the time to double-check that we haven’t missed any details.

We’re missing the shading cast by Suko’s hairline, so we’ll add that now. Lock your “Live Paint” group. Unlock the “d” layer and select only the paths you need to copy for one area (e.g. the hairline), copy them and re-lock the layer.

Then, paste in front on your “c” layer and offset the paths by moving them with the Selection Tool (V). You may want to discard the brush style and change to a pink stroke again. Cut off any excess of the paths you just moved. When you have deleted all the excess, select the paths with the Magic Wand Tool (Y) and drag to the “Live Paint” group as before. Now you can fill in the shading for that area. Fix any gaps as needed.

Conclusion

And here’s the final image with a simple, gradient background. You can use a more detailed background if you prefer. I hope you enjoyed this tutorial and learned something new!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Introduction

I should begin by saying that my reference to comics covers a much broader definition than just comics. More accurately we would refer to Sequential Art, comics being just one member of the club. So what I’m really referring to are comics, comic strips, graphic novels, story boards and so on. This is something discussed at length by Scott McCloud in his book Understanding Comics. His definition serves to ensure that all appropriate media (even Egyptian hieroglyphs) are included, but carefully excludes art forms such as animation and the written word.

What’s this all about?

Well, while we’re discussing definitions, it should also be pointed out that what you’re reading is more an article than a tutorial. Don’t worry, towards the end you will be rewarded with some useful techniques for comic book creators using Adobe Illustrator, but this article takes a more theoretical approach. We’re looking at the decisions which you, as comic book artist, will need to make when designing. More specifically, we’ll look at three essential building blocks of a comic book, starting with..

..The Page

We all know comics strips. The format is familiar and logical. More often than not a short series of frames read from left to right, beginning to end. This is certainly the case in Western culture where newspapers pushed comics into mainstream from early on in the last century. Their restrictive format arguably moved the comic strip towards the genre we know today.

You’ll be presented with more options (and therefore decisions) regarding page layout as the strips become larger, but what is the purpose of these decisions? The ultimate goal for sequential art is to communicate effectively and engage the reader for long enough to do so. The impact a page composition can have on this goal is not to be underestimated!

Page composition is something which you’ll need to face, just as composing your illustrations. General aesthetic (not to be confused with General Anesthetic) is crucial, but as mentioned, keeping the readers’ interest in the story is key.

Unless monotony and regularity are a deliberate part of the scene you’re setting, variety in your page layout will keep things mixed up nicely. Panel size and position, color and panel type can all be varied. An open panel punctuating others with borders, or components of your drawing breaking free of the fourth wall are typical methods for adding dynamism to the page.

For greatest effect however, these techniques should be used where appropriate and not dominate the page. Aside from losing the resonance of the intended effect, too much variation could likely ruin the page flow.

Don’t Make Me Think! – the phrase coined by Steve Krug upon which he based his book, actually refers to web usability. People expect certain things to behave in certain ways. Often, when their automated process is interrupted by having to stop and wonder what to do next, their interest wanes and whatever they were doing has lost them as an audience. Steve Krug of course is focusing on how users encounter web sites, but the principle remains the same for comic books. As I’ve mentioned, Western readers will assume a left-to-right, top-to-bottom flow. This represents the passage of time as is familiar to us, giving chronology to the sequence:

This is a logical first example, demonstrating flow at it’s simplest. The following example flows equally well, but adds an element of interest by breaking up the composition to engage the reader a little more:

This third example however, is less successful. The flow is interrupted by an illogical panel layout, forcing the reader to stop and think:

With the page composition drafted, the image layout fresh in your mind, your attention will move closer to…

..The Panel

A panel, or frame, focuses the readers attention. It dictates what should be read at any given time and helps prevent the readers eye from wandering aimlessly across the page. Panels also control one of the most important aspects of sequential art……………………….. tempo. Where written prose has punctuation, comics have panels. The way in which panels dictate timing is as much responsible for atmosphere and mood as the content itself.

Take the following example of someone first considering, then taking a bite from his sandwich:

Now let’s look again:

A subtle difference in the length of the introductory panel in the second example forces the reader to take longer over the sequence. Ours may not be the most complex ever written, but the plot has taken on a more contemplative mood. Our man is literally taking longer to think before eating. The extra space has also reduced any restrictive feeling of claustrophobia, adding a certain calmness to the sequence.

Japanese Manga comics in particular often explore the passage of time within and across panels. A common technique uses what Scott McCloud describes as Aspect to Aspect transitions. This is one of six transition types recognized by McCloud when moving from panel to panel. Aspect to Aspect refers to frames which show different aspects of the same moment in time. By exploring several aspects of one moment, time passes more slowly.

Action to Action is another of McClouds six transition types and moves the plot along more swiftly. Take this for example:

The reader is left to make quick conclusions and assumptions, keeping the story-line tempo high. These two key moments of a narrative have been chosen for their effectiveness in communicating the plot – in just two small panels we’ve been quickly told what’s happening and now we can move on. Mind you, what exactly have these two panels communicated? We know our subject was perfectly happy to begin with, then something happened within the gutter (the space between panels) and he finished up soaking wet.

Perhaps the preceding story-line prepared us for it – if we know his background situation and environment we might know exactly what happened. Otherwise we’re left to draw from common experience and make an educated guess as to what happened. When neither is possible it’s up to the story teller to make sure we know what happened. An additional panel between these two could illustrate the action of our friend getting wet, more effectively, a third panel could clarify any doubts we had whilst serving to take the plot further..

The role of the readers’ imagination in filling in the blanks is referred to as closure and is key in comic story telling. A clever artist will suggest what’s necessary then leave the crucial details to the mercy of the readers’ creativity.

Stimulating the readers mind keeps participation high and keeps the pages turning..

..The Text

Lastly, we come to the text. Comics are a mixture of words and pictures and the two should be mutually complimentary, neither should dominate the other. As a comic book artist, staring at a blank panel with the prospect of having to communicate something, you’ll be presented with a words vs. pictures decision. How heavily are you going to rely on words to put your point across? Could pictures portray what you want more efficiently?

As Scott McCloud again points out in Making Comics, there is no right or wrong. You should keep the word count in mind; heavy word density kind of misses the point of comics and isn’t what your reader is looking for. However, by relying on words to convey a plot, your pictures are granted more freedom to play.

Let’s look at our damp friend again. The following two panels communicate the same point, one relying on pictures, the other on words:

A lack of text in the first gives emphasis to the drawing; we observe our man in angry, solitary silence. The second panel uses text to tell us what’s going on, giving the imagery scope to explore other aspects of the scenario. A combination may bring out the best of both, reinforcing the message:

Purists may tell you that imagery is the real strength behind comics – certainly, a comics strength lies in its total visual impact. As such, the words vs. pictures conundrum is up to you to resolve.

So why handwriting? It’s true, handwriting is often used for lettering in comics and this more than likely stems from its visual connection to the illustrations themselves. Of course, the handwriting is usually digitally created, giving consistency and legibility, but it remains inconspicuous – it doesn’t distract. We’re back to that do not disturb the reader again. Text which suits the drawing style and conveys its message clearly is unlikely to pull attention away from the story telling. It is as much a part of the image as the illustration.

For this reason, text, as an element of a graphic image, can also be graphically manipulated. This luxury belonging to text as part of an illustration, can be used to further emphasize, suggest and persuade. Emboldening and enlarging for example, gives resonance to the words, adding sound to what Will Eisner refers to as the readers ear. Implying sound through displaying text graphically is yet another tool in the comic book artists box for telling a story.

The text balloon is a familiar vehicle for delivering text and, again, differences in style influence the way the story is told. We, as readers, interpret them almost subconsciously. Try yourself; which of these examples is thought, rather than said? Which is emitted from a radio or TV set? Which is being typed as we read it?

Of course, the content and typeface give us a clue, but the point is that a message is communicated through the combination of text, image and the power of suggestion. Now it’s time to get your hands dirty.

Speech Balloon Live Effect

OK, you’ve been patient enough. It’s time for a bit of practical tutorial knowledge, here we go..

Adobe Illustrator is a useful application for building comics owing to its layout and text features as well as all the illustrative bells and whistles it has. Whilst it may not be the most appropriate tool for laying out an entire graphic novel, Illustrator can help your comic book creation in a number of ways; copying and pasting, path and stroke effects, resizing and so on. Live effects are particularly useful and the following steps will demonstrate how such an effect can transform any lump of text into a comic book Speech Balloon such as I’ve been using for quotes within this article.

Step 1: Text

Place some text on your Artboard – it doesn’t matter what, or how much – once we’ve made the effect you’ll be able to apply it to any text. Align the text centrally as shown:

Step 2: Font

It’s time to choose your font. Should you need them, here are a few quality free fonts ideally suited for comic body text.

Clementine

VTC letterer

Laffayette

Alternatively, the font used by Scott McCloud throughout his work and based on his own handwriting is available at a reasonable price from www.comicbookfonts.com.

ScottMcCloud

Once you’ve decided on your font, download it, install it on your system and apply it to the text on your Artboard. I’ve opted for the Italic Clementine and increased the tracking for legibility. I’ve also added a pale grey rectangle to the background and locked it (Command + 2). This will improve visibility while we’re working.

Step 3: Appearance

Now’s where it starts to get interesting. With your text selected, remove any fill color it may have then refer to the appearance panel. Open the Appearance panel menu and choose to Add New Fill. You’ll see it added to the Appearance panel, mine is 90% Black and this will be the main color of my text.

Step 4: Second Fill

Repeat the Add New Fill steps to make a second one. Color this fill white and ensure that it’s placed beneath the first fill in the Appearance panel. You won’t see any difference in your text yet.

Step 5: Convert to Shape

With the white fill selected in the Appearance panel, go to Effect > Convert to Shape > Ellipse. In the Convert to Shape dialogue choose relative extra width and height of 9px. This will create a balloon 9px wider and taller than the text. Should our text size increase or decrease, so will the balloon.

Step 6: Bulge

We’ve made quite a thin balloon around our text, now let’s refine the shape a touch. Keep the white fill selected in the Appearance panel and go to Effect > Warp > Bulge… Apply a vertical bulge of -50% to squash the sides of our balloon in slightly. Click OK.

Step 7: Duplicate

The Appearance panel now clearly shows your Type object comprised of two fills, the second of which has a series of effects applied. Now we’re going to add a third fill which will act as our outline, so duplicate the white fill using the Duplicate Selected Item button. Again, you won’t see any difference in the text yet.

Step 8: Offset Path

Okay, let’s start editing our third and final fill. Begin by changing the color (mine is 90% Black, just as the text) and then go to Effect > Path > Offset Path. The amount to which you offset the path of this fill effectively determines the stroke around your balloon. I’ve chosen 2px.

Step 9: Tail

To finish off the look of our balloon, let’s add a simple tail. Three clicks of the Pen Tool will give you an open path in a V shape. Fill it white and give its stroke the same color and width as the stroke around your balloon (in this case 90% Black and 2px). Place the tail overlapping the balloon somewhere and your effect is complete.

Conclusion

Of course, this is a live effect and can be applied to any text. It will resize and scale seamlessly:

By double-clicking any of the effects in the Appearance panel, their settings can be edited. This could be useful for differing balloons in your project.

In order to save your effect for future use, open the Graphic Styles panel (Window > Graphic Styles) and whilst your finished text balloon is selected, click the New Graphic Style button. Select your new style from this panel whenever you want other text to become a speech balloon.

Thirsty for more?

The subject of how and why comics do what they do is HUGE, I’ve only just scraped the surface with this article. If you’re interested in more (and wish it to be told by the masters) there are one or two books you should definitely read. I’ve quoted Scott McCloud and Will Eisner on a number of occasions and with good reason. Will Eisner is credited as being the pioneer of Graphic Novels after publishing his acclaimed A Contract with God and few people have studied comics as a discipline like Scott McCloud. Even the non-comic fans amongst you will likely have seen his work after his recent promotional piece for Google Chrome – who said comics couldn’t be taken seriously?! In any case, here are a few of their teaching publications which can be highly recommended:

• Scott McCloud – Making Comics
• Scott McCloud – Understanding Comics
• Will Eisner – Graphic Storytelling and Visual Narrative
• Will Eisner – Comics and Sequential Art

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final cartoon strip we’ll be working towards. Before starting you should have a pretty good idea of how to use Illustrators pen tool. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just $9/month.

Step 1

Before opening up Illustrator start with a quick pencil sketch. We’re going to use the Pen Tool to trace over the lines to give the cartoon a polished feel. The sketch doesn’t have to be perfect, it’s just a point to work from.

Import the scan onto the artboard and then set the transparency to about 25%. The transparency makes it easier to see the lines you’re drawing on top of the sketch.

Step 2

Before we start tracing, we’re going to create a set of brushes that will give the outlines a more traditional ink look. I used the Pen Tool to make some shapes that look like rough lines. The width is varied in spots to give the strokes a personality.

Step 3

Once your happy with some of the line shapes, convert them to brushes. Start by selecting the shape, then go to the drop-down menu of the Brushes Panel and select New Brush. There are four brush options. We’re going to make an Art Brush. Once you select Art Brush there are more options, but we just need the default settings.

Step 4

When we start tracing with the Pen Tool we have the Stroke set to black with no fill color. There are a couple exceptions, the eyebrows have a fill so that we don’t have to break the line around the character’s head.

Step 5

Once you get a couple lines drawn, open up your brushes again (F5). Add some of the custom brushes we made earlier to the strokes. This is trial and error. On shorter strokes some of the more detailed brushes might not look right. You can adjust the weight of the strokes to give some elements more importance.

In the example below, I added a thicker line (2 pt stroke) around the head and a lighter stroke (0.6 pt stroke) to the chair to draw attention to the more important elements.

Step 6

Once all the strokes are drawn in, it’s time to add some color. Start by creating a new layer under the strokes. Then using the Pen Tool to start outlining the shapes on that new layer. It’s not a bad idea to lock the layer that your strokes are on so that you don’t accidentally close shapes while adding color.

You can move fast coloring because the black stokes hide the edges of your color so you don’t have to be super exact with your points. We’re using solid colors on these examples, but gradient color fills can look really sharp if used right.

Step 7

On a new layer you can add more detail. Here I’m using darker shades to add a little depth to the flat color.

Step 8

This is usually where I start deviating from the sketch and add some personality. Brad Dielman (the character on the right) just looked funnier when I made his hair bigger and his eyebrows disjointed. The smoke and burnt spots are black fills with the transparency set between 10% to 15%.

Step 9

What’s a comic without words bubbles? I like nice symmetrical shapes so I used the Ellipse Tool (L) to draw a shape. Add three points to the bottom of the ellipse and drag down the middle of those three points down towards the character who’s talking. Use the Anchor Point Conversion Tool (Shift + C) to bring our talking bubble to a point. After the shape looks good, add one of your custom brushes to the shape.

Step 10

Now lets add some Text. There are some great comic fonts out there, Comic Sans isn’t one of them so I’m using Samovrava for the text.

Step 11

That gives us one frame, five more to go. For this strip I use the same base artwork for each frame, then I modify the parts I need to tell the story. Once all the frames are drawn, I need to align them and add borders to each.

Step 12

As you can see, the edges are still sloppy. We’re going to use a clipping mask to clean up the artwork. To make a mask all the shapes and strokes need to be grouped, before doing that it’s a good idea to duplicate your artwork. Once you group a bunch of shapes, they all get pulled into one layer, which makes it difficult to change down the road.

Step 13

Highlight all the shapes and strokes in one frame and group them (Command + G). Next, draw a box over the top of that group. Below you can see I changed the transparency of that box so I could see the artwork underneath. Select your grouped artwork and the shape you drew over it, then make them into a mask (Command + 7).

Final Image

The mask will crop out all the overlying shapes and give the panel a nice clean edge. Then you can add a border to it by drawing another square over the artwork and adding one of the brushes to the stroke.

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

The image below is what we’ll be working towards.

Step 1

These comic book images recreated a printing process using what became known as Ben-day dots. Equally spaced and sized dots in the four printing colors were layered to produce other shades. In any case, the effect was best put to use with limited colors so we’re going to put together a palette of only seven swatches plus black and white.

Drag the following colors (here shown in hex-values) from the color panel into the Swatches panel.

• #FCE354 – Hair
• #E27D89 – Lips
• #E04359 – Tongue
• #2489ED – Eyes
• #FF8048 – Blouse
• #000000 – Black
• #FFFFFF – White

Double-click on the swatches once in the Swatches panel and name them accordingly.

Step 2

We need to complete our palette by adding the two Ben-day dots patterns. These will fill the background and the skin. Illustrator offers hundreds of patterns, but building your own gives you huge freedom. These simple dots are a perfect way to learn.

Begin by selecting both View > Show Grid and View > Snap to Grid from the top menu. These options will make it easier to be precise when creating our patterns.

Step 3

Using the Ellipse Tool, draw five perfect circles of equal sizes. Then position them on your grid, as shown below (with the Snap to Grid turned on you should manage this with your eyes closed!)

Step 4

These dots form the basis for our pattern, but to ensure that they tessellate (tile) properly, we need to define the edges of what will become the swatch.

Draw a square following the darker line of the grid, intersecting the center of your four outer circles. Ensure the square has no fill color and no stroke color, then right-click it, and send it to the back of your tile objects.

Illustrator will recognize this object as the area to be repeated, anything which falls outside (such as three quarters of each of the outer circles) will not be included in the pattern.

Step 5

Select your transparent square, copy, and then paste it in place (Edit > Copy, Edit > Paste in Front). Give this copy a color of #4EACF9 and then color the dots #ABE0F4. Duplicate the whole thing, color it #F2C8BF, and color the dots #D3A09B. Select the objects of each one and group them (Object > Group), making two separate groups.

Note: These colors don’t represent true CMYK printing values, but create a nice effect so we’ll just put that down to artistic license.

Step 6

Before we add these two groups of objects to the Swatches panel, we’ll scale them a little. Select them both and choose Objects > Transform > Scale from the top menu. Give them a uniform value of 15% and click OK.

Step 7

Just as you dragged colors, you can now drag each of the tile groups into the Swatches panel instantly turning them into pattern swatches. Double click each one and assign them names of ‘Background’ and ‘Skin’. I’ll let you work out which one’s which.

Go to View in the top menu, turn off Snap to Grid, and select Hide Grid to return to the original drawing settings.

Step 8

Anything can be drawn to emulate Lichtenstein’s comic book style, though typically his were scenes of domesticity and consumerism. An image of a surprised woman could represent a troubled business woman or shocked mother. So, I chose this image from dreamstime.com.

Step 9

Open your image in Illustrator, lock the layer it’s on, then make a new layer on which to begin your drawing.

Step 10

Using the Pen Tool, draw basic areas to form the colored parts of the drawing. While doing this, you may find it easier to draw shapes with just a brightly colored stroke to avoid hiding parts of the photo while you’re using them. You probably have your own preferred method of working here.

Use smooth rounded lines and don’t be afraid to exaggerate certain features: like the mouth, wavy hair, wide surprised eyes. We’re creating a comic image here after all.

Step 11

See how the mouth is built from just four simple shapes. The teeth are absurdly rounded as is the tongue, but it gives us the effect we want.

Step 12

Using the swatches, fill each of the main shapes you’ve drawn. The labels given to the swatches should make this a simple task; just select the object you wish to fill, and click on your swatch. She looks kind of funny so far, but we’ll keep working on it.

Step 13

We need a brush to give us the black marker pen strokes which define our images features. Draw an Ellipse on your artboard. Then using the Direct Selection Tool, reduce the handle size on either end. This gives you a pointy ellipse which we’ll use as a brush.

Step 14

Drag your form into the Brushes panel. In the dialogue that appears select New Art Brush and click OK. In the following Art Brush Options dialogue give this brush a name if you wish and click OK. The Illustrator default values are fine for our needs here.

Step 15

We now have a layer for our image and a layer for our filled objects. Make the objects layer invisible and create a third one, which we’ll be drawing our black strokes with.

Step 16

Using the Pen Tool draw a series of curves for each of the elements of our subject’s face. Once drawn, keep the vector selected and choose your custom brush from the Brushes panel. In the Stroke panel change the weight of each line depending on the emphasis needed (for example, the eyelid is a little heavier than the line under the eye, and the eyebrow is heavier still).

It doesn’t take a great amount of detail to create what looks like a convincing eye. It does, however, take a bit of practice. You can get away with making certain aspects larger, more pronounced – such as the eyebrow here, but be careful not to make it too Mickey Mouse.

As you can see, I also lowered the eye slightly to improve the overall look of the face. These decisions are entirely up to your artistic discretion.

Step 17

I’d exaggerated the shape of the mouth so much that tracing the photo was no longer appropriate. Make a copy of the mouth and paste it onto your Strokes layer. In the same way as you did around the eyes, draw a series of curved vectors using the Pen Tool, and alter the line to your custom made brush. Just five strokes around the mouth will be enough to make it stand out.

Step 18

Again with her nose, you’ll need only a couple of strokes to finish it off, as too many lines will add years to her.

Step 19

Continue to outline your objects, some with a normal stroke, some with your custom brush, until you’re satisfied with the result. Make your Objects layer visible and see how it all looks together.

Now you may have to start to alter the order in which objects and strokes are organized; send some strokes back and some objects forward depending on how it looks. Don’t worry too much about keeping things in the correct layers either.

Step 20

Build some extra hair strands out of solid shapes and black strokes to finish layering her hair. Place them on top of the whole drawing so far.

Step 21

Select everything you’ve drawn except for the blue background rectangle, make a copy (Edit > Copy) and paste in place (Edit > Paste in Front). Select the Combine tool in the Pathfinder panel to join it all together and then click Expand.

Step 22

Give this object a nice heavy stroke and align the stroke to the outside of the vector, see image below. This gives our character a solid outline.

Step 23

Build a caption bubble out of a series of ellipses by combining them together with the Pathfinder tool. Give your main bubble a heavier stroke than the smaller ones. Also, use a hand-written style font for the caption. I’ve used Tekton Pro, a font from Adobe, but you can use your discretion as to the font that fits your illustration best.

Group the caption objects (Object > Group) and place them somewhere on your drawing, even overlapping the edges, and the character.

Step 24

To finish the comic book look, you’ll need to tidy the image up. Select everything (assuming your photo layer is still locked) and group together (Edit > Group). Draw a rectangle where you wish the edges of the illustration to be and then copy it to the clipboard (Edit > Copy).

Select the group of objects and your new rectangle and go to Object > Clipping Mask > Make.

Now paste your copied rectangle back onto the artboard (Edit > Paste in Front) and give it a heavy black stroke of uniform thickness. You have now masked your drawing and given it a comic book style frame.

Conclusion

You’ve completed your Lichtenstein style illustration! In doing so, I hope you’ve become familiar with making your own patterns and have brushed up on your vector drawing skills too. The final image is below.

Appendix

Scaling patterns is an issue which needs to be mentioned before we wrap up. By scaling an object filled with a pattern you’ll by default increase the surface area of the object, but the pattern will remain at the same scale (in our case, we’d get more dots).

By going to Illustrator > Preferences > General you can change this should you wish to. You can turn on Transform Pattern Tiles, as shown below. You’ll now proportionally scale your pattern whenever you scale your object.

Alternatively, you could go to Object > Expand and turn your pattern into individual vectors, though in doing so you’d be sacrificing the flexibility Illustrator’s patterns offer you.