Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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
|
|
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.)