In this tutorial we are going to re-create those fancy buttons that are used on Mac OSX.
Step 1: Create a new document of any size in Photoshop.
Step 2: Create a new layer by pressing Ctrl+J. Name this layer ‘Layer 1′. Select Rectangular Marquee Tool and make a square selection as I’ve done here:
Step 3: Go to Select->Modify->Smooth with a setting of 30 pixels:
Step 4: Set your foreground color to: #373fa4 and your background color to: #8dddf8
Step 5: Now select a Gradient Tool(G), and set it up with a foreground, to background gradient as I’ve done here:
Now fill in your selection with a dark to light gradient as I’ve done here:
Do not deselect the selection.
Step 6: Double click this layer, and apply the following blending options:
Do not deselect the selection.
Step 7: Create a new layer, by pressing CTRL+ SHIFT + N on your keyboard.
Your selection should still be active, if not hold down the CTRL Key on your keyboard, and click the layer named “Layer 1″.
Select Rectangular Marquee Tool. Now while holding down the ALT key on your keyboard deselect the bottom half of our selection as l’ve done here:
Step 8: Set your foreground color to white (#FFFFFF), select Gradient Tool(G) and set your gradient style to “foreground to transparent”:
Step 9: Now fill in this selection with our gradient, with a white to transparent, like I’ve done here:
Press CTRL + D on your keyboard to deselect the selection.
Step 10: Next press CTRL + T on your keyboard to get out the free transform tool.
Here’s how your screen should look:
Step 11: Now hold down the SHIFT + CTRL + ALT keys on your keyboard, place your cursor near the node (small square) in the bottom left corner of the box and drag it slightly inward as l’ve done here:
Press ENTER on your keyboard to finalize the transformation, result:
Step 12: Now press the V key on your keyboard to get out the move tool. and tap the DOWN ARROW on your keyboard once, to nudge the gloss down one pixel, result:
Step 13: Drop the opacity of this layer down to 80 percent as I’ve done here:
This should lighten it up, just a little bit.
Step 14: The only thing left to do is add some text. I select the 36pt Verdana, with the SHARP setting:
Here’s my final result:
Thank You!
Incoming search terms:
- Mac OS X button
- create button mac photoshop
- create mac os button
- glossy buttons photoshop
- mac shiney buttons
Pingback: how to create MAC OSX Buttons for website using photoshop … | PhotoShopped
Pingback: how to create MAC OSX Buttons for website using photoshop … | PhotoShopped
That's great guide for Photoshop.
Thanks for sharing…
I like your post. Your blog is fantastic.
Great article, many thanks! enjoyed reading
thanks!tab seems good
I found myself regurgitating what you said in your 1 and 2 points while answering the three questions. =) I’ll be brief instead
Another good post. I always enjoy reading your material.
excellent writing about decorating, it is actually useful for me. keep writing and happy blogging.
hello, thank you for this latest information. Therefore, I would like to ask for your permission to add some of this information in my blog. Of course, I will provide a link to your website, as a source of my mentioned information.
Of Course my friend.. You can do it. Thanks for view that post & your time.. Take care!
Lots of usefull information and inspiration, both of which we all need, thanks for this.
Ho..That’s right, got it
Completely puzzled that they wouldn’t expose a setting like that to the user though.Most people like smooth scrolling, I think. It’s a difficult balance to put enough options in preferences without overloading the user. Maybe they need a tab in the preferences that exposes the advanced options in the opera:config. (like with utorrent) So disabling smooth scrolling worked around the problem gnolaum was describing?
Please tell me it worked right? I dont want to sumit it again if i do not have to! Either the blog glitced out or i am an idiot, the second option doesnt surprise me lol. thanks for a great blog!
Hi there can I reference some of the material here in this blog if I provide a link back to your site?
Make an impact on You did a truly excellent task on this issue.
Spitze Design hat dieser Blog. Woher hast du die Vorlage ? War bestimmt sehr teuer.
Epic site I’m so glad I stumbled here through my friend’s blog, Going to need to add this one to the blogroll.
Excellent article, I will take note. Many thanks for the story!
Well played. Thanks for the post.
Web Development has always been a passion of mine. I’m always trying to learn more and get better. Thanks.
Thanks for creating this great informational resource.
I really learned a lot. I appreciate the effort put into this site and will visit here more often. Thank You!
One of the greatest websites I have come across for important info in this particular niche market. I’ll often be looking back regularly for brand-new posts.
thanks a lot for beginning this thread
Thanks for a great post on my all-time favorite game. I am just insane about World of Warcraft and have been playing it ever since it burst on the scene. You just know that I just bookmarked your blog and subscribed to your feed.
I like your blog so much
Greetings, I like your website. This is a cool site and I wanted to post a note to let you know, good job! Thanks
I can imagine the hard work it must have been required to research for this post.All what i can say is just keep Publishing such post we all love it.And just to bring something to your notice,I have seen several blog providng your blog as source for this information.
Hello! cagedbb interesting cagedbb site!
I hope you have a great day! Very good article, well written and very thought out. I am looking forward to reading more of your posts in the future.
You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post.
Hey – nice blog, just looking around some blogs, seems a pretty nice platform you are using. I’m currently using WordPress for a few of my sites but looking to change one of them over to a platform similar to yours as a trial run. Anything in particular you would recommend about it?
Yo sweet web there. keep it going.I seriously like to read your postI was searching for how to write a novel, and found your website.
I really love going back to your site to read your story and see more pictures that are really taken with great care. . . . . .
Well, this is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a marvellous job!
Seriously though, you can easily make that image from scratch on PS, so I wouldn’t count it as a “photo”
Thanks for taking the time to share this, I feel strongly about it and love reading more on this topic. If possible, as you gain knowledge, would you mind updating your blog with more information? It is extremely helpful for me.
Hello, my group is just establishing our first website, searching and working out what is needed. This blog stuck out right away. I’m fired up about this, and adore the design of your site. Are you able to let me know what “theme” it is?
This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.
Great Blog! I have a similar site, and get a lot of spam. Do you face such problems? Can you please recommend some steps I take to combat spam. Thanks.
Guys, Great article and very very interesting blog. That’s one thing I’m really looking forward. Looking forward to reading more from you next week.
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading.
Superb write-up, thx regarding the posting. are you gonna be submitting more reviews just like it?
Pingback: how to create glossy buttons for website using photoshop « digcms
Great story over again. Thanks a lot:)
Thanks for posting. Good to see that not everyone is using RSS feeds to build their blogs