Creating Custom Icons for Windows Mobile 6.5

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 Application Icons Windows Mobile 6.5 icon style attributes include: Outside frame shapes - Round or Square with rounded corners Drop shadow Reflection 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. Creating Custom Icons and Images 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. Scaling down Custom Icons and Images Icons in Start Menu should be available in the following sizes: 90X90 pixels @ 192 dpi 60X60 pixels @ 128 dpi 45X45 pixels @ 96 dpi Figure 1-12a Icons in Marketplace Client should be available in the following sizes: 60X60 pixels @ 192 dpi 36X36 pixels @ 96 dpi Figure 1-12b Icons in Marketplace Website should be available in the following sizes: 64X64 pixels @ 96dpi 45X45 pixels @ 96 dpi Figure 1-12c (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. Scaling down Custom Icons and Images manually 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 60X60 pixels @ 128 dpi 45X45 pixels @ 96 dpi 36X36 pixels @ 96 dpi Figure 1-15 Scaling down Batch Custom Icons and Images automatically 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. Stay tuned for my upcoming post Using Custom Icons in Windows Mobile 6.5 for information on how to use these icons in Windows Mobile.