The content of a button is made up of multiple “layers.” To add a layer, click one of the inactive layers in the “Editing context” menu. This will turn the layer on and by default set it to be a text layer. Below, in “Layer display“, you can change it to be an image layer, or turn it back off.
Like the “Button general” context, editing a text layer also gives you two customization sub-groups: “general options” and “text-shadow”.
“General options” gives you most of the customization options you need. First, and most importantly, set the text itself for the text layer. Once you have your desired text, you can modify it’s appearance, and then set it’s position within the button.
You can also choose to rotate your text within the button, provided you are aware that a small percentage of your viewers using the oldest versions of Internet Explorer will see the text unrotated.
By selecting the “text-shadow” customization sub group, you can also enable and apply text-shadow to your text layer, optionally modifying it for the hover state as well.
To enable an image layer, select “image” as your layer display type. Once you’ve selected for a layer to be an image, you’ll see a button allowing you to set the image. This button brings up the same upload screen you use in other ProPhoto image customization areas. Upload a new image to your server, or select to choose from existing and already uploaded images.
Once you’ve selected your image, you’ll see it previewed in the customization area and in the preview area along with some additional customization options.
The image label is sort of like the “Button title.” It doesn’t affect the final display of your button at all, but rather is meant to help differentiate the layers when editing a Button.
Use the position controls to move the chosen image around within the Button. If, while moving your image around you see that it is on top of a text layer, but you want it underneath, simply select the “Layer order” context and change the layer order. If you have multiple image layers, the “labels” you give to the images can really come in handy when re-ordering. Text layers titles consist of their actual text, to help you remember which layer is which.
The last customization option for the image layer allows you to create image layer hover effects. If you want your image layer to look the same for both states, regular and hovered, then leave this option in it’s default state (“entire image for both states“). If, however, you want your image layer to have a modified rollover state, see the tutorial below for instructions on setting up your image correctly.