One of the fun parts of creating websites is making designs that look nice and are also functional.  Graphic buttons are one of the most often used images calling visitors to take action.

This Photoshop tutorial covers one way to make a graphic button with a reflective surface. The button we are going to make will be on a white background, and ultimately be part of an image in a slideshow.   

Our finished button will look like the image below.
In Photoshop, create a new file that is 280 pixels wide by 177 pixels high.  White background, 72 pixels per inch and RGB color space. Click and hold the click on the shape tool until the tool expands. Release the mouse key then click on the Ellipse Tool to select it.

At the top of the screen, be sure that Shape is selected for the tool action. 

Click and drag on your canvas to create an oval. 
[While drawing, you may move the ellipse without changing its shape, by holding down the shift key.]

We want our shape to be purple, so in the layers pallette, double-click on the color swatch for the oval shape. At the bottom of the color picker window, enter hex value of a color purple - d25ece - into the # field. Select the OK button.


To give our button depth and a 3-dimensional appearance, we will add layer styles.

With the oval layer selected, click on the Add a layer style  button at the bottom of the layers pallete, and select Drop Shadow from the popup menu.


The drop shadow settings used are:

• Blend Mode of Multiply.  Click the color swatch beside the Multiply blend mode at the top of the shadow settings and change the hex code for the color to: 5d026d.
• Opacity 75%
• Angle 120 degrees
• Distance 6px
• Spread 0%
• Size 6px

While still in the layer style window, select Bevel and Emboss.


The Bevel and Emboss settings used are:  

• Inner Bevel
• Technique is Smooth
• Depth is 91%
• Direction is Up
• Size is 6px
• Soften is set to 10px

While still in the layer style window, select Stroke.


The Stroke settings used are:

• Size of 2px
• Position is Outside
• Blend Mode is Normal
• Opacity is 100%
• Fill Type is Color with a color of white - hex color # ffffff

After adding all the layer styles, select the OK button to save them.  Following is what your oval should look like at this point.
Now it's time to add a light reflection to the top of our button.

Select the ellipse shape tool.  Draw a small oval at the top of the larger oval.

In the layers pallette, double-click the color swatch for the smaller oval.  Enter f6c8fe into the # field.

Press CTRL+T to go into transform mode for the shape.  Click outside the right side of the transform box and drag up to tilt the smaller oval.  After you are through "transforming" the smaller oval, select the checkmark at the top of the screen to save the adjustments.

Select the move tool  and move (click and drag) the smaller oval so it sits at the top left of the larger oval.


We will use a gradient mask on the smaller oval layer so it looks like a natural light reflection.

On the bottom of the layers pallette, click the Add layer mask button.

Click and hold the click on the Paint Bucket Tool until the Gradient Tool also appears. Select the Gradient Tool.

Gradient settings at the top of the screen:

• Foreground to Background
• Linear gradient
• Normal Mode
• Opacity 100%
• Dither and Transparency both checked

Be sure your foreground color is set to black (000000) and your background color is set to white (ffffff).  A quick way to set them is to press the letter D on your keyboard. 

Click and drag from just inside the bottom of the smaller oval, up toward the top of the oval until you get a natural looking reflection. If you don't like the way the newly added effect looks, press CTRL+Z to undo the gradient and give drawing it another try.

Set the Fill of the smaller oval layer to 74%.  This is done by using a single click on the smaller oval layer in the layers pallette to be sure it is selected, then at the top of the layers pallette click in the Fill box and either type in the number or use the slide to adjust the number. 

This particular button is going on a botanical garden website and will link to a page that contains flower bloom dates. We will add the text "What's in Bloom?"  The "What's in" text is in the font Adobe Garamond Pro regular, 24pt.  The "Bloom?" text is in the font Mutlu, 72pt, -10 tracking.

The image below has been used on the Pro Epic produced website: www.ClarkGardens.org.

< Prev