Create a Mac Style Interface Button in Photoshop

Create a Mac Style Interface Button in Photoshop

This tutorial has been viewed: 11549 times

 

In the following tutorial we are going to be creating a stylized button like so

First off you are going to want to create a new document. I used the following settings.

Use the Fill tool to fill the background with white #FFFFFF, Create a New Layer over the white background and grab the marquee tool , create a selection directally in the middle of the document filling up about 75% and fill it with black #000000 useing the paintbucket tool again (see below):

tip:

Try out the other blurs and see what they do!

Now with the blacklayer selected go to Filter > Blur > Gaussian Blur use these settings:

After that set the layer with the black on it’s opacity to 20-30%

Now we are going to create a highlight of the whole area, create a new layer now grab your marquee tool and select down to almost halfway, then pull out the gradient tool set your foreground color to white #ffffff, set the gradients style to foreground to transparent (see pic), and drage the gradient tool over almost the whole document.

To come out with:

Now we need to create the button part, first grab the

tip:

press and hold down on the rectangular marquee to select more marquee types, like circular

Circular Marquee tool , create a new circle selection that almost fills the whole document (see pic) and fill it, using the paint bucket tool with white #ffffff

tip:

hold down shift while creating the circular marquee to create a perfect circle!

with the layer with the white button on it bring up the layer styles for that layer select dropshadow and apply the following settings:

Now we need to make the button have a shadow in it, first create a new layer and press ctrl+g to have that layer mask the layer under it, then select the Circular Marquee tool and create a circular selection in the center of the button circle. Now set your foreground color to Black #000000, and select the gradient tool set the gradient style to black to transparent and drag from the top left of the Circular marquee to almost all the way through it (see pic)

You should end up with something like this:

Set that layers opacity to about 15-20% to dim down the shadow a bit.

Well that’s it for this tutorial, I fooled around a bit more and came out with this.


some type of Music player skin.

Tags:

 
Added By:
  1. Mendagu Said: Comment by Mendagu on May 19, 2009 at 3:30 pm | Permalink
     

    thanks for the tutorial.:D

    Reply

    Sure thing, be sure to check out more of our Tutorials and features.

    Reply

  2. Grace Said: Comment by Grace on September 17, 2009 at 12:47 pm | Permalink
     

    Wauw….nice…love it.

    Reply

  3. jean philippe gousse » Blog Archive » 40 Quality Photoshop UI Design Tutorials Said: Pingback by jean philippe gousse » Blog Archive » 40 Quality Photoshop UI Design Tutorials on October 29, 2009 at 4:00 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  4. Free » Blog Archive » 40 Quality Photoshop UI Design Tutorials – 348th Edition Said: Pingback by Free » Blog Archive » 40 Quality Photoshop UI Design Tutorials – 348th Edition on October 29, 2009 at 8:49 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  5. 40 Quality Photoshop UI Design Tutorials « Tech7.Net Said: Pingback by 40 Quality Photoshop UI Design Tutorials « Tech7.Net on October 30, 2009 at 8:48 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  6. 40 Quality Photoshop UI Design Tutorials « Web Design Blog Said: Pingback by 40 Quality Photoshop UI Design Tutorials « Web Design Blog on October 31, 2009 at 5:19 am | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  7. 40 Quality Photoshop UI Design Tutorials - Tutorial Pro Said: Pingback by 40 Quality Photoshop UI Design Tutorials - Tutorial Pro on November 9, 2009 at 9:32 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  8. 40 Quality Photoshop UI Design Tutorials | Graphic Design Pro Said: Pingback by 40 Quality Photoshop UI Design Tutorials | Graphic Design Pro on November 9, 2009 at 11:49 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  9. 40 Quality Photoshop UI Design Tutorials | Said: Pingback by 40 Quality Photoshop UI Design Tutorials | on February 3, 2010 at 11:13 pm | Permalink
     

    [...] 18. Create a Mac Style Interface Button in Photoshop [...]

  10. Adam Horwitz Said: Comment by Adam Horwitz on March 22, 2011 at 2:51 pm | Permalink
     

    I was looking for some buttons for my blog and I stumbled upon your page.Thanks for this tutorial it will come very in handy but i don’t know if I can create it easily with photoshop cs5

    Reply

 

Leave a Comment