Cartoon Vector Illustration Using Illustrator

by | Jan 9, 2014 | Artworks

Cartoon Vector Illustration

Step by step to creating a cartoon vector illustration using adobe illustrator.

I’m not an expert in using adobe illustrator. Far from it. I would love to be but there just aren’t enough hours in the day for me anymore unfortunately. So when I can delve into it, like most people I trawl the internet looking for “how to guides”.

Most I forget as soon as I’ve finished with them. So in the artworks section of the Hostcat site I thought I’d make my own.

This way I can refer to it whenever I need some reminders on what to do. I’ve painted many cartoon type illustrations over the years so that’s what I thought I’d start with. A cartoon vector illustration using adobe illustrator from a photograph. there are plenty of places to read up and see this tool in action on the internet.

Steps to Create A Cartoon Vector Illustration

Get A Photograph to Work From

Find a Photograph

Will assume most people already know the basics of Illustrator.

Finding their way round the menus etc., If you don’t there are a lot of guides available on the internet including youtube. Will post some links further on.

Okay let’s start. First you need a photograph to work from. The one I’ve chosen is quite complex, but I like to unwind by creating these images so will keep coming back to it and finish it over days rather than hours.

Load the photo into illustrator and get it to a good workable size. Then go to object – artboard and select fit to artwork bounds.

Select transparency from the window menu and make the phot maybe 50 percent transparent.  This allows you to work on tracing the image over the top with the pen tool. Yet still being able to see the photo underneath as a guide. Select layers from the window menu and create a new layer. The original photo will be in layer 1  which you can lock to keep it safe if you make mistakes and need to restart.

Tracing the Illustration Outlines.

Cartoon Vector Illustration

Using the pen tool. Zoom in on the photo and start tracing the image.

It takes practise to get used to the pen tool. It’s not something I can show you. It just takes time in using it and getting a feel for it.

I keep the stroke width black at just 1 pixel and background colour transparent. Don’t worry this all gets put right as we go along, but for now speaking for myself.

This allows me more control and being able to see what I’m doing. Go ahead and trace over all the elements in the photograph. It doesn’t have to be 100 percent accurate at this stage but the better your trace is. The less work afterwards.

Don’t forget to keep saving it as you go along as an illustrator file. There’s nothing worse than your pc playing up and you lose all the detailed work you’ve done on the cartoon vector illustration so far.

Adding Colour

Add Colour to the Illustration

Now we can start adding the colour.

I do that firstly in blocks. As I’ve traced each element of the image I just select each part with the selector tool. Then you can change the background colour and stroke colour.

As I want a cartoon feel to this I’m leaving the outline black. For the figure itself I just want the basic colouring in. Then comes the fun part. Refining the parts of the cartoon vector illustration.

Working on the Illustration

Working on the Cartoon Vector Illustration

I work on each part in sections. Lots of zooming in. Tracing round shadowed areas. Adding darker or lighter shades of the main block of colour.

It’s a cartoon vector so I’m not aiming at photo realism and the less colours you use the better rather than gradients of colour. You can use gradients to produce some neat effects but that’s not what I’m doing with this illustration.

While you’re working on each part in this way. It’s a good idea to start tidying up the actual tracing of the image.  When you draw a line or curve with the pen tool it creates a series of points or nodes along the line. When you are zoomed in you can see each one clearly.

By pressing on them you can move them. Use the pen tool to add extra ones – or delete some. Tiny anchors on the curved parts allow you to alter the curve of the line. So at this stage you can tidy up and make the illustration smoother round the edges as well as working on your colour details.

Linework

Cartoon Illustration Linework

At this stage of the cartoon vector illustration I can get rid of the background image I used for tracing.

Ive got the extra blocks of shadeing colour in. I wont add many more as I want the cartoon feel.

The image lines are tidier. All the elements are in place. So I don’t need the photo anymore. The background is transparent so once it’s finished I can place any background image behind the cartoon illustration that I want to.

Now I’m going to work on the lines and do the final tidying up. Illustrator has a great tool to help with the linework and one that you will definitely need to read up a bit on before trying to use it. It’s called the width tool.

The width tool allows you to vary the line thickness to get a real cartoony feel. So the line gets varying thickness just like a real brush stroke or illustrators inking pen would give. Have only just started using it myself so still getting the hang of it. For a cartoon illustration like this it’s perfect. Most show it much better than I could especially on some of the youtube videos.

Finishing Touches

Finishing Touches to the Cartoon

With the linework pretty much finished. I can add the finishing touches to complete the illustration.

Blocks of highlight colours. Any extra linework to add some detail and depth. Then the image is finished and ready.

Depending on the amount of time you want to spend. Also what overall effect you want to achieve – you can go as far as you like with the image you create. Fine linework and more natural depth and colouring to go for a realistic look.

Plenty of playing with transparencies of colour blocks will help that. Also gradiating colour – though for websites this doesn’t always work so well. Better to use blocks of colour where possible.

Then all you need is some background. We could create an illustration of a background image just like we did with this character. Possibly a coloured background. Or an actual real photograph. Whe choice is yours. Illustrator allows you to be as imaginative as you like.

chris ryan web designer

Cartoon Vector Illustration Using Illustrator by Chris Ryan
Chris Ryan is a professional artist and web designer in Southampton. Owner of Hostcat Web Design and Hosting.Last updated: May 28, 2018 at 10:52 am

Hostcat Web Design

Hostcat is a Southampton web design and web development company.

I offer creative web design, web hosting and brand communication to clients across Hampshire and beyond.

Contact Details

Hostcat Web Design
Chris Ryan
14 Mill Street
Newport
Isle of Wight
PO30 5DF
Tel : 01983 539638
E-Mail : hello@hostcat.co.uk

Web Design in Southampton