Designing iPhone App interface graphics

I designed my first user interface for an iPhone app this weekend. Another thing I can add to my resume. It isn't too much different than anything else one can design, as long as you know the specs, which I didn't at first. 

Apple actually has a very complete set of directions, but they didn't tell me what I really wanted to know, the dimensions. I found that by searching for "designing for apple apps" And while it did give me interesting information about creating the custom icons, there was no one place that gave me dimensions. Next, I searched for "desgining for graphics for iphone" and that brought up some other sites, that discussed colors and things such as that, but it also gave this information:

Create graphics that meet App Store guidelines. The App Store will require two square application logos, sized 57×57 and 512×512 (these two will need to be essentially the same graphic). The 57×57 logo will appear on the user's device, and will automatically get rounded corners and a glossy appearance after submission. If you want to put a border around your 57×57 logo, round the corners using a 10-point radius to match the corner rounding that will happen automatically. Although the glossy appearance is the default for app logos, you can specify not to have the glossy effect applied to your logo. The App Store will also require screen shots of your application. The screen on the iPhone is 480×320, minus the 20-pixel status bar (making a 460×320 working screen size). The screen shots on the App Store should not include the status bar.

The only thing that is not listed here is a 40×40 icon. I'm not sure what that was for. I guess when the app goes live, I'll take a look and see where all my art work went.

Making iphone apps is as much fun as making web graphics, in that the world sees them soon after they are made. It is just as gratifying, and a new line of work for me to pursue, as there aren't a lot of graphic designers, yet, hocking up with app builders. 

  • Share/Bookmark
This entry was posted on Monday, May 25th, 2009 at 9:34 am. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Designing iPhone App interface graphics”

  • kirk henry Says:
    July 8th, 2009 at 12:36 pm

    Thanks for the info. You may want to update the post to include the dpi of 96.

    Thanks,
    KH

  • admin Says:
    July 8th, 2009 at 12:52 pm

    Really? 96? I have been submitting in 72 an haven’t been rejected. Usually 96 is for PCs.

  • kirk henry Says:
    July 8th, 2009 at 1:40 pm

    Hah, I’m wrong again. Now I have found that if you want REALLY crisp graphics 160PPI is the way to go. I suppose I will know soon enough. Thanks!
    KH

  • Kirk Henry Says:
    July 8th, 2009 at 3:20 pm

    160 ppi looks great. Super clean. Try it on your next app skin.

    Thanks,
    kH

  • admin Says:
    July 8th, 2009 at 5:38 pm

    I’ll try that, as I am in the middle of another project.

  • Ty Says:
    January 30th, 2010 at 12:09 am

    Hi

    I was also thinking that when designing in PS and others applications, it would be a good idea to always use Macintosh RGB proof setup as the display will always be a “Mac”. Switching between Mac RGB & Windows RGB is so different that I think it could be a big difference in final output. What do you think?

    p.s. I recommend you change the colour of this submit form as it’s very difficult to distinguish between the background and text fields.

  • iDesign* « iDevelop iPhone Apps, iThink Says:
    May 10th, 2010 at 2:18 pm

    [...] part for me… I got to get nitty-gritty-creative with Adobe Photoshop.  I used the post from http://blog.sans-serif.com/?p=6 which gave me the specs for the icons of my app (which means I had to design a logo for it [...]

  • amit Says:
    June 29th, 2010 at 5:03 am

    we create the graphics for an i-pod game but we create the graphics in photoshop,coral draw, illustrator then these quality are much good in computer screen but when we tranfer the graphics in i-pod screen then these graphics quality are changed it’s so looking bad. we use .png format images. please help us.

  • Laura R. Says:
    July 1st, 2010 at 5:16 pm

    Have you tried doing them in illustrator and then importing them into photoshop, so that the vector graphics don’t lose anything?

  • Tom Corwine Says:
    July 7th, 2010 at 6:54 pm

    The 40×40 icon is for the search results.

Leave a Reply