Jump to: navigation, search

Visual Design 3.x updates

Visual Design

Updates in progress by: Kpeter.ca.ibm.com 19:22, 15 June 2006 (EDT)

Return to Eclipse 2.1 UI Guidelines

What this guide covers

The following guide covers user interface (UI) graphics for Eclipse 3.x-based tools. All visual user interface elements created for Eclipse-based tools follow a common style called the Eclipse visual style or Eclipse style. Any product, tool, or plug-in based on the Eclipse Workbench Version 3.0 and above should follow these guidelines to help ensure consistency of visual user interface elements. Consistency includes visual style, meaning, and implementation conventions.

How this guide is organized

The Design section provides guidance and tools for creating Eclipse style icons and wizard graphics.

The Specifications section provides detailed information on color palette, graphic types, size and placement of the graphics in their alotted real estate, and positioning of the icon and wizard graphics in the user interface.

The Implementation section provides automated cutting actions, conventions for file and folder naming and structure, and code snippets for implementing icon states on the toolbar and local toolbar and for placing overlays on model objects.

Who this guide is for

These guidelines are for anyone creating Eclipse style user interface graphics or seeking best practices for their use. This is not a how-to guide, but you will find instructions for some tasks and a number of resources to assist in making the graphics. If you are a designer, you will be interested in the Design, Specifications, and Implementation sections. If you are a Developer, the Specifications and Implementations sections will be of most value to you.


DESIGN

Color Palette

This section covers color support and the role of the palette used to create Eclipse-style graphics.

Color support

Eclipse supports 24 bit color depth, which means that colors used to create UI graphics can come from outside the defined 8 bit, or 256 color Eclipse-style palette. However, using the Eclipse-style palette as the base for applying color to your graphics will help ensure a visual fit within the Eclipse environment.

The role of the color palette

An entire set of graphical elements, such as icons, wizards and user assistance graphics, requires a consistent, family-like appearance across the user interface; contrarily, individual and sub-families of graphics require differentiation. Color choices can either bring unity or cause distraction.

To achieve a consistent look to the graphics across the user interface, a color palette is used as a basis to create the graphical elements. The same palette is used for all graphic types: icons, wizard banner graphics, and user assistance graphics.

When an image is complete and ready to be saved to GIF, it is indexed to "exact" color. This preserves all of the colors the graphic was created with including any colors you have added that are not contained within the base palette. For more details on cutting the images for implementation, see Cutting Actions under the Implementation section. For guidance on how color is used in Eclipse-style icons, see Style & Design, next.

Des colour pal.jpg

Click here to download the "eclipse-style_palette.aco" palette for working with raster-based files in Adobe Photoshop and the "eclipse-style_palette.ai" palette for working with vector-based files in Adobe Illustrator.


Loading the palette

To load the palette in Adobe Photoshop, from the "Swatches" palette choose "Load Swatches..." and navigate to where you saved the "eclipse-style_palette.aco" palette.

To load the palette in Adobe Illustrator, first save the "eclipse-style_palette.ai" palette in the Adobe Illustrator > Presets > Swatches folder. If you have Adobe Illustrator already open, you will need to restart it after adding this file. Once you restart Illustrator, go to Windows > Swatch Libraries and choose the "eclipse-style_palette.ai" palette from the list.

Style & Design

To come

Consistency & Reuse

To come

Common Elements

To come

Icon States

To come

Templates

To come


SPECIFICATIONS

File Formats

To come

Graphic Types

To com

Icon Size & Placement

To come


IMPLEMENTATION

Cutting Actions

To come

Naming Conventions

To come

Folder Structure

To come


Kpeter.ca.ibm.com 19:22, 15 June 2006 (EDT)