3D, 3-image Transparent Button Sets
- for Web Pages, Multimedia Builder, and other Graphics work -
- requires Adobe Photoshop to edit -
The following Samples are all included in the Download Zip file
Jumpouts (wait until all is loaded then move mouse over to test - ):
Color Swaps (wait until all is loaded then move mouse over to test - ):
99% of the work is done for you - Download 'em - edit 'em - and Enjoy !!
Click Here to Download All Button Files
Included Files in the download: Guide, button psd image files, gif89a plugin, mouse click wav file
These are 3-step buttons for use with MMbuild (Multimedia Builder) – although they can be used with any number of imaging apps.. Each button is a set of three image files:
MouseOver Button (Highlighted)
There are two ways of button creation that I recommend :
Type 1: Raised 3D button that changes color when the mouse is moved over it, and flattens to 2D when clicked
Type 2: 2D flat button that rises up to a 3D button of the same color when the mouse is moved over it, and then goes back to flat, 2D when clicked. This type only requires the creation of 2 images. This type of button is more complex to create and so far I have not made these templates yet. I have seen only one website with these buttons and they are incredible!! When you moved your mouse over the button, it jumped up and out at you.
Sample MMbuild Page with 3D Buttons
For all 3 buttons (regular, Mouse-Over, and Clicked), the text must be placed in the "exact same position" - almost impossible to do manually. These templates include text that is already lined up for you - center justified in the middle of the buttons.
Transparency and the GIF89a Plugin
The buttons are not exact rectangles, and therefore the border needs to be transparent. In order to use transparency with MMbuild you need to use GIF images. I will show you how to create Compuserve 89a GIF’s here, which support transparency. Photoshop 7 does not include the GIF 89a plugin, although it supports another, more complex method of creating transparent GIF’s – there for I am including the 89a plugin. Simply copy it into your Photoshop plugins folder.
Creating Your Button Set
The method is simple - using the included PSD files, you can edit the text on the 3 buttons and it will be aligned. Then save the three buttons as GIF files in GIF89a format with the outer areas transparent. Finally, create your 3-step, 3D, transparent button in MMbuild - as follows:
1) open the PSD button file
2) make sure the "Text" layer is selected (it should be by default) in the layers pallette
3) click the Text tool button, and click the word "Text" to place the cursor there
4) edit the word "Text" to whatever you need it to be and then click the Move tool button to finalize your text edit – DO NOT MOVE THE TEXT OR IT WILL BE OUT OF ALIGNMENT WITH THE OTHER TWO BUTTONS !!!
5) click "Layer/Flatten Image"
6) click "Image/Mode/Indexed" - and click OK
7) click "File/Export/Gif89a", click the eyedropper on the white area to make it transparent (the area will turn grey, indicating transparency), uncheck "Interlace", click OK, and save (make sure to use the filename extension "gif").
Repeat Steps 1-7 for the other 2 button files (mouse-over and clicked)
8) in MMbuild, click once on the “Bitmap Button” (it has a tiny symbol of a cactus on it) and then click anywhere in your project to place the button there. NOTE: you will see a right angleyou’re your mouse pointer – this will be the upper-left corner of the button
9) You will see 3 load buttons - AutoButton, Highlight Image, and Click Image. Click each and load the corresponding button image that you created in Photoshop.
10) Click Transparent, then click the down-arrow next to the word “color”, and then click “Automatic”
11) click the “speaker” icon, and for “Mouse Click on Object” select the included wav file, “ClickDownUp.wav”
12) add whatever action or script you want the button to initiate using the buttons at the bottom
13) Click OK - DONE !!!
NOTE: for Step 7 you will need the Adobe Photoshop GIF89a export plugin for this process. You can search the Web (Adobe took it off their site !!) and then add the file to your Photoshop "plugins" folder. OR you can replace Step 7 as follows:
click "File/Save as Web . . ."
click the eyedropper tool, click on the white area, and then click the tiny checkerboard button at the bottom of the Coler Table pallette
Save the file, replacing the PSD with a GIF extension.