Creating Custom Icons for Windows Mobile 6.5

Creating Custom Icons for Windows Mobile 6.5

  • Comments 8
  • Likes

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 :
8 Comments
You must be logged in to comment. Sign in or Join Now
  • 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.

    Thanks! :)

  • keff - Thanks for the tip.

    hrhnick / pTesta - The post has been updated with a link to the shapes.psd file.

  • PTesta
    2 Posts

    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?

  • hrhnick
    1 Posts

    Can't find the link for "shapes.psd"

    Is it available?

  • keff
    1 Posts

    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...