~ adobe ~


Fireworks toolkit for creating iPhone UI mockups

While designing Notespark, we did a lot of UI mockups. As it turns out, I prefer using Fireworks for this kind of work over Photoshop, because it’s easier to manipulate objects on the screen. After doing some Google searching, it appeared there weren’t any good templates for doing iPhone mockups, so we built our own.

The file is pretty complete now, so we’re sharing it with the rest of the world. We started out with a combination of bitmaps and vectors, but we found that vectors were easier to edit, so every single item has been redrawn as a vector [*], which should make it easier to edit to your heart’s content.

iPhone Mockup Toolkit

[Download the CS3 version]
[Download the CS4 version]

You may use this file freely for “normal” use. That is to say, you can create mockups, show clients, work with team members, etc. That’s what it’s for.

If, however, you are planning on distributing a modified version of this more broadly (e.g., on your blog, or with your book), we ask that you follow the conventions of the Creative Commons Attribution-Share Alike 3.0 License. Please include an attribution to metaspark.com along with a link to the URL for this post (http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/). The attribution should be in the file itself, as well as on the blog post or wherever you reference it.

Creative Commons License.

Hat tip to Teehan + Lax for giving us the idea. We probably would have just used theirs if we didn’t prefer Fireworks over Photoshop!

* Except the picture of the iPhone itself and the background of the start screen. We’re not that crazy.