Return to the main '''[[UI_Best_Practices_v3.x#UI_Graphics|UI Graphics]]''' section on the UI Best Practices page.

+

Return to the main '''[[User Interface Guidelines#UI Graphics (3.x Updates)|UI Graphics (3.x Updates)]]''' section on the UI Best Practices page.

−

== Cutting Actions for Icons and Wizard Graphics ==

+

==Cutting Actions for Icons and Wizard Graphics==

−

+

−

This section describes the macros for cutting icons, icon overlays, and wizard banner graphics to get them

+

−

ready for implementation.

+

+

This section describes the macros for cutting icons, icon overlays, and wizard banner graphics to get them ready for implementation.

+

+

In the process described here for creating icons, we use the term 'cut' to mean the action of generating the individual .gif

In the process described here for creating icons, we use the term 'cut' to mean the action of generating the individual .gif

−

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)

+

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.

−

To increase the speed and efficiency of cutting

+

−

hundreds of icons at a time, a series of cutting actions has been created that,

+

−

when run in Adobe Photoshop, will automatically guide you through the cutting

+

−

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.

+

−

To use these actions, click here to download the <a href="../ref/att/eclipse_cutting_R3V6.zip">"eclipse_cutting_R3V6.atn"</a> file, and then load it into the Actions Palette.

+

+

To increase the speed and efficiency of cutting hundreds of icons at a time, a series of cutting actions has been created that,

+

when run in Adobe Photoshop, will automatically guide you through the cutting 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.

+

+

+

To use these actions, click here to download the [[media:eclipse_cutting_R3V6.zip|eclipse_cutting_R3V6.atn]] file, and then load it into the Actions Palette.

−

=== Cutting 16 x 16 Pixel Icons ===

+

===Cutting 16 x 16 Pixel Icons===

−

#Make sure that the pink cut layer is turned on, in the psd file.

+

# Make sure that the pink cut layer is turned on, in the psd file.

−

#Play the Dupe and Flatten_main file action to create a new, flat file. (See A in the Detailed View of Cutting Actions below)

+

# Play the Dupe and Flatten_main file action to create a new, flat file. (See A in the Detailed View of Cutting Actions below)

−

#Using the Marquee tool at a fixed size of 16 x 16 pixels, select the first icon to be cut.

+

# Using the Marquee tool at a fixed size of 16 x 16 pixels, select the first icon to be cut.

−

#Play the eclipse icon cuts_16s action. The action will then automatically move through the cutting process. (See B-F below

+

# Play the eclipse icon cuts_16s action. The action will then automatically move through the cutting process. (See B-F below)

−

#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)

+

# 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)

−

#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)

+

# 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)

−

: To ensure the last step works properly, make sure

+

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

−

the pink cut square for each icon is spaced exactly as specified in the

+

−

icon_design_template.psd.

+

+

: '''Detailed View of Cutting Actions'''

−

:'''Detailed View of Cutting Actions'''

: [[Image:imp_cut_icons.gif]]

: [[Image:imp_cut_icons.gif]]

−

+

===Cutting 7 x 8 Pixel Object Overlay Icons===

−

+

−

=== Cutting 7 x 8 Pixel Object Overlay Icons ===

+

Follow the steps as laid out above, except cut the icon at 7 x 8 pixels, using the Eclipse icon cuts_overlays action.

Follow the steps as laid out above, except cut the icon at 7 x 8 pixels, using the Eclipse icon cuts_overlays action.

−

===Cutting Wizard graphics ===

+

===Cutting Wizard graphics===

−

+

−

+

−

#Ensure that the wizard psd has a path called "wizard cut path" under tab.

+

−

#Play the Dupe and Flatten_main file action to create a new, flat file.

+

−

#Ensure that the layer called "soft curves" is visible.

+

−

#Ensure that each wizard graphic is in a layer set.

+

−

#Select the top layer set where you want to being cutting and ensure all other layer sets are not visible.

+

−

#Play the Wizard Dupe and crop action to create a new file that is cropped to 75 x 66 pixels. (See A-C below)

+

−

#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)

+

−

#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)

+

−

#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)

+

+

# Ensure that the wizard psd has a path called "wizard cut path" under '''Paths''' tab.

+

# Play the Dupe and Flatten_main file action to create a new, flat file.

+

# Ensure that the layer called "soft curves" is visible.

+

# Ensure that each wizard graphic is in a layer set.

+

# Select the top layer set where you want to being cutting and ensure all other layer sets are not visible.

+

# Play the Wizard Dupe and crop action to create a new file that is cropped to 75 x 66 pixels. (See A-C below)

+

# 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)

+

# 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)

+

# 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)

−

: To ensure the last step works properly, make each wizard graphic is contained in a layer set folder.

+

: To ensure the last step works properly, make sure each wizard graphic is contained in a layer set folder.

Contents

Cutting Actions for Icons and Wizard Graphics

This section describes the macros for cutting icons, icon overlays, and wizard banner graphics to get them ready for implementation.

In the process described here for creating icons, we use the term 'cut' to mean the action of generating the individual .gif
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.

To increase the speed and efficiency of cutting hundreds of icons at a time, a series of cutting actions has been created that,
when run in Adobe Photoshop, will automatically guide you through the cutting 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.

To use these actions, click here to download the eclipse_cutting_R3V6.atn file, and then load it into the Actions Palette.

Cutting 16 x 16 Pixel Icons

Make sure that the pink cut layer is turned on, in the psd file.

Play the Dupe and Flatten_main file action to create a new, flat file. (See A in the Detailed View of Cutting Actions below)

Using the Marquee tool at a fixed size of 16 x 16 pixels, select the first icon to be cut.

Play the eclipse icon cuts_16s action. The action will then automatically move through the cutting process. (See B-F below)

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)

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)

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.

Detailed View of Cutting Actions

Cutting 7 x 8 Pixel Object Overlay Icons

Follow the steps as laid out above, except cut the icon at 7 x 8 pixels, using the Eclipse icon cuts_overlays action.

Cutting Wizard graphics

Ensure that the wizard psd has a path called "wizard cut path" under Paths tab.

Play the Dupe and Flatten_main file action to create a new, flat file.

Ensure that the layer called "soft curves" is visible.

Ensure that each wizard graphic is in a layer set.

Select the top layer set where you want to being cutting and ensure all other layer sets are not visible.

Play the Wizard Dupe and crop action to create a new file that is cropped to 75 x 66 pixels. (See A-C below)

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)

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)

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)

To ensure the last step works properly, make sure each wizard graphic is contained in a layer set folder.