This post first appeared on www.vickiwenderlich.com
I had a recent discussion with a developer who was creating art for a game for the first time. Previously, he had worked with a designer that gave him the art, but now he needed to make his own graphics.
He ran up against a problem right away: He didn’t know how to start.
He had the following questions:
- Do you make the Retina art or the Unretina art first?
- How does the iPad art relate to the iPhone art in size or proportion?
- How big do you make the art? As in, how big should the game elements be, like a paddle or a ball?
This article is the result of our discussion, since we felt that these notes could help other developers in the same position.
If you have some of the same questions about creating game art, read on for answers!
Let’s take these questions one by one:
Do you make the Retina art or the Unretina art first?
The Retina art. You can scale down the art for the Unretina version more easily than you can scale up, especially if the art is not entirely vector-based (if you need textures, for example). Some people work the other way around, and that’s fine too – but making the Retina art first and scaling down is definitely easier for beginners.
If you are creating a universal game, however, the process is slightly altered (at least for me. Other artists may work differently). This is because of how the iPhone and iPad art sizes relate, which is covered next.
How does the iPad art relate to the iPhone art in size or proportion?
if you are making a universal app, you will need Retina and Unretina versions of each image for both iPad and iPhone. That is, four different images:
- iPhone Unretina: image.png
- iPhone Retina: firstname.lastname@example.org
- iPad Unretina: image-iPad.png
- iPad Retina: image-iPad@2x.png
Except for backgrounds, we make iPhone Retina art the same size as the iPad Unretina art.
That means that email@example.com is the same exact piece of art as image-iPad.png. Then we scale this art down (scaling the art in the vector-based program, not scaling the PNG) to 50% for iPhone Unretina and scale it up to 200% for iPad Retina.
For backgrounds, the iPad Unretina background is still based off the iPhone retina background – it’s just that you can see more of it due to the larger screen. Then the iPad Retina background art is scaled up, and sometimes more detail is added.
How big do you make the art? As in, how big should the game elements be, like a paddle or a ball?
The good news is, there are no standard sizes. Make the art whatever size looks good on the screen. If you create your character and he looks good at 200×200 pixels, make him that size.
The bad news is, there are no standard sizes. No helpful guidelines that tell you how many pixels tall your pirate main character should be, or how many pixels in diameter a cannon ball should be.
Naturally, this leads to another question:
How do you figure out what size looks good?
If you are opening a document to make your character for the first time and you don’t know what size to make the document, it’s because you’ve missed a step. First you need a mockup of your game!
Here’s how to create the art for your game:
- Create a document that is the size of your Retina device screen. If you are developing a landscape game for the iPhone, that means a document with width 960 pixels and height 640 pixels.
- In this document, create your background. Even if you don’t know yet quite what the background will look like, just make a rough draft with colors close to what you have in mind. When finished, group the background components (in Illustrator, put them all in the same Layer and make a new Layer) and lock them.
- Next, make all your game elements within this document. This way you can size your objects –whether they are ill-tempered birds, paddles, balls, chess pieces, gold stars, or italian plumbers — relative to the screen.
- Note that since you are creating Retina art, you will have to zoom out to 50% to see it at the size it will appear on the device (unless of course you have the new MacBook Pro, which has a Retina screen).
- Zoom in to work on the details; zoom out to 50% to get a feel for the relative sizes while seeing the whole screen at once. It’s perfectly fine to make an object 300 pixels wide, decide it’s too big, and scale it down to 200 pixels. There are no rules for game piece sizes. Make them whatever size looks good. Group the element’s parts (just like you did for the background) before moving on to the next element. It’s okay to go back and make changes, too.
- Note that for UI elements like toolbars, tab bars, text fields, etc, Apple has specific guidelines. Check the HIG or, for the simple stuff, this article for exact pixel sizes needed. But for the actual game, sizing is up to you.
- Last (but important) note: Apple recommends that anything tappable should be a minimum of 88 pixels wide and tall on Retina screens (so 44 pixels wide for Unretina). If the player needs to be able to move or tap an element in the game, it needs to be tappable. If the element is smaller, you can make an invisible area (either in the sprite or in your code) around the element to make it big enough to tap.
- Once you complete the mockup, with all your game elements sized the way you like them, save out the different elements.
- In Illustrator, this is easy: just drag each element off the background and give it its own artboard, then save that artboard.
- In Photoshop, you need to copy the element into a new document (duplicate the layer or group of layers into a new document) and then trim the extra space away (Image>Trim) before saving.
- Save everything as PNGs.
- This gives you your Retina art. Now scale down to get your Unretina art. To get the Unretina versions, you have two options: use an image resizing app created by other developers for exactly this purpose, or scale down and resave your Photoshop or Illustrator documents. In Illustrator, you can scale down the art within the Save For Web & Devices dialog (under the Image Size tab). In Photoshop, choose Image>Image Size and scale down 50%. Don’t forget to check the box that says “Scale Styles”. Then save as usual.
If you are a first-time game art creator (or game artist wannabe), I hope that these guidelines help you start your projects!
Remember that these are things I have figured out over time. I’ve made every mistake in the book as I learned, and there still may be better ways to go about making game art for the iPhone and iPad. It would be helpful if other artists would chime in below in the comments. How is your process similar or different than the steps outlined above? Do you have any other important key points for total beginners making their very first set of game art?