Visual Design 3.x updates
- 1 Visual Design
- 1.1 What this guide covers
- 1.2 How this guide is organized
- 1.3 Who this guide is for
- 1.4 DESIGN
- 1.5 SPECIFICATIONS
- 1.6 IMPLEMENTATION
Updates in progress by: Kpeter.ca.ibm.com 19:22, 15 June 2006 (EDT)
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.
This section covers color support and the role of the palette used to create Eclipse-style graphics.
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.
Loading the palette
To load the palette in Adobe Photoshop, open the "Swatches" palette and choose "Load Swatches..."; then navigate to where you saved the https://git.eclipse.org/c/platform/eclipse.platform.images.git/plain/org.eclipse.images/tools/eclipse-style_palette.aco "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.
To use the palette in The GIMP open the "Palettes" dialog and choose "Import Palette" entry from the context menu.
The ".gpl" file format can also be used in Inkscape. Just copy the palette file into the user's profile into the "/~/.config/inkscape/palettes" folder.
Style & Design
Consistency & Reuse
Icon Size & Placement
Kpeter.ca.ibm.com 19:22, 15 June 2006 (EDT)