Tutorial – Create Pixel Art in Illustrator

Tutorial – Create Pixel Art in Illustrator


Hey, what´s up ! I am Arthur Siqueira and welcome to another tutorial, this time I will teach you how to create a PIXEL ART in Illustrator to have your vector image. At First It seems to be a simple task, but even when i wanted to create this type of art i Had trouble to finding good tutorials on the internet and i found a few ways that in my opinion are not so good at all. For example, a technique using the Rectangular Grid Tool and then paint the grid with the live Paint Bucket, , this method even works, but it´s a little heavy for generating a grid, difficult to clean the lines and in some cases when you export the image to other programs appear white lines spoiling the image. Therefore, I thought it best to use another technique a little more obvious and much easier to edit and manipulate. The first step is pick your pixel art, there are many images on the internet and you can find via google. I recommend this site www.sprites-resource.com because it brings together what is best in sprites of old games. After choosing your Sprite, open the Adobe Illustrator. To use the technique you need to set some adjustments, go to Edit>Preferences>Guides & Grid. On the GRID set the grid line to 1 pixel and put 1 to subdivision. Now we are ready to start, I like to set a size for the Airboard but this can be changed later easily. Check the box Align New Objects to a Pixel Grid. To view the grid go to View>Show Grid, and then select Snap to Grid. Now it´s time to put your art on the Airboard, I´m using this example image because some images do not open with the right size in pixels, if this happens just resize the image to the original size in pixels, perfect alignment. The way I´m going to show you now is that I particularly think faster and easier. I like to leave the Image Guide below and set the opacity to 70% or less, then it gets easier to visualize the color fills, but before that, we will prepare the color palette. Now just use the Rectangle tool and start drawing over the image, , that with low opacity you´ll see where it filled already. After filling the whole Picture I recommend collapse the colors in one object, to do this just go to Select>Same Fill Color, then apply the MERGE from the PATHFINDER menu. Now you have your Sprite Pixel Art vector, and fully loyal to the pixel x pixel size, and you can use it to animate or print. That´s it, thank you for following the tutorial! Feel free to subscribe the channel.

5 Comments

  • Gabriel Furtado says:

    Ótimo tutorial, amigo! Parabéns! Muito útil! Forte abraço! :DDD

  • Tudy Thirteeneleven says:

    Gj, I made one that takes much more time. yours is faster. linked it a few times in my comments.

  • MynameisIvy says:

    IF YOU HAVE A MAC THE STEPS ARE A LITTLE DIFFERENT. I was lost and confused because I have a Mac; however, thanks to ADDerall, I was able to figure it out. Don't worry, if you are completely lost with how to use illustrator I got you!

    IF YOU ARE USING A MAC follow the instructions below.

    METHOD 1

    The first way he explains to make 8-bit art is by using the grid tool, but he doesn't recommend doing it this way because it is difficult to get clean detailed lines. But if you want to try it that way the instructions are below:

    Step 1: If this is your first time using Illustrator there is a step you have to do before you are able to get the grid tool. Select the line segment tool. The button is found on the lefthand side and look like this: /

    Step 2: Put your mouse over the line segment tool (The button that looks like: /) and either 2 finger click on the button or hold down the 'Control' button and then click the line segment tool button.

    Step 3: Select 'Retangular Grid Tool' and VOILÀ it now shows the the grid tool he is talking about in your handy dandy tools menu on the lefthand side of your screen.

    Step 4: Select the 'Rectangular Grid Tool' and position the pointer on the top righthand corner of your paper, press down with one finger and use the other finger to drag the tool to the end of the page. Without releasing your finger you can adjust the grid by using your up, down, right, and left arrow keys to change the size of the squares.

    Step 5: Either double finger click the 'Shaper Tool' found on the left hand side of your tool menu bar or hold down the the 'Control' button while you click on the 'Shaper Tool'.

    Step 6: Select the 'Live Paint Bucket' button then select the color you want on the right side of your screen and begin painting your 8-bit masterpiece!

    METHOD 2 The better method….

    Step 1: Now we are going to edit the Grid Tool, as he complains to do in the video, but we are going to do it the Mac way! Select 'File' than 'New'.

    Step 2: Select the dropdown box next to 'Units' (found on the righthand side) and select 'Pixels'.

    Step 3: Click the arrow next to the 'Advanced' button.

    Step 4: Click the box next to 'Align New objects to Pixel Grid'. A checkmark should now appear. Select 'Ok'.

    Step 5: Select the 'Illustrator' tap found on the top right hand side of your computer next to the apple logo.

    Step 6: Hover your mouse over the 'Preferences' button – Don't click the 'Preferences' button, hover my friend, hover. Once you do that a side menu will appear.

    Step 7: Select 'Guides & Grid' in that menu.

    Step 4: Follow what he says in the video in order to edit the grid. Change the 'Gridline Every' option to: 1pt and the 'Subdivision' option to: 1.

    Step 5: Uncheck 'Grids in the back' then select 'Ok'

    Step 6: Select the 'View' tab from the top then 'Show Grid'.

    Step 7: Select the 'View' tab again and select 'Snap to Grid'.

    Step 8: To add a picture you want to work on to illustrator select the 'File' tab on the top of the page and select 'Place'

    Step 14: Select which picture you would like and click anywhere on the screen and the picture will post.

    Step 15: To resize the image that was placed select the 'Selection Tool', it's the black mouse pointer in your tools menu.

    Step 16: Hold down the shift key (Holding down the shift key will allow you to adjust the image proportionally) and drag on one of the corners of the image to adjust.

  • Some Day Dreamer says:

    Wow this way is easier! thanks magic Brasilian man. Or Portuguese whichever it is LOL.

  • Daniel Gomes says:

    Muito obrigado!Ajudou bastante!

Leave a Reply

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