Create custom icons and Images

IPhone applicationsProgramUser Interface has always been famous for its exquisite images and rich colors. As the Application Designer, you need to provide a beautiful user interface to integrate the overall style. Although the iPhone OS provides a large number of exquisite user interface elements, each application still requires two custom elements: Application icons and startup images. In addition, applications should also provide iPhone OS with small icons for display in Spotlight search results.

Some applications require custom icons to indicate specific functions and modes of the application in the navigation bar, toolbar, and label bar. By following the guidelines for creating these icons, you can design icons and images that are commensurate with the built-in icons and cleverly highlight your application style.

Note: The standard BIT depth of the icon and image is 24 bits (red, green, and blue each occupy 8 bits), plus an 8-bit alpha channel. We recommend that you use the PNG format because it retains the color depth and supports the swap channel. You can use the preview application to generate the final PNG file.

You do not need to restrict the color to Web security colors. Although you can use Alpha transparency in the icons created for the navigation bar, toolbar, and Tab bar, do not do this in the application icons.

 

Application icon

The application icon is the icon that the user places on the main screen. Click this icon to start the application. Here, you can combine brand promotion and strong visual effects to make them concise, easy to recognize and eye-catching.

You can select the application icon you want to display on the home screen. Therefore, you should design an icon like this:

So attractive that users feel they should leave it on the home screen

Unique so that users can easily find it in a large number of icons

Try to keep your icons at a balance between eye-catching and Ideographic clarity so that they are both rich and beautiful, and can convey the intent of the application. In addition, it is also good to investigate what different understandings people with different cultural backgrounds will have on the images and colors you choose.

When you decide to display your application icons on the home screen, the iPhone OS automatically adds visual effects to the icons so that they are consistent with the built-in icons. Including:

Rounded corner

Shadow

Reflection

For example, Figure 11-1 shows a simple icon provided by the application.

Figure 11-1 a simple application icon that is not displayed before the home screen

Figure 11-2 shows how the same icon is displayed on the home screen by the iPhone OS.

Figure 11-2 a simple application icon that appears on the home screen

On the home screen, application icons with clear backgrounds look the best. This is mainly because the iPhone OS has added the rounded corner effect: the uniform rounded corner effect uses all the icons on the home user's screen to have the consistent clickable appearance. If the icon you create has a black background, when displayed on the main screen, its background disappears and the user cannot see its rounded corner effect. Such icons are often unclickable and affect the Order Structure of the home screen.

To ensure that your icons fully utilize the visual enhancement features provided by iPhone OS, we recommend that you create an image in PNG format:

The size is 57x57 pixels, 90 degrees right angle (if the image uses its desired size, the iPhone OS will adjust it)

Do not use HALO or modify the effect

Do not use Alpha transparency

Name your icon file
Icon.png
And place it on the top layer of the application package. For more information about the content of the application package, see the "Application Package" section in the iPhone application programming guide.

Note: You can also choose not to add a halo effect for your iPhone OS. To do this, you need
Info. plist
File (to learn about this file, read the "Information attributes list" section in the iPhone application programming guide) to add
Uiprerenderedicon
Key.

Whether or not you use the halo effect, your icons should be 57x57 pixels.

 

When submitting your application, you must include an application icon of the 512x512 pixel version for display in the app store. Although it is very important for users to recognize the icons of this version at a glance, the icons of this version should be more gorgeous and refined. In other words, you should not simply enlarge the application icon and directly use it as the icon you created for the app store.

If you are developing an application that is privately published (that is, not published through App Store), you must also provide an application icon of the 512x512 pixel version. In this case, name the icon file
Itunesartwork
(No file extension) and place it on the top layer of the application package. This icon is used to identify your application in iTunes.

 

Small icon

Each application should provide a small icon. When the application name matches the entry in the Spotlight search bar, the iPhone OS can display this small icon.

Applications with the setting function should also provide this small icon to identify the application in the built-in setting application.

 

Your small icon should clearly identify your application so that you can clearly identify it in the search result list. To do this, you should create a simplified and attractive icon:

Use PNG format.

The size is about 29x29 pixels.

 

Name your icon file
Icon-Small.png
And place it on the top layer of the application package. For more information about the content of the application package, see the "Application Package" section in the iPhone application programming guide.

Note: If you do not provide
Icon-Small.png
And your application package does not contain the earlier version named
Icon-Settings.png
Then, the iPhone OS scales your application icons to display the search results and setting applications.

If your application package contains
Icon-Settings.png
But does not contain
Icon-Small.png
Then, the iPhone OS will display the setting icon in the search results. However, you should update the application package so that it only contains
Icon-Small.png
File.

 

Start Image

To enhance the user experience during app startup, you should provide a startup image. The startup image looks very similar to the app's first screen. When a user clicks your application icon on the home screen, the iPhone OS immediately displays the startup image. Once you are ready, your application will display its first screen to replace this startup placeholder image.

It must be emphasized that the launch image is provided not to improve the user experience:

"Application enters the Experience", such as starting an animation

"About" Window

Brand Promotion elements, unless they are static components of your app's first screen

Because users may switch between applications frequently and quickly, you should do your best to minimize the startup time, in addition, the startup image you designed should minimize the user waiting experience, rather than attracting the user's attention.

To do this, you should design an image in PNG format:

The size is 320x480 pixels. The color of the selected status bar can be immediately displayed in the status bar area, rather than after your application is started.

Same as the application's first screen,:

Text. The START image is static, so no text displayed in it will be localized.

User interface elements that may be dynamically changed. Do not include elements that look different after the application is started, to prevent the user from feeling the flashing between the startup image and the application's first screen.

Name your startup Image
Default.png
And put it at the top of your application package. For more information about the content of the application package, see the iPhone application programming guide.

You may think that following these rules will make the startup image look dull and boring. However, this is actually the case. Remember that starting an image does not provide you with the opportunity to present art; it is designed to enhance your awareness of how quickly your application can be started and immediately put into use. The following example shows how simple the startup image is.

The first example is the built-in setting of the app startup image, as shown in 11-3. Set the startup image of the application to only display the background of the application, because other content in the application cannot be guaranteed to be static.

Figure 11-3 set the app startup Image

Another example of starting images comes from the built-in stock app, as shown in 11-4. Note that only images contained in the startup image are static images, which are always visible in the front view of the stock application.

Figure 11-4 startup image of the stock Application

Icons in the navigation bar, toolbar, and label bar

If possible, you should use the buttons and icons provided by the system in the navigation bar, toolbar, and label bar. The iPhone OS provides a wide range of standard buttons and icons, and users can see them and think of the standard tasks and modes supported by built-in applications. If your application supports some standard functions (such as refreshing the content area view or deleting an item), or different data subsets (such as contacts or bookmarks) are displayed ), you must use the buttons or icons provided by the system to represent them. For a complete list of standard buttons and icons, and instructions on how to use them, see "buttons and icons provided by the system ".

Of course, not every task executed by an application is a standard function. If your application supports custom tasks that you need to execute frequently, you need to create custom icons to represent these tasks in the toolbar or navigation bar. Similarly, if your application displays the tag bar, you can switch between custom application modes or between custom data subsets, you need to design custom tab bar icons to clearly describe these patterns and subsets. This section describes how to design icons that can be used well in the navigation bar, toolbar, and label bar.

Before creating an image for an icon, you need to take some time to think about what information the icon should convey. When you consider the design, please take the icon as the target:

Concise and concise. Too many details make the icon appear messy or hard to understand.

It is not mistaken for an icon provided by the system. You should be able to distinguish your custom icon from the standard icon at a glance.

It is easy to understand and widely accepted. Try your best to create a symbol that can be correctly understood by most users and will not dislike any users.

After you have determined the icon appearance, follow the following guidelines when creating the icon:

Use PNG format.

Use pure white with appropriate Alpha transparency.

Do not add shadow effects.

Use the anti-sawtooth effect.

If you want to add a diagonal edge effect, make sure the angle is 90 ° (for ease of understanding and operation, you can imagine there is a light source at the top of the icon ).

For toolbar and navigation bar icons, the size should be 20x20 pixels.

For the label bar icon, the size should be 30x30 pixels.

Note: The icons you provide for the toolbar, navigation bar, and Tab bar will be used as the masks for creating icons in your application. No need to create full-color icons.

 

 

The iPhone OS automatically displays items in the navigation bar, toolbar, and Tab bar when they are pressed or selected. Therefore, you only need to provide a single version of the icon. Because these visual effects are automatically displayed, you cannot change their appearance.