how to create pixel art in Adobe Illustrator (8 bit)

[@NathanRiveraMelo]

Dan, I've never watched your other videos before, but just based on this one, I might just watch more, if nothing else but to hear your enthusiasm. Just great. Thanks, Dan.

[@ceagan79]

This is my first youtube comment ever; thats how badly I needed to tell you thank you. This is exactly what I was looking for to finish a school project. Great job.

[@Nomicro4u]

Great tutorial! You should look into teaching an illustrator class. Very clear instructions and useful insight.

[@danpgrady]

@Davnation some tools in the tool panel have a little black triangle in the bottom right corner. This means there are more tools there under that cattagory. Click and hold those tools for a flyout of more tools. I believe the rectangular grid tool is under the line tool.

[@danpgrady]

I've used this method to create a couple 8 bit style games on the app store. Most people will create 8 bit art in photoshop, but there are some benefits for using vector graphics for scaling. In photoshop you can zoom all the way into the pixel grid and shrink a brush all the way down and "paint" the pixels that way also. A secret to resizing sprites in photoshop without much degradation is to enter settings and change image interpolation to preserve hard edges.

[@danpgrady]

If you look at the tools panel you will see that some tools have a little black triangle on the bottom right hand corner of the tool. This means more tools are under that category of tool. If you click and hold those tools a fly out menu will appear with the rest of the tools. If you click and hold the line segment tool you will see the rectangular grid tool.

[@inkstatic_art]

Man - great video. I was wracking my brains to figure this method out in Illustrator. Thanks so much!

[@rickboyer6676]

Pretty cool. I just watched the 3d bottle vid too. I'm now a follower on FB too. Great vids, Not obvious tuts either! Keep it coming!

[@danpgrady]

There are a couple errors, Im aware of that. I wasn't trying to make a perfect Megaman I was trying to show a video of the techniques used to create the art in Illustrator.

[@skwidthekid9081]

i want to thank you :) i really wanna get into this and you're a big help and your voice is fantastic

[@yourluckynumber]

This is awesome, can't wait to try it out. Your voice is great, wish all the geeks on Lynda sounded like you instead.

[@danpgrady]

Sorry if my video "pisses" you off. I must admit it is quite cruel of me to take time creating a video to share my knowledge to people who find it useful. And if you are the "8-bit" expert why are you viewing my "tutorial" videos.

[@Youlookgreat83]

This is really helpful! Well done, and very smooth!

[@danpgrady]

This video was created for teaching purposes and was done live. Yes there are many mistakes. Everybody makes sure I know that all the time.

[@olivercavanagh1901]

This was so helpful, I was working on a 8-bit style arcade logo an it worked out wonderfully!

[@squimps1]

Oh thanks so much! I always found the sizing of an image kinda confusing plus I'm more familiar with illustrator so I guess sticking with vector will be my best bet.

[@trojan403]

Thanks Dan, I wanted to create some 8bit images for some graffiti stencil art and this helped out heaps!

[@danpgrady]

@albertabeefcowboy84 you can save it to whatever is best for your final output. You can save it as ai if you want to edit it in the future, you can export it as a PSD if you cant to animate them there, or you can save them as PNG's for assets used in a game etc.

[@JakeAnthonyMirabal]

Never even knew about the rectangular grid tool. Thanks!

[@danpgrady]

Im not sure if I know what you mean by "extracting" the "pixels". If you mean outputting your final work you can make your artboard tight to the sprite and go to file>save for web and devices. Games would use a png file. I personally like to save everything out as png's and then open Photoshop and load the layers in as a stack to edit more. You can simply delete the grid space you dont want. select the eraser tool and hold alt to marquee the grid spaces you dont want.

[@FaunZion]

I think you're talking about the Mac OS interface itself. Where you got a taskbar down your screen, he has none - but he's got this nice thingy upside in place.

[@xNWOxAftermath]

Very nice tutorial! +1 for clear instructions

[@mrturismo]

That was a very practical way of doing this man! Thanks for the tip!

[@psyquack]

Thank you for the tutorial! :D Now for the first time I shall set foot in illustrator and not quit after 5 seconds because of confusion!

[@danpgrady]

You should be able to use these same techniques in illustrator CS3. As it contains all the elements necessary (grid tool, live paint)

[@iLoveTurtlesHaha]

Don't pay any attention to them. Your tutorial is amazing. I wish you did more tutorials. Very clear and easy to follow. You should be a teacher man.

[@KylerRamos]

amazing tutorial very well spoken words and you could tell you knew what you were talking about ha ha keep it up man

[@danpgrady]

@nmoraites05 Awesome! yes its addicting, even more fun when you make sprite sheets and start animating them.

[@justaregularuser79]

VERY helpful! This is great because I'm making an entry for a t shirt design contest, so this is perfect! Thanks!

[@danpgrady]

@xXHomerSimpsonXx Some tools in the tools panel are hidden under other tools. Some have a little black arrow on the bottom right of the symbol in the tools panel. If you press and hold the mouse over those tools you will gain access to other tools in same category. It will probably show the line segment tool ( / ) look under that. Let me know if that helps. Im using CS5 but i think the Illustrator version in CS5.5 is CS5. I don't think there is an Illustrator 5.5

[@thegibrangaytan]

Thanks a lot for this tut. This is really fun!

[@jellybandit774]

You hero, this was perfect for an assignment i'm working on

[@xXHomerSimpsonXx]

@danpgrady thanks. it turns out i checked all of the little arrows except the line tool.

[@danpgrady]

Illustrator uses scaleable vector graphics. You can set your Artboard to the size you need and your vector graphics will remain sharp.

[@danpgrady]

Make sure your grid is currently selected. You can hit "V" to bring up the selection tool and select the grid. Then hit "K" to use live paint and paint the grid. Make sure you have a paint color selected.

[@danpgrady]

@SvartUlv9 Sure! if you don't mind "painting" twice as many pixels. Same process just a lot more "pixels" to create.

[@CMVATutorials]

You have a great style to your videos. Nice presentation Dan. Are you scripting beforehand or winging it? Just curious.

[@kippy32]

Awesome video, really great! thanks

[@danpgrady]

@plazmotech Sorry, I was just trying to show how to perform this technique in illustrator and not trying to make "pixel perfect" artwork.

[@xxstarssokissablexx]

Hey man you should do a demo how you created the intro video. That would be very helpful if you did.

[@stevelitt]

very helpful even 9 years later, thanks!

[@Bohed]

Great! Just what I was looking for. Much better than using the Grid. Thanks!

[@SteffDaddy02]

Very helpful. You rock, man.

[@KattiaKattia]

Great tutorial!

[@danpgrady]

@Defutionable yeah I noticed I missed that while I was making the video, but I thought it wouldn't matter for the quick tutorial.

[@danpgrady]

I personally did for the purpose of teaching how to create pixel art in Illustrator. Others may want a vector version of the image for a ton of different reasons. I'm assuming you don't do much design work or animation or the answer to this question would be extremely obvious.That's like asking a host of a cooking show why they are copying and showing how to create a dish when there is already an example prepared off to the side.

[@numawalrus]

dude your voice sounds so awesome.

[@cross7fu]

I was going to copy and paste squares like crazy, you saved my ass, thank you.

[@danpgrady]

Ass safety is my number one goal!

[@Adrian22Frets]

Hey y'all, if you're trying to cover a 50px per 50px canvas and the rectangular grid tool doesn't happen to create perfect squares, just multiply by two both the horizontal and vertical subdivision (that is 54 and 64), worked for me! It might be my old version of illustrator tough

[@Roon108]

the step @6:40 just makes all the pixels on the grid blank, which makes my picture i drew disappear. can u help me fix this?

[@danpgrady]

"x" toggles the fill and stroke. if you hit "/" with the fill selected everything will disappear. You want to sit the stroke to none, not the fill. If you mess up you can just Edit>Undo.

[@mysticsack]

Fairly simple:T thank you very much! this is great help!

[@sstrawbrryblonde]

click and hold the line segment tool, it will be in that panel.

[@danpgrady]

Grega, I work in the gaming industry and have been a gamer since the Atari 2600 and a designer since I could use a keyboard. That being said I am very well aware of what "8-bit" represents in both color limitations and computer architectonics. In the beginning of my video I say 8-bit "style" as a aesthetic description or more accurately In my video title I say "Pixel Art" with "8-bit" in parenthesis as a descriptive familiar. Nowhere in my video or description do I say this is literal 8-bit.

[@NewYorkCasey]

Good stuff, thanks!

[@sunglasesatnight]

great! tyvm dan!

[@miketang7436]

great help!! however when i copy into photoshop the grid lines appear?

[@woowoogaming]

Do u know the part what has minimize, close and the smaller/large screen part? What is it? Did u download the layout thingy

[@LostInNeverland128]

@danpgrady how do you do it if you don't have a copy? like you only have a normal picture?

[@tmc02086]

Thanks for the demonstration. I

[@kaysebarton6976]

Thank you so much,this helps alot!

[@CosmicPenguin_86]

Great video! But you could use Image Trace and save a ton of time. That probably wasn't a feature yet on your version at the time.

[@danpgrady]

@albertabeefcowboy84 oh yeah for sure! I always save the ai file, and continually hit save every 5 minutes or so just in case Illustrator crashes. You dont need to save it as an EPS file though. You can skip that step and export the layers directly as a PSD. I made a video about that on my channel.

[@danpgrady]

I'm not totally sure what you are talking about. If you are referring to the dynamic zooming it can be done with the Mac OS.

[@danpgrady]

Do you need to expand it? when you actually output the image as a raster image do you still get that artifacting?

[@kangjames6091]

I understand most of the instructions, but I've tried it with a different 8-bit image, but I couldn't get the rect. grid to match up with the image. I figured my 8 bit image was not matching because of it being a jpg format, so I converted it to a 16 bit BMP in Photoshop and still can't get my grid to match in size. The reason I want my grid to match is because I get half way into putting the black pixels in and they get cut off at some point. What is it I'm doing wrong?

[@fanuelchandra1777]

very helpful! thanks man :D

[@ChizFreak]

I'm using CS6, could you tell me how can I "extract" the colored "pixels" once I'm done? I mean, one way to save it as a image, but just the drawing, and not the entire "drawing" with also the rest of the squares in blank. Also, is there any way to modify the height and width of the grid without messing up things you already colored? I mean, there are squares left above that I don't need, so how can I delete those?

[@xXHomerSimpsonXx]

i cant find the grid tool on cs5.5

[@adamdonovan88]

What do you think of just laying the grid over the bitmap image. Is that not possible?

[@Megasimgir]

when I do it and save it there's a transparent line separating each pixel instead of none ?

[@Chookz85]

Hey Dan, when i set my stroke to none there are very faint lines visible between some of the pixels. Do you have any idea how to fix this? Or is there something ive done wrong?

[@danpgrady]

@werearewolfs what website is what? a little vague.

[@squimps1]

I'm looking to make my own 8 bit game, would this be the best method of making 8 bit vectors to animate in flash?

[@danpgrady]

@mischa1900 what do you mean? almost all of the design professionals in the field that I know use macs.

[@gamerxjoshmaplex6479]

LOVE IT!

[@danpgrady]

@nmoraites05 okay, look for that soon

[@BrendanHasAbs]

Thanks! This is killer

[@yipg324]

i m stuck at the point of using the live paint bucket. i cant use it on the rectangular grip. whats wrong

[@MrRolaCosta]

if I use after effects how should I animate it? frame by frame?

[@AhSwayTaChin]

Thanks for sharing this!!!

[@TannerWoodworth]

6:05 "Subtitle text here", lol great video though, it helped a lot!

[@thecanookle]

awesome tutorial man i made a megaman and fast too

[@jellybeanluv1323]

Hi! This video is seriously helpful! Thank you so much for making it. I just have one question, how can I make an ''8-bit'' drawing like this of a character that is not already made in the 8-bit style?

[@danpgrady]

You can take an image of the object you wish to create an 8 bit variation of and place it under your grid as a template. Then "draw" your pixels over it in the same way shown in the video. You will have to take some artistic liberty but if you place the pixels right you can get a nice piece of art.

[@jellybeanluv1323]

Ok, cool! I will give it a try. Thank you (^w^)

[@Threeleggedyoyo]

Crochet Kitty Another option would be to put a Mosiac effect over existing art.

[@simonbelmont0993]

So now that I have the image, how do I export this for use in After Effects? I have an animated bit of footage I'm working on and I need the image I've created here to react to the animation I've made in After Effects but so far I've had no luck. It just keeps showing up as a solid object with slightly apparent grid work during some illuminated frames.

[@danpgrady]

You don't need to export it as anything unless you want to rasterize your vector art. Just Import the layer from the Ai file from the project panel in After Effects. You need to turn on continual rasterization for the target layer to have the vector layer recalculate dynamically to keep %100 resolution at any scale.

[@danpgrady]

If scaling isn't an issue just make the pixel art in Photoshop.

[@afro2885]

Hey Dan Grady, would this be the method in creating sprites for mobile apps/games similar to Flappy/Iron Pants/Zoo Keeper? How do the sprites look clear/HD while still being 8 bit?

[@danpgrady]

Most people would create pixel art in Photoshop or a dedicated pixel art creation program. This is a fun method also, that I have created games with. They stay clear because they aren't technically 8 bit graphics. Illustrator graphics will be clear because they are scalable and will stay clear since they are vector. As long as any graphic is created at its optimzed size for the proper hardware output it will be clear.

[@MetalShadow5]

You're a mega man :D thanks for help!!!

[@danpgrady]

I dont believe you have done anything wrong. Sometimes those lines may or my not show up at different zoom levels within illustrator since there is indeed a separation of shapes. I remember seeing those lines sometimes but they would never show up in my final outputs or prints, Just within Illustrator. When you save that image as a jpeg or png do you still see those lines?

[@SvartUlv9]

Would this work for a 16 bit image?

[@wes2819]

THNX, very useful tutorial!!! But I have one question, I can not find an easy and quick way to select all the 'pixels' in the canvas with the same color (for color change). I searched on the internet but I can not find any answers, can you please help.

[@danpgrady]

You can use the magic wand selection tools. Double click it in the tools panel to adjust the color sensitivity.

[@oamkung]

this clip very good for me .....thank you

[@mincrcolp]

What software do you do it?

[@TheBattleProgrammer]

where did you get this pixel art program

[@fanuelchandra1777]

how to make hi-resolution pixel art? i want to print it in a big size..

[@kolocon]

nice! thnks!

[@zhucci]

Thank's!

[@danpgrady]

Yes, I'm guessing you ran out of room and need more "pixels" but dont want to abandon the work you've already created? Try selecting your grid and drag out holding shift and alt. This will make a copy right next to your previous grid. Hit slash "/" and put your fill at none to have a new clean grid. Now nudge with arrow keys or drag the new grid to line up with the edge of the old one. Then select both grids and go to object>livepaint>merge. TaDaaaaaaa!

[@danpgrady]

Im not hurt at all, I just mention that because one of the reasons I don't make a lot of videos is the youtube community never appreciates the videos. It's rare to get a thank you or good job. Usually most the comments just point out what's "wrong" with the video. I took the time to make the video to try and help people. I've had about 20 posts of people pointing out the "missing" pixels and Im tired of it. Some people can only elevate themselves by pointing out mistakes of others.

[@dkisausome]

Thanks, this should be helpful :). I've been doing so much stuff on Photoshop lately... Maybe I'll have a use Illustrator again after all :T...

[@Burrito206]

is there a way to do this on paint

[@gunguy100]

I can't find the rectangular grid tool Any help?