Chrome Title
This is a tutorial for making buttons for the popular MouseOver effect. It is much the same as making simple buttons, with the exception of the cutout effect that is applied.

Step #1

  1. Start by opening a New Image size 100x40 16 million colors and a white background.

    New Image

  2. Now from the Paint Palette set the Foreground Color to a dark Red (Red=128, Green=0 Blue=0).
  3. Set the Background Color to a slightly lighter shade of Red (Red=192, Green=0, Blue=0).
  4. Select the Fill Tool from the Tool Bar
  5. Set the Fill Style to Linear Gradient.

    Fill Style

  6. On the Fill Style control go to Options and set the Direction to 90 degrees.

    Optional Direction

  7. Place the Fill Tool inside the Image Box and click the mouse button.
Step #2

  1. Now go to the Menu Bar, Selections, Select All

    Selection,Select all

  2. Your image should now have a dotted line moving around it.

    Image selected

  3. Go back to the Menu Bar select Image, Effects, Cutout.

    CutOut

  4. Make sure that the Fill Interior with Color is not checked. Set the Shadow Color=White, Opacity=100, Blur=2, Offset Vertical=1 Horizontal=1 say OK.

    Cutout settings

  5. Repeat the Cutout Effect only this time change the Shadow Color=Black, Offset Vertical=-1 (negative 1), Horizontal=-1. You should now have an Image that looks like the following.

    Finished Button

  6. Now save the button in a psp format. That way you will be able to open it later and add text to it.
Step #3

  1. To make the second button you need to follow the same procedure as above with a few changes.
  2. Select a New Image at the same size as the first image.
  3. Set the Foreground Color at the same shade of Red as the Background Color used on the first button (Red=192, Green=0, Blue=0).
  4. Now we need a lighter Red for this Background Color. Set it as follows, Red=255, Green=64, Blue=64.
  5. Select the Fill Tool as before and using the same settings fill the new image.
  6. From the Menu Bar select Selections, Select All.
  7. Now you need to apply the CutOut Effect. The difference here is that you will need to reverse the effect. That is the Shadow Color=Black Offset Vertical=1 Horizontal=1, whereas on the first button the black was done in a negative. and the White was Positive now it will be in a Negative setting.
  8. Again save this finished button in the psp format for latter use.
Step #4

  1. Now for the final step. Adding Text.
  2. Open the first button you made.

    Finished Button

  3. Select a Foreground Color from The Paint Palette that you want your text in.
  4. Select the Text Tool. Now this is critical, Make sure you place the cursor in the exact middle of the button. It should be at 50,20 (look in the lower corner of the screen). Click the mouse and type in the text you want.
  5. Deselect the text and from the Menu Bar select File, Save As (be sure that you use the Save As command or you will loss the original button). If the a New Name and save it in a JPG or GIF format.

    Text applied

  6. Now open the second button you created, and repeat the text step on this button using a lighter color for the text. When you set the cursor to apply the text make sure you set it at the exact same point as the first button. If you don't get it exact you will see the difference when you run your mouse over it.
  7. Again use the Save As command as you did with the first button.

    Finished button 2

This tutorial shows you how to make buttons for the mouseover feature. You can do the same with lettering, bullets and many others ideas you might have. The key is to have two identical items with contrasting colors. How much contrast is up to you. Now go and have fun.