Editing Making Rollover Image States in Photoshop (section)

== Workflow ==

=== Create a navigation menu with multiple buttons ===

* Each button should be on its own layer.
* Once the menu has been created, select all of the buttons layers.
* Then apply "layer-based slicing".
* '''Layer''' > '''New Layer Based Slices'''
* Do whatever is necessary to design the buttons for their "normal" inactive state.

=== Preserve the inactive state of the buttons in a layer comp ===

* '''Window''' > '''Layer Comps''' to open the '''Layer Comps''' window.
* Click '''Create New Layer Comp''' button in the bottom right of the '''Layer Comps''' window.<br />[[File:Photoshop-cs6-layer-comps.png]]
* Set the properties for the layer comp in the dialog.<br />[[File:Photoshop-cs6-layer-comp-options.png]]
** Name the comp, e.g. "Inactive"
** Choose which properties the layer comp will track. 
** Click '''OK'''.

=== Create rollover state for the buttons ===

* Change the appearance of the buttons using Layer Styles.
** If the new style changes the bounds of the different objects in the layers, the layer-based slices will adjust to accommodate the changes.
* Create a new Layer Comp to preserve the rollover state appearance.
* '''Layer Comps''' panel > '''New Layer Comp''' icon
* Set the rollover state properties in the Layer Comp dialog.
* Click '''OK''' and now there are two states for the buttons.

=== Cycling through the different rollover states ===

* To cycle through the different rollover states click the right and left arrow icons at the bottom of the '''Layer Comp''' panel.<br />[[File:Ps-cs6-layer-comps-cycle.png]]

=== Editing the buttons after layer comps have been created ===

* Click the appropriate Layer Comp in the '''Layer Comps''' panel. This will load that set of button states.
* Edit the buttons. 
* '''Layer Comp''' panel > '''Update''' icon to update the Layer Comp with the changes.<br />[[File:Ps-cs6-layer-comps-update.png]]