ctrl+h [alt+h]ctrl+a [alt+a]ctrl+f [alt+f]ctrl+m [alt+m]ctrl+x [alt+x]ctrl+t [alt+t]
Site Web
Mac-e-Dúvida
Na "hora do show", qual produto se destacou?
iPod
iTunes
iTV
Filmes na iTMS
iPeroba
MP.Parcerias
Seja Atípico
Seja Atípico
MP.Giro
Atualizado em:
19/12/2007 10:35:17

Informação na Velocidade da Maçã Quinta, 27 de novembro de 2008

Terra, Planeta Aqua Print E-mail
12 Dez 2004, por Richard Sgobin

Dentre as grandes inovações do OS X, eu me arrisco em dizer que a que causou maior impacto não se refere às mudanças no núcleo do sistema, mudanças no sistema de arquivos, ampla compatibilidade com outros dispositivos, ou qualquer outra coisa relacionada à programação. Se pensarmos no efeito provocado no maior número de pessoas, sem dúvida, a mais "importante" inovação chama-se Aqua, termo do latim para água.

E mesmo dentro de toda a interface Aqua, o que mais chamou atenção foi um dos efeitos empregados em partes da interface, é o efeito que acabou ficando conhecido como aqua, acqua (variação italiana da palavra), gel, aqua-gel, dentre outros nomes. A verdade é que esse efeito que dá certa fluidez e luminosidade quando aplicado de forma correta. Virou febre, principalmente entre os designers da web. Quantas vezes você já viu esse efeito em barras de navegação, botões, etc. Além de suas variações "plastic" em ícones, avatares, logotipos...

Por isso, esse efeito é obrigatório no seu portfolio. Mas não basta fazê-lo, é importante fazer bem feito. Se você "googar" atrás de um tutorial sobre esse efeito, vai encontrar dezenas de maneiras, algumas simples, outras muito complexas, algumas com um bom visual, outras horríveis. Entretanto, uma das maneiras de se criar esse efeito parece ser a mais indicada, por alguns motivos:

  • É a maneira que alguns designers famosos utilizam;
  • É simples e tem uma ótima aparência;
  • Por ser armazenada para se usar novamente.

Para criar esse efeito, vamos utilizar a versão 8 do Photoshop, mas como eu vou citar os princípios desse efeito, você poderá utilizar outras ferramentas, como o Fireworks, ou outras versões do Photoshop.

Criando os Vetores

Crie um novo documento com cerca de 400 x 400 e uma resolução maior que a padrão do sistema. Mesmo que você queira fazer apenas um botão para a web, aprenda o efeito usando uma figura grande e com boa resolução. Dessa forma você poderá observar cada variação. Como eu fiz esse tutorial para a web e as imagens foram redimensionadas para formatar a página, o efeito pode parecer um pouco diferente do que a idéia original, por isso é fundamental que você acompanhe os passos recriando-os no seu mac, para perceber as nuances de alguns efeitos.

Utilizando as ferramentas de edição vetorial do Photshop, crie um vetor parecido com o da imagem abaixo, ou qualquer outro que você queria. Mas lembre-se que o efeito aqua, como o nome diz, é um efeito "líquido", por isso utilize cantos bem arredondados. Na barra de opções selecione Shape Layers e depois faça a primeira forma. Desse jeito a forma será usada como uma máscara em uma nova camada.

Observe que cada forma deve ficar em sua própria camada para que possamos variar a cor e outras características do efeito. Verifique se a sua paleta Layers está como a abaixo:

Agora torne ativa a camada com o vetor maior clicando sobre ela na paleta Layers. Selecione View > Actual Pixels e tire a seleção da forma clicando sobre o quadrado da direita na paleta Layers.

A Cor do Efeito

Com a camada selecionada, vamos escolher a cor para o efeito. Para isso vamos usar um layer effect. Dessa forma você poderá reutilizar o efeito e alterar a cor como desejar.

  1. Na paleta Layers clique em Add Layer Style > Gradient Overlay;
  2. Na caixa de diálogo clique na barra do Gradient para mostrar suas opções;
  3. Agora dê um duplo clique no color spot do lado esquedo e selecione um azul escuro. Depois faço o mesmo com o color spot direito e escolha um azul claro.

O gradiente deve ser bem visível, com tonalidades de azul distantes. Você pode usar a cor que você desejar, mas lembre-se de manter essa característica do gradiente.

Outro detalhe importante é que o gradiente deve ter a tonalidade mais escura na parte superior e a mais clara na inferior. Verifique se está assim na janela de preview e se não estiver corrija alterando o ângulo para – ou + 90. Também é importante que se use 90º de ângulo.

Embora neste efeito imaginemos uma luz vindo de cima, vamos colocar a parte "escura" do gradiente na parte superior. Esse gradiente é dado pela refração da luz no líquido (alguém se lembra da Lei de Snell?).

A sua figura deve estar parecida com a abaixo:

Inner Shadow

Agora vamos começar a dar uma aparência 3d à figura. Para isso:

  1. Clique em Inner Shadow. Se você fechou a caixa de diálogo então clique em Add Layer Style na paleta Layers e escolha Inner Shadow;
  2. Agora defina o ângulo da luminosidade para 90º. Durante todo o processo, vamos posicionar a luz sempre vinda do mesmo lugar, certifique-se que Use Global Light esteja selecionada;
  3. Altere a opacidade para algo entre 60-65%.
  4. Vamos agora "mover" a sombra para a porção mais externa e aumentar os detalhes na parte interior. Coloque a janela um pouco ao lado para que você possa visualizar a figura original e observar as mudanças. Os próximos valores vão depender da resolução e do tamanho da sua imagem.

  5. Em Distance utilize algo próximo de 10 px;
  6. Em Size use um valor entre 10 – 12 px, para suavizar a transição.

Até agora você talvez não consiga visualizar o aqua, é bem provável que não. O Inner Shadow sozinho dá um efeito de profundidade, em outras palavras, "tá parecendo um buraco"! Keep the faith.

Drop Shadow

Com esse efeito, além de alterarmos a aparência do inner shadow, vamos adicionar a percepção de uma superfície.

Clique em Drop Shadow.

  1. Verifique o ângulo e certifique-se que ele esteja a 90º;
  2. Note que agora o Inner Shadow não se parece mais como um buraco, mas como uma refração;
  3. Defina a opacidade entre 60-65%;
  4. Distance entre 10-12px e Size entre 8-10px. Lembre-se que esses valores dependem da sua imagem.

Outer Glow

A água mantém uma certa forma sobre as superfícies por causa da tensão superficial, que tende a manter as moléculas unidas. É aquela brincadeira da aula de ciência de encher um copo com água e ir colocando moedas até que a água fique mais alta que a borda do copo... Para definir os contornos do líquido sobre a superfície:

  1. Clique em Outer Glow;
  2. Defina a cor como Preto;
  3. Como Blend Mode escolha Multiply;
  4. Selecione uma Opacidade entre 65-70%;
  5. E em Size escolha um valor entre 5-10px.

Agora vamos fazer o aqua aparecer...

Bevel and Emboss

Clique em Bevel and Emboss e pronto! Ai está o aqua. Muitos param por aqui, mas eu aprendi pela web e em tutoriais de alguns designers conhecidos que ainda existem alguns truques bem interessantes para melhorar o efeito.

  1. Em Style, certifique-se que Inner Bevel está selecionado;
  2. Em Technique escolha Smooth;
  3. Em Altitude altere o valor para 75. Alguns dizem que o segredo do Aqua da Apple está aqui;
  4. Em Highlight Mode escolha Screen e altere a opacidade para 100%;
  5. Em Shadow Mode altere a opacidade para 0% para retirar a sombra da parte inferior.

Em alguns casos você também pode querer usar o Contour para delimitar mais a forma. Experimente e veja o que você prefere. Nesse caso eu não utilizei. Algumas das diretrizes para utilizar o Contour é ativar o Anti-aliasing e usar uma opacidade em torno de 80%.

Para finalizar

E aí está o aqua.

Agora que o efeito está pronto, que tal guardá-lo para usar sempre que você precisar? É ai que está a praticidade do efeito. Como ele foi criado utilizando-se apenas efeitos de camadas, você pode adicioná-lo a sua biblioteca de estilos. Simplesmente clique sobre a camada na paleta Layers e arraste a camada para a paleta Styles. O Photoshop vai solicitar um nome e salvar.

Agora para ver como é simples de ser usado, escolha a camada com a segunda forma e clique sobre o efeito na paleta Styles. Magic! Você vai poder usar para qualquer outra camada. Quer outra cor? Fácil, escolha a camada, escolha o Gradiente Overlay e altere a cor do gradiente. Você ainda pode utilizar um background com certa textura e a fazer fluir pelo líquido. Como? Bem isso eu vou deixar para você fazer como lição de casa. Mas como dica eu digo que a resposta está em Bevel and Emboss... 
ClassifiMac
©2003-2009 MacPress - Todos os direitos reservados.
Logotipos e marcas exibidos neste site são propriedade de seus detentores legais.
As opiniões expressas em artigos, colunas e comentários são responsabilidade dos respectivos autores e podem não refletir a opinião do MacPress.
Compatível com HTML 4.01/W3C
O MacPress gera RSS compatível
Gerenciado com Mambo Open Source
Retorna à Home do MacPress