3by9

Simple Web Button Tutorial Using Photoshop

Back in August of 2006 I wrote a simple tutorial for creating gradients in Photoshop, essentially the lifeblood *cough* of the Web 2.0 design trend. Its popularity since publishing and comment/trackback count is a testament to how many beginner-type tutorials are consumed online. To continue in the tradition of beginner web design tutorials, I now present to you a simple web button tutorial with my little spin on it.

Button Tutorials Are Everywhere

I think the “rendered” or “aqua-like” button tutorial is one of the biggest design memes on the web since there are hundreds or thousands of tutorials just like this one. Many of them cash in on the Mac OS X aqua look and show you how to make gummy-looking, candybar buttons, but this isn’t one of those tutorials. I personally find that look to be overdone but to each his own. The button style I teach here is more conservative and doesn’t take as long to produce, and I find it fits in better with the current minimalist and clean web aesthetic.

Step 1: Make Yourself A Circle

Take the Ellipse vector object tool (I currently have the color white in the foreground, so the ellipse is white) and create a small circle with it by holding down the Shift key to keep the ratios restrained.

Step 2: Turn It Into A Pill

At this stage I’ll convert the vector object into pixels by rasterizing it, which can be done by right-clicking on the layer in the Layers palette and selecting “Rasterize Layer”.

Once it’s rasterized, double click on the layer to bring up the Layer Style palette so we can give it an initial coloring. Go to the Color Overlay style and make it black for now so we can work with it easily.

So we have a black circle, fantastic. Zoom in close enough so that you can make out the individual pixels and choose the rectangular Marquee tool (marching ants if you’re old school). Select exactly half of the circle and move it a few pixels away from the other half so there’s a noticeable gap between the halves. Zoom back out to 100%.

These two semi-circles will be the end caps of the button, so move the selected cap out far enough to create space for the meat of the button. Zoom back in so that you can see some individual pixels and get your rectangular Marquee tool once more. Now, make a large rectangular selection in between the two button caps, the same height as either end. Fill this selection with black (same color as your Color Overlay style) so you now have a complete pill background with a solid color.

Step 3: Turn It Into A Button

Now that we’ve got ourselves a black button, go into Layer Styles again for your button layer and flip off the color overlay and turn on the gradient overlay style, then select that style so you can edit it. Click on the gradient so you can go to the Gradient Editor, and choose a solid-to-solid gradient style (not foreground to transparent or anything to transparent).

In the screenshot you can see the colors I picked, a medium grey and a light grey for the top of the button. At this point you’ve got a pretty simple button with a rendered look to it. We can go various places from here.

Step 4: Jazz It Up

You can leave it as is or you can modify some things, if you’d like to move further then keep following.

To make it stand off the page a bit more I hopped back into the Layer Style palette and added a Drop Shadow with the following characteristics: Black, 53% opacity, Multiply blend mode, 90° angle (straight down), 1px distance, 13% spread, 4px size. After this, I added an Inner Shadow with the following: White, 65% opacity, Normal blend mode, 90° angle, 2px distance, 0% choke, 0px size. The combination of the drop and inner shadows mimic what a real button would look like in 3D space if there was a lighting source above it. In standard user interface conventions, most objects on your screen are designed to appear as if there is a light source at the top left corner of your screen, casting light downwards, and shadows are a way of tricking your eye into believing 2D objects have depth and volume.

I’ve shortened the button and added some text to make it more button-like.

Now a second effect I like to use is a little strange in its execution but definitely gets the job done.

I will go back into my Layer Style and turn off the Drop Shadow and Inner Shadow that I just applied, and instead, I’ll add a 3px white stroke to the outside of the object. This won’t be visible unless you have a background color other than white, so it helps to do it with a visible color first and then switch to white so you can gauge the width of the stroke.

Now hop out of Layer Styles and duplicate your button layer. Once you have the duplicate, make the original layer invisible, then right-click on the duplicate layer you just created and select “Group Into New Smart Object” (CS2 and CS3, not sure how this is handled in other versions). Once you do this, right-click on the layer again and Rasterize it. These two steps take the layer effects you’ve applied as well as the actual pixels and flatten them together, so now we can apply new effects to this rasterized layer which makes it possible to apply new effects to ones you’ve already used.

Double-click on your newly-rasterized layer to bring up the Layer Effects palette, and apply a Stroke: 4px, outside position, normal blend mode, black, with 8% opacity. Hey it stroked the white stroke we had!

Okay, now duplicate the layer you were just working with (the duplicate of the original, so you’ll now have two duplicates) and make sure this new layer sits on top of the other layers of the button. Go into the Layer Style of this new duplicate and view your Stroke style that is a duplicate of your other layer. The light grey stroke you added previously is 4px so you have 4px of space between your white stroke and the end of your grey stroke to play around with. Modify your stroke style: 1px, outside position, 27% opacity, normal blend mode. Now change the Fill Type from Color to Gradient and select a color-to-transparent gradient type with the the color being black. Angle is 90° and the scale is 70%. This should give you a little shadow-type style underneath your button, above the light grey stroke of the previous layer making it look a little more beveled.

Conclusion

This is just one way of making a button, in fact this is just one way that I make a button, and there are countless more ways. Personally I like to round the corners of my buttons with 1600% zoom hand-dithering but that’s a little time consuming unless you do it all day long, so using the ellipse tool is a shortcut. Another shortcut is to feather the radius of a marquee selection. There are lots of ways to create the initial button, but once you’ve got that base shape then the rest is just applying various Layer Styles in different sequences. Good luck!