Apr 3, 2009

Vector iPhone Skin

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. There's actually a cool lesson in building a certain kind of construct, which I'll be posting separately, so that's an added bonus :)

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 a interaction is going to eventually look like, or they invest in the expense of having a developer hook up their mockup to real functional code.

What if a designer could actually design AND create 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. Here, 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. Here, 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. It was created 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.

Have questions? Comments? Requests? Let me know!


Dave Fletcher said...

Very impressive work.

Rusty Mitchell said...

Nice iPhone Mordy! Thanks for the mention of our files. Appreciate it.

baker2D said...

Dude, I think you should do a tutorial for this, I'd love to see your working in progress and it would help a lot of people i think, including me.

Matheau said...

Nice work Mordy. You rock!

JC said...

Thank you for getting me out of a jam - great lesson, plus I needed an iphone to import into Flash for a quick client mockup and you saved the day!

steven said...

Thanks for sharing this!

Anonymous said...

Freaking thank you boy I freaking LOVE YOUUUUUUUUUU!!! F**K this is great!! THANK YOU THANK YOU!

Carey said...

Thank you for doing this! I'm going to be able to use this for a large banner to market our iphone app my husband and I created for special needs kids. Can't thank you enough for saving me the time!

Regis said...

Great work! I wish I had found your work sooner as I built a lot of it too in Illustrator. I used some of your components though such as the speaker and the on/off button. I designed a whole iPhone in vector with application buttons, etc. to build an Halloween iPhone costume (http://www.applefriend.com/iphone-halloween-costume/). Thank you again for sharing!

Anonymous said...

you're a lifesaver. many blessings.

Unknown said...

Excellent work! This came in extremely handy and it's the most professional version I've found on the 'net.

iphone skins said...

Nice work, thanks for the file I liked it also.

aligforreal said...

You sir are tops. Thanks for this, I had previously mocked up an iphone but yours is much improved. Many thanks.


Anonymous said...

Dude, please tell me that youre heading to create more. I notice you havent written another blog for a while (Im just catching up myself). Your blog is just too important to become missed. Youve received so much to say, such knowledge about this subject it would be a shame to see this blog disappear. The internet needs you, man!

Anonymous said...

Maybe you may want to put a facebook icon to your blog. Just bookmarked the url, however I had to complete this by hand. Simply my $.02 :)

Clicky Web Analytics