Preserved Topic: Translucent buttons @ www.apple.com (Page 1 of 1)

hi doc luv your work! Anyways I just wanted to ask if anyone out there knows how to get the light gel texture effect that Apple.com uses to create their navigation bar on the top of their page? help is much appreciated!<P>------------------

Somebody else asked that question on Doc Ozone's old forum and I believe most of us were under the impression that it was generated with a 3D program.

Actually, the original question was about the colored buttons on the iMac page. The nav-bar on the main page looks a lot less complex, mostly need to work with gradients and a good mask for that top highlight I would think....I think I'm gonna give it a try see if I have any success.<P>------------------

Here's what I came up with...
http://www.groovyart.8m.com/gallery <P>click on the link that's called 'GELL PILL'<p>[This message has been edited by Bruce (edited 25-04-2000).]

I just finished this tutorial, and it will be posted at http://www.screamdesign.com I have also created an action to create the buttons for you that should be up as well.
If you would like to see any other tutorials let me know.
Thanks
D v 8
<P>------------------

Have a play with KPT5's Shapeshifter.<P>The results are stunning.<P>------------------

Hey all<P>
Here is a link to the "iMac button" action that I created to go along with the tutorial that I built that should be up soon... http://www.screamdesign.com/graphics/photoshop/actions/misc.html <P>I hope you all likes, and find use for it.
D v 8<P>------------------

I really think that the lickable buttons on the Apple site and in MacOS X were created in Photoshop or something similar. I look at these magnificent gems and know that someone is seriously kicking ass! I really like the Scream Design button...but it isn't as nice as the stuff from Apple. <P>Doc, any ideas how these nifty things were created?<P>zensmile

Hi everyone!! Haven't been here in a long while...I'm down to my last finals...on Monday! Thanks for your comments on my attempt at emulating Apple.com's iMac buttons...i'll definitely do a tut' on that after my exam...in the meantime...here's a tribute to Doc's awe-inspiring graphic site! <P> <IMG SRC="http://members.dencity.com/Jello3/iozone.jpg"> <P>Basically I just changed the color and text from my last attempt...should get around to messin' around with it more...ciao!<p>[This message has been edited by JCube (edited 15-04-2000).]

I found an excellent tutorial in Photoshop 5 WEB Magic. Published by NewRiders. I put a slightly modified version up on Gel.html. I highly recommend buying the book, or any of the series. This one, as the title suggests, focuses on Photoshop 5.0.<P><A HREF = "http://www.geocities.com/umyf775/tedgel.jpg" Traget=_Blank>Here is a button:</a> <IMG SRC="http://www.geocities.com/umyf775/tedgel.jpg"> It looks better in Photshop, I didn't have time to optomize it.<P>
<p>[This message has been edited by Ted (edited 17-04-2000).]

I've finally managed to put up a step by step for what I think comes pretty close to the Apple effect. Go visit http://people.ne.mediaone.net/s-nelson/steve/Photoshop/PlasticTabs/PlasticTabs.html and tell me what you think. Apple has done such a great job making the interface both beautiful and effective - I'm really impressed by how simple and smart it is.

I tried this and it looks cool, but I'm having a hard time making the clear ones. I can't get them to look right. I did some blue ones and green ones, but the clear is a little tougher. If you look at my test page at http://www.runningwolf.com/runningwolf4.com/index2.htm you'll see that the clear ones don't look right, but the mouseover and onclick ones look ok. Ideas?
<p>[This message has been edited by Pugzly (edited 21-04-2000).]

alex dg has a tutorial on his site to make exacly that buttons =) (i think)
http://www.alexdg.com/tuts/macbutton/macbutton.php3 <P>there go check it out

Pugsly - I think you hve it. Did you change it from when you first posted the question? I looked at it yesterday afternoon and it was only the row along the top with a white background. This morning, when I have time to respond, it's against a gray field, has a little bar under 'em and has a bunch more color variations under it. I was going to sugguest using a background other than white to help the "clear" ones, but you did it. I thnk it looks nice. Two things: saved as JPEGS your type gets a little mushy and you can't define transparency so there's that annoying white at top. Save as GIF with the background you want to eliminate defined as transparent.

Thanks, Steve. I noticed the text as being a little mushy. I did seem to get them a little nicer looking as I played around with them a bit. I'll re-save them as .gifs and see how they look. I REALY like how the gold, blue, and red ones came out. I think if the clear ones were a little lighter they might look better...<P>Thanks for the comments all!<P><P>Pat Richard
Web weenie

When I compare "theirs" with yours (and, btw, a direct copy isn't necessarily the best - you want to make it "yours", right?) the main differences seem to be that "theirs" is stroked with a dark gray, not black, and the graduation is much less abrupt - meaning it goes from dark (top) to light (bottom) much more gradually. Net effect is the whole button DOES appear lighter (which translates into more clear).
They also save bandwidth by not having multiple button states. They don't need to: by coloring the glass bar under the buttons and by coloring the tab representing the active page you never have to wonder where you are in the site. JavaScript rollovers are way cool, they make you feel good when you get 'em to work, but you gotta always debate effectiveness vs. performance.<p>[This message has been edited by Steve (edited 23-04-2000).]

Very nice pugz.
I agree with steve that don't necessarily want a direct copy - needs your own personality in it to make it work.
<P>What care I how time advances? I am drinking Ale today. -- Edgar Allen Poe

Wow,
everyone seems to have created some amazing work from this topic. Pugs, just a little addition to your excellent buttons, as we are here to continue comments.. It seems as the buttons' text is 'floating' a little higher than the button front face. What I may have come up with is to make the text have a little less of a drop shadow.
Check out my rollover implementation at www.rihani.com www.rihani.com
this is an unfinished site (notice the space hloders) but what website is *ever* finished?
Great Work EveryonE!
-Fares

Re: http://www.rihani.com <P>I think the dark shadow around your buttons on mouseover is to dark on top of the buttons. This tends to make them look unreal to me. <p>[This message has been edited by Boudga (edited 24-04-2000).]

Thanks Frihani - I'll kill off most of that drop shadow and see if that helps. I made the HOME button a little lighter and I like the effects much more. While I did try to copy the Apple buttons as much as possible, it was merely for a class in highlights and other effects. Being Photoshop "challenged" and all...... <IMG SRC="http://www.ozones.com/forum/smile.gif"><P>I appreciate everyone's comments. They really help!<P>Pat Richard
Web weenie

Hey Boudga,
you're right. It seems that leaving the black shadow layer at 100% opacity is too much.
I tried a little variation on the right most button with the logo, tell me what you think.
here are both versions.
(original) <IMG SRC="http://www.rihani.com/images/btn_logo.gif">

(v1) <IMG SRC="http://www.rihani.com/images/btn_logo_hi.gif">
(v2) <IMG SRC="http://www.rihani.com/images/btn_logo_hi_noshad.gif">
v2 has less of a shadow<P>To see the rollover effect http://www.rihani.com but i feel like the 'on' image layer is misaligned. Also the speed at which the images switch is rather slow.<P>Pugz, I am impressed with the buttons you created along with the "bar" type interface. I especially like the color variations (and the mousedown image). you don't seem photoshop 'challenged' whatsoever. the "home" button is a great interpretation of the apple style.<P>Has anyone tried to create these buttons with a 3d model? what about the gel pill style buttons found on the iMac pages? (click on iStore, then the iMac image)
- Fares<p>[This message has been edited by frihani (edited 24-04-2000).]

I don't think the "pill" buttons are nearly as effective as the tabs, but if you poke around the layers in this tutorial you'll have most of the tools you need: http://www.brianjones.com/tutorials.asp?topic=1

I like the pill buttons quite a bit personally. The tab interface is cool, but it'd be kinda cheesy to use it directly anyway. All I would do to change the pill buttons setup (at rihani.com) is to make them kinda of curve down the side of the page rather than line up straigh and perpendicular. The mouseover effect is nice, with the extra highlights and all.<P>What care I how time advances? I am drinking Ale today. -- Edgar Allen Poe

Frihani, the black shadow around the buttons seems to dark still...it overpowers the button. Try using a drop shadow that is perhaps in the color range (darker and/or lighter) than the button. For instance a dark green shadow for 'off' and a light green shadow for the 'over' effect denoting a sense of luminescence...

Here's what I came up with...
http://www.groovyart.8m.com/gallery <P>Click on the link that's called 'GELL PILL'

Wow. Where have I been? These are some of the most awesome, lickable buttons I've seen in quite some time. No comments other than that, where to start? Kudos all around.<P>
Your pal, -doc-<P>----- Doctor Thaddeus Ozone --------- "Specialization is for insects"---