Jump to content
NEurope
ReZourceman

How To Make The Shiny New "Vista/Mac" Buttons Look?

Recommended Posts

You know what I mean right?

 

That shiny, almost translucent glass look, that looks so funky and hip on all the new Vista stuff and Macs etc. How do you do that on Photoshop?

 

If anyone wants something to do on Photoshop hows abouts this;

 

 

Make a hip and cool looking top banner for my site Rule 3

 

GreenSythexXXX.jpg

 

Needs that logo and font.

 

And the menu icons at the top ;

 

HOME.jpg Etc.... Into shiny Vista-like buttons. All green.

 

 

Help on how to make this look, or any submissions of actual artwork for me are UBER UBER greatly appreciated dudes. Ill preach you to the high wind if you do the latter.

Share this post


Link to post
Share on other sites

Yes....But for some reason those dont look as good. Thanks Ill give it a go though!

Share this post


Link to post
Share on other sites
Yes....But for some reason those dont look as good. Thanks Ill give it a go though!

 

Yeah, I was thinking the same.

 

Theres a few good tutorials knocking around on deviant art though.

Share this post


Link to post
Share on other sites

The glass effect eh? I could tell you that it involves a gradient, a bit of inner glow, a masked white layer made transparent over half of the image... but that's not very detailed. What I think I'll do is PM GCTonyHawk7, because I've noticed that he loves that style and uses it a lot. I'm sure he'd love to show off his expertise!

 

(If he refuses to help out, I'll tell you the way I do it in a bit more detail).

Share this post


Link to post
Share on other sites

No problem. I just had a look at the "home" button you posted, and here's one I made in the style I think you're talking about:

 

homebuttonnr3.png

Share this post


Link to post
Share on other sites
No problem. I just had a look at the "home" button you posted, and here's one I made in the style I think you're talking about:

 

homebuttonnr3.png

 

*Insert generic "holy/Angel appearance" sound*

 

Niiiiiiiice. That is looking good.

Share this post


Link to post
Share on other sites

Dang that looks awesome too. I am more after the first ones style (Slightly shinier), but they are both what I meant.

 

*Is now upset as cannot do them* Lol. TEACH MEZZZ!!!!

Share this post


Link to post
Share on other sites

I made some adjustments. Here are 2 slightly different ones. Wich do you thinks look better?

 

rzbut2fl1.gif

 

And here is a simplified version of the process. I assume you have some photoshop skills, or else... heh heh.

 

 

First make a simple form.

butex1xg7.gif

 

Then apply a layer of paint. Going from darker at the top, to lighter at the bottom.

butex2hy0.gif

 

Just apply a shiney somewhere near the top and youre done.

butex3cd6.gif

 

This is the simple version. If there is anything just ask. It will be easier to help when I know what you know you know?

Share this post


Link to post
Share on other sites

1-genuineapple.jpg

 

First you make a circle with a gradient going from darker to lighter (bottom to top), then you make a stroke with a gradient black/white in 45° - don't make it to thick, but it adds up to the effect. Make a new layer and select a smaller circle (about three quarters of the size) and place it on top in the middle of your circle. Then make a circle-gradient from white to transparant. It will look like a genuine Apple button.

 

2-GenuineVista.jpg

 

If you want to get the windows taskbar look just make a gradient with the following details: Dark color (on location 0), lighter color (location 50), a much lighter color (loçcation 51) and then the lightest color (location 100). Now just use this gradient and it will look 'about' genuine Vista-taskbar.

Share this post


Link to post
Share on other sites

I realise my previous effort was not too great. So after a few modifications I came up with this. I think I have nailed it this time. Any feedback please?

 

exbuttoneg7.jpg

Share this post


Link to post
Share on other sites

Nice glassy thingy, but I don't really like the text ^

 

The button's ok for what you're going for, but is that just arial and a 2px stroke? Sorry but it looks too in-yo-face.

 

I would've done it more like this (I used your button as the basis, just changed the text xD)

 

subshome2zr7.png

 

but thats just me

Share this post


Link to post
Share on other sites

You know you could be very rightly. Your text does look great. It looks more connected to the button.

 

Yes, its just Arial with a 2px layer. I was trying to copy the Everybody Votes buttons. They look great I think. Maybe if I had went with a green inner text color it would look better.

Share this post


Link to post
Share on other sites

If I were you, I'de overlay the text in white on your button, it will be better. Right now, you're making the text hard to read because it's part of the button. If I were you, I'de check some buttons and zoom ,in on them with PhotoShop to check the exact build of them. Then you'll notice loads of things and see how easy they are.

Share this post


Link to post
Share on other sites
If I were you, I'de overlay the text in white on your button, it will be better. Right now, you're making the text hard to read because it's part of the button. If I were you, I'de check some buttons and zoom ,in on them with PhotoShop to check the exact build of them. Then you'll notice loads of things and see how easy they are.

 

Good idea. I will try that. But for now...

 

The sex:

 

exglasspb8.jpgexglass2yy1.jpg

Share this post


Link to post
Share on other sites

×