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.

Figure 1-1

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.

Figure 1-2 

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.

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.

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.

Figure 1-5

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.

Figure 1-6

Click the “Add layer mask” button to create a round mask for your image as shown in Figure 1-7.

Figure 1-7

Click “Eye” indicator to hide the Rounder layer and Background layer as shown in Figure 1-8.

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.

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.

Figure 1-10

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.

Figure 1-11

Choose “None” in the “PNG Options” box.

image

Scaling down Custom Icons and Images

Icons in Start Menu should be available in the following sizes:

image

90X90 pixels @ 192 dpi

image

60X60 pixels @ 128 dpi
image

45X45 pixels @ 96 dpi
Figure 1-12a

Icons in Marketplace Client should be available in the following sizes:

image

60X60 pixels @ 192 dpi
image

36X36 pixels @ 96 dpi
Figure 1-12b

 

Icons in Marketplace Website should be available in the following sizes:

image

64X64 pixels @ 96dpi
image

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.

Figure 1-13

Scaling down Custom Icons and Images manually

Go to menu ‘Image - Image Size’ as shown in Figure 1-14.

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.

image

90X90 pixels @ 192 dpi

 

image

64X64 pixels @ 96 dpi

 

image

60X60 pixels @ 192 dpi

 

image

60X60 pixels @ 128 dpi

 

image

45X45 pixels @ 96 dpi

 

image

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.

Figure 1-16

The Actions panel appears in Photoshop as shown in Figure 1-17.

Figure 1-17

Go to the “File” menu and select “Automate” and then “Batch” - as shown in Figure 1-19.
 Figure 1-18

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.

Figure 1-19

See my post Using Custom Icons in Windows Mobile 6.5 for information on how to use these icons in Windows Mobile.

Share this post :
Tags: , ,