Tips & Tricks   TIP#1 Two stage Buttons

This tip will show you how to create the images that make a simple square or rectangular button appear to be pressed in.There are several ways to do this, and this tip is only the tip of the iceburg so to speak. If you would like more info on other ways to create the same effect with different styles of buttons,  please feel free to E-mail me with your questions.  

Step1- Open any button image in Photoshop or create a new one,  making sure it is in RGB Color Mode. If there isn't space to the right and bottom of the image then add one or two pixels using IMAGE/MODE/Canvas Size so there is enough room to move the image down and to the right.

Step2-  Next, make a copy of the background layer and select all Ctrl+A. Hit the "V" key and use the arrow buttons to move the selection down and to the right one or two pixels.

Step3- Using the magic wand, select the white portion of the image and invert the selection, Shift+Ctrl+I.

Step4- Fill the selection EDIT/Fill with 40% Black. In the "Layers Palette, click on one of the Eye icons to render one layer invisible, then Export GIF and save the first image. Go back and click on the Icon again to reveal the other layer and repeat, saving this image with a new name. There you have it! A two stage button!

This is what it looks like using a mouseOver script. There are several scripts available to give this effect.  The best one I've found can be configured for several images and can be found in my "Java Script" section.

JB's Web Graphics - Free Web art and Tips | All Graphics - Robert A. Snyder Copyright © 1998-1999 - All Rights reserved