Cropping the Buttons

Cropping the Buttons

Next we have to select and crop out each of our buttons. (Please note again that this is only one way to make links or buttons for web pages. We are making “roll-over buttons that require a little bit more work. There is nothing wrong with using plain HTML text to make links in Dreamweaver.) So, using the marquee tool, line up with the 100 pixel guide to the left of the graphic just on the outside of the button and select and crop as below:Once again we are going to use the File and Save for Web function. Select one of the four images and hit save. Since we are making roll-over images we need to save two versions of each button. This is where good naming conventions are very important. I would call this button something like “resume.red.gif” to make sure I can tell the two apart.


Rather than jumping to use the undo or history palette, create your other version of the resume button now. Since you can still make changes via the layer palette, double-click the “T” (text) for the buttons and you will be able to change the color of the word resume to black or another roll over color. Once you do this, repeat the Save for Web process and name this button “resume.black.gif” Now you can use the History palette to revert.