IT tutorials
 
Mobile
 

iphone Programming : Adding Missing Features (part 1) - Adding an Icon

1/8/2013 11:25:19 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Two things have been missing from your iPhone applications, the first being the lack of a custom icon. This is crucial for the marketing of your application; you need to bring your application design together to present it to users. When a user scrolls through a long list of possible applications on the App Store, applications with strong icon design stand out. But remember that the user has to look at your application’s icon every time he looks at the iPhone’s home screen. The icon has to be distinctive to stand out, but it also has to be attractive so that the user is willing to keep your application around. I’ve uninstalled otherwise good applications because I couldn’t put up with their icons, and I’m not alone.

1. Adding an Icon

The standard iPhone home screen icon used for your application is 57×57 pixels square in PNG format with no transparency or layers (Icon.png). You also must provide Apple with a 512×512-pixel version of your application icon for display on the App Store (iTunesArtwork with no extension; you will need to provide this when you upload your app). This larger image must be in TIFF or JPEG format, and again have no transparency or layers.

It’s sensible to design your icon as 512×512 pixels and scale it down to the 57×57-pixel version supplied inside your application’s bundle. Doing things the other way around usually means that an unattractive and often pixelated icon is shown on the App Store.


Note:

You can also provide a small icon, as a 29×29-pixel PNG file, in your application bundle called Icon-Small.png. Spotlight will use this icon on the device when the application name matches a term in the search query. Additionally, if your application includes a Settings Bundle, this icon is displayed next to your application’s name in the Settings application. If you do not provide this icon, your 57×57-pixel image is automatically scaled and used instead.


Both the iPhone and the iTunes store will, by default, apply some visual effects to the icon you provide. They will round the corners, and add both drop shadows and reflected shine.

You can prevent iTunes from adding visual effects by setting the UIPrerenderedIcon flag inside the application’s Info.plist file. To do so, open the <ApplicationName>-Info.plist file for your project in the Xcode editor (it’s in the Resources folder under Groups & Files) and click on the bottom entry, where a button with a plus sign on it will appear to the righthand side of the key-value pair table. Click on this button to add a new row to the table, and scroll down the list of possible options and select “Icon already includes gloss and bevel effects,” as shown in Figure 1. When you’ve done so, check the box in the Value column to turn off the default visual effects added by both iTunes and the iPhone.

Figure 1. Adding the UIPrerenderedIcon flag to our application’s Info.plist


Figure 2 shows a sample image from the Tango Desktop Project, which was released into the public domain and is available from Wikimedia Commons. You can find many public domain images at Wikimedia Commons. It’s advisable for you to make modifications to the images you find there to avoid possible confusion—because the images are public domain, other people may use them in their own applications.

Figure 2. A simple icon for our City Guide application


You can download the icon shown in Figure 2 from http://commons.wikimedia.org/wiki/File:Applications-internet.svg (right-click or Ctrl-click the link labeled Applications-internet.svg and choose Save Linked File). Open it in an image editor such as Adobe Illustrator or the free and open source Inkscape.

Resize the file to 57×57 pixels and save it as a PNG file named Icon.png. (If you are using Inkscape, you will need to use FileExport Bitmap, choose the Page option, and set the width and height to 57 before you click Export.)

Next, open the City Guide application in Xcode. Drag and drop the Icon.png file into the Resources group in the Groups & Files pane, making sure to tick the box to indicate that Xcode should “Copy items into destination’s group.” Now double-click on the CityGuide-Info.plist file to open it in the Xcode editor, and set the Icon file to Icon.png, as shown in Figure 9-3.

If you build and deploy the application by clicking the Build and Run button in the Xcode toolbar, the application will start inside iPhone Simulator. If you quit the application by clicking the Home button, you will see that it now has a shiny new icon, as shown in Figure 4.
 
Others
 
- iphone Programming : Using Sensors - Accessing the Proximity Sensor
- Mobile Web Apps : Templating - Twitter Integration with Templating
- Mobile Web Apps : Ajax - Fetching HTML, Ajaxifying Links
- IPad : Working with Contacts - Adding a New Contact Right on Your iPad
- Bluetooth on the iPad : Bluetooth Stereo, Disconnect or Forget a Bluetooth Device
- BlackBerry Bold 9700 and 9650 Series : Fixing Problems - Web Browser Running Slowly, Automatic Memory Cleaning to Keep Running Smoothly
- BlackBerry Bold 9700 and 9650 Series : Fixing Problems - BlackBerry Running Slowly?
- Windows Phone 7 Advanced Programming Model : Working with Images on Windows Phone 7, The Windows Phone 7 Media Library
- Windows Phone 7 Advanced Programming Model : Encryption Services
- Debugging Android Applications : Eclipse Java Editor (part 5) - Traceview
 
Youtube channel
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS