Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Creating Launcher Icons - Tutorial for N9 MeeGo

From Wiki
Jump to: navigation, search

In this tutorial we are going to create a Launcher Icon for N9 applications.

Article Metadata
Created: SeemaB (27 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)



  • One of the Visual Principles of N9 is to: “Provide a luxurious product with beautiful graphics”
  • Launcher icon is an important part of this principle, because this is the entry point of your application.
  • Users will be impressed with the functionality but if visual presentations are not attractive enough that will decrease the product’s value from user perspective.
  • Hence it is a must to create beautiful UI to keep user coming back to your application again and again.

N9 Launcher Icon Design Specifications

Below are the specifications for creating Launcher Icon for N9: N9 Launcher Icon Specs.png

Launcher Icon Templates

  • Nokia has provided developers with Adobe templates for Launcher Icons for N9.
  • The icon creation kit gives two templates to help us create our application icon - available as Adobe Illustrator (AI) templates and Adobe Photoshop (PSD) templates.
1) 1_Meego_icon_template_PRECAST_background – For predefined background color
2) 2_Meego_icon_template_INDIVIDUAL_background - For custom background color

Step by Step Launcher Icon Creation

In the below tutorial we are going to create a Launcher Icon using the precast background PSD template.

1. Open the 1_Meego_icon_template_PRECAST_background template in Photoshop and chose one of the background layer to preview if the background color suits your requirement. N9 Launcher Icon Step1.png
2. Select only the “PLACE YOUR GLYPH HERE” layer. N9 Launcher Icon Step2.png
3. Fit your application icon inside the square formed by 4 blue lines N9 Launcher Icon Step3.png
4. Select the ‘PRECAST BACKGROUND’ to preview how your final application icon looks like N9 Launcher Icon Step4.png
5. Save your application ICON and this is how the application Launcher Icon will look.
N9 Launcher Icon Step5.jpg

This page was last modified on 13 June 2012, at 10:52.
71 page views in the last 30 days.