Latest revision as of 19:52, 17 September 2011

Oxygen Icon Style Guide

Warning

The Oxygen Icon Style is currently a work in progress: This is the newest version, but several sections need expanding.

Oxygen's Approach to Icon Sizes

Oxygen icons are all scalable vector graphics (SVG) documents, which is the default format used by Inkscape. These SVG files are used to render bitmap images (PNG) at various sizes.

Oxygen uses the 128x128 'pixel' SVG files to produce icons at 5 different sizes: 128x128, 64x64, 48x48, 32x32 and 16x16 pixel images. 88x88 'pixel' SVG files are used to render at 22x22 pixels. Optionally, 16x16 pixel icons can be created in a 64x64 'pixel' SVG file.

For icons that are designed to be rendered at 32x32, 22x22 and 16x16 it is crucial that icons elements align to pixel boundaries of the rendered icon to improve legibility. After rendering to 22x22 and 16x16, icons will probably need some hand optimization using the GIMP. There is little point in making a 22x22 and 16x16 PNG icon if all that was done was to export a PNG from the 128 pixel SVG.

Various templates are provided to assist you in creating Oxygen icons. They are linked to below.

Note

Only action icons require the shadow at the bottom of the icon. For all other types you may remove this shadow.

16x16

Either:

Use the 32x32 template
Set the grid to 8 pixels
Preview the icon by zooming out to 13%
- Quickly tap the minus key six times

Or:

Use an Inkscape document with dimensions of 64x64 pixels
Set the grid to 4 pixels
Preview the icon by zooming out to 25%
- Quickly tap the minus key four times

22x22

Use the 22x22 template.
Set the grid to 4 pixels
Preview the icon by zooming out to 25%
- Quickly tap the minus key four times

32x32

Use the 32x32 template
Set the grid to 4 pixels
Preview the icon by zooming out to 25%
- Quickly tap the minus key four times

48x48

Use the 32x32 template

64x64

Use the 32x32 template
Set the grid to 4 pixels
Preview the icon by zooming out to 50%
- Press the '2' key

128x128

Use the 32x32 template
Set the grid to 1 pixel
Preview the icon by zoom to 100%
- Press the '1' key

Color Usage

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

Note

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

You can easily use the Oxygen Colour scheme in Inkscape by downloading the palette. To download the Oxygen Palette Click here

Close Inkscape, if you have it running
Place 'oxygen.gpl' in this folder: ~/.config/inkscape/palettes/
Start Inkscape
Select the Oxygen palette in the Swatches dialog (Ctrl+Shift+W).

Metaphors/Styles for different icon types

Actions

Action icons require a distinctive 1 pixel solid outline. Action icons are drawn to appear as they are on a shelf. This means that a small shadow is drawn directly beneath the icon.

The templates linked above include this shadow, therefore consistancy is ensured.

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)

Places

Places icons vary in style depending on whether the subject at hand can be defined by a physical object.

Emblems

Emblems are icons overlaid on top of other icons. Examples of Emblems are the "'link arrow' and the 'mounted star' symbol. These icons should be noticeable but not detract and cover too much of the icon beneath them.

The mounted emblem uses the vibrant colours from the Oxygen palette. The form of the icon itself is very simple and clear.

Mounted Emblem

Exporting the PNG bitmaps

You can use inkscape to create PNG bitmap images of your icon.

Press <Ctrl> + <Shift> + E, or select 'Export Bitmap' from the File menu.
Select the 'Page' button to export everything inside the page's borders
Enter the width of the icon you wish to output to. If you press the 'Return/Enter' key, Inkscape will fill the height and resolution/dpi boxes for you
Enter the path filename of your Icon. Don't forget to use the Icon Naming Specification. Also refer to the KDE TechBase article here - Projects/Oxygen/namingSpec

Making the final SVG icon to commit/submit

Make a copy of the icon with Inkscape.

Choose "File -> Save As" and select "Plain SVG". This will remove Inkscape specific information which is not necessary to render the image.
After saving the file, choose "File -> Vacuum Defs", to remove unused definitions, and then save again.

Icons made with Adobe Illustrator.

When making an icon with AI, be careful not to include Adobe extensions to SVG.
All Adobe stuff should be removed from the final SVG. It will probably be necessary to use a text editor (such as KWrite) to do this.
To check for a proper SVG file, open the icon in the Squiggle SVG viewer.

@@ Line 1: / Line 1: @@
-== Working ground for the Oxygen Icon Style Guide. ==
+=Oxygen Icon Style Guide=
-'''Here you will find the newest info on the Oxygen Icon Style Guide.'''
+{{warning|'''The Oxygen Icon Style is currently a work in progress:''' This is the newest version, but several sections need expanding.}}
-''Note that until now this is still a study of work in motion ''
+== Oxygen's Approach to Icon Sizes ==
+Oxygen icons are all scalable vector graphics (SVG) documents, which is the default format used by [http://inkscape.org Inkscape]. These SVG files are used to render bitmap images (PNG) at various sizes.
-=== Templates for different icon sizes ===
+Oxygen uses the 128x128 'pixel' SVG files to produce icons at 5 different sizes: 128x128, 64x64, 48x48, 32x32 and 16x16 pixel images. 88x88 'pixel' SVG files are used to render at 22x22 pixels. Optionally, 16x16 pixel icons can be created in a 64x64 'pixel' SVG file.
-'''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.
+For icons that are designed to be rendered at 32x32, 22x22 and 16x16 it is crucial that icons elements align to pixel boundaries of the rendered icon to improve legibility.  After rendering to 22x22 and 16x16, icons will probably need some hand optimization using the GIMP.  There is little point in making a 22x22 and 16x16 PNG icon if all that was done was to export a PNG from the 128 pixel SVG.
-''Note that in icons below 48x48 (ie. anything on smaller than 128x128 template) need to have points/lines/strokes which lie directly on a pixel raster/grid.''
+Various templates are provided to assist you in creating Oxygen icons. They are linked to below.
-x32 icons are being drawn on a 88x88 template. Be sure to make all lines/strokes 4 pixels in width and all shapes a factor of 4.
+{{note|Only action icons ''require'' the shadow at the bottom of the icon. For all other types you may remove this shadow.}}
-The smaller sizes at this time are being drawn at the actual size (ie 22x22 and 16x16) although this is not really a rule and will change once we figure it out :p
+=== 16x16 ===
+'''Either:'''
-=== Color Usage ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
+*Set the grid to 8 pixels
+*Preview the icon by zooming out to 13%
+**Quickly tap the minus key six times
+'''Or:'''
+*Use an Inkscape document with dimensions of 64x64 pixels
+*Set the grid to 4 pixels
+*Preview the icon by zooming out to 25%
+**Quickly tap the minus key four times
+=== 22x22 ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_22x22.template.svg 22x22 template].
+*Set the grid to 4 pixels
+*Preview the icon by zooming out to 25%
+**Quickly tap the minus key four times
+=== 32x32 ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
+*Set the grid to 4 pixels
+*Preview the icon by zooming out to 25%
+**Quickly tap the minus key four times
+=== 48x48 ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
+=== 64x64 ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
+*Set the grid to 4 pixels
+*Preview the icon by zooming out to 50%
+**Press the '2' key
+=== 128x128 ===
+*Use the [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/templates/action_32x32.template.svg 32x32 template]
+*Set the grid to 1 pixel
+*Preview the icon by zoom to 100%
+**Press the '1' key
+== Color Usage ==
 Oxygen has a distinct, defined palette which should '''always''' be adhered to.
 [[Image:figure4.png]]
-=== Metaphors/Styles for different icon types ===
+{{Note|
-'''Actions'''
+The Oxygen color palette is released under the [http://creativecommons.org/licenses/by-nc-nd/2.5/ Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License].}}
+You can easily use the Oxygen Colour scheme in Inkscape by downloading the palette.  To download the Oxygen Palette [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/utils/oxygen.gpl Click here]
-Action Icons have a distinct shadow (example and explanation needed)
+#Close Inkscape, if you have it running
+#Place [http://websvn.kde.org/*checkout*/trunk/playground/artwork/Oxygen/utils/oxygen.gpl 'oxygen.gpl'] in this folder: {{path|~/.config/inkscape/palettes/}}
+#Start Inkscape
+#Select the Oxygen palette in the Swatches dialog (Ctrl+Shift+W).
-'''Applications'''
+== Metaphors/Styles for different icon types ==
+=== Actions ===
+Action icons require a distinctive 1 pixel solid outline. Action icons are drawn to appear as they are on a shelf. This means that a small shadow is drawn directly beneath the icon.
+The templates linked above include this shadow, therefore consistancy is ensured.
+=== Applications ===
 Application icons vary the most in style from cartoonish logos to photo-realistic (example and explanation needed)
-'''Mimetypes'''
+=== Mimetypes ===
 Mimetypes all use the same paper sheet template (example and explanation needed)
-'''Devices'''
+=== Devices ===
 Devices are the most realistic of all icons (example and explanation needed)
-'''Filesystems'''
+=== Places ===
+Places icons vary in style depending on whether the subject at hand can be defined by a physical object.
+=== Emblems ===
+Emblems are icons overlaid on top of other icons. Examples of Emblems are the "'link arrow' and the 'mounted star' symbol. These icons should be noticeable but not detract and cover too much of the icon beneath them.
+{{Box|Mounted Emblem|[[Image:Oxygen-128-emblem-mounted.png|center]]
+''The mounted emblem uses the vibrant colours from the Oxygen palette. The form of the icon itself is very simple and clear.''}}
+=== Exporting the PNG bitmaps ===
+You can use inkscape to create PNG bitmap images of your icon.
+#Press <tt><Ctrl> + <Shift> + E</tt>, or select 'Export Bitmap' from the File menu.
+#Select the 'Page' button to export everything inside the page's borders
+#Enter the width of the icon you wish to output to. If you press the 'Return/Enter' key, Inkscape will fill the height and resolution/dpi boxes for you
+#Enter the path filename of your Icon. Don't forget to use the [http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-latest.html Icon Naming Specification]. Also refer to the KDE TechBase article here - [[Projects/Oxygen/namingSpec]]
+[[Category:Artwork]][[Category:Oxygen]]
+=== Making the final SVG icon to commit/submit ===
+Make a copy of the icon with Inkscape.
+#Choose "File -> Save As" and select "Plain SVG".  This will remove Inkscape specific information which is not necessary to render the image.
+#After saving the file, choose "File -> Vacuum Defs", to remove unused definitions, and then save again.
+Icons made with Adobe Illustrator.
-Filesystem icons vary in style depending on whether the subject at hand can be defined by a physical object (example and explanation needed)
+#When making an icon with AI, be careful not to include Adobe extensions to SVG.
+#All Adobe stuff should be removed from the final SVG.  It will probably be necessary to use a text editor (such as KWrite) to do this.
+#To check for a proper SVG file, open the icon in the Squiggle SVG viewer.