I remember when I first got into iPhone art and graphic design, my biggest, most persistent question was “Which #@$&#$ program should I be using???”
Unfortunately, it’s not a completely straightforward answer. Which program is best depends on what you want to do.
Hopefully this overview will help you choose the right program for your project, and save you some of the headaches I encountered when I was just beginning to learn how to make iPhone/iPad art!
Illustrator is a vector editor that lets you make vector-based artwork. Vectors are mathematical equations that tell the computer how to draw out the shapes. Since they are equations, they (and the artwork they describe) can be scaled without any loss of resolution.
Note: the art used in iPhone/iPad apps are usually PNGs or JPEGs… in other words, not vectors. The vectors are used in Illustrator to create the art, and when you save the art, you export it as raster images (fixed-resolution bitmaps) to use in your app.
Fast, Easy, Editable Vectors
Drawing and editing vector shapes is a breeze, allowing for faster development and experimentation. Illustrator makes it easy to move, rotate, scale, and group objects, whereas in Photoshop it takes several steps to do each of those tasks.
You can apply multiple fills and strokes to an object. This makes for really nice art styles. In Photoshop, you can only apply one gradient fill and one stroke to an object. Also, gradients are a pain to place and edit in Photoshop, while they are easy in Illustrator.
Vectors are always editable. Unless you rasterize an object, you will always be able to decide you think that your cat character’s tail needs to be a little more curly, and you can edit the points in a few seconds.
When the iPhone suddenly doubled its resolution for Retina display, did I panic?
Nope. I just scaled up my vector illustrations. Any work in Photoshop had to be completely redone, but fortunately we didn’t have that much.
Vectors are infinitely resizable, and you can save your art at any resolution you need. It’s only a matter of time until the iPad doubles its resolution too, or another tablet/platform comes along with higher resolution or a different aspect ratio.
In many programs (like Photoshop or Fireworks), you create a document, say 960 pixels wide by 640 pixels tall (iPhone retina landscape-mode). When you export that document as a PNG, it saves the whole document.
If you only want a piece of that document (say a monster), you have to copy and paste it into a new document and then save it (or you can use the Slice tool, but that makes more sense for websites and tables and user-interface components. For saving out game characters, it is unwieldy).
In Illustrator, you can create many artboards within one document. Artboards define the areas that you save as PNGs (or JPEGs, etc). This means that I can create several game level backgrounds, as well as monsters and characters and objects, and then draw artboards around each of them and save each artboard.
This lets me keep an eye on the overall style of the art, and make sure that colors don’t clash and relative sizes work. I can drag a monster onto the level background next to the hero character and make sure it all looks good, then drag them back off.
Artboards also make wireframing (prototyping) faster. I can make an artboard for the title screen, the main menu, the actual game background, and each of the menu screens. The whole workflow of the app is in front of me at once.
That way we can analyze and tweak the design and layout, moving different elements from one screen to another, until we get an interface that is intuitive and attractive. Once we settle on the layout, I can make the final art either in Illustrator or in Photoshop.
For more about this incredibly useful feature, check out Adobe’s help section on artboards.
So why would anyone use Photoshop for iPhone art, then? Well, there are some things it just does better than any other program, because it is a pixel-based program rather than a vector-based program.
Editing raster images
“Raster” simply means “composed of pixels”. Raster images are also known as bitmaps. Raster images, like photographs, have a fixed number of pixels in a grid, each with their own color.
Photoshop was made to edit photographs. If you want to retouch or alter a photo, Photoshop is where you should go.
But there are other raster images you might want for your apps, like digital drawings and paintings. Artists can create a drawing or painting by using Photoshop brushes to color pixels.
When we needed a character to embody Battlemap, our map-building app for role-playing games, we turned to artists who use Photoshop to draw and paint digitally.
The digital painting of this warrior appeared in the app icon, the Help section, and our marketing screenshots, and it added an overall feel of awesomeness to the app. It’s a totally different style than vector art.
Creating user interfaces (UI)
User interfaces are what allows the end user to interact with your game or app. It includes backgrounds, buttons, table views, icons, and more. The best user interfaces are subtle and visually attractive.
They are also usually made in Photoshop.
The reason is the pixel-by-pixel editing possible in Photoshop. You can align your artwork exactly on the pixel grid. You can create lines that are exactly 1 pixel wide. Shadows and highlights can be controlled more precisely. This creates crisper graphics without any of the slight fuzziness that can come from anti-aliasing of vectors.
Textures are very important for user interfaces – it can’t be too noisy or feel loud or wrong, but it can’t be boring. We’ll talk more about textures in a minute, but they are an important part of why Photoshop is best for UI art.
Saving out the artwork needed for a table view is much easier due to the ability to slice. This ability is also very useful in saving art used in website design.
To see some great user interfaces take a look at the ones listed here. Notice the touchable textures, the subtle gradients, and the crispness of the lines. Those are all things that Photoshop is best suited for.
Check PSD Tuts to find some tutorials on user interfaces.
Photoshop can more easily create a realistic and natural feel for textures through blending modes, adjustment layers, and layer masks, among other tools.
This makes user interface elements like toolbars and backgrounds look great, as well as objects or characters. Often, I will create a texture (from a photo or a filter), save it as a PNG or JPEG and then use it in Illustrator. Here are some good Photoshop tutorials featuring textures.
I know, it sounds like I’m contradicting myself here, right? But Photoshop’s pen tool allows you to create vector graphics, just like in Illustrator. While it’s not as easy to use as Illustrator’s pen too, it has the benefit of those layer styles.
There are definitely times that I will create a vector shape in Photoshop (or copy and paste it from Illustrator into Photoshop) just so I can use those layer styles. You can create incredible vector art like this cute Twitter bird to the left in Photoshop – I did it for a long time before I learned Illustrator. I just find it slower, and not as easy to move around and edit.
Pixel Art is a particular style of art based on old-school graphics, back when the pixels were large enough to be choppy blocks.
Each pixel is given a color, rather than letting vectors decide the color. It is a time-consuming process, but pixel art is appreciated for its nostalgia factor.
Since you make pixel art by editing individual pixels, you should choose Photoshop for these projects.
Illustrator is best for:
- Vector art
- Game/Character art
- Lots of art fast
Photoshop is best for:
- Digital drawing/painting
- Photo editing
- UI design: toolbars, buttons, backgrounds
- Realistic effects and textures
- Pixel art
Notice I say “best”. Not “only”. Both programs are very robust and powerful, and different artists have their own preferences. You have to find what works for you.
You can get by with either Photoshop or Illustrator, but the best way to use them is together. That took me a long time to figure out – I would think I had to do every aspect of the project in either Illustrator or Photoshop, and I would get very frustrated. In a future post, I will outline my workflow for different iPhone/iPad app projects.
Pricing and Alternatives
Illustrator is currently about $599 for the latest CS5 version.
Photoshop is currently $699.
But if you’re going to shell out that much, I’d recommend buying the whole Adobe Creative Suite CS5 for $1299. This is because I use both programs quite a bit, and I also have Fireworks, Flash, InDesign, and a slew of other programs to use. I have used almost all of them at one point or another.
Artists and Graphic Designers – I’d love to hear your thoughts! I tried to write this overview with an eye toward iPhone and iPad app development rather than web design or print. Are there any app-related projects I didn’t mention that either Photoshop or Illustrator are particularly suited for?