Dan Grady: How To Create Pixel Art In Adobe Illustrator (8 bit)

This pixel art tutorial features Dan Grady showing us how to create 8 bit style artwork in Adobe Illustrator. It has become very popular and retro over the past decade to use 8 bit sprites even to the extent where people are even creating themselves in Adobe Illustrator or other software packages as 8 bit characters. So this pixel art tutorial could be a useful and fun learning resource for you to begin creating your own unique and retro video game style characters.

He works from a bitmap reference and guides you through all the necessary Adobe Illustrator techniques for creating your character and producing him/her as a vector image to retain all of its qualities and not lose any detail for example if you were to enlarge it.

He shows you how to create and place your own color swatches and also how to use the eyedropper tool to select the appropriate colors for your character. There is also a key too found in Illustrator which is fundamental for creating your 8 bit character and that is the rectangular grid tool. You will be guided through the step by step process of how to use this tool correctly and precisely for your creation. The swatch select and paint bucket tools are used to fill in the individual pixels in your newly formed grid and it is at this point where the fun can start and your 8 bit character will really start to show form.

So if you have ever wondered how to produce a simple 8 bit pixel art character in adobe Illustrator then this is the tutorial for you. Have fun and enjoy.

No votes yet.
Please wait...
Who Uploaded This Tutorial?
This Video Tutorial is Tagged With:

, , , , , , , , ,

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    1. 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.

      No votes yet.
      Please wait...
    2. 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.

      No votes yet.
      Please wait...
    3. 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.

      No votes yet.
      Please wait...
    4. 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.

      No votes yet.
      Please wait...
    5. 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.

      No votes yet.
      Please wait...
    6. 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?

      No votes yet.
      Please wait...
    7. 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.

      No votes yet.
      Please wait...
    8. Hi Patrick!My name is Conny and Iím from Vancouver, BC! (I hope you enjoyed your stay here by the way when you were here for the Olympics.)Iím a big fan and seieng you skate makes me regret not pursuing skating more when I was a kid. I did learn how to skate and starting figure skating a bit as a child, but my parents always urged me more towards music like piano instead of sports. Iím happy for your that your parents let you choose what you wanted to do and supported you the whole way!My questions to you are:1) If you could only describe yourself in maximum 10 words, what would they be? (It could be a short phrase like a quote, or just adjectives)2) If you could go back in time 10 years and tell your younger self something, what would it be? 3) If you had access to a time machine, where and when would be the first place you travel to? Good luck choosing a winner for this contest because I bet you got LOADS of good questions! And congratulations on your results in both the Olympics and at Worlds.- Conny Yang =)

      No votes yet.
      Please wait...
    9. happy birthday too on march 10and i know prbobaly now a lot of people r asking you to say happy birthday to them and im sorry if that caused ur twitter inbox thing to over flow with happy birthday wishes okay well so heres my question There’s a quote that states I can tell you what kind of person you are if i know what you think about when you don’t have to think . So my question is, what do you think about when you don’t have to think?

      No votes yet.
      Please wait...
    10. 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?

      No votes yet.
      Please wait...
    11. 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?

      No votes yet.
      Please wait...
    12. 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!

      No votes yet.
      Please wait...
WordPress Security