Vectorial illustration with Illustrator
by Sergio Ordonez at 7:42 am on Mascot design, Drawing, IllustratorIt’s time to write a tutorial about vectorial illustration. In this post i’ll explain the process i followed at the time of designing by order (from SOSFactory) the mascot in vector format of Twisted Monkey Studios, producers of horror films.
Ingredients:
- Paper and pencil.
- Scaner.
- Photoshop.
- Illustrator.
- Silhouette (plugin for Illustrator).
- Basic concepts of Photoshop and Illustrator.
- A lot of patience.
- Optional: Digitalizer tablet.
Briefing
The first thing to do is know our client. That’s why we have a tool called Briefing, which is a serie of key questions to know the company and it’s needs. We can do it in a more or less formal way.
In this case we’re going to design a character for a horro movies producer; they wanted a monkey as the mascot, but the tipic nice monkey. We thought in the idea of making it’s clothes a straight jacket and to have a knife with blood… a lot of blood. It had to look nice, but intriguing at the same time.
Traditional drawing and Photoshop retouches
I always advice to start any design the traditional way, with paper and pencil, specially if it’s an illustration. As good as your Wacom tablet may be, it’ll never be as accurate as the normal pencil.
Traditional drawing. The image at the left is my pencil drawing, i start to sketch with a red pencil, and when i’m happy with the results i remark the lines with a graphite pencil. As you can see, is more a sketch than a finished drawing, unfortunately my line quality isn’t as good as comics professionals, but you don’t have to worry because that’s why we have the computer. The important thing is to have the concepts well assimilated, and to apply them to the character we want to design.
Traditional drawing at the left, photoshop retouches at the right.
Photoshop Retouches. When i get something decent as a start point, i scan it from Photoshop and start to move things, play with the face expressions, the pose… until i get something i like (right image)
Take a look at how the character changes during the process, when you don’t have very clear what you want to do it’s better to start with anything and then retouch until you get what you’re looking for… don’t get sad if you can’t do it from the first attempt, it’s the most common thing to happen.
Evolution of the personality of our character 
Cleaning and inking in Photoshop
Cleaning. I already have the base for the character, now with my digitalizer tablet i start to clean the sketch from Photoshop, asigning different line weights (explanation down).
Cleaning with digitalizer tablet at the right, inking with photoshop at the
left
Inking. The next step is to ink our character (right image), the first thing say is that it’s very important to use high resolution (5000×5000 pixels) for several reasons:
- It’s more comfortable.
- If later we reduce the design, the smaller mistakes wont be noticed.
- If the work is the same, let’s do it big, that way we can also print.
- When vectorizing it we’ll get more accurate lines.
We have 3 types of lines (take a look to the final inking a bit down):
- Contour: those are the bigger lines.
- Area delimitators: example. the inferior limit of the jacket, medium thickness.
- Intern lines: the line that marks the cheek, those are the most thin ones.
- Transition lines: they start as the contour and then get in the design. We make it thick and then thiner as it gets in, as the line in the chin.
What we shouldn’t do:
- Make shadows with lines: we’ll just make the design dirty.
- Extremely thick lines and without thickness variation.
- Intern lines too long: this lines are to mark volume, you have to make them in a subtle way, it’s just a guide for when you color.
- Straight lines: if you take a look, all the lines are slightly curved.
- Small areas: try that your volumes are as big as possible, otherwise at the time to color you wont have space and it’ll stay flat.
Final inking, it’s very important to modulate the lines correctly.
To get this final inking we have various options:
- If you’re a drawing professional the best thing to do is use your pencil lines, then simply clean them in Photoshop.
VIDEOTUTORIAL: Photoshop digital inking 1 - If like me, your handdraw lines are not too good, we ink the sketch with Photoshop’s vector tools.
VIDEOTUTORIAL:Photoshop digital inking 2, if you’re not familiarized with the pen tool you should better take a loot at this tutorial about Photoshop basic digital drawing.
Vectorizing with Silhouette from Illustrator
The first thing you need is the plug-in Silhouette for Illustrator, you can download Silhouette here after that decompress it with Winzip and put the file "SilhouettePlugIn.aip" in the plugins folder of Illustrator. Once inside the program you only need to make the silhouette palette visible (Window > Show Shilouette tool settings).
Then save your design from Photoshop to TIFF format (without transparency) and open it in Illustrator.
Then download the VIDEOTUTORIAL where i explain how to vectorize with Silhouette. Here you have a screenshot of the parameters i use:
Now that we have out design vectorized we can edit it until the lines are perfect. I normally add a contour from Illustrator to give a sensation of balance to the design.
*** Note: when you add a contour with Photoshop it rounds the borders, it doesn’t respect the angle details while Illustrator does. Depending on the sensation you want to give to your design you can use one or the other.
*** Note 2: i guess you’ll ask why i have used Photoshop to ink with bitmaps to vectorize it later?, Isn’t it better to use Illustrator directly? it’s a personal choice, these are my reasons:
- For me Photoshop is more comfortable and quick, Illustrator dessperates me.
- If you have a digitalizer tablet when using bitmaps you can paint or erase lines by hand, which saves you a lot of time.
Asigning plain colors, gradient and volumes
Plain colors. Now we have our vectorial inking, if you take a look the options of Silhouette are chosen to give us a black silhouette, and a bunch of white pieces on top. Now we only have to fill each white area with the color we want, i usually use medium tones, not too dark or too light. Here’s the color palette i’ve used.
Plain colors
Adding gradients. We have to create gradients of at least two differentiable colors, one dark and one light, but not extremely far away because we’ll later add lights and shades. For now don’t pay too much attention to the gradient direction, we’re just choosing the color tones, later we’ll orientate them to give coherence to the ilumination.
Gradient colors
Cutting the areas. As you have seen the gradient areas are too ample to get good illumination effects. So we have to cut this big areas into smaller volumes /take a look to the image down).
Later we retouch the gradient colors to try to get a coherent illumination, there’s a basic rule very important: next to a dark color there’s always a light color.
I’ve prepared a small VIDEOTUTORIAL to show how it’s done, download it here.
Gradient colors with the areas cut in smaller volumes
Adding shadows and lights
Shadows. We’ll create a layer and put it in Multiply mode, that way we have all the shadow vectors grouped. IMPORTANT: if you make the shadows in normal mode you’ll have to adjust the vectors a lot so you don’t cover the black lines, that’s why we use the Multiply mode, This mode makes transparent on top of the black color.
We simply pick a similar color (sometimes i also use gradient colors) to the one of the background and we make small vectors to mark the areas in the shadows.
Animation so you appreciate the shadows.
Lights. In this case is not essential to use different layer modes, although you can always use the Screen mode to get lighter tones. Observe the animation down here, first i make a soft illumination and later i add some strong light retouches reinforce the contours.
Finales Retouches
Now we only need to add blood in industrial cuantities. For that i used the free Gomedia vectors (if you use them put a link back to their site, you have to be thankful) The blood is added in a layer on top of all the others but down of the roght eye, in Multiply mode.
Observe that in the post i link to other tutorials or artices that cover the different phases of the process, although i know that in suck a complex tutorial i might have forgotten a thousand things to explain, if you have any doubt just comment it, i’ll try to answer as soon as i can and i’ll add it to the tutorial.
