| Downloaded from www.biorust.com on Thu Feb 09, 2012 09:04:06 |
![]() | |
| Metallic Pill Buttons Tutorial Author - Man1c M0g (http://forums.biorust.com/member.php?s=&action=getinfo&userid=1) |
Pill buttons are, of course, a staple diet of the amateur interface designer. This is not a coincidence - they are simple to create, look good, and are supremely reusable. Like many things, however, they can be improved greatly using a little Photoshop wizardry. The aim of this tutorial is to illustrate a technique for making metallic pill buttons using nothing but layer effects. For the sake of those interested in the theory, I've also spent a little time explaining the different settings, and how their alteration will affect the final look of the effect. Read on...
![]() |
Step 1: Create a 200px by 100px blank document and fill the background layer with white. Create a blank transparent layer on top and select it. Then, using the marquee or shape tools, design an oval shape filled with black as in the figure to the left. |
![]() |
Step 2: With the pill button layer still selected in the layers palette, click on Layer > Layer Style > Drop Shadow in the menu and duplicate the settings on the left. You can, of course, alter the settings to your own personal taste later, but DON'T exit the layer style dialogs until the end of step 7. |
![]() |
Step 3: Now progress onto the inner glow subsection and enter the settings shown here. This will add a little shading to the underside of the metal pill and help solidify its presence. |
![]() |
Step 4: This is where most of the magic happens!
Go to the Bevel and Emboss settings and enter the settings on the
left. The gloss contour applied is not included as default with
Photoshop, so click on the curve itself and create a duplicate of mine.
Don't get too obsessive trying to produce an exact match - its not that
critical. |
![]() |
Step 5: Now progress onto the contour subsection and alter the curve into the one on the left (again, its a custom one not included with Photoshop). You can try playing around with this setting if you like, but the effects are unpredictable and best left alone. |
![]() |
Step 6: For our penultimate step, go to the satin section and enter these settings. This will reflect some of the light to the bottom of the metal pill. Leave this step out and you'll end up with decidedly one-sided lighting. The contour this time is, thankfully, included with Photoshop as standard and named 'Cone - Inverted'. |
![]() |
Step 7: We can now bring all our work together by going into the Colour Overlay dialog and entering the settings. Press OK to exit the layer effects dialog and admire your work! |
![]() |
Step 8: Et Voila! A metallic pill button awaits your further attention and usage. You can, of course, go for more complex metals using the Texture Overlay feature, but I'll leave the experimentation up to you... |
![]() |
Variations: Don't be afraid to play around a lot with this effect, as it is very powerful! By varying step 7 you can, for example, create bronze buttons, or even shiny gold ones. Have fun! |