Banner Ads are the current rage for advertising web pages. Therefore, you need will need a banner ad that is attractive and will stand out from the crowds. Creating a "mouseover" banner is one way to stand out from the crowd. I created the above banner ad using Paint Shop Pro and Blade Pro for the beveling. The sphere was created completely in Paint Shop Pro. This tutorial is quite advanced so please don't attempt it if you have not completed all my basics tutorials. To create a similar banner:

Create Template

  1. Open a new white graphic 620 x 120.
  2. Set your grid (File|Preferences|General Program Preferences|Rulers & Units) to:
    Units: Pixels Horizontal: 20 Vertical: 20 Color: Red
  3. Set Grid on (View|Grid)
  4. With the selection tool (antialias not checked) draw a rectangle from 20,20 to 580,80.
  5. Flood fill with black.
  6. Add a new layer.
  7. From the left margin to the right margin, make a 10 pixel high selection.
  8. Flood fill with white. Use the mover tool to move the selection to a spot directly over the grid line at 60,0 (the middle). Or, hold down the shift key and press the down or up arrow to move your selection one pixel at a time.
  9. Add another new layer.
  10. From top to bottom margin, make a 10 pixel wide selection. Flood fill with white and move to directly over the gridline at 80,0 (on top margin).
  11. Add another new layer.
  12. Set the selection tool to Circle with Antialias checked.
  13. Place the cursor at 80,60.
  14. Draw a circle 60,60. Save to Alpha Channel.
  15. Flood fill with white.
  16. Add another new layer.
  17. Starting at 80,60 again, draw a circle 50,50. Save to Alpha Channel.
  18. Flood fill with black.
  19. Merge all layers (flatten).

Beveling

You now have your template. To create the Beveled part of the banner:

  1. Shift-Click on all the banner parts with the Magic Wand Tool (all black parts except circle).
  2. Save your selection to an Alpha Channel and deselect.
  3. Add a new layer and flood fill with white.
  4. Add a new layer and load your selection from the Alpha Channel.
  5. Flood fill with your banner color and bevel (I used Blade Pro).
  6. If the round inner edges of your bevel look kind of rough (mine did), load your large circle selection, expand by 1 and hit delete.

Creating the Sphere

Now comes the fun part, creating the sphere. To create the sphere:

  1. Set your background color to a very dark version of the color you want your sphere graphic to be and the foreground color to a very light version.
  2. Add a new layer and name it "Color".
  3. Load your 50,50 inner circle selection.
  4. Flood fill with the light color. Don't worry too much about the color at this point since you will be able to change it later. Don't deselect.
  5. Add a new layer and apply the Cutout filter:
    Shadow Color: Background Color
    Opacity: 100%
    Blur: 20
    Vertical: 10
    Horizontal: 10
  6. Add a new layer and apply the cutout filter again:
    Shadow Color: Background Color
    Opacity: 100%
    Blur: 6
    Vertical: -1
    Horizontal: -1
  7. Add a new layer.
  8. Set selection tool to Ellipse with feather set to 3 and Antialias checked.
  9. Anywhere on the ball, create a selection 6,10.
  10. Flood fill with white. Deselect.
  11. Choose Image|Rotate, Right, Free, 40, All Layers Unchecked.
  12. With the mover tool, move the shiny spot to where it looks good.
  13. Adjust the opacity on the first Cutout layer (the dark in the upper left of the sphere) until it looks right to you. I brought my opacity down to 80.
  14. To change the color of the sphere just load the 50x50 selection on the color layer and flood fill with a new color.
  15. To create the mouseover image:
    • Find an image you think would look good in the sphere.
    • Reduce it's size to where a 50x50 selection looks good.
    • Make a 50x50 circular selection on the image and copy.
    • Add a new layer to your banner graphic above the "Color" layer. Turn off the color layer.
    • Paste the image you want to use on the new layer "as a new selection".
    • Move with the mover tool or by holding down the Shift key and pressing the arrow keys, until it is directly under the sphere.
  16. Save your graphic as a PSP file. That way you have your template, selections and sphere to re-use at a later time.

Mouseover

Now, to create the mouseover effect, duplicate your image, crop, save once with the colored sphere activated and again with the image in the sphere layer activated.

Please see my links page for a great shareware program that will write your mouseover code for you, visit Lone Wolf's page.