Mobile Design How-to: Use a Vector iPhone Skin

This article originally appeared on Mordy.com.

When it comes to designing websites, user interfaces, and the like, many designers rely on core applications like Photoshop, Fireworks, and Illustrator (my personal preference is Illustrator). I’ve seen a variety of libraries on the interwebs that offer the graphical components used for Apple’s iPhone — but most of them were either done in Fireworks or Photoshop. I did find one excellent library — done entirely in Illustrator — by Rusty Mitchell, who apparently worked on the most-excellent USA Today iPhone app.
However, Rusty’s library didn’t contain the actual iPhone skin itself, which I thought would be nice to have as well. So I set on creating one myself, entirely in Illustrator. Being it’s all vector, you can literally scale it as tall as the Empire State Building, and it looks great in print.

What I found interesting was that Rusty also posted his reasoning for why he created a library of iPhone elements specifically in Illustrator. I thought I might add a reason of my own here for why I created this iPhone skin in Illustrator.
Not every Web graphic is destined for pixel-based output, and by creating elements in Illustrator, I can easily move them into Flash and make them interactive. Illustrator elements can now also be saved in the FXG file format, which can be used within Adobe’s Flex framework.
I know what you’re thinking — this is Apple’s iPhone interface, and we all know that Flash still doesn’t run on the iPhone, so what good is it if I can bring these elements into Flash or Flex Builder? Good question — and I think I have a good answer.
Every designer is faced with a challenge, especially when designing interactive content. You can make something look pretty on a screen, but it’s hard to actually interact with that design. What happens when you click on a button? How about a slider? As a design requires more interaction, it also requires more imagination for how that design will ultimately function. And while good designers might be able to hold that concept in their heads, it’s quite a large step to assume that a client is going to envision the same.
As such, many designers either use Flash to create a functional mockup for what an interaction is going to eventually look like, or they invest in the expense of having a developer connect their mockup to real, functional code.
What if a designer could design andcreate a functional mockup with little effort? Without having to learn a single line of ActionScript code? It’s possible, with the forthcoming Adobe Flash Catalyst. By creating my mockup in Illustrator, I had all the benefits of vector goodness, infinite resolution and editing, and the ability to open my artwork in Adobe Flash Catalyst to add interactions that a client could review.
So I tried two experiments:
– The iPhone Keyboard. For this experiment, I drew an iPhone keyboard in Illustrator, as well as each key as it would appear if pressed. I then opened the Illustrator file in Flash Catalyst and converted each keyboard key into a functional button with a mouse down state. Lines of code I had to write: 0. Time it took to convert the static comp to a functional one: about 10 minutes (mainly because there were so many buttons).
– The iPhone unlock screen. For this experiment, I brought my iPhone skin into Flash Catalyst and turned the main iPhone button into a functional button. I added a transition that would cause the unlock screen to appear when the button was pressed. I then converted the slider that I drew in Illustrator into a functional slider that one can click and slide. Lines of code I had to write: 0. Time it took to create all the interaction: about 2 minutes.
If you want to get technical, the entire iPhone skin and keyboard in these examples are all Flex components (MXML), which any Flex developer could hook up to back end systems, add logic, or extend functionality. I never had to write a single line of code, but I was able to use my favorite design application to create what I wanted without limits, and was able to show a client exactly how it was going to work.
Pretty cool, don’t you think?
You can download my iPhone Skin Illustrator file. I created it in Illustrator CS4 and I saved it as a PDF file with Illustrator Editing Capabilities turned on, so you can just open the PDF right in Illustrator and you’re golden.