Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
This tutorial will take you through the entire creative process from rough thumbnail sketch to final digital art. You'll discover how to create and build a precision vector illustration of jolly St. Nick. I'll cover simple build methods and techniques that will help you discover a new ways for creating well crafted vector artwork.
Drawing is a designers best friend. A solid creative foundation starts with drawing and in this case a very crude and rough thumbnail sketch of Santa. All I'm doing is capturing the essence of what I want to create.
Drawing is all about refinement. Rarely do you draw something perfect the first time. Most often you'll take a rough thumbnail sketch and re-draw it and refine the form and shape until you have a tight refined sketch. Looking at my rough thumbnail I re-draw my Santa design so it removes the guess work as it relates to shape and form. I'm basically drawing it as I'll build it. My refined sketch will serve as my road map for building my vector art.
Before I move to vector I scan in my refined sketch and using Photoshop I clone the art, flip it and than weld the two sides together. This design is almost completely symmetric so doing this will give me a good idea as to how the final will feel before I create it in vector form. It's at this stage I determine if my base drawing is OK to proceed or if I should refine it further. For this design we're ready to deck the halls.
I scan in my refined sketch and place it into illustrator on it's own layer. I adjust the Opacity to around 20% and lock the layer. This will now guide my vector building. My build file layers always start as shown. (I'll cover layering in more detail below)
My vector building starts off rough. All I do at this stage is make sure my anchor points are located in the best position possible. Here I've roughed out part of Santa's mustache.
The next stage is where I begin to shape my vector paths. I use an Astute Graphics plug-in called "VectorScribe" that makes vector building easier than the native tools in illustrator. The specific tool is called "PathScribe" which allows me to grab any path anywhere and push or pull it into shape.
Here I'm molding a path to match my underline drawing.
Here is the final result of shaping my vector paths using the "VectorScribe" plug-in.
Not all content in a design has to be built point by point. Sometimes using shape tools like the Ellipse Tool (L) makes building easier. In the image below I use nothing but circular shapes and the Pathfinder panel functions. to build my final eyebrows shape. Think of this methodology like cookie cutters. The more you can look at your designs and discern where shape building would work well the easier building vector art becomes.
Don't think of your design as one piece of art. Think of your design as being a combination of smaller more manageable pieces of art that when combined make a whole. Breaking your design into easier to construct sections makes building go faster and easier over time.
Another area in this design that can benefit from shape building is the trim of Santa's hat. Once again I'll use the Ellipse Tool (L) and create the trim with a bunch of circular shapes. I'll than fuse them all together into one single shape and punch out what I don't need using the Pathfinder until I have the final shape needed.
At times it helps to rotate an object on screen so you can see it from a different angle and than adjust the bezier curve to improve the shape and form of something. Here I wasn't liking the curve on Santa's hair so by rotating it and finessing with the handle bars I improved it than rotated it back in place.
On the beard it made more sense to break it into isolated shapes to form the overall shape of the beard. (Once I had those I saved a copy of the individual shapes so I could use them to create the thin hair detail later.) With all the shapes done I fused them all together into one single shape using the Pathfinder.
The benefit of doing a symmetric design is you can get away with only doing about half the work since you can reflect it to get the other side done. This image shows me taking my refined vector shapes, cloning them and than using the Reflect Tool flipping them to the other side.
I now have all my base vector shapes completed and my refined sketch helped to guide this building.
At this point I go into my file and organize my vector art into a distinct layer hierarchy. Doing this now before I proceed will help me as I flesh out my colors and start adding detail. As I build the design out further I might shift a few things around in order to make the design easier to manage. Using layers like this is a good creative habit to get into.
Some of you might be wondering what layer "X" is all about? Well that is my insurance layer. As I build I'll copy content and put it in that layer. It's like vector insurance. I know I can always go back to that layer and harvest anything at various stages. Something I've been doing for the past 20 years.
Now that all my base vector shapes are established I begin to build my base colors. I start off by working out the flat base color. Sometimes I'll do the entire design and other times I'll work on one section than detail it out and move to the next one. This is less complicated so I work out all the base colors.
I use the same method one would use if painting in acrylics. Lay down a base color than layer on other colors to form and shape the art needed. It helps to create tonal families and I always use global colors. I recommend always using global colors it makes managing your color palette far easier and gives you more control when editing color too.
Creating dimension with vector art doesn't require using complex tools like the Gradient Mesh tool. That's great if you're mimicking a photo realistic picture but on a stylized illustration like this one it's over kill. To demonstrate how to create dimension I took Santa's nose and we're going to deconstruct it.
The top shape shows the nose base color. The seven shapes below it are all custom radial blends, linear blends with various settings of Opacity and Blending Modes like "Multiply." In the next image below them shows how they effect the base color shape of the nose and add dimension the art.
This image shows the settings on one of the shapes used on the nose. It's a linear blend with a Blend Mode setting of "Multiply." Note how I blended from a color to a zero alpha base skin color. This works better than using white. At times you'll notice banding in illustrator if you use white so I've found blending to base color works better when printed.
It's impossible to completely document a process that at times is at best exploratory in nature. I'll try a certain opacity or color only to discover it doesn't look that good. So I command Z it and try something else until it works. I used the same exact methods and approach to add the detailing on Santa's hat as well as other areas in the art. So make sure to open up the source file provided with this tutorial and take some time to deconstruct it. Explore the content, click on shapes to see how I set the Opacity and Blending Modes etc. to achieve the effect I have.
Lets take a look at Santa's hat and see how I created the fluffy trim. First I created a radial blend within the shape.
I want to add a nice inner glow to define the edge of the white shape and add some depth. With the shape selected I got to Effect > Stylize > Inner Glow and than adjust the settings as shown and click OK.
With a clone of my trim shape I'll go to Object > Path > Offset Path and adjust the setting to create an inset shape as shown.
I select the new inset shape and apply a linear gradient to it and set the Blending Mode to "Multiply."
With inset shape selected I go to Effect > Blur > Gaussian Blur and adjust the setting to create a nice diffused effect on the trim shape.
This shows the final for Santa's hat. I used the same process to create the look of the fuzzy ball on the end of his hat too. Since I've isolated areas of the design on their own layers I can isolate just the hat elements and it makes working a lot faster and less hassle too.
I liked how this was turning out but the challenge as I progressed with this design was how to distinguish the white areas from one another. Being a stylized design I didn't want his eyebrows and hair to get lost against the trim of the hat or his mustache getting fused visually with his teeth. I needed to add some texture to offset the contrast.
I came up with an idea of using shape blending to add some nice stylized hair effects on my beard and other areas where hair would appear in the design. First I created two slim shapes as shown in the image below. I than double clicked the shape Blend Tool and entered a number of steps. After clicking OK, using the Blend Tool I clicked the anchor point at the top of the large shape than the anchor point at the top of the small shape to create the shape blend shown.
I colored the shape blend white and than applied the shape blend to the mustache area and adjusted the bezier curve and blend to work well with the shape of the mustache.
This shows the final application of the shape blend on the mustache. I also used it on the eyebrows and you can see part of it in the sideburn in the image below too. Over all it adds a nice subtle texturing to offset the mustache from the smooth surface of the teeth etc.
I'll add in the same type of shape blend details on the beard later. But first I want to get the base effects in place. Here I apply the same Inner Glow as shown on previous elements like the hat trim. I also using a large radial blend to add some volume to the beard shape.
The radial blend I created in the previous image was OK, but it didn't pull off the distinct volume I wanted. So I decided to do it manually. First I created a shape as shown to define the areas on the edge of the beard I wanted to effect and colored it using the shading color I had established.
With the shape selected I go to Effect > Blur > Gaussian Blur and adjust the setting to create a nice defused blend and click OK.
After I'm done creating the defused shape I mask it into the beard shape and than add in the shape blend detailing as I did with the mustache area.
Creating a design like this starts with a good drawing, but executing it well takes a lot of experimentation with secondary shapes that have linear and radial gradients, various Opacities, Blending Modes and color shifts all layered to create the look desired. This shows a close up of part of Santa's face highlighting this type of detailing shapes within this design.
This shows the exact same view of the art but the only thing it's missing is the base colors. What you see is all the various shapes that make up the detailing that adds dimension and contrast between elements and brings the design to life. Think of it as painting with vectors.
This shows the highlight shape on Santa's cheek and it's settings. As stated above the base colors are the only elements missing in this image.
All the various detailing shapes within this design. The only elements missing are the base color shapes. Once again, make sure to deconstruct the source file to further discern these methods so you can apply them to your own work.
With all the base colors and detailing shapes working together Santa comes to life.
On the final design I decided to include a nice fat outline around Santa and nest him within a festive burst. If you like the snow flakes those came from my book "Border.Banner.Frame" which includes over 500 ornaments. I also post FREE ornaments on my blog here.
I realize this illustration is based on a drawing so if you struggle with that skill set just start drawing. There is no secret, the more you do it the better you get. If you choose not to draw, Santa will put you on his naughty creative list. Remember anyone can learn software so you'll make your biggest improvements by fine tuning your overall creative process, how you approach a project, how you work through it and execute the vector art. Take you time, commit to precision and have fun.
The final image is below. You can view the large version here.