Mac has set a number of design trends. One of the most replicated mac interface designs are the OSX buttons. However, getting it right can be tricky for a novice photoshoper. I will show you how to create these Mac OSX buttons in Photoshop in 5 easy steps.
.jpg)
1. Create the ShapeOn your new Photoshop canvas, create a new blank layer, select the 'Rounded Rectangle Tool' and enter a radius of 15px. Then click on your canvas and draw a rectangle. Make sure you don't make the rectangle to tall as we want the ends to look circular, not flat. It doesn't matter what colour it is, as we will change it in the next step.
2. Apply the GradientNow, double click the layer with the shape on it. This will bring up the 'Layer Style' window. Now it's time to apply the blue gradient. This is the trickiest part to get right. Create 4 color stops with the following settings:
Stop 1: #98dbf5 Location: 0%
Stop 2: #5aa7eb Location: 58%
Stop 3: #84b8f4 Location: 58% (but above stop 2)
Stop 4: #d1ddff Location: 100%
Set the following settings for the Gradient Overlay:
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
3. Apply the Inner GlowWe are almost there, but there are only a couple of tiny details to add. In the 'Layer Style' window, create an Inner Glow with the following settings:
Blend Mode: 75%
Opacity: 75%
Noise: 0%
Color: #34528e
Technique: softer
Source: Edge
Choke: 0%
Size: 5%
4. Apply the Drop ShadowAgain, in the 'Layer Style' window, create a drop shadow with the following settings:
Blend Mode: Multiply
Color: #000000
Opacity: 63%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 1px
5. Add TextFinally, add the text to the button on a new layer. I would use Lucida Sans Unicode font at the size of 13pt with a color of #2d2d2d.
There you have it, Mac OSX style buttons in Adobe Photoshop. If you found this tutorial helpful, please share it on your favourite social network.
Hi, i'm David! I've been building websites since 1996. Through my experiences, I have gained a well-rounded knowledge of the design & development of websites. I founded Supadupa Web Design to help others learn from my experiences.
Follow @davidburleson
