Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > GUI Customization > Those Plastic Buttons...

Those Plastic Buttons...
Thread Tools
Holigen
Mac Elite
Join Date: Dec 2003
Location: In Your Computer
Status: Offline
Reply With Quote
Dec 24, 2003, 03:31 PM
 
Does anyone here know how to make those plastic buttons seen in Safari, Finder, etc.
     
WICKEDfour
Forum Regular
Join Date: Oct 2002
Location: Wisconsin, USA
Status: Offline
Reply With Quote
Dec 24, 2003, 04:53 PM
 
Yes, I can show you how if you have Photoshop, but I have to go right now. Private Message me if you want.

Themer | Metroid 2002 Supporter | Switchboard Operator | A Special K | Professional Lurker
     
Holigen  (op)
Mac Elite
Join Date: Dec 2003
Location: In Your Computer
Status: Offline
Reply With Quote
Dec 24, 2003, 09:08 PM
 
Thanks, I PMed you
     
WICKEDfour
Forum Regular
Join Date: Oct 2002
Location: Wisconsin, USA
Status: Offline
Reply With Quote
Dec 28, 2003, 11:18 AM
 
Okay, here's how you do em:

Make a new rounded rectangle shape. The corner radius should be between 4 and 8 pixels if you're working on screen resolution, obviously bigger if you're working in print resolution. Litter that sucker with guides:

Make sure that you have guide snapping on:

Don't forget this, though:
make a selection of twice as wide as your rectangle's corner radius was, snap the left edge or right edge of the selection to first the left edge guide and then the right edge guide, respectively, and make another (2) guideline(s) from the opposite vertical edge of the selection:


Now, on to the swirl path.

Switch to the Paths tool:

Mak sure that the Paths tool is in "paths" mode, not "shape layer" mode:


Start by creating a point at the intersection of the guides you placed on the left edge and the bottom edge. However, once you place the point, don't let go of the mouse button; instead, drag upward until the diamond revealed by the drag lines up exactly with the intersection point of the left edge guide and the middle horizontal guide:

Here, the order in which the points should be created is shown. Boxes and arrows indicate where you should curve the path by dragging in the corresponding direction. The first point and the fourth point are the only ones that require this; the other points can be made by simply clicking. Don't forget to close your path after point 5 by clicking on the first point you made.

Now that we have the swirl path, let's make some Aqua!

Select the area of your rounded rectangle shape by Control-clicking on its "layer thumbnail" (not the vector path to the right of it). Next, switch to the Paths tab, located in the same palette as the layers and channels tabs. In order to get the correct selection for the swirl area, you must intersect its selection with the rounded rectangle's selection; do this by holding the Command key, the Option key, and the Shift key (yes, all at the same time ) and click on the path thumbnail of your "work shape". You should get a selection that looks like this:

Switch back to the Layers tab. Create a new layer. Switch to the gradient tool, change the gradient to "Foreground to Transparent", the second preset in the list, as seen in the Options bar at the top of your screen. Press D and then X to reset your foreground and background colors and switch them, making white the foreground color. Drag the gradient tool from the top edge guide to the bottom edge guide. Deselect.

Now, the bottom gradient...
Reselect the rounded rectangle. Switch back to the Paths tab. This time, hold the Command and Option keys only and click on the path thumbnail. You should get this:

Switch back to the Layers tab and make another new layer. Select the Gradient tool again, using the same settings as before. Drag the gradient from the bottom edge guide to the horizontal middle guide. Deselect. The bottom gradient looks best if you change its blending mode; I usually use Overlay. Switch blending modes by selecting the bottom gradient layer and choosing overlay from the drop-down menu at the top of the Layers palette:


Okay, that's pretty much it. Mess around with Bevel and Emboss settings and Strokes and you're good to go:

Themer | Metroid 2002 Supporter | Switchboard Operator | A Special K | Professional Lurker
     
Lord Sith
Dedicated MacNNer
Join Date: Oct 2003
Status: Offline
Reply With Quote
Dec 28, 2003, 12:26 PM
 
Thank You for the Illustrated tutorial, Wickedfour.

I am sure many will appreciate this.

     
Bilemshious
Fresh-Faced Recruit
Join Date: Sep 2003
Status: Offline
Reply With Quote
Dec 30, 2003, 09:04 PM
 
how do you get it blue then? sorry im trying to teach myself photoshop . . . i thought i was getting good at it until i couldn't figure this out . . .
     
rhythmicmoose
Mac Enthusiast
Join Date: Sep 2003
Location: Pittsburgh, PA
Status: Offline
Reply With Quote
Dec 30, 2003, 11:12 PM
 
Dang Wicked. You're my hero for the day.
     
WICKEDfour
Forum Regular
Join Date: Oct 2002
Location: Wisconsin, USA
Status: Offline
Reply With Quote
Dec 30, 2003, 11:41 PM
 
Originally posted by Bilemshious:
how do you get it blue then? sorry im trying to teach myself photoshop . . . i thought i was getting good at it until i couldn't figure this out . . .
Don't worry, it's not that hard. By default, any new shape you make will be the foreground color:

In this case, my foreground color is black. The mini swatches in the lower left will reset your colors to black and white; the arrows in the upper right will swap your foreground and background colors.

To change an existing shape layer's color, simply double-click on the color shown in its layer thumbnail (not to be confused with its vector mask thumbnail, to the right of it):


Hey, and don't sweat it. The only way I know Photoshop so "well" is from experimenting around. It's the only way to go. Just try to learn all you can from people; don't hesitate to ask.

Themer | Metroid 2002 Supporter | Switchboard Operator | A Special K | Professional Lurker
     
Bilemshious
Fresh-Faced Recruit
Join Date: Sep 2003
Status: Offline
Reply With Quote
Dec 31, 2003, 03:48 PM
 
thanks for the help - it was as obvious as i thought it would be. i still can't make it as nice as you have made it, but i guess that takes a bit of practice as well. . .
     
benguru
Fresh-Faced Recruit
Join Date: May 2002
Status: Offline
Reply With Quote
Jan 2, 2004, 04:56 PM
 
Hi,
I was looking at the tutorial. It looks like it won't work with the GIMP so does anyone know how to make those types of buttons with the GIMP? Thanks.
-Benguru
     
Holigen  (op)
Mac Elite
Join Date: Dec 2003
Location: In Your Computer
Status: Offline
Reply With Quote
Jan 2, 2004, 06:56 PM
 
Thanks Wicked. There were apparently a lot of us that benefitted from your tutorial. Keep up the great work.
     
WICKEDfour
Forum Regular
Join Date: Oct 2002
Location: Wisconsin, USA
Status: Offline
Reply With Quote
Jan 3, 2004, 01:29 AM
 
Originally posted by benguru:
Hi,
I was looking at the tutorial. It looks like it won't work with the GIMP so does anyone know how to make those types of buttons with the GIMP? Thanks.
-Benguru
I wouldn't be able to tell you exactly (because I don't have GIMP), but I believe that GIMP has a Paths feature as well. I think its button icon should look like Photoshop's Paths icon.

Themer | Metroid 2002 Supporter | Switchboard Operator | A Special K | Professional Lurker
     
   
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 10:52 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,