Creating pushed in buttons tutorial
-- Push in Button tutorial --
This tutorial shows how to create a mouseover button that gives the appearance of being pushed in.

These are the buttons we are going to make.

   

'out'                    'pushed in'

First open a new image with a size of 800 x 600, background pink(There is a reason for this). Set magnification to 100% Select rounded rectangle with a colour of orange. Use 3d round and draw a rectangle of 250 by 65 pixels. It's big I know, but it is easier to work with. Later we will reduce it.

Using the materials button go to border/depth and set border to 10 and depth to 30. Set to lights and change to four lights direct.

It should look like this:-

Copy (ctrl c and ctrl v) and change to pipe.

You should have this:-

Generate some text for the button in 3d round size about 30pt. Thick text looks best. Move the pipe so that it surrounds the button. Place text in centre of button. The pipe should sit on top of the button as defined by the order of the layers which can be moved up and down by dragging.

You should have something like this:-

Don't merge them just yet.

Now on to the 'pushed in' button.

Copy the pipe and the button and the text to another part of the page.

Select the copied pipe and add a black shadow:-

Split shadow.

Add another shadow (white):-

Split the shadow again.

You should now have something like this:-

Now we have to erase the white and black shadows on the outside of the pipe. This is why the background is pink or a non white/black colour. You won't see the shadow otherwise.

Increase magnification to 200% and centralise this pipe image. Open up the layers box and click on the black shadow which has been converted to an object when we split the shadow from the pipe image. The black shadow should now be selected. Use the Object paint eraser tool (under the stamp button) to erase the black on the OUTSIDE of the pipe. Set it to a size of 10 and be careful not to cross over to the inside of the pipe. The black shadow will be erased. Do the same for the white by selecting the layer for the white shadow.

Select the copied button and select the materials box. Change the lighting to 1 spot light. Add black shadow:-

Assemble the components so that the 'out' button

looks like this:- and the 'pushed in' button

looks like this:-

The text for the pushed in button should be shifted to the right and also down by about 5 pixels difference to the top text. Use the arrow keys instead of the mouse. This gives the impression of a button being pressed in.

Save as a UFO file before you do the next step.

Merge button's components by selecting all the respective layers for each button, reduce by 50% or a size you prefer and save as 2 gif buttons. Then move the 'out' button over the 'pushed in' button and click on the eye in the layers panel and you will see the buttons in action.

Now you repeat the process for the other buttons, then use a bit of javascript to handle the mouseover function.

Back to home page