Tango Icon Theme Guidelines

From Tango Desktop Project
Revision as of 12:14, 11 March 2005 by Jimmac (talk)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Introduction

The aim of the Tango icon theme is to make applications not look alien on any Desktop. A user running a multiplatform application should not get the impression the look is unpolished and incosistent with what he/she is used to. While this isn't about merging styles of Windows XP, Mac OS X, Gnome, and KDE together, we do aim not to be //drastically// different on each of the platforms.

Along with generic type fallback, this will help in the transition phase when some legacy icons still remain on the particular desktop.

Color Palette

Having a common color palette is required to have a consistant look across all icons. The visual consistency is largely determined by the colors used.

The Unify color palette consists of 24 RGB colors as shown on the image below. That doesn't mean you're supposed to use colors exclusively from this set. Most desktop allow for 24bit RGB icons (+8bit Alpha channel). The common practice when drawing icons is to use the palette as a base, apply it on large areas. Shading with gradients, creating highlight and shadows by changing value, minor changes of saturation are also suggested. Starting from the base color and changing value, saturation or even hue slightly gives more consistant results that starting from arbitrary colors.

Template:Unify:palette2.png

For your convenience, we prepared the palette for use in the following formats:

 * [GIMP palette is available]
 * [Adobe Illustrator PDF]
 * [SVG]

Defining Unify Style Elements

There is many attributes of an icon that define it as part of Unify. General attributes such as perspective and lighting are outlined below, but let's look at the key visual aspects that define the look first:

Template:Unify:elements.png

 - **Object Outline**. All Unify icons are stroked with a thin outline. At the //large// resolution the stroke size is to be 1px. As the vector icon is scalable, the stroke scales along with the icon. However for the //small// and //extra-small// sizes, use 1px outline again (see the sizes section for more info). The color of the outline is a dark variant of the key color of the icon. This is done by taking the HUE/SATURATION of the dominant fill color and lowering the value to approximately 20%). In the example above, the trashcan is green, so the stroke will be green as well. While this is very close to black at the target resolution, it becomes less dramatic as you scale it up.
 - **Highlights**. The edges of objects tend to reflect light more due to the fact the position of the observer relative to the light source is almost always ideal for the reflection. In terms of highlights, the theme inherits the style of Firefox/Thunderbird Pinstripe/Winstripe designed by Kevin Gerich & Stephen Horlander ([[1]], [[2]]) which shift away from reality by creating a second inner outline of the object. This troke is very subtle and may not be aparent on some matt objects.
 - **Glossy reflections**. Use glossy reflection only on objects that have a reflective surface in real life (Plastic, Glass...). A paper sheet certainly doesn't have such attribute.

As you can see various elements have been picked from existing icon styles. Similar perspective as the GNOME icons, the colored object stroke from KDE & Windows XP, the aqua highlight from OSX, and the edge highlights and overall lightness from Firefox Pinstripe theme.

Style Attributes

To better understand the style of Unify, consider the following adjectives:

 * Light
 * Crisp
 * Straight
 * Simplified
 * Modern
 * Well-balanced

Perspective

There is three types of perspective defined for Unify.

Flat/On the Shelf Perspective

Template:Unify:shelf-perspective.png

Looking at an object on a shelf at eye level. Or looking at an object from above, laying on surface. Most common perspective for toolbar icons and document mime type icons.

On the Table

Template:Unify:table-perspective.png

Most common perspective for application icons. Action/Toolbar icons are also common adepts for this perspective.

Tilted Table

In cases where the object's appearance is more evident from an angle, you are free to use the tilted table perspective. But this is the least common perspective of the three and should be used only in cases where the other two don't provide a clearly distinctive silhouette of the object.

We will provide grid templates in future.

Lighting

Visual consistency also comes from having a homogenous lighting across all icons. Tango icons are lit from above, with the light source slightly to the left. Icons with //on the table// perspective cast a fuzzy shadow on the surface.

Sizes

There are 3 major icon sizes an icon theme must address -- **Large**, **Small** and **Extra Small**. Since Unify uses vectors for the large size, all other sizes excluding small and extra small, are handled by scaling this vector icon to the target resolution. The reason to explicitly define small and extra small sizes and not just use the scaled version of largeis that tiny resolution requires a change in perspective and object simplification.

Large

Template:Http://jimmac.musichall.cz/wipicons/Unify/48/gnome-fs-directory.png

This size is used on the desktop and in the file manager's windows for example. The bitmap size is 48x48 pixels. We strongly suggest creating an [[3]] version for this size since it can be used for other resolutions as well. Vector icons will be required for pixel resultion-agnostic interface, defining size by absolute units such as millimeters or inches.

Small

Template:Http://jimmac.musichall.cz/wipicons/Unify/22/gnome-fs-directory.png

Used mainly for application toolbar icons. The bitmap size is 22x22. This size is common for toolbars in KDE or GIMP. Because historically Gnome uses 24x24 size, just adding a 1px border can make Tango icons useful on the Gnome desktop in the transition phase. You can do this with imagemagick:

   convert -mattecolor Transparent -frame 1x1 tango_size.png gnome_size.png

Extra Small

Template:Http://jimmac.musichall.cz/wipicons/Unify/16/gnome-fs-directory.png

This size, at 16 by 16 pixels, is used at places such as lists (file dialog, message list in an e-mail client) or menus. Note, however than the Tango theme tries to keep the number of menu items with an icon to a minimum. Only the most frequently used menu items should feature an icon. Otherwise the purpose of visual anchor is nullified by introducing visual noise in the menu.

Common Filenaming

Until now, there hasn't been a standard for naming conventions which resulted in themes that don't work globally, because individual projects used different names for the same icon. Tango tries to solve this too. The list of basic names has been based on previous work such as:

 * Template:Http://lists.freedesktop.org/archives/xdg/2004-October/005084.html
 * Template:Http://www.gnome.org/~dobey/icon-names.txt. 
 * Template:Http://live.gnome.org/UsabilityTeam 2fStockItems

Naming Spec

In the short term, existing KDE and GNOME icons names will be addressed using symlinks. This script will create symlink mapping to the existing GNOME and KDE icon structures (FIXME).


License

FIXME: We want free software benefit from the artwork. But should we allow proprietary apps to use it? Maybe through a lookup library such as gnomeui? I don't feel like donating this work to companies like Multidmedia.


Another option is to let the proprietary folks follow the guidelines, but make their own artwork.