본문 바로가기
Server&OS/AppStore&Mac OS

Apple’s iOS Custom Icons and Image Guidelines; an Infographic ( Including iPad 3 )

by 백룡화검 2012. 8. 7.

출처 : http://blog.metaphx.com/2012/03/08/ios-image-guideline-infographic/


I’ve done my fair share of googling sizes in pixels for various images for iOS and then had to do separate google searches for what they’re actually called. I’ve also read through te iOS Human Interface Guidelines many times yet still seem to go back over and over every time I create a new app. So Here’s a handy bullet list format and a handy infographic you can share to help you in the future.

iOS Image Guide Infographic

iOS Image Guide Infographic

  • Application Icon
    • Device – Required
      • iPhone / iPod Touch
        • 57 x 57 Pixels
          • Icon.png
        • 114 x 114 Pixels Retina
          • Icon@2x.png
      • iPad
        • 72 x 72 Pixels
          • Icon-72.png
        • 144 x 144 Pixels Retina
          • Icon-72@2x.png
    • App Store – Required
      • iPhone / iPod Touch / iPad
        • 512 x  512 Pixels
          • ItunesArtwork – No Extension
        • 1024 x 1024 Retina
          • ItunesArtwork@2x – No Extension
    • Small Icon – Spotlight Search Results and Settings – Optional
      • iPhone / iPod Touch
        • 29 x 29 Pixels
          • Icon-Small.png
        • 58 x 58 Pixels Retina
          • Icon-Small@2x.png
      • iPad
        • 50 x 50 Pixels – Spotlight
          • Icon-Small-50.png
        • 29 x 29 Pixels – Settings
          • Icon-Small.png
        • 100 x 100 Pixels – Spotlight Retina
          • Icon-Small-50@2x.png
        • 58 x 58 Pixels – Settings Retina
          • Icon-Small@2x.png
  • Launch Image
    • Remember – <basename><usage_specific_modifiers><scale_modifier><device_modifier>.png
      • @2x – Scale Modifier
      • ~ipad – iPad Device Modifier
      • ~iphone – iPhone Device Modifier
    • iPhone / iPod Touch
      • 320 x 480 Pixels
        • Default.png – Generally
        • Default~iphone.png – Optionally
      • 640 x 960 Pixels – Retina
        • Default@2x.png – Generally
        • Default@2x~iphone.png – Optionally
    • iPad
      • 768 x 1004 – Portrait
        • Default-Portait.png
        • Default-Portait~ipad.png – XCode will automatically add the ~ipad modifier if Default.png exists
      • 1024 x 768 – Landscape
        • Default-Lanscape.png – General – Not needed if supplying Left and Right Landscape
        • Default-LandscapeLeft.png – Landscape Left
        • Default-LandscapeRight.png – Landscape Right
        • Default-Landscape~ipad.png
        • Default-LandscapeLeft~ipad.png
        • Default.LandscapeRight~ipad.png
      • 1536 x 2008 – Portait Retina
        • Default-Portait@2x.png
        • Default-Portait@2x~ipad.png – Size Modifier ( @2x ) comes before the device modifier ( ~ipad )
      • 2048 x 1496 – Landscape Retina
        • Default-Lanscape@2x.png – General – Not needed if supplying Left and Right Landscape
        • Default-LandscapeLeft@2x.png – Landscape Left
        • Default-LandscapeRight@2x.png – Landscape Right
        • Default-Landscape@2x~ipad.png
        • Default-LandscapeLeft@2x~ipad.png
        • Default.LandscapeRight@2x~ipad.png
  • Toolbar, Tab bar and Naviation Bar Icon
    • Toolbar / Navigation Bar – iPhone / iPod Touch / iPad
      • 20 x 20
      • 40 x 40 – Retina
    • Tab bar – iPhone / iPod Touch / iPad
      • 30 x 30
      • 60 x 60 – Retina