Images play a critical role in today’s mobile applications. Applications engage users visually with images rather than with use of the written word. It is important to account for resources such as images, video, and audio when you plan your Windows Phone 7 project.
If you are planning to migrate or rewrite your iPhone application to Windows Phone 7, it is important for you to reuse your existing images. However, due to differences in the format, size and resolution of images on the two platforms, you will not be able to use images from your iPhone application in your Windows Phone 7 application. You should consider redesigning the images or converting them. Redesigning images can be expensive whereas conversion of images can be time consuming.
In this blog, we will cover what developers and designers should know about the images in their Windows Phone 7 application. We will introduce the image sizes and formats required by the Windows Phone 7 and show how they compare with the iPhone image formats. This will help you plan your image conversion. We will provide some quick command line examples on how the ImageMagick tool can be used for the conversion. We provide an introduction to a Microsoft Image Converter tool, built on top of ImageMagick, that can be used to migrate your existing iPhone images to work in the Windows Phone environment.
Critical role of Iconography in Windows Phone 7
Windows Phone 7 uses a unique design experience, called Metro, in the Windows Phone 7 OS and applications. The WP7 application design and User interface guidelines blog provides guidance on the look and feel of the application, including images and fonts. You are advised to pay close attention to images being designed for the Windows Phone Application. It is important that your application behaves consistently with the overall Windows Phone experience and stands out.
Metro Image Guidelines
Metro UI design uses a clean, light and open interface design model which puts emphasis on content and not on the chrome. It uses flat, monochrome images for standard application tiles and toolbar icons. It recommends that developers use Metro design guidelines in their applications to present a consistent experience. You will need to redesign or convert some of your iPhone application images to be consistent with the Windows Phone experience.
Device resolutions
iPhone and Windows Phone devices use different screen sizes and screen resolutions. This can affect how your images will look on the phone. If you use an existing image out of your iPhone application and use it without modification in your Windows Phone 7 application, the result may not be pleasing.
|
|
Resolution |
|
Size |
|
|
iPhone |
480×320 |
3.5 inch diagonal |
||
|
iPhone 4 |
960×640 |
3.5 inch diagonal |
||
|
Windows Phone 7 |
800×480 |
Varies from device to device |
As you can see from the above table, because of the different screen resolution, images designed for one platform cannot be used as is. They need to be – at least- resized to respect the aspect ratio of the target platform. The problem is even more complex if the images don’t meet the resolution for the Windows Phone 7 Platform. The image conversion process is more complex to preserve an acceptable image quality.
Differences in iPhone and WP7 Image Resolutions
Each platform has its own unique requirements when it comes to image sizes and their look and feel. As you migrate or rewrite your application for Windows Phone 7 platform, you will realize that you might be able to use some images without modification but others will need to be changed to make them look right on the new platform.
Standard Image Requirements
The following table shows the comparison and association between iPhone and Windows Phone 7 image resolutions and types:
|
iPhone image type |
Resolution |
|
Application icon |
57×57 or 114×114 for high |
|
resolution |
|
|
N/A |
|
|
App store icon |
512×512 |
|
Small icons for search and settings |
29×29 or 58×58 for high resolution |
|
Tab bar icons |
30×30 |
|
Tool bar / navigation |
20×20 |
|
bar |
|
|
Launch image |
320×480 or 640×960 for high |
|
resolution |
|
|
N/A |
|
Resolution Windows Phone |
|
|
image type |
|
|
173×173 for tile Application icon for tiles |
|
|
62×62 in app list Application icon in |
|
|
app list |
|
|
99×99 small mobile Market place icons artwork |
|
|
173×173 large mobile artwork |
|
|
200×200 in PC marketplace catalog |
|
|
N/A |
|
|
48×48 Application bar |
|
|
icons |
|
|
N/A |
|
|
480×800 Splash screen image |
|
|
or page background |
|
|
1000×800 Background Art for |
|
|
Panorama control |
|
As you migrate your application to Windows Phone 7, you will need to scale the images up or down depending on the type and resolution of your images. Here are some samples of iPhone and Windows Phone 7 images.
In App Images
There are two types of iPhone images - those for iPhone 3 or before and those for iPhone 4, which are also known as retina images. Retina images are higher resolution images. As we saw earlier, Windows Phone 7 screen resolution of 800×480 is higher than iPhone 3 resolution but lower than iPhone 4 resolution. Application images designed for iPhone will need to be upscaled to be used in Windows Phone 7 applications. On the other hand, application images designed for the retina display will need to be downscaled.
Windows Phone 7 Application Bar Images
Application bar icons on Windows Phone 7 should be 48 pixels by 48 pixels and must have a white foreground on a transparent background using an alpha channel. The Application Bar colorizes the icon according to the current style settings. Thus application bar icons must be designed appropriately for them to display correctly on Windows Phone 7.
Other issues
Windows Phone 7 applications built using Silverlight handle images in JPEG or PNG format. GIF images are not supported in Silverlight. If your application uses GIF images, they need to be converted to either JPEG or PNG.
If your iPhone application PNG images are loaded via XCode, you should be aware that XCode optimizes these images while bundling them. Using or converting PNG files from your iPhone application bundle won’t work properly. Use images from your XCode source directory and not the application bundle.
Managing Images for Windows Phone 7 Projects
Let us look at different types of images required by Windows Phone 7 and understand what you need to create such images using your iPhone image resources
In this section we look at various Windows Phone 7 images and how to generate these images from your existing assets. One option is to use an open source tool called ImageMagick which is a very capable tool but can be difficult to use. We have given command line options for ImageMagic for each Windows Phone 7 images.
Microsoft Image Converter Tool
Microsoft has released an image converter tool, built on top of ImageMagick, to make the process of converting images easier. It provides options to create various images required for Windows Phone 7 application and marketplace.
Unless specified, Windows Phone 7 images must be in PNG format. In the commands below, the target parameter should be a PNG file.
Large PC App Tile Artwork
This 200×200 image is displayed in the Windows Phone 7 marketplace in the Zune PC client software. To convert an existing iPhone or other source image to this format, use the following options for the ImageMagick tool
Convert <source> -resize 200×200! -unsharp 0×1.1+.5+0 <target>
With resize geometry parameter of 200×200! ImageMagick converts the image to 200 x 200 and ignore the aspect ratio.
The same effect can be achieved using "Large PC App Tile Appwork" option in the Microsoft Image Converter tool.
Small Mobile App Tile artwork
This image is used in the phone marketplace catalog. This image of size 99×99 is the smaller of the two images used in the phone marketplace catalog. This image can be created using the following ImageMagick convert options.
You can also use Small Mobile App Tile Artwork option in the Microsoft Image Converter tool.
Large Mobile App Tile artwork:
This image is used in the phone marketplace catalog. This is the larger of the two images used in the phone marketplace catalog.
The same size image is also used in the start experience on the phone. An Image of size 173×173 is used when the user pins the application to Start on the phone. The image must be in the PNG format
To create convert the image using ImageMagick convert tool, use:
You can use the "Large Mobile App Tile Artwork" option in the Microsoft Image Converter tool. WP7 Tile:
This image is used on the phone applist and must be a PNG image of size 62×62. To create convert the image using ImageMagick convert tool, use:
You can also use the "WP7 Tile" option in the Microsoft Image Converter tool.
Panorama Background
This panorama artwork becomes the background for your application if it is a featured app on the Marketplace. This is an optional image of size 1000×800. Use the following options to convert the image to this format:
You can also use the "Background Art"option in the Microsoft Image Converter tool.
Details Page Screenshot
These images provide a preview of your app or game to users who are browsing your App details page on Windows Phone Marketplace. You must provide minimum one or maximum of 8 such images. Use the following options to convert the image to this format:
You can also use the "Details Page Screenshot"option in the Microsoft Image Converter tool.
Flatten Images for application bar icons
Windows Phone 7 application bar icons are flat monochrome images with transparent background and white foreground, as described above. You can use the following ImageMagick options to create such images from iPhone tab bar icons which are monochrome. If you are transforming other multi-chrome images, you will need to use different options.
convert.exe <source> ( +clone ) -compose Difference -composite -modulate 100,0 +matte -threshold 0 -fill black +opaque rgb(255,255,255) -transparent black <target>
Or you can use the "flatten" option in the Microsoft Image Converter . If you are converting from an iPhone 4 image, use Retina option otherwise choose iPhone 3G option.
Convert Image Format
Since Windows Phone 7 does not support GIF images, you will need to convert your GIF images to PNG (or JPEG). Use the following option for converting your image format.
You may use the "Convert Format" to convert the format of images using Microsoft Image Converter tool.
Resize Images
Due to differences in the iPhone and Windows Phone 7 screen size, screen resolution and aspect ratio, you will need to convert your other image assets. Use the following ImageMagick convert options to resize the images
You may use the Microsoft Image Converter tool to resize images. Use Retina if you are resizing the image from iPhone 4 project or iPhone 3G otherwise.
Learn Further about the Windows Phone 7 Image Format
UI Design and Interaction Guide for Windows Phone 7 and Windows Phone 7 Certification Guide provide definitive requirements for the resolution and types of images required for each Windows Phone 7 applications. The UI design guide provides guidance on the design of application bar icons.
Design New Images
Some of the WP7 images such as application tile or application list are particularly important since they always remain visible to users. They must be high quality and engaging. You may decide to redesign these images or start from the converted images and modify them further to suit your needs. Windows Phone 7 images may be designed using Microsoft Expression Design or Adobe Photoshop.
Conclusion
ISVs who want to migrate or rewrite their applications for Windows Phone 7 need to be aware that their images may need to be transformed to make them captivating on the Windows Phone. The differences in images on two platform are due differences in the screen resolutions and as well as in the standard image formats chosen for each platform. Redesigning the images may be an expensive and time consuming option. You can start by converting existing images using open source tool such as ImageMagick and customize them further.
