From the author of

From the author of

8 Creating the final buttons file. At this point it's a good idea to
save your fully layered file with Layer Effects "live" (File, Save) in case
you decide to make changes later. Though most of this next step could be done
in ImageReady, for the sake of simplifying the rest of the project, you can
also make a duplicate file with finished merged button panels in all three states.
This also helps in visualizing how the buttons will operate.

Making a merged duplicate file of the rest state of the buttons

Making a merged copy of the rollover state of the buttons

Changing the Distance for the mouse-down state's drop
shadow more nearly centers the shadows under the buttons The duplicate file with a layer for each of the three
button states

Making a merged copy of the rollover state of the buttons

Changing the Distance for the mouse-down state's drop
shadow more nearly centers the shadows under the buttons The duplicate file with a layer for each of the three
button states

Start by turning on visibility for all the layers you need to make the buttons
in the rest state. For our file this would be the Highlights, Texture, Icons/Rest,
Buttons, and Background layers. Choose Image, Duplicate and click the
Merged Layers Only checkbox, so that the new file will have a single layer that
is a composite of all the visible layers in the source file.

To add a layer with the buttons in the rollover state,
first turn on visibility for the appropriate layers in the fully layered source
file. For our file this meant turning off visibility for the Icons/Rest layer
and turning on the Icons/Over layer instead. Then make a merged copy and paste
it into the duplicate file as follows: Select all (Ctrl/-A),
and copy by choosing Edit, Copy Merged or pressing Shift-Ctrl/-C.
In the duplicate file you just started, paste the merged copy into the file (Ctrl/-V)
to make a separate layer.

To add a layer with the buttons in the mouse-down state,
go back to the fully layered source file again, turn off the Icons/Over layer,
and turn on the Icons/Down layer. This time, though, before you make a merged
copy, change the position of the drop shadows to make it look like the shadow
is moving as its button is pressed down, as follows: Click the "f" icon on the
buttons layer and reduce the offset of the Drop Shadow by changing the Distance
setting. We changed the setting from the original 12 pixels used in step 2 to
6 pixels. The result was to pull the button shadows closer underneath the buttons.
Now make another merged copy and paste it into the simplified file. (After you've
made this layer for the mouse-down state, you may want to go back into the Effects
dialog for the buttons layer in the fully layered file and reset the Distance
to its original setting. That way it will be set up in its "finished" state if
you need to use the file again later.)

Start by turning on visibility for all the layers you need to make the buttons
in the rest state. For our file this would be the Highlights, Texture, Icons/Rest,
Buttons, and Background layers. Choose Image, Duplicate and click the
Merged Layers Only checkbox, so that the new file will have a single layer that
is a composite of all the visible layers in the source file.

To add a layer with the buttons in the rollover state,
first turn on visibility for the appropriate layers in the fully layered source
file. For our file this meant turning off visibility for the Icons/Rest layer
and turning on the Icons/Over layer instead. Then make a merged copy and paste
it into the duplicate file as follows: Select all (Ctrl/-A),
and copy by choosing Edit, Copy Merged or pressing Shift-Ctrl/-C.
In the duplicate file you just started, paste the merged copy into the file (Ctrl/-V)
to make a separate layer.

To add a layer with the buttons in the mouse-down state,
go back to the fully layered source file again, turn off the Icons/Over layer,
and turn on the Icons/Down layer. This time, though, before you make a merged
copy, change the position of the drop shadows to make it look like the shadow
is moving as its button is pressed down, as follows: Click the "f" icon on the
buttons layer and reduce the offset of the Drop Shadow by changing the Distance
setting. We changed the setting from the original 12 pixels used in step 2 to
6 pixels. The result was to pull the button shadows closer underneath the buttons.
Now make another merged copy and paste it into the simplified file. (After you've
made this layer for the mouse-down state, you may want to go back into the Effects
dialog for the buttons layer in the fully layered file and reset the Distance
to its original setting. That way it will be set up in its "finished" state if
you need to use the file again later.)