Views
Iconography
Nedrichards (Talk | contribs) |
|||
| (5 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
= MeeGo Netbook Icon Style Guidelines= | = MeeGo Netbook Icon Style Guidelines= | ||
| - | This document was created to shed some light on creating icons for MeeGo Netbook for graphic designers. | + | This document was created to shed some light on creating icons for |
| - | The MeeGo netbook icons have a unique glyph like style. It aims to be simple, light and easily distinguishable. | + | MeeGo Netbook for graphic designers. The MeeGo netbook icons have a |
| + | unique glyph like style. It aims to be simple, light and easily | ||
| + | distinguishable. | ||
| Line 10: | Line 12: | ||
Some practical points about the style to keep in mind: | 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. | ||
| + | |||
| + | == 16x16 == | ||
| + | |||
| + | [[File:16x16.png]] | ||
| + | |||
| + | These are used in lists, such as on the sidebar in the File manager. | ||
| + | |||
| + | 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 | ||
| + | |||
== 24x24 == | == 24x24 == | ||
| Line 17: | Line 35: | ||
[[File:24x24.png]] | [[File:24x24.png]] | ||
| - | This is the standard and most common size. Start making your icons in this size. | + | This is the standard and most common size used across the UI. Start making your icons in this size. Some more detailed examples: |
| - | Some more detailed examples: | + | |
[[File:24x24-example-document.png]] | [[File:24x24-example-document.png]] | ||
| Line 29: | Line 46: | ||
[[File:48x48.png]] | [[File:48x48.png]] | ||
| - | These are used in large icon views, like the file manager. | + | These are used in large icon views, like the file manager. They |
| - | They are exactly the same as the 24x24 versions, just scaled up 200%. | + | are exactly the same as the 24x24 versions, just scaled up 200%. |
| - | == | + | == 100x100 == |
| - | + | This is a special case of icon size, used by the Garage application installer. This is especially useful if you're creating an application and actually want a user to install it. | |
| - | + | == Application Tiles == | |
| - | + | [[File: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! | Done! | ||
| Line 61: | Line 71: | ||
Some settings you may want to set in Inkscape to make your life easier: | 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 == | == Templates == | ||
| - | Here you can download a zip file with all the examples from above plus some handy templates with the right default settings. | + | 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]] | [[File:Templates.zip]] | ||
| + | |||
| + | |||
| + | |||
| + | --[[User:Hbons|Hbons]] 10:49, 21 June 2010 (UTC) | ||
Latest revision as of 11:08, 21 June 2010
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
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.
16x16
These are used in lists, such as on the sidebar in the File manager.
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
24x24
This is the standard and most common size used across the UI. Start making your icons in this size. Some more detailed examples:
48x48
These are used in large icon views, like the file manager. They are exactly the same as the 24x24 versions, just scaled up 200%.
100x100
This is a special case of icon size, used by the Garage application installer. This is especially useful if you're creating an application and actually want a user to install it.
Application Tiles
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.
--Hbons 10:49, 21 June 2010 (UTC)