Photoshop 101 - Photoshop Tutorials, Blogs, Online Store and More. - http://www.photoshop101.com
Glossy Hanging Web Buttons
http://www.photoshop101.com/articles/6/1/Glossy-Hanging-Web-Buttons/Page1.html
Sam Lee

The traveller who wants to see the world.

 
By Sam Lee
Published on January 1, 2008
 
You've probably seen these overhanging buttons on websites before. Now you can make your very own.

Create a rounded rectangle using rounded rectangle shape tool.



Enable "subtract from shape area" at the top bar. Create two triangular shape using polygon shape tool.



Double click the layer to open layer style window. Apply settings as shown.







Create a rounded rectangle using rounded rectangle shape tool. Press Ctrl+T. Right Click and select Warp. Adjust the nodes to get the shape as shown. Fill it with white color.



Create a rounded rectangle using rounded rectangle shape tool. Move this layer below all the layers in layer order in layer palette. Apply same layer style.



Duplicate the layer, move and place as shown.



Create small rectangles using rectangular shape tool as shown.



Create a small rectangle for the clips using rectangular shape tool.



Double click the layer to open layer style window. Apply settings as shown.







Similarly create more clips and place them as shown in the image below. We'll use these clips to hang the buttons to wire.



Select all the button layers. Press Ctrl+G to group. Duplicate the group several times and place as shown. Create two horizontal lines for the wires as shown.

Add a dash of color by create small blue circles on top right of buttons. Apply same layer style as used for the clips. Remove gradient overlay from the layer style.



Type link names over the buttons or use HTML/CSS later on to populate the menu.