nice metal/chrome button technique needed

[jhewer]

hi

i'm in the middle of designing my website and i will have some buttons, rectangular with a bit of one corner cut off (size approx 90 * 30 pixels) and i want a really nice shiny metal/chrome effect.

there are so many shiny chrome effects around, i wondered if anyoen could recommend me any good ones/ones that woudl work well for the size/shape of button i am creating

cheers
jon

[jhewer]

by the way i dont want the button to look too round, i woudl prefer something like if i applied a bevel of a few pixels with more of a sharp rather than smooth edge.....if that makes sense?

[Lethal.Weapon]

Hi...

Try this tutorial
Click Here (http://www.eyesondesign.net/pshop/plastic_button/button1.htm)

Hope it works out for ya

Lethal

[theGuest]

Here... i just did this to help someone on my board: The PSG Forum :: View topic - I'd like to make some buttons... (http://www.photoshopgurus.info/forum/viewtopic.php?t=3497)

Hope it helps. :&

[jonbalza]

This looked way to fun for me not to try...

http://www.balzasteel.com/temp/metal.jpg

(My apologies to Greg for the background... ;} ) Well, the trick I found was using the group functionality on the Layers Palette. In order to do that, Alt-Click on the line between the two layers you want to group. Then, when you apply a layer style to the layer below, it effect the layer above it. (I love layer styles, btw...)

http://www.balzasteel.com/temp/grouping.gif

You can see what one of the I made consists of with the graphic below. The layers are, in order:

- Reflection image, made using basically the same method as Sir Marks tutorial above. (Without the spherize, though.)
- The text, with a "bevel and emboss" and "drop shadow" layer style applied.
- The darker "insert" layer with a fill of about 30 percent.
- The same reflection image as above, only grouped with the base layer this time...
- The base shape, created with the rectangle shape tool, then I cut off a corner by adding 2 anchor points, and deleting the corner anchor point. This layer had a style applied to it with a "gradient", a "bevel and emboss" and a "dropshadow".

The background is a whole other mini tutorial. If you really want to know about the styles, I'll give you more information.

Hope that helped.

edit: to group layers, you should "Alt-Click", not "Ctrl-Click".

[theGuest]

Jesus! You'd think i came in here and replied with MY EYES CLOSED! Sheeesh! #0

Sorry about that! My bad! 8(

My effectis of a chrome button but i thought (for some insane reason!) that you WANTED it ROUND. DOH! $}

Good examples guys. Nice job too Jon.

[madster]

This is a combination of both tutorials, but I didn't have a picture worth a damn, so I used the "Chrome" gradient standard with PS. For the button gradient, I adapted the "Silver" gradient by removing one of the white stripes.

[jhewer]

wow, sir mark your chrome effect is amazing!!!!!! and i like both of the adaptations by jonbalza and madster too.

i'm gonna give this a go shortly and post what i come up with

cheers

[jhewer]

hi

sir mark - had a go at your tut but i failed, i must have missed something as there was nothing chrome like about it.......lol....i'll have another go later

jonbalza - woudl u mind showing me ur buttons without the dark inner part

[jonbalza]

Ok, here they are. I don't like these as much without the middle, part actually. Oh well. :6

http://www.balzasteel.com/temp/metal2.jpg

[Magikman]

Nice thread guys.

Jhewer, please post what you come up with.

[jhewer]

thanks for doing that for me jonbalza, but i agree its not as nice

sir mark - as i had trouble getting ur tut for the circular chrome button to work (i never seem to follow tutorials very well), i dont suppose you would mind adapting the tutorial for a rectangular button would you. i love the outcome its just i cant seem to get it to work well for a rectangular button

cheers

[Lethal.Weapon]

Jon -

I'd like to know more on how you did those chrome buttons.

Lethal

[jhewer]

hey

sorry i haven't posted here for a little while i have been away

now i am back and after the weekend gonna try to make some nice chrome buttons

sir mark - just wondering if you coudl try to make an adaption of your circular chrome button technique for rectangular buttons, that woudl be really helpful. i was thinking if the buttons were sort of like a cylinder on their side, that would look cool?

thanks

[theGuest]

You mean like this?

[jhewer]

wow thats great - just the effect i'm after........wanna tell me how to do it please?

cheers

ps. if you wouldn't mind could you also tell me how i would change the button to make it look as if it has been pressed, not making the button curve inwards, but having the button dropped down a bit within my main menu body, if that makes sense

thanks for all you help :)))

[theGuest]

Ya sure... very simple actually.

Make a rectangular selection the size of your button.

Fill it with a "multi-level" gradient. PS has some default ones called "Metallic". Mine is custom made.

Dupe the layer and move the duped layer below the original. Then stretch the duped one to be longer. Then squash it to be thinner.

The beveled edges you see are made from white lines set to Exclusion/Difference/Overlay/Softlight/or Color Dodge blend modes. Then mode you choose is dependant on the effect you want.

The text area is simply another rectangle filled with a basic black-to-white gradient, then balanced using levels to lighten the black and darken the white. Use the grey point (middle) slider to do this.

Add your type and you're good-to-go. %/

To create the illusion of being depressed, you answered your own question. Simply create a 2nd copy of the button but with everything shifted down 1-2 pixels. You can also highlight the button text for the depressed copy, just to accentuate the effect.

[jhewer]

so really its just a gradient right?

i loaded the metal gradients in PS but they dont seem very good. also, how come ur gradient have a redish tint on the left and a blue and yellow tint on the right, as that makes the gradient effect look much better

thanks

[theGuest]

Well as i said, my gradient is a custom one. But it's based off of the multi-level "metallic" ones PS has.

Oh ya sorry... i forgot about the colour/reflections. That's just a photo that's been blurred a lot and set to Screen mode. I selected all of the button shape layers and then Inversed the selection, the Deleted the excess. Try other blend modes too there are a few other good ones. Depending on the exact look ya want.

[jonbalza]

Nice work Mark, good job on the tutorial.

Originally posted by Lethal.Weapon
Jon -

I'd like to know more on how you did those chrome buttons.

Lethal

Just so you know, Lethal, I haven't forgotten about you. I'm working on putting a tutorial for it up on my website. (And improving them a little bit.

[Lethal.Weapon]

Excellent! That looks like something off a classic car from the 50's/60's with chrome styling... I can't wait for the tutorial to be finished.

Lethal

[theGuest]

Thx Jon.

And btw i meant to tell you i like the design of your initial buttons. They look very suitable for an interface. Simple & effective. Just what the doctor ordered. }$

[Lethal.Weapon]

Hey Jon - Hows the tutorial going? Havent heard from you in a while. No rush, just lookin for an update. :)

Lethal

[Lethal.Weapon]

bump ^^^^^

[jonbalza]

I'm working on it. It's on my tasks list of things to do, but I have been very busy as of late.

[Lethal.Weapon]

OK thx

[jonbalza]

Hey Lethal, I finally got the tutorial done. Sorry it took me so darn long. Hope you like it, and let me know if you have any questions, or if you see any spelling errors, etc...

Building a chrome button (http://www.balzasteel.com/tutorials/chrbutton.htm)