When creating art for your iphone or android app or game, the most common tool is Photoshop. However, since there are so many different devices and screen resolutions, creating graphics can get very time cosuming when you want to support as many types of devices as possible.
In this tutorial I will instead use Adobe illustrator to demonstrate how to create scalable pixel art for a 8bit type game. We will also have in mind the the power of 2 rule. For those of you who doesn’t know what that rule is, here’s a great tool for learning about unknown things to you…
Let’s get this party started…
1. Launch Adobe illustrator, if you don’t have it go to Adobes website and download a free trial.
2. Create a new canvas, File/New…
3. There’s nothing complicated here, just make sure you have a document setup like mine, name it tileSet then press OK button
.
The reason why we created a canvas with the 512x512px dimension is because of a few things;
- We could have made it smaller but assuming this is for a Tiled Map game, we will easily add many more items later to our tileSet as our project grows.
- Next reason is the power of 2 rule, I assume you have used that fantastic tool I linked to, here’s the link again…
Back to the tutorial.
4. Now that we have our document set up, theres pretty much two tools we will be using. First tool is the “Rectangular Grid Tool”
and the “Live Paint Bucket”.
5. Save your document before we go any further also make sure you save often to avoid any unpleasant situation…
6. With the “Rectangular Grid Tool”
selected, press once anywhere on the canvas and you’ll see this dialog. Make sure you have the same setup as me then click OK button.
We just created a 32x32px grid to use as our base for the first pixelArt item we will create. To be able to use this grid for our purpose we must first position it at the x = 0, y = 0. This step is just to make it a bit easier for us to align the item properly in out tileSet and eventually add the next item to the right.
7. Select the grid we created with the “Direct Selection Tool”
and set the Reference Point to Top Left Corner, change the x and y cordinates to 0 and press enter. 
8. If your grid looks like a black rectangle, it’s because you have a 1pt stroke applied to the grid. Let’s fix that, to make it easier to see our pixels in our grid we change the stroke width to 0.05pt. This will give us a very thin black outline and make it easier to see where we are painting our pixel art.

9 With the grid still selected, switch to the “Live Paint Bucket”
and place the cursor over the grid. It should now turn red, click on the once. The grid is now ready to use for pixel art.
10, Change to the “Direct Selection Tool”
and click once outside the grid to deselect the grid to make it easier to see what we are creating.
11. Change back to “Live Paint Bucket”
and pick any color you want to paint with. Zoom (cmd +) in on the grid as much as you like, I keep mine at 2400%.
12. In this tutorial I made a 1up mushroom from Super Mario, you can just google an image you like and open it with illustrator and keep it as a reference or you can use my image.
13. If you make a misstake when you paint you can’t use the “Eraser Tool” instead you should select color [None] in the swatches panel. This will let you erase any errors and if you don’t wanna bother with erasing you can just paint the pixel again with the color it was before.
14. Now that you are done with your pixel art, copy mine or drawn your own, you select the grid again with the “Direct Selection Tool”
and remove the stroke we added earlier. All you have now is the pixel art.
15. Save your project.
16. Now we’re ready to export our file as a png, File/Export…
17. As we already had our name tileSet you should keep it, in the format dropdown menu you’ll see a few different formats to save as. You can save as PSD if you want to edit the image in photoshop or for this example we will pick PNG. Save as .png and press Export.
18. Now you will see this dialog box , if it looks like mine press OK and now you are done.
Let’s say this was an sprite for older iOS devices and you wanted to add Retina support in your next update of your super cool game, now you just select your image in illustrator and double it’s height and width and you are done!
- Note.
Adobe illustrator trim any excess transparancy of your image so if you haven’t used the entire grid you’ll end up with a sprite that is not, in this case 32x32px.
This was the end of the tutorial, in the next we’ll create a tileMap with Tiled and render it on the iPhone using Corona SDK and Lime.
Resource file