Jump to: navigation, search

Difference between revisions of "UIGraphics : Specifications : IconSize"

m
m
 
(22 intermediate revisions by one other user not shown)
Line 1: Line 1:
''''' * Work in progress * '''''
+
Return to the main '''[[User Interface Guidelines#UI Graphics (3.x Updates)|UI Graphics (3.x Updates)]]''' section on the UI Best Practices page.
 
+
Return to the main '''[[UI_Best_Practices_v3.x#UI_Graphics|UI Graphics]]''' section on the UI Best Practices page.
+
  
 
= '''Size & Placement''' =
 
= '''Size & Placement''' =
 
 
 
The majority of Eclipse style icons are designed within an area of 16 x 16 pixels. That is the final cut size of the image. Within that area, a 15 x 15 pixel space is reserved for the image itself, leaving both a vertical and horizontal line of empty pixels to allow for proper alignment of the image within the user interface. In the size and placement images below, the light blue represents the image area and the bright pink represents the empty pixel area.
 
The majority of Eclipse style icons are designed within an area of 16 x 16 pixels. That is the final cut size of the image. Within that area, a 15 x 15 pixel space is reserved for the image itself, leaving both a vertical and horizontal line of empty pixels to allow for proper alignment of the image within the user interface. In the size and placement images below, the light blue represents the image area and the bright pink represents the empty pixel area.
  
Line 11: Line 7:
  
 
Exceptions to the common 16 x 16 image size are also detailed below. All sizes are indicated with width before height.
 
Exceptions to the common 16 x 16 image size are also detailed below. All sizes are indicated with width before height.
 
'''Icons'''
 
 
    • Product
 
    • Perspective and Fast View
 
    • View
 
    • Toolbar, Toolbar Wizard, and Local Toolbar
 
    • Model Object
 
    • Object Overlay (and Underlay)
 
    • Table
 
    • Palette
 
    • Diagram
 
    • Progress Indicator
 
    • Pointer and Cursor Mask
 
 
'''Wizard Banner Graphics'''
 
 
    • Wizard Banner
 
 
'''User Assistance Graphics'''
 
 
    • Welcome
 
    • Welcome User Roles
 
    • Welcome Content
 
    • Tutorials and Samples Galleries
 
 
 
  
 
'''Icons'''
 
'''Icons'''
Line 46: Line 15:
 
Product icons occupy the full space allotted for all five sizes: 16 x 16, 24 x 24, 32 x 32, 64 x 64, and 72 x 72 pixels. This shows how the 16 x 16 product icon fills the entire space:
 
Product icons occupy the full space allotted for all five sizes: 16 x 16, 24 x 24, 32 x 32, 64 x 64, and 72 x 72 pixels. This shows how the 16 x 16 product icon fills the entire space:
  
'''Image size in allotted space'''    
+
{|
'''Sample image in place'''
+
|'''<font color="gray">Image size in allotted space</font>''' |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 
+
|-
[[Image:spec_size_prod16.gif]]     [[Image:spec_size_prod16samp.gif]]
+
| [[Image:spec_size_prod16.gif]]   |||||||||||||||||||||||||||||||| [[Image:spec_size_prod16samp.gif]]  
 +
|}
 
   
 
   
Back to top
 
  
  
==  
+
== Perspective and Fast View ==
Perspective and Fast View ==
+
 
+
  
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the right and bottom, as shown here.
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the right and bottom, as shown here.
 
Image size in allotted space
 
Image size in allotted space
 
 
Sample image in place
+
{|
Perspective and fast view realestate image showing empty pixels on the right and bottom Perspective and fast view icon sample image placed in the alotted realestate
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Back to top
+
|-
 +
| [[Image:spec_size_persp.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_perspsamp.gif]]
 +
|}
  
  
Line 71: Line 40:
  
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and bottom, as shown here.
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and bottom, as shown here.
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
View realestate image showing empty pixels on the left and bottom View icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_view.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_viewsamp.gif]]
 +
|}
  
  
Line 83: Line 53:
  
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and top, as shown here.
 
The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and top, as shown here.
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Toolbar, toolbar wizard, and local toolbar icons realestate showing empty pixels on the left and top Toolbar, toolbar wizard, and local toolbar icons sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_tool.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_toolsamp.gif]]
 +
|}
  
  
Line 95: Line 66:
  
 
The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Model Object icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
 
The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Model Object icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Model object realestate image showing empty pixels on the left and bottom Model object icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_obj.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_objsamp.gif]]
 +
|}
  
  
Line 111: Line 83:
  
 
Standard object overlay with a maximum image size of 7 x 8 pixels:
 
Standard object overlay with a maximum image size of 7 x 8 pixels:
Image size in allotted space
+
Object overlay icon image showing the 7 x 8 pixel realestate
+
{|
 +
|'''<font color="gray">Image size in allotted space</font>'''  ||||||||||||||||||||||||||||||||
 +
|-
 +
| [[Image:spec_size_ovr.gif]]  |||||||||||||||||||||||||||||||| 
 +
|}
  
Example of a standard Project Nature—Type—object overlay in place:
+
Example of a standard Project Nature—'''Type'''—object overlay in place:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_ovr-proj.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-projsamp.gif]]
 +
|}
 
 
  
Example of a standard Auxiliary—Status—object overlay in place:
+
Example of a standard Auxiliary—'''Status'''—object overlay in place:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_ovr-aux.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-auxsamp.gif]]
 +
|}
 
 
  
Example of a standard Java—Attribute—object overlay in place:
+
Example of a standard Java—'''Attribute'''—object overlay in place:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_ovr-java.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-javasamp.gif]]
 +
|}
 
 
  
Example of a standard Version Control—Transition-state—object overlay in place:
+
Example of a standard Version Control—'''Transition'''-state—object overlay in place:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_ovr-vers.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-verssamp.gif]]
 +
|}
 
 
  
 
Example of two stacking Version Control object overlays in place:
 
Example of two stacking Version Control object overlays in place:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_ovr-cvs.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-cvssamp.gif]]
 +
|}
 
 
  
 +
'''Multiplicity''' object overlay with a maximum image size of 16 x 6 pixels:
  
Multiplicity object overlay with a maximum image size of 16 x 6 pixels:
+
{|
Image size in allotted space
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
+
|-
Sample image in place
+
| [[Image:spec_size_ovr-mult.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-multsamp.gif]]
Multiplicity object overlay icon image showing the 16 x 6 image in the 16 x 16 pixel realestate Multiplicity object overlay icon sample image placed in the alotted realestate
+
|}
  
Underlay with a maximum image size of 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here:
+
'''Underlay''' with a maximum image size of 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Underlay icon showing the 15 x 15 image in the 16 x 16 pixel realestate Underlay icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_ovr-under.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_ovr-undersamp.gif]]
 +
|}
  
  
  
 
== Table ==
 
== Table ==
 
  
 
The maximum image size is 15 x 14 pixels. Table icons must be no greater than 14 pixels high. The empty pixels must be on the top, bottom, and left, as shown here.
 
The maximum image size is 15 x 14 pixels. Table icons must be no greater than 14 pixels high. The empty pixels must be on the top, bottom, and left, as shown here.
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Table icon showing the 15 x 14 image in the 16 x 16 pixel realestate with empty pixels on top, left, and bottom Table icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_table.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_tablesamp.gif]]
 +
|}
  
  
Line 174: Line 167:
 
== Palette ==
 
== Palette ==
  
 +
'''Standard small (16 x 16) palette icon:''' The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Palette icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
  
Standard small (16 x 16) palette icon: The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Palette icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
+
{|
Image size in allotted space
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
+
|-
Sample image in place
+
| [[Image:spec_size_pal16.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_pal16samp.gif]]
Palette icon showing the 15 x 15 image in the 16 x 16 pixel realestate with empty pixels on the left and top Palette icon sample image placed in the alotted realestate
+
|}
  
Standard large (24 x 24) palette icon: The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. Palette icons must be no greater than 23 pixels high. The empty pixels must be on the left and bottom, as shown here.
+
'''Standard large (24 x 24) palette icon:''' The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. Palette icons must be no greater than 23 pixels high. The empty pixels must be on the left and bottom, as shown here.
Image size in allotted space
+
+
Sample image in place
+
Palette icon showing the 23 x 23 image in the 24 x 24 pixel realestate with empty pixels on the left and top Palette icon sample image placed in the alotted realestate
+
  
Large (32 x 32) palette icon: The maximum image size is 30 x 30 pixels with the image centered. The empty pixels are on all four sides of the image.
+
{|
Image size in allotted space
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
+
|-
Sample image in place
+
| [[Image:spec_size_pal24.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_pal24samp.gif]]
Palette icon showing the 30 x 30 image in the 32 x 32 pixel realestate centered with empty pixels on all four sides of image Palette icon sample image placed in the alotted realestate
+
|}
Back to top
+
 
 +
'''Large (32 x 32) palette icon:''' The maximum image size is 30 x 30 pixels with the image centered. The empty pixels are on all four sides of the image.
 +
 
 +
{|
 +
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_pal32.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_pal32samp.gif]]
 +
|}
  
  
Line 199: Line 196:
  
  
Small (10 x 10) canvas icon: The maximum image size is 10 x 10 pixels. The image fills the space as required.
+
'''Small (10 x 10) canvas icon:''' The maximum image size is 10 x 10 pixels. The image fills the space as required.
Image size in allotted space
+
+
Sample image in place
+
Canvas icon showing the 10 x 10 pixel realestate Canvas icon sample image placed in the alotted realestate
+
  
Small (12 x 12) canvas icon: The maximum image size is 12 x 12 pixels. The image fills the space as required.
+
{|
Image size in allotted space
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
+
|-
Sample image in place
+
| [[Image:spec_size_dgm10.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_dgm10samp.gif]]
Canvas icon showing the 12 x 12 pixel filling the alotted realestate Canvas icon sample image placed in the alotted realestate
+
|}
  
Small (16 x 16) canvas icon: The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here.
 
Image size in allotted space
 
 
Sample image in place
 
Canvas icon showing the 15 x 15 pixel image within the 16 x 16 pixel alotted realestate Canvas icon sample image placed in the alotted realestate
 
  
Large (24 x 24) canvas icon: The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. The empty pixels must be on the left and bottom, as shown here.
+
'''Small (12 x 12) canvas icon:''' The maximum image size is 12 x 12 pixels. The image fills the space as required.
Image size in allotted space
+
+
Sample image in place
+
Canvas icon showing the 23 x 23 image in the 24 x 24 pixel realestate with empty pixels on the left and top Canvas icon sample image placed in the alotted realestate
+
  
Large (32 x 32) canvas icon: The maximum image size is 32 x 32 pixels, but 30 x 30 is recommended with the image centered. The empty pixels are on all four sides of the image.
+
{|
Image size in allotted space
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
+
|-
Sample image in place
+
| [[Image:spec_size_dgm12.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_dgm12samp.gif]]
Canvas icon showing the 30 x 30 image in the 32 x 32 pixel realestate with empty pixels on all four sides of the image Canvas icon sample image placed in the alotted realestate
+
|}
Back to top
+
 
 +
 
 +
'''Small (16 x 16) canvas icon:''' The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here.
 +
 
 +
{|
 +
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_dgm16.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_dgm16samp.gif]]
 +
|}
 +
 
 +
 
 +
'''Large (24 x 24) canvas icon:''' The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. The empty pixels must be on the left and bottom, as shown here.
 +
 
 +
{|
 +
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_dgm24.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_dgm24samp.gif]]
 +
|}
 +
 
 +
 
 +
'''Large (32 x 32) canvas icon:''' The maximum image size is 32 x 32 pixels, but 30 x 30 is recommended with the image centered. The empty pixels are on all four sides of the image.
 +
 
 +
{|
 +
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
 +
|-
 +
| [[Image:spec_size_dgm32.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_dgm32samp.gif]]
 +
|}
  
  
Line 236: Line 246:
  
 
The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Progress indicator icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
 
The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Progress indicator icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Model object realestate image showing empty pixels on the left and bottom Model object icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_prog.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_progsamp.gif]]
 +
|}
  
  
Line 250: Line 261:
  
 
Pointer and cursor mask image sizes shown in the 32 x 32 pixel space:
 
Pointer and cursor mask image sizes shown in the 32 x 32 pixel space:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Pointer and cursor mask image sizes shown in the 32 x 32 pixel realestate Pointer and cursor mask icon sample image placed in the alotted realestate
+
|-
Back to top
+
| [[Image:spec_size_point.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_pointsamp.gif]]
 +
|}
 +
 
  
  
Line 267: Line 280:
  
 
Within the banner space allocation, there is no firm rule for where to place the wizard graphic. Generally, the graphic is centered vertically, and off-center to the left horizontally.
 
Within the banner space allocation, there is no firm rule for where to place the wizard graphic. Generally, the graphic is centered vertically, and off-center to the left horizontally.
Wizard graphic with dimensions 67 x 50 shown for the image within the 75 x 66 pixel realestate
+
[[Image:spec_size_wiz.gif]]
Wizard banner graphic image size shown in the 75 x 66 pixel realestate
+
  
Back to top
+
[[Image:spec_size_wizsamp.gif]]
  
  
  
==
+
'''User Assistance Graphics'''
User Assistance Graphics ==
+
  
  
 
'''''PLEASE NOTE:''' This subsection is still in progress. Some details are currently not available but will be soon.''
 
'''''PLEASE NOTE:''' This subsection is still in progress. Some details are currently not available but will be soon.''
 
  
 
== Welcome ==
 
== Welcome ==
Line 297: Line 307:
 
Sample image in place
 
Sample image in place
 
Main welcome section icon image size of 48 x 48 pixels shown within the final 52 x 52 pixel space Main welcome section icon image placed in the alotted realestate
 
Main welcome section icon image size of 48 x 48 pixels shown within the final 52 x 52 pixel space Main welcome section icon image placed in the alotted realestate
 
  
  
Line 309: Line 318:
 
Sample image in place
 
Sample image in place
 
Welcome user role image size of 32 x 32 pixels shown within the final 36 x 36 pixel space Welcome user role image placed in the alotted realestate
 
Welcome user role image size of 32 x 32 pixels shown within the final 36 x 36 pixel space Welcome user role image placed in the alotted realestate
 
  
  
Line 319: Line 327:
  
 
Default size and placement:
 
Default size and placement:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Main welcome section icon image size of 48 x 48 pixels Main welcome section sample image placed in the alotted realestate
+
|-
 +
| [[Image:spec_size_wel48.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_wel48samp.gif]]
 +
|}
  
 
Hover size and placement:
 
Hover size and placement:
Image size in allotted space
+
{|
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Sample image in place
+
|-
Main welcome section icon hover image size of 52 x 52 pixels Main welcome section hover sample image placed in the alotted realestate
+
| [[Image:spec_size_wel52hov.gif]]  |||||||||||||||||||||||||||||||| [[Image:spec_size_wel52hovsamp.gif]]
 +
|}
  
  
  
==  
+
== Tutorials and Samples Galleries ==
Tutorials and Samples Galleries ==
+
  
  
 
The treeview and lower-level content page icons are 16 x 16 (see under Model Object for size and placement of these images). The main content area of the galleries use 48 x 48 pixel icons, as shown here:
 
The treeview and lower-level content page icons are 16 x 16 (see under Model Object for size and placement of these images). The main content area of the galleries use 48 x 48 pixel icons, as shown here:
Image size in allotted space
+
 
+
{|
Sample image in place
+
|'''<font color="gray">Image size in allotted space</font>'''  |||||||||||||||||||||||||||||||| '''<font color="gray">Sample image in place</font>'''
Gallery content page image size of 48 x 48 pixels Gallery content page sample image placed in the alotted realestate
+
|-
 +
| Gallery content page image size of 48 x 48 pixels   |||||||||||||||||||||||||||||||| Gallery content page sample image placed in the alotted realestate  
 +
|}

Latest revision as of 18:56, 14 November 2007

Return to the main UI Graphics (3.x Updates) section on the UI Best Practices page.

Size & Placement

The majority of Eclipse style icons are designed within an area of 16 x 16 pixels. That is the final cut size of the image. Within that area, a 15 x 15 pixel space is reserved for the image itself, leaving both a vertical and horizontal line of empty pixels to allow for proper alignment of the image within the user interface. In the size and placement images below, the light blue represents the image area and the bright pink represents the empty pixel area.

If the height and width of the image are an even number of pixels smaller than 16 x 16 pixels, it is a rule of thumb to center the image within the 16 x 16 space. For example, a 14 x 14 pixel image will have a single row of empty pixels on all four sides.

Exceptions to the common 16 x 16 image size are also detailed below. All sizes are indicated with width before height.

Icons

Product

Product icons occupy the full space allotted for all five sizes: 16 x 16, 24 x 24, 32 x 32, 64 x 64, and 72 x 72 pixels. This shows how the 16 x 16 product icon fills the entire space:

Image size in allotted space Sample image in place
Spec size prod16.gif Spec size prod16samp.gif


Perspective and Fast View

The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the right and bottom, as shown here. Image size in allotted space

Image size in allotted space Sample image in place
Spec size persp.gif Spec size perspsamp.gif


View

The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size view.gif Spec size viewsamp.gif


Toolbar, Toolbar Wizard, and Local Toolbar

The maximum image size is 16 x 16 pixels, but 15 x 15 is recommended. If the image is 15 x 15 or smaller, the empty pixels must be on the left and top, as shown here.

Image size in allotted space Sample image in place
Spec size tool.gif Spec size toolsamp.gif


Model Object

The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Model Object icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size obj.gif Spec size objsamp.gif


Object Overlay (and Underlay)

Most object overlay icons are a maximum image size of 7 x 8 pixels, always centered. There are some exceptions to this size, two of which are covered here: the "multiplicity" overlay and the "underlay". The multiplicity overlay spans the width of the model object to a maximum of 16 pixels wide and 6 pixels high. The underlay is a maximum size of 15 x 16 pixels, though commonly they are a square 15 x 15 pixels in size so they are uniform when seen multiple times in the treeview.

Overlay icons should have an outer white keyline surrounding the image to clearly separate them from the model object icons that they over lay. If there is not enough space to add the white keyline all the way around the overlay image, then add the white pixels only on the side that will be overlapping the model object. This can be determined by finding out what type of overlay it is. See the Graphic Types subsection for a sample and description of the different types of overlays. For information on how each of the overlays is positioned on the model object, see the subsection on Positioning in the UI.

Standard object overlay with a maximum image size of 7 x 8 pixels:

Image size in allotted space
Spec size ovr.gif

Example of a standard Project Nature—Type—object overlay in place:

Image size in allotted space Sample image in place
File:Spec size ovr-proj.gif Spec size ovr-projsamp.gif


Example of a standard Auxiliary—Status—object overlay in place:

Image size in allotted space Sample image in place
Spec size ovr-aux.gif Spec size ovr-auxsamp.gif


Example of a standard Java—Attribute—object overlay in place:

Image size in allotted space Sample image in place
Spec size ovr-java.gif File:Spec size ovr-javasamp.gif


Example of a standard Version Control—Transition-state—object overlay in place:

Image size in allotted space Sample image in place
Spec size ovr-vers.gif Spec size ovr-verssamp.gif


Example of two stacking Version Control object overlays in place:

Image size in allotted space Sample image in place
Spec size ovr-cvs.gif Spec size ovr-cvssamp.gif


Multiplicity object overlay with a maximum image size of 16 x 6 pixels:

Image size in allotted space Sample image in place
File:Spec size ovr-mult.gif Spec size ovr-multsamp.gif

Underlay with a maximum image size of 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here:

Image size in allotted space Sample image in place
Spec size ovr-under.gif Spec size ovr-undersamp.gif


Table

The maximum image size is 15 x 14 pixels. Table icons must be no greater than 14 pixels high. The empty pixels must be on the top, bottom, and left, as shown here.

Image size in allotted space Sample image in place
Spec size table.gif Spec size tablesamp.gif


Palette

Standard small (16 x 16) palette icon: The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Palette icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size pal16.gif Spec size pal16samp.gif

Standard large (24 x 24) palette icon: The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. Palette icons must be no greater than 23 pixels high. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size pal24.gif Spec size pal24samp.gif

Large (32 x 32) palette icon: The maximum image size is 30 x 30 pixels with the image centered. The empty pixels are on all four sides of the image.

Image size in allotted space Sample image in place
Spec size pal32.gif Spec size pal32samp.gif


Diagram

Small (10 x 10) canvas icon: The maximum image size is 10 x 10 pixels. The image fills the space as required.

Image size in allotted space Sample image in place
Spec size dgm10.gif Spec size dgm10samp.gif


Small (12 x 12) canvas icon: The maximum image size is 12 x 12 pixels. The image fills the space as required.

Image size in allotted space Sample image in place
File:Spec size dgm12.gif Spec size dgm12samp.gif


Small (16 x 16) canvas icon: The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size dgm16.gif Spec size dgm16samp.gif


Large (24 x 24) canvas icon: The maximum image size is 24 x 23 pixels, but 23 x 23 is recommended. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size dgm24.gif Spec size dgm24samp.gif


Large (32 x 32) canvas icon: The maximum image size is 32 x 32 pixels, but 30 x 30 is recommended with the image centered. The empty pixels are on all four sides of the image.

Image size in allotted space Sample image in place
Spec size dgm32.gif Spec size dgm32samp.gif


Progress Indicator

The maximum image size is 16 x 15 pixels, but 15 x 15 is recommended. Progress indicator icons must be no greater than 15 pixels high. The empty pixels must be on the left and bottom, as shown here.

Image size in allotted space Sample image in place
Spec size prog.gif Spec size progsamp.gif


Pointer and Cursor Mask

The final size of the pointer and cursor masks is 32 x 32 pixels. The actual image size of the pointer is usually less than 20 x 20 pixels, often 16 x 16 pixels, but can also fill the entire 32 x 32 space. There are no empty pixels in the pointer and cursor mask images. Both are filled completely with black and white, with the mask being the opposite of the pointer or masking it out entirely.

Pointer and cursor mask image sizes shown in the 32 x 32 pixel space:

Image size in allotted space Sample image in place
Spec size point.gif Spec size pointsamp.gif


Wizard Banner Graphics

Wizard Banner

All wizard banner graphics are designed to fit within a specified screen space of 75 x 66 pixels on the right side of the wizard banner.

The actual size of each graphic will vary depending on the elements involved, but will generally be around 67 x 50 pixels in size.

Within the banner space allocation, there is no firm rule for where to place the wizard graphic. Generally, the graphic is centered vertically, and off-center to the left horizontally. Spec size wiz.gif

Spec size wizsamp.gif


User Assistance Graphics


PLEASE NOTE: This subsection is still in progress. Some details are currently not available but will be soon.

Welcome

Welcome icons are 86 x 86 pixels in size. In standby mode and at the top of the welcome content pages, these icons are 52 x 52 pixels in size. Main welcome section icons: Image size in allotted space

Sample image in place Main welcome section icon image size of 72 x 72 pixels shown within the final 86 x 86 pixel space Main welcome section icon image placed in the alotted realestate

Main welcome section icons in standby mode and at top of content pages: Image size in allotted space

Sample image in place Main welcome section icon image size of 48 x 48 pixels shown within the final 52 x 52 pixel space Main welcome section icon image placed in the alotted realestate


Welcome User Roles

Welcome user role icons are 36 x 36 pixels in size. Image size in allotted space

Sample image in place Welcome user role image size of 32 x 32 pixels shown within the final 36 x 36 pixel space Welcome user role image placed in the alotted realestate


Welcome Content

Welcome content page icons are 48 x 48 pixels in size.

Default size and placement:

Image size in allotted space Sample image in place
Spec size wel48.gif File:Spec size wel48samp.gif

Hover size and placement:

Image size in allotted space Sample image in place
Spec size wel52hov.gif Spec size wel52hovsamp.gif


Tutorials and Samples Galleries

The treeview and lower-level content page icons are 16 x 16 (see under Model Object for size and placement of these images). The main content area of the galleries use 48 x 48 pixel icons, as shown here:

Image size in allotted space Sample image in place
Gallery content page image size of 48 x 48 pixels Gallery content page sample image placed in the alotted realestate