Meego Wiki
Views
From MeeGo wiki
Revision as of 10:44, 21 June 2010 by Hbons (Talk | contribs)
Jump to: navigation, search

Contents

MeeGo Netbook Icon Style Guidelines

This document was created to shed some light on creating icons for MeeGo Netbook for graphic designers. The MeeGo netbook icons have a unique glyph like style. It aims to be simple, light and easily distinguishable.


The Building Blocks

Building-blocks.png

Some practical points about the style to keep in mind:

Try to use an even number of pixels of negative space, it's not 
absolutely required, but it will make the icon set look more consistent.
Only use roundness when the actual objects in real life are round.

24x24

24x24.png

This is the standard and most common size. Start making your icons in this size. Some more detailed examples:

24x24-example-document.png

24x24-example-camera.png


48x48

48x48.png

These are used in large icon views, like the file manager. They are exactly the same as the 24x24 versions, just scaled up 200%.


16x16

16x16.png

These are ofthe used in lists.

The guidelines for the 16x16 are slightly different because of space constraints, here are some tips to maintain crispyness:

Straight  stroke corners are allowed. This works well for paths
on the inside of the icon.
Use a slightly rounded rectangle instead of a circle if the
radius is smaller than around 5px.
You don't have to use an even number of pixels for the negative
spaces


Application Tiles

Application-launchers.png

The 24x24 icons can be applied on the the application tiles to create program launchers. To do this, scale the glyph icon by 133% and give it a 2.5px white stroke. Now center the glyph icon on the tile.

For the smaller tile, you can just apply the 24x24 icon without modifying its size

Done!


Inkscape

Some settings you may want to set in Inkscape to make your life easier:

Turn stroke width scaling off

Use a 1px grid
Turn node snapping on
Use steps of 1px when moving objects around with the arrow keys


Templates

Here you can download a zip file with all the examples from above plus some handy templates with the right default settings.

File:Templates.zip

Personal tools