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 over the next few weeks. Thanks for all your past and future contributions.
Creating Launcher Icons - Tutorial for N9 MeeGo
In this tutorial we are going to create a Launcher Icon for N9 applications.
- 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
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
- Download the templates from following link: http://www.developer.nokia.com/swipe/ux/downloads/NokiaN9_Icon_Templates.zip
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.
2. Select only the “PLACE YOUR GLYPH HERE” layer.
3. Fit your application icon inside the square formed by 4 blue lines
4. Select the ‘PRECAST BACKGROUND’ to preview how your final application icon looks like
5. Save your application ICON and this is how the application Launcher Icon will look.