The Tango icon theme's goal is to make applications not seem alien on any desktop. A user running a multiplatform application should not have the impression that the look is unpolished and inconsistent with what he or she is used to. While this isn't about merging styles of all desktop systems, we do aim to not be drastically different on each platform.
Along with a generic type fallback, having a similar style will help in the transition phase with some legacy icons which may still remain on a user's particular desktop.
Color Palette.
Having a common color palette is required to have a consistent look across all icons. Visual style is heavily influenced by the colors used.
The Tango color palette consists of 27 RGB colors, as shown on the image below. Most desktops allow for 24-bit RGB icons (+8-bit Alpha channel).
The common practice when drawing icons is to use the palette as a base, applying it on large areas. Shading with gradients, creating highlight and shadows by changing value, and minor changes of saturation are also allowed and endorsed. Colors do not have to come exclusively from this set, as additional colors may be used. Starting from the base color and changing value, saturation or even hue slightly gives more consistant results than starting from arbitrary colors.
For your convenience, we prepared the palette for use in the following formats:
GIMP Palette - also works in latest Inkscape (symlink ~/.gimp-2.2/palettes/ to ~/.inkscape/palettes/ and you'll have all of your GIMP palettes in Inkscape)
SVG Palette
OpenPalette (broken link)
Photoshop Swatches
Note the latest development version of GIMP and Inkscape 0.44 ship the Tango palette by default.
Defining Tango Style Elements.
There are many attributes of an icon that define it as part of Tango, including ones such as perspective and lighting (which are outlined below).
Let's examine at the key visual aspects that define the style:
Visual Style Elements of Tango.
Object Outline : All Tango icons are stroked with a thin outline. At the large resolution the stroke size is to be 1 pixel. As the vector icon is scalable, the stroke scales along with the icon -- however, for the small and extra-small sizes, use 1 pixel outline again (see the sizes section for more information).
The color of the outline is a dark variant of the key color of the icon. This is done by retaining the hue and 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 (Pinstripe, Winstripe) which shift away from reality by creating a second inner outline of the object. This stroke is very subtle and may not be aparent on some matte objects.
Glossy reflections : Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, et cetera). A sheet of paper certainly doesn't have such attribute.
Various elements have been picked from existing icon styles: Similar perspective as GNOME icons, a colored object stroke from KDE, an Aqua-like highlight influenced by Mac OS X, and edge highlights and overall lightness from the Firefox Pinstripe theme.
Style Attributes.
To better understand the style of Tango, consider the following adjectives:
Light
Crisp
Straight
Simplified
Modern
Well-balanced
Perspective.
There are three types of perspective defined for Tango.
Flat/On The Shelf Perspective.
This style resembles looking at an object on a shelf at eye level, looking at an object from above, or laying on surface. This is the most common perspective for toolbar icons and document mime type icons.
On The Table.
This type of perspective is the most common for application icons. Action/Toolbar icons also utilize this perspective from time to time.
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 do not provide a clearly distinctive silhouette of the object.
Lighting.
Having homogenous lighting across all icons also is important for visual consistency. Tango icons are lit from above, with the light source slightly to the left. Icons with on the table perspective may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.
Sizes.
There are three major icon sizes an icon theme must address: Large, Small, and Extra Small.
Since Tango 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 a scaled version of the large size) is because using such a small size requires object simplification, which often includes a change in perspective.
Some desktops do not make the extra effort to create pixel-perfect small sized renderings and simply render the large size onto the tiny canvas. While this may appear to save a lot of work, we believe the extra effort is only marginal and the resulting extra definition ("crispness") is worth it. While display resolutions increase over the years, there is also a fairly large market of small devices such as PDAs that will benefit greatly from the attention to the smaller-sized icons. Below, we include suggested workflows to help the icon designer to be as efficient as possible when creating all sizes.
Large
x-directory-normal-drag-accept.png
This size is mainly used for desktop icons and in the file manager views.
The bitmap size is 48×48 pixels. We strongly suggest creating a SVG version for this size since it can be easily scaled for other resolutions as well. Vector icons will be required for pixel resolution-independent interfaces as well, which define size by absolute units such as millimeters or inches.
Medium.
This size is not required to be created. If missing, the Large SVG can be rendered into this 32x32 canvas. As 32x32 is a common size on platforms such as Windows XP or KDE, providing a pixel-perfect rendering of 32x32 pixels is suggested. It can be created out of the Large SVG fairly easily.
Small.
x-directory-normal-drag-accept.png
"Small" is the common size for application toolbar icons.
Its bitmap size is 22×22 pixels. This size is common for toolbars in KDE and the GIMP.
Historically Gnome uses 24×24 size (which is ¼ of 48×48); just adding a 1 pixel empty space on all sides can make Tango icons useful on the Gnome desktop in the transition phase. One can easily do this with imagemagick:
convert -bordercolor Transparent -border 1x1 tango_size.png gnome_size.png
Extra Small.
x-directory-normal-drag-accept.png
At 16×16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client, etc.) and menus.
Note, however: The Tango Project recommends keeping 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 has not been a standard for naming conventions. This resulted in themes which have not worked globally, as individual projects have used different names for the same icon.
Tango solves this issue with a Standard Icon Naming Specification
In the short term, existing KDE and GNOME icons names will be addressed using symlinks. We have prepared a script which automatically generates appropriate symlinks for existing naming schemes in GNOME and KDE so that compatibility with current desktop applications will be preserved.
Metainformation.
To make it easier for developers to search for icons in the Tango set, please provide keywords in the icon file. For example, appropriate keywords for a joystick icon are: controller, joystick, game, gaming, HID.
For SVG icons, the metainformation is written using the Dublin Core namespace.
Inkscape users can conveniently enter the data in the document properties (Ctrl+Shift+D).
FIXME: PNG icons?
Suggested Workflow & Support Files.
While each artist prefers his or her own way of working, here's a suggestion how to create all the needed icon versions with as little effort as possible.
Start with the vector icon, having an extra 1:1 view to precisely positioned orthogonals.
Once finished with the SVG icon, render the icon at 22×22 pixels (either as an export from your vector software or as an import in your bitmap editor) and use the results as a starting point. Most of the time, all you need to do is to recreate the outline stroke and the inner tango highlight with a 1×1 pixel brush.
The 16×16 pixel version may start from the SVG as well, but usually the shapes need to be simplified significantly. Having the 22×22 pixel version open just for precise color picking is enough. Sometimes it's also good to start with a detail of the 22×22 pixel version.
Custom Search
If you liked this article, subscribe to the feed by clicking the image below to keep informed about new contents of the blog:
0 comments:
Post a Comment