Set the foreground color on the color palette to R=20 G=113 B=114
Set the background color to white.

Using the floodfill tool set to solid color, match mode = none, Opacity and Tolerance set to 100, fill your image with the foreground color.

Ctrl+Alt+G to view the grid.

Choose the selection tool and set as follows:

Circle
Feather = 0
Antialias checked

Place the your cursor at the upper left hand corner of the image (0,0) and drag out and down 5 grids and release the mouse.

Now hit the delete key on your keyboard.

Next we will add a new layer by holding the shift key and click on the new layer button at the bottom left corner of the layer palette.

With Layer 1 Active, choose the selection tool leaving the settings as they are. Position the tool at the coordinates (226,76) and draw a circle up and out 2 grids (176,76). DO NOT deselect.

Go to Image || Effects || Cutout and set as follows:

Check fill with interior color
Interior color = background color
Shadow color = black
Opacity = 95
Blur = 10
Vertical and Horizontal = 9

Click ok

Ctrl+C to copy the selection.

Ctrl+E to paste a new selection and without pressing any mouse button, move the selection to the coordinates (24,174)

Ctrl+E to repeat the paste and place each at the following coordinates:

(176,326)
(326,176)
(176,176)

Ctrl+D to deselect the the selection. Go to View on the menu bar and uncheck the grid.

We want to work on a new layer, so holding the shift key, click on the new layer button on the layer palette.

Select the tube tool, choose the "colored spheres" tube and set the scale to 75%.

Place your cursor in the center of one of the circles and left click to add a sphere. NOTE: Don't worry if the circle isn't completely covered, we will take care of this later. Just try to center the sphere in the circle. If you don't like the color of the sphere you get or the placement... Ctrl+Z to delete and start over again.

We can now activate layer1 on the layer palette, right click and delete this layer. You will now have just the spheres for your second image.

Select the text tool and click in the center of one of the spheres. Set the text tool to Herald font, bold, 18pt. Enter your text and click OK. NOTE: I selected this font and size to fit the sphere. You can select any font and size you wish that will fit within the sphere.

Go to Image || Effects || Drop Shadow and use these settings:
Shadow color = Black
Opacity = 100
Blur = 1.5
Vertical and Horizontal = -2

We now have our two images and are ready to cut them up using Picture Dicer... :o).

Open Picture Dicer

Once you have it open, you will see the menu bar at the top of the Picture Dicer window...

Click on File
Click on Open Image
Browse to the file named offimage.gif and select

If you made a separate folder for your image as suggested above, you can use the default and the graphics will be saved there. If not you can choose a new folder and save the images to it. It is important to remember where you save your images.

When Picture Dicer saves the images, it will save them as such:

offi000.gif
offi001.gif
offi002.gif

and so forth until it has saved and named each piece of the graphic it dices. This will make more sense once we do a graphic! For now, just click OK on this window.

Now the image is open in the Picture Dicer Window. We will be placing a grid on the image using both horizontal and vertical lines to make the grid. Picture Dicer will then dice each box in the grid, and save it as a separate graphic.

To place a vertical line on the graphic... Move your mouse over top of the graphic and between the left circle and the middle three circles. until the cursor turns in to a crosshair. Use your judgment to place it equally between the circles. Holding down the left mouse button, drag with your mouse to the point where you want the line and then release the mouse button to place the line.

If you wish to remove a line, move the mouse over the little triangle at the edge and the icon will change to a . Click on this triangle and the line will be gone so you can try again. This shows you how to remove an individual line.

Now we want to place another vertical line between the middle circles and the circle on the right. Again, use your visual judgement to place the line in the middle.

We now want to place the horizontal lines on the image. To do this, move your mouse over the image between the top circle and the middle three circles. until you get the crosshair and hold down the RIGHT mouse button, drag to where you want the line to appear and release to place a horizontal line.

Repeat this step placing a horizontal line between the middle three circles and the bottom circle, again centering the line between the circles.

We will now process the image. Click on File, then Click on Process Image.

Now, open onimage.gif in Picture Dicer. Click on File || Load Grid. Select offi.grd and click OK.

You should now have the same grid you made of the offimage.

All we need to do now is click on File || Process Image and Picture Dicer will save the images in exactly the same sizes as the offimage. The new images will be named onim000.gif through onim008.gif and the new html file will be named onim.htm.

You now have all the images you need to place the mouseover image on your webpage. To do this, you will need to know javascript or you can use The Mighty Mouseover Machine which is a great program that will do the code for you!

If you want to use a template html file to use with the image we just created, you can download it here. Just remember when you use the template, you may have to change the image sizes to the sizes of your images which you can find in offi.htm and onim.htm.

Have fun creating!