Making a Reflective Button in Photoshop



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.

finished button


shape_toolIn 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.  shapeToolShapeSetting

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.

purple_oval


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 add layer style button button at the bottom of the layers pallete, and select Drop Shadow from the popup menu.

dropShadowSettings


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.

bevelAndEmbossSettings


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.

strokeSettings


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.

purpleOval2


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 moveTool and move (click and drag) the smaller oval so it sits at the top left of the larger oval.

purpleOval3
 
 


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.addLayerMaskBtn

gradientTool SelectionClick 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:

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


black foreground - white backgroundBe 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. 

layersClick 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.


slideBloomApr

 

Join our Facebook fan pageFollow us on TwitterWatch us on YouTubeSee us on PinterestSubscribe to our RSS news feed

Testimonials

Pro Epic's professionalism, service, and creative abilities are unequaled in my experience. Their ability to produce materials (website & brochure) presenting our company in a manner which, so accurately reflects the character of our brand is amazing. We appreciate their high standards and desire for excellence! We couldn’t be more pleased! Texas Saddlery has found a home with Pro Epic!
Rory Boren, Co-Founder, VP, CFO, Texas Saddlery
The folks at Pro Epic sat down with me, and listened, while I described my business; really caring about what would be the best for me. They are not just out there selling their business, but offering advise on how to bring the public to a better awareness of how I can serve them. Pro Epic is very professional, and at the same time helped me feel at ease answering all of my questions. I truly recommend their services to help you increase your business.
Teresa Gilbert, Owner, Less Stress Massage, Weatherford, Texas
Pro Epic delivered a beautiful website, on time, that functions and looks just the way we wanted it to. Their personal training on how to use our website was outstanding and communication was excellent throughout the whole process. I highly recommend their services! Top qualities: Expert, Good Value, Creative
Kira Connally, Owner, Spectacles West, Weatherford, Texas
I want to let y’all know that we are very pleased with the website. I do appreciate the communication, training and service that was offered. Thank you very much!
Keith Harless, Manager of Engineering/Sales, Antelope Oil Tool & Mfg. Co.
Pro Epic is awesome at what they do. Give them a chance to help you grow your business.
Constance Frantz, Wright Chiropractic Health Center, Weatherford, Texas
I'm a VERY picky business owner who values communication and professional thoroughness in the companies I deal with. Pro-Epic wins hands down. If you want a website, I highly recommend this company.
Heather Wright, Owner, Wright Chiropractic Health Center, Weatherford, Texas
Thank you for your hard work. Mostly I notice that you really are sincere about giving your customers a Website that reflects their vision AND that your communication and efficiency is terrific. In this day and age it is unusual to find. I've enjoyed the process.
Linda Kessler, Owner, Barefeet Yoga, Mineral Wells, Texas
We have had so much positive response regarding our new web site! It has generated new business for us and the blogs that we are adding are driving people in that direction too. Pro Epic has done everything they said they would do, on time, on budget and the follow up afterwards has been wonderful. I have referred Pro Epic to many other clients, including the Weatherford Chamber of Commerce and everyone has been pleased.
Paul Paschall, Owner, Paschall Insurance Group, Weatherford, Texas
Pro Epic Technology Solutions

190 N. Rambling Fork St.
Weatherford, TX 76087
Toll Free 1 (866) 580-3617