Walk Through: Sketch to Digital art

I was working away on a logo/illustration hypertiny (check them out, they do cool things) and it occurred to me that this would be a great example to take a walk through in converting a sketch to digital art. Here we go.

Okay, so maybe the first step is a bit tricky, but if you can get through this part on your own, I’ll walk you through the rest…

Take out your sketch book and draw something awesome.

Got it? Good. Me too - I’m using HyperTiny’s baby monkey. 

Place it into illustrator. 
(That’s file > place) 

Your screen should look something like this:

That is, you’ll need your tools (to the left), you’ll need your sketch (center) and you’ll need the pallets to the right. (If you can’t find all of those pallets, just go to the window menu, and they will all be listed there)

Select your illustration, and open the layers pallet.
Make a second layer, and move the one with your illustration to the top.
(The new layer button is that little folded paper icon on the bottom of the layers pallet)
(Just click & drag to move layers) 

Your layers should look something like this:

Keep that layer (layer 1 with the sketch) selected. Open your transparency pallet.
Change the blending mode to multiply, and the opacity to ~60%.

It should look something like this:
 

Go back to your layers pallet, and click the lock button on Layer one.
(It’s the empty box by the eye)

 

Awesome. Guess what you can do now? Trace your sketch. This is a big step, too. Break out your pen tool, and just trace all of the basic shapes.

I know it’s a little intimidating to try to draw an entire sketch with the pen tool, but if you just look at it as one simple shape at a time, it’s not so bad. 

Here’s the first two shapes that I started with - I used the elipse tool (L) for the circle, and pen tool for the flag. Just two solid shapes. No problem.

 

While you’re working on that, I’ve also got a couple of (pro?) tips that might be handy.

  • Remember that the sketch on top is on multiply, so if you use the eye dropper to select colours, you’re going to get the multiplied version. 
    • Instead, toggle the eye on the layers pallet, and hide your sketch when you use the eye dropper. 
    • Alternatively, you can just select, then unselect the shape with the colour you want, then the next shape you draw will be that colour.
  •  Remember the move-to-front/move-to-back & move-forward/move-backwards hot keys (I’ll list them below). Instead of trying to match the edges perfectly, just make your shapes overlap, then send one to the back or front. If you master this, drawing gets much faster.
    • Move forward one object: ⌘ + ]
    • Move backward one object: ⌘ + [
    • Move to front: ⌘ + shift + ]
    • Move to back: ⌘ + shift + [
  • If you want to copy the edge of any object, use your direct selector (A) to select the points of the edge that you want, but leave the last end points that you want out (AI will always grab one more end point on each side). Copy. Paste. 
  • If you’re drawing a shadow, don’t come up with a whole new colour, just add a bit of black.

Make it through? Me too. So this is how mine looks after I’ve traced all of the basic shapes. 

 

Not that different, but when you take away the sketch… Voila! you have simple, digital illustration! (I added some tufts of hair).

 

You can stop here, if you want. Or, you can go back in and clean it up, and add shadows. Another daunting task, I know. But maybe it’s not so bad… Enter: pathfinder pallet.

Let’s take the same starting point, at the very top of the boat. 

Right now, not that interesting…


Select a single shape (in my case, the top circle), and duplicate it. 



Duplicate it again. This time, strategically just a slightly downwards & to the right.

Open your pathfinder tool, and click “minus front” (That’s the second one from the left). It should look something like this:

 

Open your colours pallet, and drag the black out about 15%. (ie. less black)
(if you don’t have any black in your colour, hold shift while you drag any other slider, and it will give you a lighter version of what ever colour you had)

Drag the object back over the original object. Voila! Highlight! And you didn’t have to draw any of it.

 

If you have the patience to do that for all of your elements, you come out with a decent illustration. Have a look at how my monkey turned out after just adding shadows and highlights with the path finder tool.


It looks complicated, but it’s all just basic shapes, with a little black or white added to them to make the shadows and highlights.

Now, you can start really having some fun…

 

Well guys. I covered a lot there. I would love to hear if you’re trying this out, and I am always around twitter if you get stuck, or have any questions! @megrobichaud

13 Dec 26short url

Favicon Tutorial

Step One. 
Make your stupid icon.

Step two.
Rename the stupid .png to .ico

Step Three. 
Link it.
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

Step Four.
There is no step four, it’s that easy.

To all the people who made long elaborate tutorials on how to make a favicon. You suck. Next time lead with “there is no fancy export function, you just rename the file, with your keyboard.”  HOURS of my time wasted.

22 Jul 5short url