Tutorial written using…
Adobe Photoshop CS3

Ah, one of the trademarks of Web 2.0… the shiny button.

Shiny Button: Continue

Shiny Button: Buy

Shiny Button: Go

It is actually much easier than you might think, so open up Photoshop and let’s start!

  1. In a blank document create a shape using whatever method you choose. I chose an arrow using the Custom Shape Tool. I also made my artboard bigger than the shape so I can have some room to work.Step 1: Create Shape
  2. Create a new layer titled “Highlight” (or whatever name you desire).
  3. On the Highlight layer, use your Lasso Tool (press “L”) and select part of the top portion of your shape. Use your best judgment depending on your shape as it will vary. You may need to use Select > Modify > Smooth to smooth our your freehand selection.
  4. Press COMMAND + OPTION + SHIFT (Mac) or CONTROL + ALT + SHIFT (Win) and then click on the layer that has your shape. This will remove any excess selected are so we are now only working in the area on the shape.Step 4: Select Highlighted Area
  5. Make your foreground color white and grab your Gradient Tool (press G). From the Gradient Editor (see image) set it to Foreground to Transparent and click OK. Step 5: GradientView Larger
  6. Draw gradient from top to bottom of selection on an angle if necessary. For our arrow, the brightest (whitest) part will be the top left corner, so drag the gradient at an angle down and to the right. To give it a more natural look you will probably want to use Gaussian Blur to make the edges less rough.Before Gaussian BlurStep 6: Draw Highlight

    After Gaussian Blur (3 px)

    Step 6-2: Highlight with Gaussian Blur

  7. Create a new layer named “Shadow” and repeat steps 3-6 starting on the bottom of the arrow with black as your foreground color.Step 7: Create Shadow
  8. Reduce Opacity so the effect is less dramatic. 20-30% should suffice, but could vary based on the color of the shape.
  9. COMMAND click on the shape’s layer (CONTROL click in Windows) to select the shape then choose Select > Inverse. Click on the Highlight layer and press delete. Do the same for the Shadow layer. This will remove and excess color that may have seeped outside the arrow due to our Gaussian Blur.Step 9: Add Shadow
  10. Add text on arrow below the Highlight and Shadow layers. You can use any color you want, but I prefer a darker shade of the button color. Since we have a pink button, I will select a dark shade of that same pink.Step 10: Add Text

We’re done! Feel free to experiment to get different glossy effects. You can also add a nice drop shadow to give the button more of a 3D effect.

Happy Buttoning!

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments