How To? Apple Mac OS X Jellies / Translucent Aqua Buttons

[bacarr]

There's a Photoshop tutorial at http://www.wardspring.com/aqua_buttons/ but I don't have Photoshop. All I have is Xara X, and besides that I'm not very talented. Has anybody figured out how to duplicate this effect in Xara?

[bacarr]

There's a Photoshop tutorial at http://www.wardspring.com/aqua_buttons/ but I don't have Photoshop. All I have is Xara X, and besides that I'm not very talented. Has anybody figured out how to duplicate this effect in Xara?

[gwpriester]

Old expression, make the hard ones look easy and the easy ones look hard. [img]/infopop/emoticons/icon_biggrin.gif[/img]

(This was one of the easy ones). This is not to take away from the overall gel effect, however, which IMHO is quite sensational.

Gary

Gary Priester

Moderator Person

Be It Every So Humble...

[tonylondon]

I tried previously and failed.. thanks Gary. In the original there was a slight colouring in the centre of the shadow caused by the light shining through the button. Could you add that too?
Tony

[Ross Macintosh]

Nice straight forward method Gary. Maybe Apple's secret "tool" as mentioned on the wardspring.com site is a PC with Xara X! - They would have to keep that a secret.

I point out that Xara's named colours could come in really handy with this technique. In the step with the three-colour fill, it would be very practical to have the middle colour as a named colour with the darkest colour a shade of that named colour. By doing so you'd only have to edit one named colour to create a new gel button. (I suggest using the mid-colour as the named colour because that one represents the main colour of the button).

Regards, Ross "recovered mac-addict" Macintosh

<a href=http://www.designstop.com/>DesignStop.Com</a>

[lucx]

Here's a fairly close representation of the Aqua buttons. They use Named colors, so they should be easy to change (exept for the light blue which I couldn't link to the dark blue). I'm no expert with linked strectching and couldn't get it working properly, maybe someone else could give it a try.

[Ross Macintosh]

I downloaded your file and had a close look. The shadow on the text is a nice touch!

I was playing with editing your main named colour and noticed you have a pale blue shape in the "pill" that isn't linked to the other named colours. I made it a named colour which is an almost white shade of the main colour. Now the pill can be quickly edited to any colour. I've attached some examples that use Alex W's original.

Regards, Ross

<a href=http://www.designstop.com/>DesignStop.Com</a>

[gwpriester]

Changing the shadow color to the button color enhances the illusion of transparency.

To create the colored shadow, I made a bitmap from the 3-color rounded rectangle, and used SL Blur, Ladislav Seridi's free gaussian blur utility (in the XaraXone Shareware page) added a blur, pasted the shape over the background, and added flat stained glass transparency. I also brought the highlight in front of the text to add more realism.

Gary

Gary Priester

Moderator Person

Be It Every So Humble...

[Ross Macintosh]

Gary - the coloured shadow does indeed help give that glassy gel look. The highlight on top makes sense too. Did you notice the shape of the highlight on the wardspring.com version? I wonder if it it would help. I suppose the fellow at wardspring.com had a mac to look at when he made his. He was likely trying to replicate the Apple look exactly.

Oh! - and do you suppose Apple copyrighted the design of these buttons??? (I'm sure they probably tried if only to keep them from making their way onto Bill's Windows2002).

Regards, Ross

<a href=http://www.designstop.com/>DesignStop.Com</a>

[Christine Farrelly]

Hi Gary,

Just curious why you would go to the trouble of creating a bitmap for the shadow instead of just colouring a Xara shadow?

Christine