How do you do the AQUA? 1

[Sina]

HELLO,
A question for YOU the professional.
Please take a look at the link below at apple's web site.
I like to learn how to do the button Aqua. could you please point me to some kind of tutorial where I could do this kind of button.
Perhaps you could write a small tutorial and post it.
It would be very very kind of you.

http://www.apple.com/macosx/technologies/aqua.html

Thanks Much
Sina
dariush@sympatico.ca

 

[hohriver]

I looked at the button 'Aqua', and although I believe I could approximate its design, I could not say with certainty how 'they' created it.

I would go about it like this: using the tools in ULead PhotoImpact 6.0, I would first create the general shape.
Then apply "Glass" as property under the Materials palette;
within Glass I would choose the overall aquatone coloration and set the transparency.

Returning to edit/screen view, I would try to adjust the lighting so that the bottom portion is brighter, simulating what they have done. This would be close to the same result, but what would remain different is the way the right and left hand sides of the button have a gradually narrowing darker hue, as if this was airbrushed on in a seperate layer in Photoshop or....similar application. I'm not sure how to emulate that piece.

If you are attracted to the transparency and 'glasslike' quality, then you should explore ULead's PhotoImpact 6.0.
There is no other relatively inexpensive graphics software out there that I know of that provides so many tools, filters, and effects to obtain this kind of digital artwork.

I know this doesn't exactly answer your question, but I did take a shot at it. I have to tell you that I don't think that this work was done in Illustrator, or at least not entirely done in Illustrator.

Good luck with your designs!

 

[Sina]

HI hohriver
Thanks so much for taking the time and responding to my msg.
Now, I'm no pro at graphics but been working with adobe for some time now. Just came accros the paintshop pro and also took you suggestion and installed Photomedia. Now since you know much more, which one of these tools would be best for web graphics?
Things like buttons and so navigation bars and so?
Again thanks for your time.
Now would it be possible to ask you to fill in the gaps of your step by step (creation of the Aqua) button, since after spending about 3 hours I'm still not able to find some of the tools to create the aqua. It comes some what close but not as good as the Mac site.
I know this is too much too ask but just if you perhaps could create it your self and just outline your step. I think then I would also post your tutorial on web and give you full credit.
Thanks
Dariush
Dariush@sympatico.ca

 

[hohriver]

I have just discovered your follow-up response and it's late in the workday and I'm about to leave, otherwise I would take a shot at the Aqua button replica.
I'm a little confused by something you mentioned, though: you use the reference 'Photomedia', and I had recommended
ULead PhotoImpact. I don't know 'Photomedia', but it sounds as if it could be another distinct third-party software product? Is that the case?

As for the part of your question about which software would be easier to build buttons or nav bars for web use, PhotoImpact or PaintShopPro: in my book there's no contest.
PhotoImpact is the easy winner.

I will try to find time to send you a version of the button. But if you do have PhotoImpact, you could fairly easily create your own button in even less time. In fact, I'm confident you could produce something superior to the Aqua button you like.

I was thinking about how the designer achieved the 'whitened' area at the bottom of the button, and the uneven airbrush-like gradient hues on either side....and then I remembered the gradient mesh tool in Illustrator 9.0.
The latest version of Photoshop has an equivalent gradient mesh tool, as well, and this may have played a role at some step in the development of this button. As with any design process, you may find that you need to pursue your 'concept' by leaping back and forth between various software applications. Let me know how it goes?

 

[Sina]

Hi hohriver,

You know what I can not thank you enough about taking the time to reply.
So THANK YOU.
As for the photomedia, that was my mistake. I'm using the photoimpact.
Also with respect to your opinion I will concentrate on the photoimpact.
And now as for Aqua I will try it again with your tutorial above and go step by step and see what happens.

But you know hohriver, if you could do it also and out line your step, that would be excellent ( I know everyone is pressed for time, so only if you have some time). I found some tutorials on the web but all of them I think miss a step here and there and that does not produce the results as Mac has it. Also when and if you do it, please also include a text inside the button.
So thanks so much and If there is perhaps anything I could do for you as help let me know.
I'm a web developer with and work mainly with php and mysql on linux.

Thanks and have a good day.

Dariush
Dariush@sympatico.ca

 

[Sina]

'Hi hohriver,

You know what I can not thank you enough about taking the time to reply.
So THANK YOU.
As for the photomedia, that was my mistake. I''m using the photoimpact.
Also with respect to your opinion I will concentrate on the photoimpact.
And now as for Aqua I will try it again with your tutorial above and go step by step and see what happens.

But you know hohriver, if you could do it also and out line your step, that would be excellent ( I know everyone is pressed for time, so only if you have some time). I found some tutorials on the web but all of them I think miss a step here and there and that does not produce the results as Mac has it. Also when and if you do it, please also include a text inside the button.
So thanks so much and If there is perhaps anything I could do for you as help let me know.
I''m a web developer with and work mainly with php and mysql on linux.

Thanks and have a good day.

Dariush

 

[GeorgeMack]

This is not a simple process. The button itself owes a lot to the technologies in Mac OS X, so I don't think it was (or could be) directly "created" in a drawing program. But you might be able to simulate it in Illustrator 9 using the transparencies and layer modes:

1. Draw a button shape, fill with color. Use soft gradients to round the button form, set with some transparency and layer modes for translucency.
2. Since translucency is involved, put a background on a layer below. Rasterize it for future steps (optional at this stage).
3. Above these layers, type some text, with transparency about 75% to keep the button translucent.
4. Duplicate the text layer, lower it and rasterize it as a layer. Gaussian blur to soften shadow. Set transparency to less than 100 (about 40%?) and Multiply into bottom layer (background)
5. Copy the button shape, fill with black, rasterize, Gaussian blur, and set to less than 100% transparency. Move layer above other bitmap layers and multiply.
6. Merge the two shadow layers, and background if you don't need to change it.

Once again, this won't be exact, because the "Quartz technology" of OS X isn't in there. And you won't be able to place this over a background and have live shadow effects. But you could put this over a matching background (at 100%) and have a good impression.

Some third-party plug-ins (KPT or Extensis, for example) might speed up the process of modeling the button and setting appropriate gradients. And you might, if you prefer, build the soft shadows with gradients as well, but the overlay aspect could be a bit more complicated.

 

[Cullen]

Hi there everyone! Here's a link to a tutorial for this very effect/look.

http://www.designer.com/focus/articles/glassy/glassy_1.htm

Its done using CorelDRAW but the steps pretty much the same for doing this in Illustrator.

Hope this helps.

Cullen Cox
cullenc3@aol.com
Graphic Artist/Web Designer.