iPhone UI Vector Elements

March 24th, 2009 | Rusty Mitchell

iPhone UI vector goodness

Most of the visuals for our applications start out as vector mockups in Adobe Illustrator. So when we started working on the USA TODAY iPhone app, we went looking for vector UI elements. Although there are a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two out there, we couldn’t find anything in vector format.

Rather than cry over the lack of good vector elements, we took it upon ourselves to recreate a large portion of the iPhone’s UI elements so we would have them available for future projects. Obviously, we aren’t telling you all of this just to wave it in your face and tell you we have fancy tools that you don’t. Because we care so much about our fellow iPhone developers, we are making our vector files available to you today. (I think I just made myself throw up a little.)

So you are probably asking, “Billy Mays*, how much is this going to set me back?” If you act now, this priceless file can be yours absolutely free. You heard me correctly, absolutely FREE!

Click on the images below for a preview of the elements included. (Of course you’ll need to download the Illustrator file to see everything in its full vector glory.)

Download iPhone UI Vector Elements Now (2.6MB)

For Photoshop iPhone UI files check out Teehan+Lax’s iPhone GUI PSD. For OmniGraffle iPhone UI files, Patrick Crowley’s Ultimate iPhone Stencil is excellent.

* Mercury Intermedia’s free iPhone UI vector elements file is in no way endorsed by Billy Mays, though it would be awesome if it were.

Update: I posted a followup to this article addressing the advantages of using vector files for user interface projects. “Why build iPhone app mockups in vector format?”

« Back to MI Blog

22 Comments

Gerardo Gean wrote on March 24, 2009 at 8:20 am

Pretty nice piece of work.
imrui wrote on March 26, 2009 at 4:23 am

Nice and smooth, I’ll DL..
mmhan wrote on March 26, 2009 at 4:25 am

Cool! Thanks million!
Le.Tung.Lam wrote on March 26, 2009 at 4:43 am

Awesome ! Might a give a few of them a go to improve some areas I am lacking!
Gavin Strange wrote on March 26, 2009 at 4:46 am

Amazing! Thanks so much for such a fantastic resource!!
Rob Hampson wrote on March 26, 2009 at 5:23 am

Very cool - nice to see the elements up close and see how they’ve been made
Simon Colijn wrote on March 26, 2009 at 11:44 am

Wicked, many thanks for the links + files !!!
Les wrote on March 27, 2009 at 8:43 am

This is awesome. Thank you so much for making this available!
Rich wrote on March 27, 2009 at 1:19 pm

This is going to sound stupid, but why did you make this? It’s very nice to look at but aren’t all of the iPhone elements going to be rasterized to 163 ppi? Did you make it for aesthetics before delivering the final product or were there elements you created that were not in the other iPhone GUI projects?

http://www.apple.com/iphone/specs.html
Erika wrote on March 27, 2009 at 5:57 pm

Thanks for saving me a TON of time, here.
Chris wrote on March 28, 2009 at 9:02 pm

Great stuff, thanks! I’ve included your site at the top of the list on a recent post, hope you don’t mind!

http://iphoneized.com/?p=287

Cheers,

Chris
Jörg Battermann wrote on March 29, 2009 at 6:49 am

Nice! Anyone care to convert them to Omnigraffle Stencils aswell? The ones available for Omnigraffle are all pixel versions (afaik) which don’t scale and fit 100% / pixelperfect…

Cheers,
-J
Rick wrote on March 30, 2009 at 5:41 pm

Maybe this is too limited to Illustrator, but have you considered making a set of Symbols, Character Styles, Graphic Styles, color and gradient Swatches, etc? I was actually trying to do something similar here though, thanks for saving me A LOT of time!! This is awesome.
Manuel Graf wrote on March 31, 2009 at 3:53 am

Nice work, thanks for these!
aledesign.it wrote on March 31, 2009 at 1:38 pm

Fantastic work! Perfect! Look really nice!
RaiulBaztepo wrote on April 1, 2009 at 2:29 am

Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
Dave Fletcher wrote on April 3, 2009 at 4:20 pm

Excellent work folks. Well done.
Robbe wrote on April 6, 2009 at 2:53 pm

Thanks for sharing this
Rachel wrote on April 15, 2009 at 9:21 pm

Great article and wow, that’s a lot of work. But I completely agree that vector is needed. Thanks for the files, too.

I’m searching for a tutorial on how to make a button look ‘clicked’ for iPhone apps. Not liking what I’ve done so far in Illy/PS.

If anyone has seen that, ping me on twitter: elevatainc

Thanks!
BlueHair wrote on April 22, 2009 at 9:39 am

Thanks a lot!
I’ve been looking around for this for a while now. You just saved me a looooooot of work.
J wrote on April 28, 2009 at 5:12 pm

This is awesome!!! makes life so much easier.

Wish you had vectorize the mesh on the universal dock, but beggars can’t be choosers.

Thanks again.
Nestor Roajs wrote on May 5, 2009 at 6:42 pm

Useful tool. Thanks for sharing it. I’m kind of “vectorial thinking” person because i think that vectors make your works easier and completely flexible and adaptable.

MI BlogSubscribe

22 Comments

Trackbacks/Pingbacks

Categories

Archives

Blogroll

Twitter