How you doing Guys! You know, I didn't think this tutorial was ever going to happen, but I guess things have a habit of jumping out at you when you least expect it eh. Confused? Ok lemme explain a little. I promised to write another tutorial in my button series some weeks ago and yep you've guessed it, I just couldn't get any inspiration. First deadline came and went, I got a reprieve and a new deadline, and yep that drifted past too hehe.
Anyway, there I was in a lift - that's British for Elevator - a couple of days ago, and I noticed these things have got buttons, nice buttons too (sheesh where've I been...heh) anyway, buttons means inspiration... and inspiration means tutorial....so here we have it....

Lift (Elevator) Button Tutorial

 Start with a new canvas (200 x 200), name it Lift (Elevator) Button and fill with the background color of your choice. Make a New Layer and name it 'Light', select the Rectangular Marquee Tool and set the marquee options to Fixed (150 x 150), now click on the canvas and centralise. Next up, go to Select > Modify > Smooth > 6. Using Smooth knocks those sharp corners off, giving a little bit of curve definition.
Whatever else here, do not de-select, keep those 'marching ants' on the move.

Part of this tutorial requires you to set up a couple of gradients, ones that you won't find in the gradient options. I've Assumed that some of you reading this are fairly new to photoshop, that being the case, I'll briefly go through the process. For you guys with a little more experience, bear with me here.

 Firstly, let's reset the foreground and background colors. Click the foreground color and reset this to RGB#210,210,210. Now click on the background color, set this to RGB#111,120,123. When you've re-set the colors, go to the tool pallett and select the Linear Gradient Tool.

 If you've selected correctly, the Linear Gradient Options box will appear in the top right corner, and if you click on the Edit box, a pop up window will appear with the Gradient Editor ready for you to set up your new gradient.

On the Gradient Editor, select New - Ctrl+N (Win) or Cmd+N (Mac) -, choose a name I chose Lift (Elevator) Button... original huh... oh one thing here, make sure the color box is checked, it's circled in green.
Now you're probably wondering why I got you to reset the foreground/background colors, well there's no mystery. When you click on new to create your new gradient, the color end stops (those funny lil boxes each end of the color bar with coat hanger tops) automatically default to the foreground color. Now if you click on one of the color stops to select it, the coat hanger bit will turn black and the color will be represented in the rectangular box (see mauve/blue arrows), in fact if you now clicked on the rectangular box, you will bring up the color editor which will allow you to change the color in that particular end stop (the one selected and active).
I asked you to change the background color. The reason for this is that if you click on the other end stop, then click on the little background button (the one circled in red with a 'B' on it), then that end stop will change to the background color et 'Voila' , the color bar now has your two colors showing as a gradient. So hit ok, and that gradient is now set up, and you can now access it through the Gradient Options Box in the drop down menu.

Cool eh, but there's bundles more you can do with this great tool.

 Phew, I think I could use some coffee after that.

Ok, let's crack on and run a gradient on this image now we've created one. We're going to set the Gradient from the top left, to the bottom right. So if you've still got the selection active, and the Linear Gradient tool selected, drag a gradient from top left corner to bottom right corner - see opposite.

This is what you should end up with. Nothing too fancy so far eh.
One thing is for certain. In this tutorial, there are going to be a few layers and a lot of fiddling about. However, if you already like the animated button gif on the header, then you'll agree with me it'll all be worthwhile.
Ok, let's get on. You guys still got those 'Marching Ants'? If not Ctrl Click (Win) or Cmd Click(Mac) on the 'Light' layer to select it, and we'll make another layer, name this one 'Face'.

 Now to start changing things, go to Select > modify > Contract > 10, and working on the 'Face' layer, grab the linear gradient tool again, and drag a gradient from the top left to bottom right corners using our newly created gradient. Okey dokey, now you can de-select.

Yup, pretty straightforward so far, some of you guys might already have an inkling as to how we're going to put this button together, if you haven't any idea yet, the next couple of steps should make it a little clearer. Ok, top up the 'java' and we'll crack on.

Re-select the 'Face' layer Ctrl Click (Win) or Cmd Click (Mac), now click on the 'Light' layer to work on that, and hit the delete button.
If you're new to Photoshop, take your time over the next few steps, they are going to get fiddly to say the least.
What we're doing so far, is putting in the base structure. As the tutorial unfolds, you will do several duplications, layer mode, color and opacity changes. Remember, you are in charge here, I'm just the architect, and all these carefully laid plans can be chopped and changed around to suit how you want the finished article to look like.

These buttons (and I use the plural here), will be for use as Mouseover buttons. When I've finished writing up the tut for the Mouseout stage, I'll make a copy of the button and talk you through the couple of layers needed to get the Mouseover state.

Ok, let's get on. Select the Light layer, and drag it to the new layer icon to make a copy, rename this Color1. We want to save this layer into a channel to create some 3D fx, so select the Color1 layer Ctrl Click (Win) or Cmd Click (Mac) and go to Select > Save Selection > Name it Color.
Now we can work on this in channels, so click on the channels tab and there it is ready to work on. Ok, click on your color channel, and with it still being active, run a series of small Gaussian blurs Filter > Blur > Gaussian Blur > 4 > 2 > 1, deselect and run a final Gaussian blur at 0.5.

The image on the right is an animation of the whole process (repeating 3 times), to see it click on the Refresh button (Ctrl+R Win or Com+R Mac) of your browser.

Ok, we're done here, so let's go back to the layers pallett and do one more there.

This time we are going to set our foreground/background colors with these settings. Foreground at RGB#199,120,8 and our background at RGB#155,74,8.
Ok so far? Next up, select the Linear Gradient Tool from the Tools Pallett, click on Edit in your options box and set up your new gradient.

With the selection still active, run a Linear Gradient from top left to bottom right with your newly made gradient, and without de-selecting, go to Filter > Render > Lighting Effects (use my settings below), make sure you select Color as your texture channel, and if you're happy you've got it all together, hit ok and this is what you'll have.

Ok, now your Color1 layer is looking pretty cool, duplicate it and name this new layer Color2. Now set the Color1 layer to Multiply Mode and Color2 layer to Overlay Mode.

Make a new layer above the Color2 layer, name it Highlight. Ctrl/Cmd Click the Face layer to select it, but make sure you are working on the Highlight layer.

Ok, go to Select > Modify > expand > 2, fill with black, deselect and Gaussian blur it at a value of 2 and then 1 .

Re-select the Face layer (Ctrl/Cmd Click) - but stay working on the Highlight layer - now hit delete.
Your Layers Pallett should now look like mine.

At this stage, we need to look at the central part of the button, that sort of dirty (well fingered) metallic piece in the middle. So, let's start by selecting the Face layer Ctrl Click (Win) or Cmd Click (Mac), now go to select > Save Selection and name it Face (what else). Now we've saved this into a channel for good reason. It's necessary here to give some depth to the central part of the button, but not too much. Hit the Channels tab and click on the Face Channel (Ctrl+5 (Win)
Cmd+5 (Mac)). Check below and see what we're gonna do with this.

To give this some cool fx, we need to first run a series of low Gaussian Blurs. So fire up the Filter > Blur > Gaussian Blur, and blur this at values of 5 > 3 > 2 > 1, then de-select, and Gaussian Blur it again at 0.5. Ok, this is what resulted from our low Blurs. A Nice rounding of the edges, this'll give a good effect.

Normally at this juncture, we jump back to the Layers Pallett and run the Lighting Effects filter to get our 3D effect. However on this occasion, we're going to do something a little different.

Ctrl/Cmd Click the Face Channel to load it, now Ctrl+C (Win) or Cmd+C (Mac) to copy the selection to the clipboard, and switch back across to the Layers pallett, click on the Face Layer and paste the selection into a new layer Ctrl+V (Win) or Cmd+V (Mac). You will now have a new layer called Layer 1 above your face layer, double click on it and re-name it Channel Overlay.

At this point your new layer Channel Overlay is a blurred white which we don't want. (Mind you, I kinda like that effect)

So guys, we're almost there with this, remember I did say it would be a bit fiddly. Because of that, I've tried to cover this in as much depth as possible without getting too boring. If it's helped some of you guys - with a little less experience in PhotoShop - to feel a little more comfortable with the program, then I've achieved what I intended.

To remove that blurry white, we'll go back to our channels pallett and load the Face Channel you should remember how to do this by now Ctrl+Click (Win) or Cmd+Click (Mac). What we've done here is to load the actual area after blurring which will give us more depth to the center of the button.
Ok, now hop back to our Layers Pallett and click on the Channel Overlay layer, select the Linear Gradient Tool, and with the selection active, run a gradient Top left to Bottom right using the first gradient you created, the Lift (Elevator) Button Gradient.

Done that? Ok, now set this layer to Overlay Mode, duplicate it and name the duplicate layer Channel wrap, now set this layer to Hard Light.

Ok, we've got a couple more things to do up this end of the stack, so next up, duplicate the Face layer and name it Rework.
Working on the Rework layer, go to Filter > Noise > Add Noise, set the values as Amount > 20 > Distribution > Gaussian > and Check the Monochromatic box. Staying on the Rework layer, go to Filter > Blur > Gaussian Blur and input a value of 0.5, finally set the layer mode to Multiply.
This should be the result.

This may be a good point to sit back and take stock of what you've completed so far. Stopping at various points, reading through your work or just admiring your creation is good. One thing's for sure, I could do with some refreshment, and I'm pretty sure you can, so go grab some fresh coffee or another cola and I'll catch you back here in a few minutes.

Ok, it's all downhill from here, so if you're ready let's go for it.
Dive down to the bottom of the stack and make a new layer above the background layer, name this Inset.
Working on the Inset Layer, Ctrl/Cmd Click the Light layer to load it, then go Select > Modify > Expand > 3, next, Select > Feather > 1 and fill selection with black.
With the selection still active, use the Keypad to toggle and nudge the selection down 1 pixel, and to the right 1 pixel, then go to Image > Adjust > Brightness/Contrast and increase the brightness (+100%). Using the keypad again, nudge the selection Up 2 pixels and to the left 2 pixels, now go to Image > Adjust > brightness/Contrast and decrease the brightness (-100%).

So far we have created the Mouseout (or Mouseoff) Button State. Remember, this tutorial is only a guide, you can change layer modes, opacity strengths or do whatever embellishments you feel in keeping for your web page.
This is what your layers pallett should look like so far.

Making the Mouseover (or Mouseon) button state is pretty straightforward. However, before we duplicate our button to start the mouseover state, let's create that cool looking 'G' that I've put on the header button on page 1.

Ensure you're working on the Channel Wrap layer - the one at the top of the stack.

On the tools pallett, select the type Mask Tool, if it isn't showing, click on the type tool and hold down your left mouse button, select the correct tool from the pop out menu.

Now click on the image, and the type tool menu will appear. Select Font > Copperplate Gothic > Size 100 pixels now type the letter 'G' and hit ok.

I guarantee you're going to have to position that letter, so move your mouse so that the cursor is inside the letter outline. You'll notice that as the cursor goes inside the letter, it changes to a white arrow head with a small rectangular box. If you hold down your left mouse button the cursor will change to a black arrowhead, and if you keep holding down your left mouse button, you can drag the letter into the correct position on the button face.

If you're happy where it's positioned, let's go create some magic.

Go to Edit > Copy Merged then Edit > Paste. You'll notice that your button appears to have no letter on it. However, if you look at your layers pallett, there is a new layer there called layer 1. Strange eh.

Ok, now for the magic of this program. Move your button to the top left of the screen so you can see it, then go to Layer > Effects > Bevel and Emboss and click ok. Move the effects menu if it's in the way, and take a look at your button - magic eh.

If you want to use my settings for this effect, that'd be just fine. However, why not play around with the highlight and shadow modes/opacity's, you can produce some very cool effects here.

If you're not happy with your text effect, double click on the little f icon that appears on that layer, and you will bring back the effects menu for editing (see below).

You should now have a button pretty much resembling mine dependng upon how much embellishment you did to yours.

So, if you're ready, duplicate your button, save your mouseout button and I reckon we're about ready to wrap this up.

Ready? Ok, duplicate the Color2 Layer, name it Bright1 and set it to normal mode. Ctrl/Cmd Click this layer (Bright1) to select it and fill with RGB#254,247,1, now duplicate the Bright1 layer and name the duplicate Bright2 - set this to Overlay mode, de-select. Click on the Bright1 layer to work on it and go to Filter > Blur > Gaussian Blur > 5, this will spill some of the color around the outside edge of the button, giving the effect of light spilling over, and that's all there is to it.

If you click the refresh button on your browser or Ctrl+R (Win) Cmd+R (Mac), the image opposite will animate (3 times) to simulate a mouseover effect.

Well, I reckon that's about it for this tutorial. One last thing though, check out these buttons against a dark background, ....have fun, enjoy.

Download PSD

discuss this topic to forum