Reader Tutorial: 16bits Vector Style Illustration

Mario! everyday he saves the princess! Between some enthusiasts he is a great hero, outside and inside the gamers world, he is one of my favorite characters, so I decided to show how to vectorize a Mario from super nes with illustrator. The same process can be used for any other game or character.

What you will need?

- A Super Nintendo emulator called Snes9x - Download it here - A rom from Super Mario World - Download it here - Photoshop and Illustrator, in this case I used CS4 - A hot chocolate mug if it's cold, and in case it's hot, lots of coke

What you will get?

Step 1

Ok, let's open our emulator. Click at the snes9x icon to start the game. Click at File/Load Game or simply ctrl+O.

Step 2

Go to the place where you saved the rom of the SMW to run the game and then you need to Open a room (or two clicks). If everything goes right, you will see nintendo's logo and the game will begin.

Step 3

Now you need to capture de screen image (print screen) to get our Mario. Then past it at photoshop.

Step 4

Now, with the crop tool (C) select only Mario.

Step 5

Now we will clean the scenario. You can do that manually with the selection tool or via Color Range.

Step 6

Click at the most visible color as below:

Step 7

At the 'not selected' parts you can use the selection. In summary: the main thing is to select the character or that it out of it, depends on your method.

Mario with the scenario selected, then I pressed delete.

Cool!

Step 8

After that, open Illustrator. Select our Mario from photoshop and paste it here. Then click on it and go to Live Trace> Tracing Options.

Step 9

Select the options as below and give a priority to the option Preview so our result will we showed in real time as the selections are activated.

Mode: Color Max Color: 256 Blur: 0px Path: Fitting: 0px Minimun Area: 0px Corner Angle: 0px

So do a Trace (at the Mode option, then you can alternate the Color, Greyscale and Black/White), this way you will have different looks in a gameboy style. Go to Object> Expand and click ok.

Step 10

Now your image became a Vector, so now ungroup it (Ctrl+Shift+G).

Step 11

Select the small dirty parts and the white background that are at the image and delete them.

Step 12

Some fonts in a pixel style will do great with our Mario.

And our image is ready! You can also do some posters with this, in a bigger size. There is no limit for your creativity... and ok I know that you didn't drink your chocolate or coke. :)

I hope you liked the tutorial!!

To download the illustrator file from this tutorial click here.

About the author

My name is Fabrício Falco and I live in Curitiba, Brazil. Actually I've been knocking my head as a freelancer doing some wordpress and joomla websites. Check out my personal website and also add me to your facebook.

Edited by GisMullr