Okay, I’ll admit it to the world, I’m lazy. I’m REAL lazy. But in a good way. I’ll spend hours coming up with a way to shave off 5 minutes of weekly maintenance time. I’ll develop techniques which become patterns for me to follow so I don’t have to “rediscover” methods each time I do things. I like to whiddle things down to a few repetitve steps so that I can remember them. Hence, the 5 minute mouseover button. Initially, this tutorial should take approximately 10-15 minutes. But once you do this tutorial a few times, you’ll see that mouseover menus can be painless, efficient and take less than 5 mintues. Ready? Here’s what you’ll need:
PaintShop Pro
Super BladePro (free trial)
The WK1 Menus Sampler font (free)
***A basic knowledge of PaintShopPro is assumed. Make sure both the font and bladepro presets are installed before starting.***
1. Fire up PaintShopPro.
2. Create a new image which is 150×200 and has a background transparency
3. Rename Layer 1 background.
4. Flood fill this layer with a solid color of R128,G128,B255.
5. Change the foreground color to white.
6. Create a new layer and title it frame.
7. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “c”. Change the font size to 175. Make sure the Antialias is on, the Alignment is at left and Floating is checked. Press OK.
8. Without deselecting, activate the Bladepro Plugin. Select GG51.
9. Without de-selecting, apply a drop shadow with the following attributes:
Color: black
Opacity: 55
Blur: 4
Offset Verticle: 2
Offset Horizontal: 2
*Note* This is using Paintshop Pro’s Drop Shadow feature. If you are translating this tutorial to another application, simply use whatever drop shadow techniques you would normally use.
| SANITY CHECK! Your graphic should look like this: |
 |
10. Deactivate selection. Create new layer and title it java off.
11. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “d”. Press OK.
12. Without de-selecting, activate the Bladepro Plugin. Select GG47.
13. Without de-selecting, apply two drop shadows using the following settings:
First time
Color: black
Opacity: 75
Blur: 4
Offset Verticle: -1
Offset Horizontal: -1
Second time change:
Offset Verticle: 1
Offset Horizontal: 1
| SANITY CHECK! Your graphic should look like this: |
 |
14. Deactivate selection. Duplicate the “java off” layer.
15. Select All in the java off layer and move contents to the right 1 pixels and down 1 pixels. The pixel shown on the bottom should start out at 16,38 and should end up at 17,39 when done. Deactivate selection.
16. Create Two additional layers titled cutout1 and cutout2.
17. While you are still on the cutout2 layer, turn off the visibility of the copy of java off layer.
18. Using the font tool, place your cursor at 75×100 pixels. Click and select WKI Menus Sampler, letter “d”. Deselect the Floating option. Press OK.
19. Without deselecting, apply a cutout using the following attributes:
Interior color: White
Shadow color: Black
Opacity: 65
Blur: 4
Offset Vertical: 2
Offset Horizontal: 2
20. Click on the cutout1 layer. Without deselecting apply a second cutout changing the following attributes:
Opacity: 45
Offset Vertical: -1
Offset Horizontal: -1
| SANITY CHECK! Your graphic should look like this: |
 |
21. Without deselecting, invert the selection.
22. Click on the Copy of java off layer. Delete Selection (not the layer, the selection).
23. Turn off the visibility for the background, frame and java off layers.
24. Merge visible layers. Rename merged layer to java on.
25. Turn the visibility back on for the background, frame and java off layers. By clicking the visibility for the java on layer on and off, you will be able to see the effects of your mouseover layer.
Then slice and dice!
Viola!! See how easy that was? I have actually gotten this method down to less than three minutes. With this technique, you’ll spend more time selecting your presets than you will doing the mouseovers!
Additional notes:
Depending on the darkness of the presets selected, you might want to adjust the opacity of the cutouts.
by Gabrielle Gaither, 2002
Entries (RSS)