This post provides a step-by-step tutorial for creating professional iconography for your Windows Mobile application. With these guidelines and Adobe Photoshop, developers will learn to apply the appropriate styling and sizing to their image assets for use within their applications as well as in the Windows® Marketplace for Mobile. In addition to the tutorial, a Photoshop action file is provided for assisting with the creation of the required files. Developers who are planning to distribute applications on the Windows® Marketplace for Mobile are encouraged to utilize these guidelines to ensure their applications adhere to the application submission criteria.
Contents: Application Icons Creating Custom Icons and Images Scaling down Custom Icons and Images
Windows Mobile 6.5 icon style attributes include:
Figure 1-1 shows a sample image we will modify using Windows Mobile 6.5 style attributes.
Your image (or logo) image before it is displayed on the Start Menu
Figure 1-2 shows the same image as it would be displayed on the Start Menu for Windows Mobile 6.5 after you have followed this tutorial. Round icon on the left, square icon on the right.
Start Photoshop, open your image file, press Ctrl + A to select the whole image, and Ctrl + C to copy it to the clip board – see Figure 1-3.
Open the Shapes.psd file, and press Ctrl + V to paste your image as a layer between the Highlight layer and the Round layer as shown in Figure 1-4.
Press Ctrl + T, drag the control handle to scale down your image to the right size and position within the round frame shape.
Select your image layer, then press the Ctrl key, and Click on the Vector mask thumbnail of the Round layer to create a round selecting area.
Click the “Add layer mask” button to create a round mask for your image as shown in Figure 1-7.
Click “Eye” indicator to hide the Rounder layer and Background layer as shown in Figure 1-8.
From the top menus select Image – Adjustments - Hue/Saturation (or press Ctrl + U) to open the Hue/Saturation box. Change the Hue/Saturation/Lightness values so your image has the desired color – Figure 1-9.
If you would like to change from a circular icon frame to a square with rounded corners frame, click the “Eye” icon to the left of the “Round’ group title. This will hide the Round layer group. Click the blank square to the left of the Square with Rounded Corners layer group to make it visible, then drag the layer of your image between the Highlight layer and the Square with Rounded Corners layer in the Square with Rounded Corners layer group. Create a mask shaped as a ‘square with rounded corners’ as shown in Figure 1-10. Use the same process as when we created the Round mask earlier in the tutorial.
To save your icon, use the menus ‘File-Save As’ and then select PNG for the Format as shown in Figure 1-11. This will save your icon at a size of 90 pixels by 90 pixels at 192 dpi. This is the correct size for a Windows Mobile 6.5 Start icon.
Choose “None” in the “PNG Options” box.
Icons in Start Menu should be available in the following sizes:
90X90 pixels @ 192 dpi
60X60 pixels @ 128 dpi
45X45 pixels @ 96 dpi
Icons in Marketplace Client should be available in the following sizes:
60X60 pixels @ 192 dpi
36X36 pixels @ 96 dpi
Icons in Marketplace Website should be available in the following sizes:
64X64 pixels @ 96dpi
(See Application Submission Requirements for Windows Marketplace for Mobile: Application Iconography for more information.)
To save your 90x90 icon as a smaller size start Photoshop, then open your PNG icon file as shown in Figure 1-13.
Go to menu ‘Image - Image Size’ as shown in Figure 1-14.
Change the “Resolution” to scale down the icon as shown in Figure 1-15. Save a different PNG file for each resolution.
90X90 pixels @ 192 dpi
64X64 pixels @ 96 dpi
60X60 pixels @ 192 dpi
If you have many files that all need to be resized in the same manner, you can use the Batch Action feature in Photoshop. Use Ctrl + O to open all icon files you want to resize, and also open the Resize.atn file as shown in Figure 1-16.
The Actions panel appears in Photoshop as shown in Figure 1-17.
Go to the “File” menu and select “Automate” and then “Batch” - as shown in Figure 1-19.
In the ‘Play’ section of the dialog bog change the ‘Set’ field to ‘Resize’. If you want to resize the icon to 60X60 pixels at 128 dpi please select Resize60X60@128dpi in the ‘Action’ field. If you want to resize the icon to 45X45 pixels at 96 dpi please select Resize45X45@96dpi in the ‘Action’ field. So you could select the appropriate option to resize. Select “Opened Files” in ‘Source’ field, and set the destination folder in the ‘Destination’ field. Click OK to run the batch resize tool.
See my post Using Custom Icons in Windows Mobile 6.5 for information on how to use these icons in Windows Mobile.
Great post. Here’s a tool to use to build your mobile apps in minutes without coding. Just point-and-click www.caspio.com/.../mobile.aspx
@Sergey: I tried it in expression design 3 and choosing 32x32 pixels on export, often results in 33x34 or even 36 * 36. It's just trying something "close enough" in its own opinion. But not close enough to comply with their own certification process. ;-)
It's really strange that you use Photoshop, but not Expression Design :)
Can you write same article, but use Expression? It will be more useful.
keff - Thanks for the tip.
hrhnick / pTesta - The post has been updated with a link to the shapes.psd file.
Open the Shapes.psd file?
Where is this file?
Tanks Mike for your help
cool, when is windows mobile 6.5 going to be finally released?
Can't find the link for "shapes.psd"
Is it available?
I'll add that if you have some detailed graphics in your icon, it is time to simplify it, and you have to do it differently for various size of icons.
Other good tip is to apply light Unsharp Mask filter every time you downscale an image, to pronounce detail that got lost in scaling - use for example 50-100% strength and cca 0.5px radius...