Monday, March 30, 2009

Creating a Novel Text

Ha ha. Before I start, just a quick disclaimer. This will help you achieve a comic book/graphic novel effect using photos and filters, but a true graphic novel takes a lot more work than that. With that disclaimer aside, if you’ve got the right set of photographs, or even if you take your own photographs specifically for this purpose, you could make a comic that’s truly unique, original, and eye pleasing.

To start off, let’s make a new document:

I’ve obviously already got my pictures selected. You’ll want to organize them on your document in a way that makes sense for a comic book:

To help with the comic book style, each of these images should be pasted and then cut to size. Next, a 1px black stroke should be applied individually to the layers:

Using the Custom Shape tool, choose a dialog box that suits your narrative and use a white fill with a 1px black stroke:

Now flatten the image, and choose Filter > Texture > Grain and use these settings:

Your output should be similar to this:

Now do Filter > Artistic > Film Grain with these settings:

Now simply add your text to the captions and you’re done:


=== For more tutorials keep visiting ;) ===
= =

Sunday, March 29, 2009

Comic character style

We have often been asked the process by which we create our illustrated flyers and posters. I will try to give you a clear tutorial on how we create our illustrations and turn them into flyers or posters. Our end product will be this flyer which was created for our recent Go Media Inc. art show:

Final%20flyer Comic Book Style Graphic Design

Before I go into an insane amount of details I want to give you a quick snap-shot of the process:

  1. Draw with Pencil on Paper.
  2. Ink your penciled artwork.
  3. Scan your artwork at 300 dpi.
  4. Create a second copy of the artwork at 150 dpi.
  5. Create a “color” layer just under the artwork (set your artwork layer to “multiply”)
  6. Color your artwork.
  7. Delete the artwork layer, and return the color layer to 300dpi
  8. Open the original 300dpi artwork and paste it above the color layer.
  9. Flatten the image and save it.
  10. Import the image into your design software
  11. Add text and graphics
  12. Export the final design.

Step 1. Draw with Pencil on Paper. The very first step is the pencil drawing. I could write a novel about how to draw, but this tutorial will focus on the process – the steps it takes – to go from pencil drawing to the finished, designed, commercial piece of artwork.

Tools you’ll need:

Paper: I use a plate finish Bristol. This type of paper is heavy enough to handle a lot of erasing. It is also thick enough to not wrinkle when you are in the inking phase of this process.

Pencil: I actually use a mechanical pencil like the KOH-I-NOOR Technigraph 5611 Lead Holder. This type of mechanical pencil holds a very thick piece of graphite that you sharpen and use similar to a real pencil, except it’s better.

Eraser: I use the Staedtler Mars Plastic eraser. And a Sanford Tuff Stuff eraser stick.

supplies%20pencil Comic Book Style Graphic Design

I think that it is important to stay fairly loose when you are in the pencil drawing phase. Start with basic shapes, keep your lines fairly light and when you start to see the shape you’re going after you can focus in and “tighten” up your drawing.

Here is a sample of a fairly loose pencil drawing:

loose%20sketch Comic Book Style Graphic Design

Here is a close-up sample of a fairly tight pencil drawing:

pencil%20close%20up Comic Book Style Graphic Design

A word of encouragement about drawing: I think most illustrators are far too hard on themselves. They expect to sit down with one piece of paper and draw exactly what they have in their mind the very first time around. In my opinion this is nearly impossible. Drawing is a process that takes a long time. I like to make an analogy between a good batter in baseball and a good illustrator. A great batting average for the major leagues is “.300.” This batting average means that they get 3 hits out of ten, or get a hit 30 percent of the time. I think that this is a reasonable expectation for an artist to have as well. If I can get 3 decent drawings out of ten attempts – I feel fairly good about myself.

So, relax while you’re in your pencil drawing phase of this process. Get yourself a big stack of paper and get loose, draw lots and don’t be concerned about “bad” sketches – just toss them aside and start over.

Here is our finished tight pencil drawing:

finished%20pencil Comic Book Style Graphic Design

Step 2. Ink your penciled artwork. The second step is inking the drawing.

Tools you’ll need:

Paint Brush or Crow Quill Pen: I actually use a very small paintbrush (like a #1, #2 or #3).

India Ink: Some India inks are thicker than others. I like a nice thick India Ink. I have had success with Higgins Waterproof Black India Ink.

Marker: any black waterproof marker should do.

Here is a sample of the brush I use: It is a regular #0 Windsor & Newton camel hair paint brush. I have also had great success with the new synthetic nylon or polyester fiber paint brushes. You will also notice I roll masking tape around the brush near the tip. I do this just to get a better grip of the brush. I feel like I have better control over the tip with this extra handle.

supplies%20ink Comic Book Style Graphic Design
The large areas of black I fill in with a marker.

While you can ink with mechanical pens and markers I think it is important to use either crow-quill ink pens or paint brushes because it gives you the ability to vary the thickness of your lines. In some spots you’ll want to push down and create thick lines and then in others you’ll want to lift up to make very thin lines. Experiment with this to see what works.

inked1 Comic Book Style Graphic Design

A couple tips about this: First, you can create more depth in your drawing by doing this. Objects in your drawing that are closer to you should be drawn with thicker lines. Objects that are in the background should be drawn with thinner lines. This will create a sense of depth in your drawing.

Also – if there are bright spots – for instance a light source is behind an object, and the light source is just over your objects edge – the outline of this object might actually thin to the point where it stops, there is a gap, then the line starts up again.

After I dip my brush in the India ink sometimes there is too much ink on it, so I will tap it on the ink well, or draw a few lines on a scrap of paper before I go to my drawing.

It is also important that you are using the right paper. India ink will spread like crazy on some papers. Get a few varieties of Bristol paper and experiment. I find that a thick smooth or plate finish Bristol is the best.

If you have large areas that you need to “fill” I suggest using a black waterproof marker.

Once you’re done inking your drawing I usually wait for at least an hour before I go back and erase my pencil lines. I will use the same plastic eraser and just run it over the entire drawing. If your ink is not dry it will smear, so give it plenty of time. Once the ink is dry you should be able to safely erase the entire paper and the pencil will disappear and the ink will stay.

Step 3. Scan your artwork at 300 dpi. Once your black and white artwork is complete – you’ll have to get it into your computer for coloring.

Tools You’ll need:

Computer: From here on out you’ll be working on a computer. I recommend a powerful design station, but obviously you’ll have to work with whatever is available. If your art is small a simple computer should be fine. But if you are working at a very large scale – you’ll need processing power to handle the size of the file.

Scanner: I really wish I had a large format scanner. That would like my life much easier. But I only have an 8.5×14 inch scanner. This typically means that I need to scan my artwork in pieces and stitch them together. This can be a bit of a pain in the butt.

Adobe Photoshop or Corel Painter: I personally use Adobe Photoshop but I think Painter is probably better. I use Photoshop because that is what I learned on and am most familiar with.

Stitch your artwork together. Since I frequently have to scan my artwork in pieces, since it’s too big for my scanner, I recommend that you use these tips:

  1. Align one edge of your paper with the edge of the scanning surface. Once you scan one part, slide the art keeping one edge of your art aligned with the edge. This will keep your art from rotating, so that stitching it together will be easier.
  2. Scan your artwork at 300 dpi. This is high resolution or “print” resolution. Typically I shrink the artwork down later but it’s better to start with too much resolution than too little.
  3. Stitch your artwork together by bringing all of your pieces together onto one large canvas and lining them up. If you set each image layer to “multiply” it will make lining them up easier.

Once you have your black and white image scanned into the computer and stitched into one piece of art you’ll need to resize the image to the final size you’ll want your artwork. On this art we’re going to make a 4”x9” flyer. So, we will shrink the artwork to 4” across then add extra canvas so that our final art size is 4”x9”.

*If you’re going to be adding graphics and text above or below your artwork – you may want to take a moment and sketch out how you’re going to layout your graphics now. If, for instance, you want to add a text title above your illustration – how much space are you going to need? This way, you’ll have plenty of background art for use once you get onto the designing phase.

Here is the final scanned art:

finished-ink Comic Book Style Graphic Design
Step 4. Create a second copy of the artwork at 150 dpi. Save a copy of your black and white artwork at 300 dpi. Set this aside – you’ll need it later. Then create a second copy of this artwork at 150 dpi. This is the file that we’re going to use for coloring. You will be coloring at this lower resolution because it’s easier on your computer.

Step 5. Create a “color” layer just under the artwork. Your Photoshop layers should be set up like this:

Top Layer: Your Black and White Artwork. (set this layer to “multiply” so you can see the color behind your line art.)

Middle Layer: Blank Layer to be used for coloring (Also set to multiply)

Background Layer: White.

Step 6. Color your artwork. The process of coloring is a very complex subject matter. I will not be able to go into all the details of coloring but here are a few tips:

Fill the main shapes with a color that has a medium value (not to bright, not too dark – somewhere in the middle.) Then go back and add the shadows and bright spots off of this medium value color.

colored_version Comic Book Style Graphic Design

Switch to your artwork layer, use your Magic Wand to select an area on your artwork that you want to color, then switch back to your color layer to paint your color. In this way you can color carefree without fear of going “outside the lines.”

It might be a good idea to do your solid colors on one layer, your shadows on another layer, and your highlights on another. And generally, keeping things on layers can save you grief in the long run in case you want to change things.

Have a general color strategy going into this process. I will often start with a fairly limited color pallet and work only from that. A lot of my coloring looks almost monochromatic because I use such a restricted color pallet. This is kind of like cheating, but I admit, I’m not the best colorist.

Also, you can use photographs in your coloring process to add texture.

Step 7. Delete the artwork layer, and return the color layer to 300dpi. At this point your document should have only layers that with colors – no artwork. Next, return your image to 300dpi..

Step 8. Open the original 300dpi artwork and paste it above the color layer. This is your original black and white artwork file that you saved at 300dpi and set aside. Select the artwork and paste it onto your color image. Set the new artwork layer that should be on top to “Multiply.”

Step 9. Flatten the image and save it. This should be self explanatory. Your artwork is done! Congratulations.

Color-finish Comic Book Style Graphic Design

Step 10. Import the image into your design software. I personally use Adobe Illustrator, I think it’s the best. But you can use Freehand or Corel Draw. Use the “place” function to import your artwork into your Illustrator file.

Step 11. Add text and graphics. Add text and vector graphics onto your image as you would any photograph.

Final%20flyer Comic Book Style Graphic Design

Step 12. Export the final design. That’s it you’re done!
I know that this tutorial did not go into all the details one could think of, but I wanted to give people a general understanding of the process of how we create our illustrated designs. We understand there are many aspects to drawing, illustration, and coloring. We could spend all day writing about the ins and outs of it. Keep in mind that this is not the only way to do this type of work. It’s just a process that works for me. You may find yourself discovering shortcuts or other methods and we encourage you to experiment. If you have any questions, just ask!


=== For more tutorials keep visiting ;) ===
= =

Saturday, March 28, 2009

Vectors From First scratch

Hey everyone! Welcome back to the GoMediaZine. There has been such a wonderful response on my vector art tutorial “Beautiful Vector Illustration” that I thought I better write another one. If you recall in that tutorial I discussed how to create vector illustrations using photographs as your starting point. A technique of vector illustrating that takes a little bit more skill that I did not cover is starting with a hand drawn sketches. I will focus on that technique of vector illustrating for this tutorial.

For those of you without good sketching ability – please don’t jump ship just yet! I will also discuss a number of tips and techniques to using your pen tool that applies to ALL vector artists – so keep reading. You’ll still learn a thing or two. And who knows – maybe you try to sketch something anyway.

I am going to meander a bit between different sketches, but here is one example of a vector illustration that was based off of a sketch.

Mr Gnome Poster

This is a design our firm was hired to do for the rock band Mr. Gnome. The theme was straight forward, a gnome with a guitar in a dynamic pose.

The tools you’ll need for this tutorial are:

1. Pencil
2. Paper
3. Scanner
4. Computer (with a monitor)
5. Adobe Illustrator (and Photoshop wouldn’t hurt either)

This tutorial will cover:

1. Sketching - How detailed to get in your sketch?
2. What resolution to scan your sketch.
3. How to set up your Illustrator file.
4. Tips and Techniques to digitally inking your sketch using vector lines.
5. Tips and Techniques to coloring your vector illustration.

Step 1. Sketching.
Ok here we go. Since we will not be using photographs – we’re going to have to rely on our ability to draw. As I mentioned in my tutorial “Comic Book Style Graphic Design” I will not be able to go into the fine details of how to draw here, but I want to try and give you a few tips.

First, I believe that learning how to draw is like learning any other skill. It takes time, practice and it doesn’t hurt if you study a little. So go buy yourself books on drawing, find tutorials online or sign up for classes at your local college. And of course, nothing in the world can replace practice.

This sketching phase of the process should be a fun relaxing part of the process. If you put pressure on yourself you will surely struggle. When I am drawing I try to let go of all expectations. When you sit down to draw tell yourself: “I may draw for the next three hours and may draw nothing good. But I am going to enjoy the process.” Have a pile of paper, a pencil sharpener and an eraser. Always start by sketching as loosely as possible; just work on basic shapes. Get yourself to relax. Turn on some good tunes, have a can of Coke, whatever it takes to get yourself into a good place. I really think this is a big part of getting yourself in the right frame of mind to draw well. It may seem silly – but imagine if you sat down with one sheet of paper, a thirty minute deadline and a rigorous expectation of what you needed to draw. Wow… what pressure! You would be setting yourself up for failure! That’s no fun. So, sit down, relax, let go of any expectations you put on yourself and have some fun.

Also, you need to know that the final sketch will usually be achieved through a process. Many amateur artists don’t truly realize all the “steps” that go into creating a final piece of art like the one I drew. The assumption is that I sat down and in one fell swoop illustrated this final sketch. Frequently there are a lot more steps to this process. Here is a typical process that a professional illustrator might go through to produce a final illustration:

1. Extremely rough “comps” are drawn to show your client what you are intending to draw. Often times there will be several of these so your client has some options. Often times the client will give you feedback on your comps – so you’ll have to modify your composition until they’re happy. Here is a sample of how rough the early “comps” can be:

go media inc concept sketch .jpg

2. “Studies” are then drawn for a variety of the elements in the image. If, for instance you’ve never drawn a palm tree before you might want to download some pictures of palm trees and sketch them for a while till you get a good handle on how to draw them.

3. The first draft of the final illustration is then done. It always starts with loose light lines to get the composition worked out, then you’ll go over it filling in with “tighter” lines to get your details.

4. Often times some aspect of the illustration looks bad. A professional artist will re-work that part of the illustration on a separate piece of paper until they get it right.

As you can see – this is definitely a process. So, don’t get frustrated if it takes a lot of work to get your final sketch together.

How detailed you get with your sketch is up to you. Personally, I find that it is always easier to decide where I want lines while I am in the sketching phase. So I will get fairly detailed in my drawing before I scan it into the computer. Deciding where to put lines when I’m vectorizing (digitally inking) my sketch is much harder. So I will err on the side of a “tight” sketch (lots of detail) versus a “loose” sketch. Here are two examples of illustrations. This first one is the fairly tight sketch of a demon that I drew for Ozz Fest.
Ozz Fest Tight Illustration

The second sketch is a much more loose drawing:
Dave's Rough Sketch

Lines are not well defined and there is a lot that you would have to make decisions about once you get the drawing into Illustrator. You have to be extremely skilled in your ability to work through a drawing on-the-fly. If you are, you can take a very rough sketch like this and make inking (vectorizing) decisions as you work. I don’t think most people have this ability, so I would recommend that you try to get a little bit more detail into your sketch before you scan it into Illustrator.

While I am endorsing a “tighter” sketch I want to mention the fact that one of the biggest advantage of creating a vector illustration off of a sketch is that the over-all feeling of it is MUCH looser than what you create when you work off of a photo. When, for instance you are working off of a photograph – you are somewhat bound by the natural laws of nature. But in a sketch you can really go over-board with exaggerated features. When you combine these loose exaggerated features of a sketch with the tight clean lines of vector art you really get a wonderfully unique looking illustration. So, don’t be too tight with your drawing! You don’t want to lose your personality.

Step 2. Scanning your Artwork.
HHmm.. not sure why I made this into a whole section of this tutorial. I guess it’s just an important step – you need to get your sketch into your computer. Here are a few tips to scanning your sketch:

1. Make sure to scan your sketch in “photo” mode at 300dpi or higher. You may want to go as high as 600dpi. It really helps to zoom in on your sketch while you’re vectorizing (digitally inking and coloring) it. At this zoomed in state you might be looking at a part of the sketch 300% - 400% bigger than the size you drew it, so you’ll need that extra resolution to see where to put your lines.

2. If your sketch is bigger than your scanner – you’ll have to scan it in pieces and stitch them together in Photoshop. One little tip that helps make this process easier is to make sure that you butt one side of the paper up against the edge of the scanning surface. Scan it, then slide the paper keeping that same side flush up against the edge of the scanning surface. This process insures that your different parts of the sketch are not rotated differently. It is much easier to piece together two images that don’t need to be rotated. Once your sketch pieces are in Photoshop, open one and enlarge the canvas area to make room for the other pieces. Copy-and-Paste the other pieces so that they are all in one image. Set the properties of each layer to “multiply.” This will allow you to see through each layer and more easily line them up. Once you have them all lined up, change the layer properties back to “normal,” flatten the image, and save it as a .jpeg

Step 3. Setting up your Illustrator file.

I like to create 3 layers in Illustrator when vectorizing a sketch. The bottom layer is where I place my sketch. I will lock this layer so I don’t accidentally select it or move it. The middle layer is my color layer. This is where I will fill in my shapes with colors. I will also lock this layer until I get to the coloring part of the process. The top layer is the inks (the lines) of the drawing.

I should take a moment here to mention that you can illustrate vector art without lines. The artwork can be comprised completely of solid shapes with no “line art.” Here is an example of each:

This is a vector illustration without any lines defining the shapes. It simply uses color and value to define the shapes.
Define By Shape

This illustration does have lines to separate the shapes.
Define By Line

Whether you choose to make line art or not is up to you, but we WILL be making the line art first on this project.

Step 4. Tips and Techniques to digitally inking your sketch using vector lines.

Ok.. now we get to drawing our vector lines. I don’t have one set style for creating these lines; in fact I have several. I will discuss each. But before I do, I want to discuss our goals. The goals with these lines are that they have character. And by “character” what I mean to say is: “they look cool.” So, how do we make our lines look cool?

For starters, we need our lines to vary in what is known as “weight.” “Weight” of a line basically means how thick or thin your lines are. A lot of weight is thick a little weight is thin. Making your lines vary in weight adds a LOT of character (makes them look cool.)

And where we put this character into the lines is also important. I use three general rules when making a determination of where to put weight:

1. Most important is how close an object is to you. So, if you have a drawing where the super-hero is punching out towards you, the fist would be the closest thing to you. The closer something is to you, the thicker the lines should be. The further away something is – the thinner the lines should be. The city in the background, for instance, should be illustrated with very thin lines. This creates an illusion of depth.

2. The outer-most line of each separate object I will also tend to make a little thicker than the interior lines. This helps define that object apart from the other objects.

3. I will also pay attention to light source. If, for instance, the sun is just over the right shoulder of a character – I might thin that line so much that it ends… there is actually a gap where the line ends then re-starts. The side of the object opposite of the light source will have thicker lines.

4. Finally – I will tend to thicken a line that dead-ends into another line. This is a hard one to explain, so here is a picture:
lines dead end

Now that we have a clear understanding of what kind of lines we’re trying to make… how do we make them?

My first step is usually to outline my object or a portion of the object and then “knock out” the shapes that are inside it. Using my pen tool I will simply find a starting point and start drawing around a shape. If you are not experienced using the pen tool in Illustrator this may be a bit of a frustrating process. Have faith that in time you will get better and faster. It takes time to learn how to best use this tool. Here are a couple of tips:

1. Place your points at the most extreme spots – at the very top of the peak of a curve or the very bottom of a curve.

2. Fewer points will give you a smoother line, so challenge yourself to eliminate points.

3. If you need to bring a curving line to a sharp turn, click on where the curve will end, click-drag your mouse to create the curve before the sharp turn (don’t worry about the vector line on the far side of the point. When you get the curve before the point where you want it, let up on the button, but before you make your next point – click one time on the point you just made. This will eliminate the bezier handle that runs through the point. When you place your next point, the line from the previous point will come out straight from that point. Here is a little picture sequence of this process. **This is a VERY useful tip. So, if you don’t understand it – read it five more times, study the images below and don’t proceed till you get it. It will be on the S.A.T.!**

pen tool 1

pen tool 2

pen tool 3

Once I have my outline I will simply start drawing the shapes that are inside it that need to be subtracted (or for us old-school designers: “knocked out.”) Be aware that the “lines” you’re creating will be comprised of the outline minus the interior shapes. So, in terms of giving your final lines varying weight, you will have to vary how close your interior shapes are to the outline.

Here is an example of how I will draw an outline, then subtract (or knock-out) the interior with a second shape:

creating lines 1

creating lines 2

One way to deal with this varying line weight issue is to deal with it in the sketching phase. This way – you don’t have to think about it while vectorizing. You can just follow your sketch lines.

While you are drawing these knock-out shapes you may want to ignore little detail lines that might be hard to draw. If for instance you have some cross-hatching lines that extend from a large black shape – I won’t try to draw them both at the same time. I will start by just drawing the black shape, then will go back and draw the hatch-lines. I can merge these shapes using the Pathfinder tool later if I want to. Here is a sample of that:

cross hatching vector From Sketch to Vector Illustration

Once you have all of your interior shapes in place, you’ll now need to knock them out of your outline. You will do this by
1. Grouping all of the interior shapes.
2. Bringing these grouped interior shapes to the front: Object>Arrange>Bring To Front
3. Selecting both your grouped interior shapes and your outline
4. Clicking on the knock-out (or “subtract”) function of your pathfinder tool.
5. Fill with black! (or whatever color you want your lines.)

Another way to draw lines of varying weight without drawing the inside and then the outside of each line is to just draw a single vector line down the center of your intended line. Then you “stroke” this line with a brush. Specifically you might want to use one of the calligraphy brushes that Illustrator includes.

Here is how using one of these brushes looks when applied to a curving line:

vectorizing with stroke From Sketch to Vector Illustration

This looks great and is a much easier way to make lines with character – but it is much harder to control where the line is thick and where it’s thin. This is determined by the shape of the brush and the angle of your line. If you have a set of brushes set up at various angles and experiment a bit, you can figure out how to control where the thick and thin parts of your line are, but it takes some work.

If you are using this technique to vectorize (digitally ink) your sketch there is one additional step you have to take. Once you get the line how you want it, you’ll have to: use the Object>Expand Appearance function. This will take your brush stroke and convert it into a solid shape.

You may also experiment making your own brushes in Illustrator. One very useful brush is a simple triangle.

Simply make this triangle shape, select it and then go to the drop-down menu in your brushes window and select “New Brush>New Art Brush. Then draw a curvy line and apply this brush. You will quickly see how useful it will be in inking. Here is a sample of what a triangular brush on your vector path looks like:

triangular brush From Sketch to Vector Illustration

I suggest experimenting with brushes like this. I will not reveal all of Go Media’s secrets here – but this should get you started.

Now you have the meticulous job of “inking” your illustration. Depending on how complex your drawing is – this process may take an entire day or more, so settle in and try to enjoy yourself. After all – that’s why we’re here right?

Here is the finished inking I did on this sketch… Pretty sharp if I do say so myself!!

First the pencil sketch:
Pencil drawing of the gnome

Now the final inked illustration:
Mr Gnome Poster

Ok, now to the really fun part – coloring.

Step 5. Tips and Techniques to coloring your vector illustration.

This tutorial is going to cover coloring in Adobe Illustrator. At this point you could also export your line art to Photoshop and color your drawing in it. In fact, most professional coloring you’ll see of illustrations is done in either Photoshop or Painter. Making a vector coloring – as we are in this tutorial is a very different process with a different look and feel to it. In Photoshop for instance, you can much more easily make soft-edged transitions between your various colors. Here in Illustrator your color shapes will have sharp edges.

Now I will make a confession – I don’t think I have a very good sense of color. I think I am a bad colorist. So, hopefully I can give you some tips I use to “fake it.” Remember: “Fake it till you make it!”

Now, you’ll be coloring on your color layer, so lock your inking layer and unlock your color layer.

Usually I will try to pick the colors I’m going to use before I start coloring. I will start with 2-4 main color themes that work well together. For each of these colors I will try to get a range of color values from dark to light. Once I have this palette of colors I try very hard to stick with it. Since I don’t have a good sense of color, I’m afraid to stray too far from a nice color palette once I’ve made one. Here is an example of a color palette I put together:

palette example

I will usually assemble my color palettes by opening a Pantone Swatch Library (located in the Swatch window drop-down in the Swatch Libraries drop down). I’ll then see a color I like and grab the entire value range from dark to light of that color.

pantone swatches

One “cheat” I use occasionally for finding a good color schemes– is the website: It doesn’t give a complete coloring palette and isn’t usually exactly what I’m looking for, but it’s a great resource for inspiration.

In the case of this illustration, he went with a fairly straight-forward coloring scheme. The girl’s skin is flesh color, the skull is grey and the devil-baby is red. For each of these object there is about 3-4 color values; a middle value, one dark color for shadows and one light color for highlights.

While going with a straight-forward coloring scheme is fine, I want to encourage you to really experiment with colors. Explore the space. I got a fever, and the only prescription – is MORE COW BELL… no wait - I mean – MORE COLORS. I think doing a good realistic coloring job is almost passé these days. Using non-traditional colors is the current trend.

To start, lets use this little devil baby sketch that Dave did and start by filling each main shape with a middle value. Here is what the baby looks like with each of his primary shapes filled with the middle-value. You’ll notice the back of the tail is dark. We obviously decided that we were going to have a light source to the upper left. This would place the tail in a shadow.

initial vector fill From Sketch to Vector Illustration

When I say “We filled each main shape..” what I mean specifically is that we stole the line art and used the vector lines that were already drawn to fill the main shapes.

In order to do this you need to make sure you’ve used your Pathfinder tool to subtract (knock-out) and consolidate all your line art into one complete path, then you will:

1. Unlock your inking layer (if it isn’t already)
2. Select your Inks (lines)
3. Edit>Copy
4. Switch to your color layer (I’ll even re-lock my inking layer)
5. Edit>Paste In Front – this will drop a copy of the inks into the coloring layer in the exact same location that it was taken from – so it lines up perfectly.
6. Select the line art and then Object>Compound Path>Release. This will break all of these shapes back up into their own pieces of art. You can then delete the outline and simply deal with the fill shapes. By selecting them you can fill them with the appropriate color.

Using this technique will save you a lot of time. Here is the single-color initial fill of the devil-baby:

If you are not familiar with the Pathfinder tool in Illustrator, let me just say: please take the time to explore this tool. It is indispensable. I use it constantly.

Once the main color fill is in place, we can start adding shadows and highlights. Since your highlights and shadows will be contained within the area we’ve already established with our fill, you really only need to draw the line that will distinguish the barrier between your middle value and shadow.

In this first image you can see where I drew the dark red shape to define the shadow area. I only concerned myself with where my shape intersected with the red fill of the devil baby’s body.

vector shading 1 From Sketch to Vector Illustration

I then need to make a copy of the devil-baby’s fill shape so I won’t lose it when I use the pathfinder tool. I use the Copy and Paste-In-Front function to create two duplicate shapes that are directly on top of one another. Then I select the main fill shape and the shadow shape as well.

vector shading 2 From Sketch to Vector Illustration

Then, using the Pathfinder tool use the overlap Pathfinder tool. I’m not sure what the technical term is for this function, but it basically takes two shapes and removes any parts of them that do not over-lap. Here’s a pic:

vector shading 3 From Sketch to Vector Illustration

I will go through and use this technique to define each of my shadows, bright spots and any other little details I would like to add.

So there you have it. An insight into my mind as I go from sketch to vector illustration. This is how I do it, but every illustrator has a different technique. So use this article/tutorial as a guide to help you establish your own technique. I hope you learned something useful!


=== For more tutorials keep visiting ;) ===
= =

Friday, March 27, 2009

Digitally Paint Comics

Written by Mark Rivera and filed into the Uncategorized category.

In this tutorial we will be using real life textures to assist in color rendering the Lady Blackhawk drawn by DC Comics artist Ed Benes. As you are digitally painting you may want to add details to give certain parts accentuated realism. I have found this brown leather texture sample that will be applied on to the color. We don’t necessarily need a black piece, just as long as we like the texture of the material. We can turn this black by first going to Image>Adjustments>Desaturate. This takes out the color while keeping the light and dark values of the leather.

Even real life black and white tends to have shades of color, so to add realism we will add a light shade of blue to the now dark gray leather by going to Image>Color Balance and adding +10 to blue. Now we have a nice texture swatch of shiny black leather.

If you would like your line art to remain on top while remaining transparent to the color render beneath, select the layer with it and press Ctrl + A to select the entire layer. Press Ctrl + C to copy it and then Ctrl + V to paste it into place. Drag this layer to the top of the layers panel. In the line art layer pull down the drop-down menu and go from Normal to Multiply. This will make the line layer transparent while leaving the black lines while revealing the colors beneath.

In the Flats layer, block out an area to fill with a base color. With this area selected, create another layer on top of your line art. I have chosen a dark gray/blue with the hexadecimal value #3E3E3F.

Open your leather swatch and select the Clone Stamp Tool. Set the Opacity to 40% and the Flow to 75%. Hold in the Alt key and click in the center of the swatch. This will hold the memory of the texture that will be stamped onto our art.

Go back into the art with the flat color and use the Magic Wand Tool to select the paintable area. On a new layer called Textures, paint into the area with the Clone Stamp Tool. To get smaller detailed areas, you can decrease the sample texture by 50% and use a smaller brush to vary the sizes of the texture creases on the jacket. Experiment with your strokes and brush sizes to meet your desired effect.

Now we will go in depth about how to paint with selections to add dramatic shadows and highlights. Let’s go ahead and manage our layers. I like to make a Flats layer along with a Shading, Textures, Shadows, Highlights, and a top Line Art layer.

Just like we did with the jacket, lets block out the rest of the shapes in the Flats layer. There are a couple advantages to having a separate flats layer. After blocking out your flats you already have a base tone to add any details with. However simple or detailed as you wish to go, you will always have your base color there. The flats layer also serves as a nice selection device as you paint in the other layers. Magic Wand the blocked out color and you now have a selection that allows you to color inside the lines like when you were a good little boy or girl.

As you add some dark and light tones in the shading layer with the section blocked out, you will begin to reveal the shapes in a more 3-Dimensional manner. Magic wand each section to brush. Just be sure to select the appropriate layer before painting so you don’t end up painting on your flats. I like to use a darker color and brush the edges and work my way in depending on the light sources you imagine.

Now with the Lasso Tool we will be creating cuts to color in selections. These cuts, or shapes, create a dynamic effect that you often see in printed digitally colored comics today. After drawing a cut, hold down the Shift key to create another cut without losing the first one you’ve drawn. Here I’ve cut out the areas of the jacket that will fill in the darker shadows in the leather folds and areas of Blackhawk’s face and skirt.

You can do the same with highlights as well.

With some experimentation, depending on how fast or detailed you want to go, you can digitally render line art with a style of your own.


=== For more tutorials keep visiting ;) ===
= =