Non-Designer Design Tutorial: Make Easy Shiny Buttons

I wanted to have this short tutorial on how to make buttons, because I can not tell you how many millions of times I’ve been stopped in the middle of my work by a programmer who needs a danged button. To a designer, this is 5 minutes of work or less: but not all of us were blessed with wonderful Photoshop skills. So the next time you or your programmer needs simple button, point them here.

Start with your shape

Open a new document in Photoshop and choose a shape. I tend to like rounded rectangles, but you can choose whatever your heart desires. Draw out the size you want the shape be, it doesn’t matter what color it is, we’ll be changing this next:

Step 1

Select your gradient

Using the fx drop down menu, found on the bottom of your Layers palette (if this isn’t open in your window, although it’s normally default upon open, go to the top menu select Window > Layers) Choose gradient overlay. Another window should pop up with gradient options. If you double-click on the gradient preview, your gradient editor palette pops up.  The first color (defaults to black) will be at the bottom of your gradient, and the second color (defaulted to white) will be the top of your gradient. Double click the bottom left black box (title tag reads color stop) to edit the bottom color; and likewise the bottom right white box to edit the top color. The rule of thumb for good gradients: Make them subtle. Don’t choose a super light and super dark color to go together. Choose your bottom color and a few paces from that, choose your top color. Can’t go wrong with that. Here’s our progress so far:

screenshot_02

Add some more sweet fx

Again, the rule of thumb is not to overdo it. Let’s start by adding an inner shadow for some depth. Go to your fx drop down again and select Inner Shadow. Change the opacity to 20% (subtle! but this depends on what gradient colors you chose also) and the angle to -90. This places the shadow at the bottom of the button, giving it a raised or bevel look.

Now, add an inner glow to the button. Change the opacity to 33% (this also depends on your colors; use your best judgment and remember less is more) Click on the yellow square and change the color to white. Now we really have a good looking button!

screenshot_04

Time to add the words

Now let’s add some text and some effects to that as well. Use your type tool (The button with a big “T” on the left side tools bar) I used the words “Submit Form” and white text, but make something match your own button. Open up your fx drop down again and select “Inner Shadow”. Turn OFF global lighting next to the angle slider and turn you’re angle to 90 degrees. Change “Distance” and “Size” to 1 pixel. Adjust the opacity to fit your text, hit enter and voila!

screenshot_05

Now this is a very simple button, but very clean and aesthetically pleasing. You can always play around and add more effects, but don’t overdo it. Here are some other options:

Button with added black outer glow, normal blend mode, set to 50% opacity with NO inner glow:

screenshot_07

Button on dark background with added white outer glow, normal blend mode, set to 50% opacity:

screenshot_08

Have a tutorial you’re wanting to see? Let me know!