Reader Tutorial: 16bits Vector Style IllustrationListThumbs
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
27 Comments
Hehe, cool. But not really new. ;)
lol, quite cool!
LAME!!!!!! i really expected a lot more than a copy-paste, even my grandma can do that.
i was in need of a tutorial like this ..!! Thanx !! :D
Hmm... It's strange
Very cool!
YAY! Thanks a lot for this, I was waiting for someone to come up with one of these tutorials, I'd love to learn how to do some more of these kinds of illustrations since I'm an old-school fan of gaming, thanks for this, guys!!!
by the way, I had to do this on my snes9x in order to get a better grasp on the 16 bit pixels, the emulator automatically smoothes the game's picture so the pixels are a bit blurry, that can be avoided by going to:
Options -> Display Configuration (Alt+F5)
Once there, uncheck the box next to "Bi-linear Filtering".
That way the pixels will be better exposed, and it'll be easier to select in Photoshop.
I did a MegaMan from MegaMan X, looks awesome, some of the outer, black vectors seem a bit soft, but I'll give it a try again, aside from that it's unbelievable, thanks again!
Have you ever thought about just zooming and pushing PrintScreen?? It would give the same results without tracing. You only have to crop. Very difficult tutorial with a very simple result. Minus
This is fucking crap, it is a shame for abduzeedo.
thanks for the tutorial
really nice!
you can achieve something like this with the Illustrator effect 'Rasterize' set to about 15dppi, with anything...
=D
Damn, I love this short !
A while ago I wanted to do something similar to this, but it wasn't turning out right. I'm gonna go back and try this method instead.
really nice and thanks for the tutorial man, this is absolutely awesome, I used to think people forget those low resolution games , now I changed my mind
I've been doing pixelart for some time now, and i have to say this. If you are gonna do a tutorial, please don't start with badly scaled pixels. Looks horrible.
I have to say, this is not a good tracing tutorial. for example, you should pick the colors you wanted to use ur self and not depend on the trace tool alone.
And this is also not illustration. This is plane copy, mask and trace.
Oh snaps, busting out the emulator. Yee Yee.
so ya play mario, he? :) nice one
This is Crap!
Wonder why abduzeedo allow this post
Wow..first time I've seen crap posted here. It's REALLY lame.
why do u have to go through the whole vector thing, what exactly does that do?
Wow, I cant help but feel like you've copied QuintalDesigns.com on this one buddy! Don't worry though, I'd be happy to write for you for a nominal fee.
To learn how to do this on your own, and create anything you want in this style; check this video tutorial out:
http://blog.quintaldesigns.com/2009/05/pixel-art-in-vector-illustrator.html
I checked out your tutorial and didn't see many similarities at all. Sure, both deal with making sprites into vectors, but the processes are totally different. Live paint vs. live trace. That being said, I used the live paint method (because live trace wasn't working for me), with my own shortcuts. But really, neither live trace nor live paint are very original concepts so even if this tutorial did use live paint, I don't think anyone would call it copying. There are tons of tutorials on using the pathfinder, that doesn't make mean one author is ripping off another.
Mario cool....u suck
Thanks for the tutorial! I've been wondering how to put pixel art into Illustrator as vectors. I'm a total Illustrator n00b, and I absorb every little tut on the subject I can find. :P One thing though... ROMs are illegal. You may not want to directly link to the Super Mario World ROM here on Abduzeedo. A better/legaller (one of my own word creations) way to do this would be to link to any sprite sheets featured on www.spriters-resource.com, and giving credit when asked.
these comments have been posted by two types of people; mario fans and 'the rest'!
Post new comment