For your convenience,
Tiffany Rings, we prepared the palette for use within the following formats:
GIMP Palette - also functions in most current Inkscape (symlink ~/.gimp-2.2/palettes/ to ~/.inkscape/palettes/ and you'll have all your GIMP palettes in Inkscape) SVG Palette OpenPalette (broken link) Photoshop Swatches
Note the most recent improvement edition of GIMP and Inkscape 0.44 ship the Tango palette by default.
Defining Tango Style Factors
There are numerous attributes of an icon that outline it as a part of Tango, like ones like point of view and lighting (which can be outlined below).
Let's analyze at the crucial visual factors that define the design:
Object Outline : All Tango icons are stroked with a thin outline to improve contrast. At low resolutions the stroke size is 1px. The stroke should not scale along with the icon, it should remain 1px.
The color of the outline is a dark variant of the true secret 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. 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,
Tiffany Rings Sale, the theme inherits the type 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 apparent on some matte objects. Glossy reflections : Use glossy reflection only on objects that have a reflective surface in real life (plastic, glass,
Tiffany Jewellery title,
Tiffany Engagement, some metal, et cetera). A sheet of paper certainly doesn't have these kinds of attribute.
Various elements have been picked from existing icon styles: Similar standpoint as GNOME icons, a colored object stroke from KDE, an Aqua-like highlight influenced by Mac OS X,
Tiffany Necklace, and edge highlights and overall lightness from the Firefox Pinstripe theme.
Style Attributes
To better understand the type of Tango, consider the subsequent adjectives:
Light Crisp Straight Simplified Modern Well-balanced Viewpoint
There are three types of standpoint defined for Tango.
Flat/On the Shelf Perspective
This style resembles looking at an object on a shelf at eye level,
Cheap Pandora Bracelets, looking at an object from above, or laying on surface. This is the most common point of view for toolbar icons and document mime type icons.
On the Table
This type of standpoint is the most common for application icons. Action/Toolbar icons also utilize this viewpoint 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 viewpoint of the three and should be used only in cases where the other two do not provide a clearly distinctive silhouette of the object.
Lights
Having homogenous lights 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 viewpoint may cast a fuzzy shadow on the surface as if the light source came from the position of the observer.
Sizes
There are 4 major icon sizes defined that an icon theme should contain: Large,
Wholesale Pandora Bracelets, Medium, Small and Extra Small. Each of these sizes needs to be treated separately, simple scaling of a larger icon doesn't work and ends up looking fuzzy and unclear. On top of that, a new optional size, X-Large,
Tiffany Online, has been introduced.
Large
This size is mainly used for desktop icons and within the file manager views. The bitmap size is 48×48 pixels.
Medium
A very common size of 32x32px is used on some menus (slab) and very common on Windows.
Small
"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.
Gnome has been using a size of 24×24px (which is ¼ of 48×48); just adding a 1 pixel empty space on all sides can make Tango icons useful on the Gnome desktop. One can easily do this with imagemagick:
convert -bordercolor Transparent -border 1x1 tango_size.png gnome_size.png Extra Small
At 16×16 pixels, the "Extra Small" size is used in places such as lists (file dialog, message list in an e-mail client,
Tiffany Sale, etc.) and menus.
X-Large
This size has been introduced fairly recently and is optional. Unless you are an experienced icon designer, do not start with this size as it goes against most of the good practice for icon design. You will be required to add insane amounts of detail and might end up with an unclear and complex metaphor. The canvas size is 256x256px and unlike all the other sizes, this artwork can be scaled from 49px up. In other words -- do not aim for pixel perfection here.
This size also holds another exception to the rule of stroking. Do not stroke x-large icons with the 1px common everywhere. In Inkscape we use a trick that achieves a similar contrast enhancing effect without losing upwards scalability. You create an outline object with no fill and a stroke of 3px. Then you duplicate these object and use the copy to clip itself. After blurring the object, the inside of the silhouette gets nicely shaded, while the outside is crisp. Instead of the inner stroke, use path shapes. Blur is a useful tool here as well.
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 within the Tango set, please provide keywords while 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 within 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 model 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 edition.
Here's a few sample videos of a Tango icon creation workflow in Inkscape and GIMP.
Creating vector art for target 48×48 pixel size (Approx 30MB DivX AVI file). Touching up an illustration for 22×22 and 16×16 pixels (Approx 15MB DivX AVI file)
Alternatively, you can create the low resolution model inside the vector editor as well:
Create a duplicate of the vector icon (in your vector editor). Reduce the graphic to the target size. Tweak the shapes, aligning the vectors (or groups of vectors) to the pixel grid. Export and tweak if necessary. Things to Keep in Mind…
Here are a few things we suggest you take in consideration when transition from existing icon style…
a KDE artist The stroke (object outline) is 1 pixel for the 48×48 pixel target resolution. KDE icons tend to have a thicker outline. Only add glossiness for objects which have a shiny property in real life. a GNOME artist The toolbar size of 24×24 pixels is not used in Tango themes; it's 22×22 pixels instead. The color palette is more vibrant, saturated. Every icon requires all the sizes provided. Frequent Mistakes