Check out my latest project: Jukebox Star - Free Social Music Video Jukebox!

Mac OSX Buttons Photoshop Tutorial

Create Mac OSX buttons in Adobe Photoshop in 5 easy steps.

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.

1. Create the Shape

On 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 Gradient

Now, 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 Glow

We 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 Shadow

Again, 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 Text

Finally, 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.


Add a Comment

required, but not shared

© 2018 Supadupa Web Design