Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "UIGraphicsImplementationCutting Actions"

(→‎Cutting Actions for Icons and Wizard Graphics)
Line 2: Line 2:
  
  
−
== Cutting Actions for Icons and Wizard Graphics ==  
+
==Naming Conventions==
 
 
−
This section describes the macros for cutting icons, icon overlays, and wizard banner graphics to get them
+
The following section describes the Eclipse standard for file naming and guidelines for using suffixes that will help others
−
ready for implementation.
+
quickly identify the graphic type or function.
 +
 
 +
We recommend that you work with your development contact to establish file names for each graphic before you begin
 +
design work, using the following guidelines:
 +
 +
===Abbreviations===
 +
The file name should be an abbreviation of the full icon name, for example, the name for the Create DTD Wizard icon
 +
might be abbreviated to "CrtDTD".
 +
 +
===Case===
 +
All file names must be in lower case, for example, CrtDTD becomes “crtdtd”.
 
 
−
In the process described here for creating icons, we use the term 'cut' to mean the action of generating the individual .gif
+
===Character length===
−
files for each icon. This term refers to the fact that the icons are created in a single original .psd file that contains all the icons for a given product (the icon_template.psd file), and then the individual icons are 'cut' out of the file into individual files.layers palette. (See D below)
+
File names should be 10 characters or less whenever possible. Underscores count as a character.
−
To increase the speed and efficiency of cutting
+
−
hundreds of icons at a time, a series of cutting actions has been created that,
+
===Suffixes===
−
when run in Adobe Photoshop, will automatically guide you through the cutting
+
The file name should end with a suffix that describes its location or function in the user interface, for example, "crtdtd_wiz.gif". See the table below for suffix suggestions.
−
process for each icon in a matter of seconds. All you need to do is start the
+
−
action and when prompted, name and save each icon into its proper folder.
+
===Graphic format extension===
 +
Since all images are transparent GIFs, unless otherwise stated in the
 +
[http://mds.torolab.ibm.com/rational/guidelines/uigraphics/specifications/formats.html Graphic Formats] page, they have to be saved in GIF format for cross platform compliance and will have *.gif file extension in the name.
 +
 +
===Multiple sizes===
 +
Icons that have multiple sizes within one folder, such as multiple palette icon sizes,
 +
are differentiated by adding the icon size to the suffix. For example, file_pal.gif, file_pal24.gif, file_pal32.gif, where *_pal
 +
represents the default 16 x 16 pixel size and the *_pal24 and *_pal32 represent larger sizes of the same icon.
 +
</p>
 +
 +
 +
 +
<p><strong>Suggestions for File Naming Suffixes</strong></p>
 +
<table cellspacing="2" cellpadding="2" border="0">
 +
<tr bgcolor="#c0c0c0">
  
 +
    <td><strong>Filename Suffix</strong></td>
 +
<td><strong>Use</strong></td>
 +
    <td><strong>Icon Type and Location</strong></td>
 +
</tr>
 +
<tr valign="top" bgcolor="#e4e4e4">
 +
    <td>*_wiz</td>
 +
<td>Represents a wizard graphic or an icon that invokes a wizard</td>
  
−
To use these actions, click here to download the [[Media:eclipse_cutting_R3V6.zip | eclipse_cutting_R3V6.zip]], and then load it into the Actions Palette.
+
    <td>
−
+
<ul>
−
=== Cutting 16 x 16 Pixel Icons ===
+
<li>Wizard banner graphics used in wizard dialog windows</li>
 +
<li>Wizard icons used on wizard toolbars</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top">
 +
 
 +
    <td>*_exec</td>
 +
<td>Invokes an executable file</td>
 +
    <td>
 +
<ul>
 +
<li>Toolbar icons used in cascading menus, and global toolbars
 +
</ul>
 +
</td>
 +
</tr>
 +
 
 +
<tr valign="top" bgcolor="#e4e4e4">
 +
    <td>*_edit</td>
 +
<td>Represents an icon located in an editor</td>
 +
    <td>
 +
<ul>
 +
<li>Toolbar icons used in cascading menus, and global toolbars</li>
 +
</ul>
 +
 
 +
</td>
 +
</tr>
 +
<tr valign="top">
 +
    <td>*_nav</td>
 +
<td>Represents an icon located in a navigator view</td>
 +
    <td>
 +
<ul>
 +
<li>Toolbar icons used in cascading menus, and global toolbars</li>
 +
 
 +
<li>Local toolbar icons found on the far right of the title area of a view</li>
 +
<li>View and perspective icons found in the top, left corner of a view</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top" bgcolor="#e4e4e4">
 +
    <td>*_misc</td>
  
−
#Make sure that the pink cut layer is turned on, in the psd file.
+
<td>Represents an icon that does not fit into any of the other categories</td>
−
#Play the Dupe and Flatten_main file action to create a new, flat file. (See A in the Detailed View of Cutting Actions below)
+
    <td>
−
#Using the Marquee tool at a fixed size of 16 x 16 pixels, select the first icon to be cut.
+
<ul>
−
#Play the eclipse icon cuts_16s action. The action will then automatically move through the cutting process. (See B-F below)
+
<li>Toolbar icons used in cascading menus, and global toolbars.</li>
−
#When prompted, provide a name for the icon in lower case and click Save to save it as a Compuserve .gif in the folder you      specify. (See G)
+
<li>View and perspective icons found in the top, left corner of a view.</li>
−
#When you click OK to finish saving the image as either a Normal or Interlaced .gif file, the action then automatically moves the marquee selection down to the next icon and begins the process all over again. (See H)
+
</ul>
 +
</td>
  
 +
</tr>
 +
<tr valign="top">
 +
    <td>*_tsk</td>
 +
<td>Represents tasks that a user can do</td>
 +
    <td>
 +
<ul>
 +
<li>Local toolbar icons found on the far right of the title area of a view</li>
  
−
: To ensure the last step works properly, make sure the pink cut square for each icon is spaced exactly as specified in the icon_design_template.psd.
+
<li>Overlay icons placed on top of a model object icon to indicate a change in condition</li>
 +
<li>Model object icons used in the tree view, list view, and properties view</li>
 +
<li>View and perspective icons found in the top, left corner of a view</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top" bgcolor="#e4e4e4">
  
−
:'''Detailed View of Cutting Actions'''
+
    <td>*_mode</td>
−
: [[Image:imp_cut_icons.gif]]
+
<td>Toggles the working mode of the view</td>
 +
    <td>
 +
<ul>
 +
<li>Local toolbar icons found on the far right of the title area of a view</li>
 +
</ul>
 +
</td>
  
−
=== Cutting 7 x 8 Pixel Object Overlay Icons ===
+
</tr>
 +
<tr valign="top">
 +
    <td>*_menu</td>
 +
<td>Represents an icon located in a menu</td>
 +
    <td>
 +
<ul>
 +
<li>Local toolbar icons found on the far right of the title area of a view</li>
  
−
:Follow the steps as laid out above, except cut the icon at 7 x 8 pixels, using the Eclipse icon cuts_overlays action.
+
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top" bgcolor="#e4e4e4">
 +
    <td>*_ps</td>
 +
<td>Represents an icon located in a property sheet</td>
 +
    <td>
 +
<ul>
  
−
===Cutting Wizard graphics ===
+
<li>Local toolbar icons found on the far right of the title area of a view</li>
 +
<li>View and perspective icons: found in the top, left corner of a view</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top">
 +
    <td>*_obj</td>
  
−
#Ensure that the wizard psd has a path called "wizard cut path" under tab.
+
<td>Represents a model object</td>
−
#Play the Dupe and Flatten_main file action to create a new, flat file.
+
    <td>
−
#Ensure that the layer called "soft curves" is visible.
+
<ul>
−
#Ensure that each wizard graphic is in a layer set.
+
<li>Model object icons used in the tree view, list view, and properties view</li>
−
#Select the top layer set where you want to being cutting and ensure all other layer sets are not visible.
+
</ul>
−
#Play the Wizard Dupe and crop action to create a new file that is cropped to 75 x 66 pixels. (See A-C below)
+
</td>
−
#Play the Wizard cut action. The action will then automatically move through the cutting process from top to bottom in the layers palette. (See D below)
+
</tr>
−
#When prompted, provide a name for the icon in lower case and click Save to save it as a Compuserve .gif in the folder you specify. (See E)
+
<tr valign="top" bgcolor="#e4e4e4">
−
#When you click OK to finish saving the image as either a Normal or Interlaced .gif file, the action then automatically delete the current layer set, and moves to the next one and begins the process all over again. (See F)
+
  
 +
    <td>*_pal</td>
 +
<td>Represents a model object on an object palette</td>
 +
    <td>
 +
<ul>
 +
<li>Model object icons used in the tree view, list view, and properties view</li>
 +
</ul>
 +
</td>
  
−
: To ensure the last step works properly, make each wizard graphic is contained in a layer set folder.
+
</tr>
 +
<tr valign="top">
 +
    <td>*_co</td>
 +
<td>Represents a command that engages the system, such as build command</td>
 +
    <td>
 +
<ul>
 +
<li>Toolbar icons used in cascading menus, and global toolbars</li>
  
−
:'''Detailed View of Cutting Actions'''
+
<li>Local toolbar icons found on the far right of the title area of a view</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<tr valign="top" bgcolor="#e4e4e4">
 +
    <td>*_tbl</td>
 +
<td>Represents an icon located in a table</td>
  
−
: [[Image:imp_cut_wizards.gif]]
+
    <td>
 +
<ul>
 +
<li>Model object icons used in a table or properties view</li>
 +
</ul>
 +
</td>
 +
</tr>
 +
<!-- use the following table row if the last row of data has a white background. It provides
 +
a line to define the table information from the rest of the text.  If the last row of data has
 +
the dark gray background, you don't need it, so comment it out.
 +
<tr height="1" valign="top" bgcolor="#e4e4e4"> -->
 +
</table>

Revision as of 15:24, 17 July 2007

Return to the main UI Graphics section on the UI Best Practices page.


Naming Conventions

The following section describes the Eclipse standard for file naming and guidelines for using suffixes that will help others quickly identify the graphic type or function.

We recommend that you work with your development contact to establish file names for each graphic before you begin design work, using the following guidelines:

Abbreviations

The file name should be an abbreviation of the full icon name, for example, the name for the Create DTD Wizard icon might be abbreviated to "CrtDTD".

Case

All file names must be in lower case, for example, CrtDTD becomes “crtdtd”.

Character length

File names should be 10 characters or less whenever possible. Underscores count as a character.

Suffixes

The file name should end with a suffix that describes its location or function in the user interface, for example, "crtdtd_wiz.gif". See the table below for suffix suggestions.

Graphic format extension

Since all images are transparent GIFs, unless otherwise stated in the Graphic Formats page, they have to be saved in GIF format for cross platform compliance and will have *.gif file extension in the name.

Multiple sizes

Icons that have multiple sizes within one folder, such as multiple palette icon sizes, are differentiated by adding the icon size to the suffix. For example, file_pal.gif, file_pal24.gif, file_pal32.gif, where *_pal represents the default 16 x 16 pixel size and the *_pal24 and *_pal32 represent larger sizes of the same icon. </p>


Suggestions for File Naming Suffixes

Filename Suffix Use Icon Type and Location
*_wiz Represents a wizard graphic or an icon that invokes a wizard
  • Wizard banner graphics used in wizard dialog windows
  • Wizard icons used on wizard toolbars
*_exec Invokes an executable file
  • Toolbar icons used in cascading menus, and global toolbars
*_edit Represents an icon located in an editor
  • Toolbar icons used in cascading menus, and global toolbars
*_nav Represents an icon located in a navigator view
  • Toolbar icons used in cascading menus, and global toolbars
  • Local toolbar icons found on the far right of the title area of a view
  • View and perspective icons found in the top, left corner of a view
*_misc Represents an icon that does not fit into any of the other categories
  • Toolbar icons used in cascading menus, and global toolbars.
  • View and perspective icons found in the top, left corner of a view.
*_tsk Represents tasks that a user can do
  • Local toolbar icons found on the far right of the title area of a view
  • Overlay icons placed on top of a model object icon to indicate a change in condition
  • Model object icons used in the tree view, list view, and properties view
  • View and perspective icons found in the top, left corner of a view
*_mode Toggles the working mode of the view
  • Local toolbar icons found on the far right of the title area of a view
*_menu Represents an icon located in a menu
  • Local toolbar icons found on the far right of the title area of a view
*_ps Represents an icon located in a property sheet
  • Local toolbar icons found on the far right of the title area of a view
  • View and perspective icons: found in the top, left corner of a view
*_obj Represents a model object
  • Model object icons used in the tree view, list view, and properties view
*_pal Represents a model object on an object palette
  • Model object icons used in the tree view, list view, and properties view
*_co Represents a command that engages the system, such as build command
  • Toolbar icons used in cascading menus, and global toolbars
  • Local toolbar icons found on the far right of the title area of a view
*_tbl Represents an icon located in a table
  • Model object icons used in a table or properties view
Retrieved from "https://wiki.eclipse.org/index.php?title=UIGraphicsImplementationCutting_Actions&oldid=43033"

Copyright © Eclipse Foundation, Inc. All Rights Reserved.