Projects/Oxygen/Style: Difference between revisions

From KDE TechBase
m (Categorise)
m (Cleaning up headings...)
Line 1: Line 1:
== Working ground for the Oxygen Icon Style Guide. ==
Working ground for the Oxygen Icon Style Guide.
 
'''Here you will find the newest info on the Oxygen Icon Style Guide.'''
'''Here you will find the newest info on the Oxygen Icon Style Guide.'''


''Note that until now this is still a study of work in motion ''
''Note that this is still a study of work in motion ''


=== Templates for different icon sizes ===
== Templates for different icon sizes ==
'''For different sizes of icons, different line/stroke widths and different shape ratio's need to be adhered to in order to render the optimum file at a given size.'''
'''For different sizes of icons, different line/stroke widths and different shape ratio's need to be adhered to in order to render the optimum file at a given size.'''


Although the set it SVG we are creating different SVG files to render certain sizes. Basically, at this time we are using 128x128 templates for all icons down to and including 48x48.
Although the set is SVG we are creating different SVG files to render certain sizes. Basically, at this time we are using 128x128 templates for all icons down to and including 48x48.


''Note that icons below 48x48 (ie. anything on smaller than 128x128 template) need to have points/lines/strokes which lie directly on a pixel raster/grid.''
''Note that icons below 48x48 (ie. anything on smaller than 128x128 template) need to have points/lines/strokes which lie directly on a pixel raster/grid.''
Line 17: Line 18:
[http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
[http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]


=== Color Usage ===
== Color Usage ==
Oxygen has a distinct, defined palette which should '''always''' be adhered to.
Oxygen has a distinct, defined palette which should '''always''' be adhered to.


Line 39: Line 40:
The Oxygen color palette is released under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.
The Oxygen color palette is released under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.


=== Metaphors/Styles for different icon types ===
== Metaphors/Styles for different icon types ==
'''Actions'''
'''Actions'''



Revision as of 22:04, 9 January 2007

Working ground for the Oxygen Icon Style Guide.

Here you will find the newest info on the Oxygen Icon Style Guide.

Note that this is still a study of work in motion

Templates for different icon sizes

For different sizes of icons, different line/stroke widths and different shape ratio's need to be adhered to in order to render the optimum file at a given size.

Although the set is SVG we are creating different SVG files to render certain sizes. Basically, at this time we are using 128x128 templates for all icons down to and including 48x48.

Note that icons below 48x48 (ie. anything on smaller than 128x128 template) need to have points/lines/strokes which lie directly on a pixel raster/grid.

We have two templates for action icons at smaller sizes, get them here:

22x22 template

32x32 template

Color Usage

Oxygen has a distinct, defined palette which should always be adhered to.

Download the file here: The Oxygen Palette

To use this palette in Inkscape:

1) In your .inkscape folder make another folder called palettes.

2) Put the oxygen.gpl file in that folder.

3) Restart Inkscape

4) Select the Oxygen palette in the Swatches dialog (Ctrl+Shift+W).

This information was directly copied from kde-artists.org, although the Oxygen team made the palette, I stole the wiki link from them, without them you would not have a link to this, so check it out :P

The Oxygen color palette is released under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.

Metaphors/Styles for different icon types

Actions

Action Icons have a distinct shadow (example and explanation needed)

Applications

Application icons vary the most in style from cartoonish logos to photo-realistic (example and explanation needed)

Mimetypes

Mimetypes all use the same paper sheet template (example and explanation needed)

Devices

Devices are the most realistic of all icons (example and explanation needed)

Filesystems

Filesystem icons vary in style depending on whether the subject at hand can be defined by a physical object (example and explanation needed)