Guidelines

box_logo.png

Introduction

Lubuntu Box is a new theme created for being used by default with the Lubuntu operating system, or as a great companion to any GTK environment. It was inspired upon the great Elementary theme, and always keeping on mind the common styling lines provided by the Tango Team, creators of the Tango theme.

The idea is making a visually coherent interface between programs, toolbars, buttons and every control used in our desktops, so releasing this guide may help new icon's creators to develop their own versions or complements to the theme.

This guide, as well as the theme itself, are highly inspired in Tango visual guides, like documet structure, icon details and workflow methods, through GPL license.

Colour palette

palette.png

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 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 consistent results than starting from arbitrary colors.

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

Note the latest development version of GIMP and Inkscape ship the Box (as Tango) palette by default.

Defining Box elements

There are many attributes of an icon that define it as part of Box, including ones such as perspective and lighting (which are outlined below).

Let's examine at the key visual aspects that define the style:

image1.png

  • Object Outline: All Box 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 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 examples included here, the folder is blue, so the stroke will be blue 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, 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 apparent on some matte objects.

  • Glossy reflections: use glossy reflection only on objects that have a reflective surface in real life (plastic, glass, some metal, etc). 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.

Perspective

There maybe be several types of perspective defined for Box. Depending on the object height or the convenience of seeing from one poit or another, the perspective could vary from upper to lower, or even sided. But it's desirable to keep the same "object height" in the representation. See another example of volume heights:

image2.png

Lighting

Having homogenous lighting across all icons also is important for visual consistency. ’ø» 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 4 major icon sizes defined that an icon theme should contain: Large, 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, has been introduced.

Large

folder48.png

This size is mainly used for desktop icons and in the file manager views. The bitmap size is 48×48 pixels.

Small

folder22.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.

Extra Small

folder16.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.

X-Large

folder128.png

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.

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. This issue is solved 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).

Style Attributes

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

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

Links and info

Lubuntu/Artwork/Incoming/Quantal/Box/Guidelines (last edited 2012-05-29 16:07:40 by rafaellaguna)