|
I've been asked many times how I made my mouse over buttons. Here is a method for Paint Shop Pro 6/7 which will need no add-on filters as was needed in PSP 5. This tutorial uses raster layers, adjustment layers, the cutout effect, inner bevel effect and the outer bevel effect. I'll start by giving a quick description of the button I want in this case an inlayed 90x30 pixel button. So I start by setting the foreground color to white and background color to black. I then open a new image 90x30 with white background. I now want a 10 pixel area around it to be for the inlayed bevel area. So to do this I go to Image > Add Border and check Symmetric then enter 10. Now promote this to a layer as you will be using this as your background later in the tutorial. You should have something at this point that looks like Fig. 1.
Fig. 1 Now with the wand select the white button area and then save the selection with Select > Save to Alpha Channel. You now need to do Selections > Select None. Now clear this layer by using Edit > Clear. Flood fill this layer using the texture you want to use as a your background pattern. I've found that textures work best with these types of buttons. Once this is done get your button selection with Selections > Load from Alpha channel. Now go to Image > Effects > Outer Bevel and apply as show below in Fig. 2. This is our background layer.
Fig. 2 I now modify my selection with Selections > Modify > Contract 1 pixel and promote that to a new layer by using Selections > Promote to New Layer. This will become our basic button. I then go to Image > Effects > Inner Bevel and set it as show in Fig. 3 below.
Fig. 3 At this point make you might want to go back to the background layer and reselect your selection from the alpha channel and flood fill it with black. This is your choice as I find it sets of the button a little better. Now make a duplicate of the Up Button layer to be used in making the Dn Button and turn the visibility off on the Up Button and Background layers. Now add a new raster layer. If you have turned off the button selection then reload it from the Alpha Channel and contract it 1 pixel. Now on the new layer do Image > Effects > Cutout set as show in Fig. 4 below. I'll call this layer the Cutout and it should be the top most layer in your palette.
Fig. 4 At this point you are ready to add your text and that I'll leave that to you. I use a trick when adding text that gives a nice effect. I will add a new layer between the buttons and cutout layers for my text. Once my text is down I make a duplicate of it and keep the marquee (marching ants) on. On one of the text layers I hold down the shift key and with the keyboard arrow keys I hit the up arrow 1 time, then the same with the right arrow.This will move the selection (text) 1 pixel up and 1 pixel to the right. I use this layer with the DN Button. The other text layer with the UP Button. Now all that is left to do is merge the DN Button together and remember to turn of the visibility of the UP Button Text layer before merging it. Once the DN Button is done do the same with the other Text layer and the UP Button. Now just duplicate the background and merge one to the UP Button and one to the DN Button. The final step is save the Dn Button and Up Button as 2 images.
Mouse Over Inlayed Button Notes: You will need java script to add these buttons to a web page. If you click on the example above you will see the basic code I used for this page. This code that I used was modified from the code found on several different sites. I suggest you do a little research into the scripting or use one of the many html editors/programs that will create the script for you from your buttons. The one I find the easiest to use and free is JavaScript Buttons II. There is also an excellent tutorial at by Joe Barta at Professional Web Design that I also highly recommend. You are however free to copy my source code from my home page (../index.html) and modify it to suite your needs. In closing I suggest you try this method with other shapes and effects as well as some of the vector drawing capabilities found in Paint Shop Pro 6. The possibilities are really endless. psp file used in this tutorial.
|
