Você também pode fazer o seu botão "tão bonito que dá vontade de lamber"

Atendendo a muitos - mas muitos, mesmo - pedidos dos nossos leitores, estamos dando o tutorial mais requisitado do milênio: como fazer um botão no estilo Aqua. Apesar de superfácil, não é uma coisa óbvia, e achamos por bem repartir a explicação do processo com todos os macmaníacos.
Ah... Em tempo: usar um visual com botões Aqua no seu site não vai colocar você na lista negra do departamento jurídico da Apple, mas se você empolgar e começar a usar também o logo da maçã, não nos responsabilizamos...

O passo-a-passo

O efeito Aqua em botões, na verdade, é bem mais simples do que parece ser, principalmente se você conhece razoavelmente um programa de manipulação de imagem, como o Adobe Photoshop. O botão é uma combinação de três gradientes controlados com muito cuidado dentro de máscaras transparentes e efeitos de camadas. Dito assim, fica ainda mais fácil. Ou não. De toda forma, sigamos. Vamos usar o famoso formato "pílula" para o botão. Se você tentar aplicar o efeito em objetos com cantos afiados, como textos, é melhor aplicar o efeito Noise > Median para arredondar um pouco os cantos. Mas isso já é assunto para outro tutorial futuro.

1. Crie um documento novo com as seguintes especificações: 550x250 pixels (pode ser menor do que isso, mas tamanhos grandes facilitam o controle do efeito), modo RGB e fundo Transparent.
   
   
   
   
   
   
   
   
2. Selecione a ferramenta Paintbrush (tecla [B]), clique na aba Brushes e escolha um brush sólido. Usamos um brush circular de 100 pixels, com Hardness 100 e Spacing 10.
   Clique e arraste para o outro lado da janela com a tecla [Shift] apertada. Isso criará um belo botão-pílula.
   
   
   
   
   
   
   
   
3. Agora que temos a forma, vamos à cor. Geralmente, azul funciona bem para deixar o botão com aquele jeitão "aquoso" default, mas você pode testar outras cores. O botão será preenchido com um degradê entre dois tons derivados da mesma cor, um escuro no Foreground e outro mais claro no Background. Para reproduzir as cores "oficiais", usamos as seguintes combinações no seletor de cores (valores sempre em RGB): Foreground, 90-145-200; Background, 0- 50-125.
   
   
   
   
   
   
   
   
4. Clique com [Command] no nome do layer na palete Layers para selecionar a silhueta do botão e aplique o degradê usando a ferramenta Gradient (tecla [G]), desde o pé até o topo (do botão e não do layer), com a tecla [Shift] apertada para que o efeito fique alinhado com a vertical.
   
   
   
   
   
   
   
   
5. Com a seleção do contorno do botão ainda ativa, peça Select > Modify > Contract. Para o tamanho do nosso botão, um valor adequado é 6. Agora, dê Select > Save Selection e depois OK. Você criou um canal alfa (máscara) que por enquanto ficará repousando.
   
   
   
   
   
   
   
   
6. É hora de criar o efeito de brilho superior do botão. Com a seleção ainda ativa, pegue a ferramenta de seleção Rectangular Marquee (tecla [M]) e arraste com [Option] pressionado, de baixo para cima, até interceptar os dois terços inferiores do botão. Somente a parte de cima restará selecionada. Agora, crie um novo layer (clique no documentinho no pé da palete Layers). Selecione novamente a ferramenta Gradient e ajuste-a para Foreground to Transparent. Mude a cor de Foreground para branco e aplique o degradê desde o topo da seleção até um pouco abaixo do seu pé, quase no centro do botão.
   Desfaça a seleção e dê o filtro Filter > Noise > Median duas vezes: uma com raio 6 e outra com raio 3. Isso serve para arredondar e suavizar os cantos do brilho, adicionando uma sutileza fina que o Steve Jobs certamente aprovaria. Para um efeito ainda mais perfeito, mude o controle Opacity desse layer para 80%.
   
   
   
   
   
   
   
   
7. Vá à palete Channels e clique na máscara salva (Alpha 1). Ela aparecerá na tela como uma figura preta sobre fundo branco. Dê um Filter > Blur > Gaussian Blur com o valor 8. Em seguida, mude para a ferramenta de seleção (seta) e pressione a tecla [seta para baixo] algumas vezes para mover o canal inteiro para baixo - no nosso exemplo, 6 pixels bastam.
   
   
   
   
   
   
   
   
8. Clique com [Command] no nome do canal; aparecerá uma seleção. Na palete Layers, crie um layer novo. Em seguida, clique com [Command][Shift][Option] no nome do layer que contém o botão. Isso cria uma intersecção entre o layer e a seleção, evitando que ela escape para fora do botão.
   
   
   
   
   
   
   
   
9. Mude a cor de Foreground para 150-220-255. É uma versão mais clara, mas de matiz diferente, da cor azul usada no resto do botão. Ainda com a ferramenta Gradient regulada em Foreground to Transparent, arraste do pé até o topo da seleção. Desfaça a seleção ([Command][D]).
   
   
   
   
   
   
   
   
10. Agora, crie o fundo para o botão. Na maioria das vezes, o fundo deverá ser branco. Então, crie um layer novo e arraste-o na lista de layers para baixo de todos os outros. Agora, prepare-se para mágica em alta velocidade: tecle [D] (zera as cores do seletor) e a seguir [Command] [Delete] (preenche o layer inteiro com branco).
    
    
    
    
    
    
    
    
11. A sombra é parte integrante do botão Aqua. É preciso criar um Layer Effect para isso. No Photoshop 6, duplo-clique no nome do layer do botão na palete Layers; no Photoshop 5, clique nele com [Control] para chamar o menu contextual e selecione Effects. Uma vez dentro da caixa de controle, peça o efeito Drop Shadow, com os seguintes parâmetros: modo Multiply, Opacity 100%, Angle 90º, Distance 15, Spread (Intensity) 0 e Size (Blur) 20.
    A cor da sombra pode ser cinza escura, mas se a idéia for copiar à risca o botão azul da Apple, a cor certa é 110-130-150.
    
    
    
    
    
    
    
    
12. Chegou a hora de colocar o texto. Escreva-o exatamente centrado no botão e na cor preta. Para ter exatamente o mesmo visual da Apple, utilize a fonte Lucida Grande (no Mac OS X) ou Lucida Sans (no sistema clássico). Usamos o tamanho de 64 pixels.
    
    
    
    
    
    
    
    
13. O texto leva uma pequena sombra. Para poupar trabalho, use o menu contextual e dê Copy Layer Style no layer com sombra e Paste Layer Style no layer de texto. Abra a caixa de estilo e modifique os parâmetros para Opacity 60%, Distance 10 e Size (Blur) 10.
    
    
    
    
    
    
    
    
14. Bem, o botão está pronto. Basta colocá-lo na sua página e receber os elogios da galera. Mas não desligue agora! Você ainda pode criar mais um efeito simples, que vai deixar seu botão ainda mais "transparente" e interessante. Crie um novo layer por cima de tudo, preenchido com branco e no modo Multiply. Selecione a Line Tool ([U]). (No Photoshop 6, deixe-a no modo Create Filled Region, que é o terceiro botão na barra de opções da ferramenta.) Usamos espessura de 4 pixels e cor 200-200-200. Trace uma linha horizontal que atravesse a área de um lado a outro.
    Selecione-a com a Marquee e atraste-a para baixo com [Command][Option][Shift] pressionados, o que criará uma cópia da linha imediatamente abaixo. Repita a cópia cuidadosamente, mantendo a mesma distância de uma linha para a outra. Dica: quando formar um grupo de quatro linhas, selecione-o e copie-o, depois selecione as oito e copie-as, selecione as 16 e copie-as etc.
    
    
    
    
    
    
    
    
15. Dê Filter > Blur > Gaussian Blur para borrar um pouco as linhas (usamos 2,5 pixels). Mova o layer das linhas para a frente do botão, mas por trás dos brilhos. Delete o canal alfa antes de exportar o botão.
    
    
    
    
    
    
    
    
    
    
    
    

Pronto!

Sérgio Miranda
Colaborou Mario AV