Παρασκευή 20 Απριλίου 2012

App Icons on iPad and iPhone - UI tab bar items

from stackoverflow

what is image size(resolution) for iPad 3 application development?



With the iPad 3, you also simply need to name your retina images foo@2x.png. It needs to be exactly two times the resolution of the corresponding foo.png. So, say foo.png is 10x10, then yourfoo@2x.png needs to be 20x20.
You can also make version specifically for iPhone/iPod or iPad and iOS will automatically chose the correct version. For this, you can use the ~iphone and ~ipad modifiers:
  • foo.png for all devices with non-retina display
  • foo~iphone.png specifically for iPhone/iPod non-retina
  • foo~ipad.png specifically for iPad non-retina
  • foo@2x.png for all devices with retina display
  • foo@2x~iphone.png specifically for iPhone/iPad retina
  • foo@2x~ipad.png specifically for iPad retina
You can mix them in any combination, as long as there's always a version for all your supported devices (if you're doing an iPad-only app there's no need to provide images for iPhone, of course). So it's OK to provide for example foo~iphone.pngfoo~ipad.png and then foo@2x.png.



from Documentation


Technical Q&A QA1686
App Icons on iPad and iPhone
Q: How are the icon files in my application bundle used on iPad and iPhone?
A: Below are guidelines for handling icon files for iPhone-only apps, iPad-only apps, and universal apps.
IMPORTANT: Icons marked with "Required" must be supplied in your application bundle.
iPhone-only Apps
Include the following in your application's Resources group in the Xcode project:
Table 1 : iPhone-only apps icon requirements.
Image Size (px)
File Name
Used For
Required Status
Notes
512x512
iTunesArtwork
Ad Hoc iTunes
Optional but recommended
File should be in png format, but name it without the .png extension
57x57
Icon.png
App Store and Home screen on iPhone/iPod touch
Required
<None>
114x114
Icon@2x.png
Home screen for iPhone 4 High Resolution
Optional but recommended
<None>
72x72
Icon-72.png
Home screen for iPad compatibility
Optional but recommended
<None>
29x29
Icon-Small.png
Spotlight and Settings
Optional but recommended
<None>
50x50
Icon-Small-50.png
Spotlight for iPad compatibility
Recommended if you have a Settings bundle, otherwise optional but recommended
<None>
58x58
Icon-Small@2x.png
Spotlight and Settings for iPhone 4 High Resolution
Recommended if you have a Settings bundle, otherwise optional but recommended
<None>
Your Resources group should look similar to Figure 1:
Figure 1: Add files to Resources group

Except for iTunesArtWork icon, list the names of each of these files in the Icon files entry in the Info.plist, in the order shown in the table. Follow the steps in "Add Icon files in Info.plist" section below. See Figure 4.
Back to Top 
iPad-only Apps
Include the following in your application's Resources group in the Xcode project:
Table 2 : iPad-only apps icon requirements.
Image Size (px)
File Name
Used For
Required Status
Notes
512x512
iTunesArtwork
Ad Hoc iTunes
Optional but recommended
File should be in png format, but name it without the .png extension
72x72
Icon-72.png
App Store and Home screen on iPad
Required
<None>
50x50
Icon-Small-50.png
Spotlight on iPad
Optional but recommended
<None>
29x29
Icon-Small.png
Settings on iPad
Recommended if you have a Settings bundle, otherwise optional but recommended
<None>
Except for iTunesArtWork icon, list the names of each of these files in the Icon files entry in the Info.plist, in the order shown in the table. Follow the steps in "Add Icon files in Info.plist" section below. See Figure 5.
Back to Top 
Universal Apps
Include the following in your application's Resources group in the Xcode project:
Table 3 : Universal apps icon requirements.
Image Size (px)
File Name
Used For
Required Status
Notes
512x512
iTunesArtwork
Ad Hoc iTunes
Optional but recommended
File should be in png format, but name it without the .png extension
57x57
Icon.png
App Store and the Home screen on iPhone/iPod touch
Required
<None>
114x114
Icon@2x.png
Home screen for iPhone 4 High Resolution
Optional but recommended
<None>
72x72
Icon-72.png
App Store and Home screen on iPad
Required
<None>
29x29
Icon-Small.png
Settings on iPad and iPhone, and Spotlight on iPhone
Recommended if you have a Settings bundle, otherwise optional but recommended
<None>
50x50
Icon-Small-50.png
Spotlight on iPad
Optional but recommended
<None>
58x58
Icon-Small@2x.png
Spotlight and Settings for iPhone 4 High Resolution
Recommended if you have a Settings bundle, otherwise optional but recommended
<None>
Except for iTunesArtWork icon, list the names of each of these files in the Icon files entry in the Info.plist, in the order shown in the table. Follow the steps in "Add Icon files in Info.plist" section below. See Figure 4.
Back to Top 
Add Icon files in Info.plist
To add the Icon files entry you will need to manually edit your Info.plist.
Open your Info.plist in Xcode, and locate the "Icon file" entry. Click on the plus (+) button at the end of the entry to make a new key entry. as shown in Figure 2.
Figure 2: Add a new entry under "Icon file" key


Then, type "Icon files" in the key column (notice the "s" added), or choose "Icon files" from the drop down list, as shown in Figure 3.
Figure 3: Add "Icon files" key in Info.plist

Next, turn down the disclosure triangle on "Icon files" and add the entries for the icons for your application, as shown in Figure 4 and Figure 5:
Figure 4: Add icon file entries for iPhone-only or Universal apps.


Figure 5: Add entries for iPad icon files.

Note: If you don't provide one of the listed optional icons, the system will automatically scale one of your existing icons to an appropriate size. However, it is strongly recommended that your application supply all the icons listed with specific sizes needed.
Back to Top 
Document Revision History
Date
Notes
2010-07-14
Fixed outdated "Add Icon files in Info.plist" section.
2010-07-12
Updated for iOS 4 requirements.
2010-04-09
New document that explains how the icon files in an application bundle are used on iPad and iPhone.
Posted: 2010-07-14




The documentation says that the tab bar image is usually 30x30, but I've found that the best size to setup the images is 48x32 pixels. This size still renders and gives you a bit more space.
The image is a PNG with transparency, only the mask is used. The UI renders the mask gray when unselected or blue/chrome when selected.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου