evolucao Design

[Atualizado]

Vamos criar um botão no estilo “WEB 2.0″ (conhecidos como “Glossy Buttons”, ou sismplismente “Botões de Vidro”) com reflexo, usando o GIMP. É um processo bem simples e de poucos passos. Ao final do tuto nós teremos um botão igual ao abaixo:

Gostou né?

Então vamos logo ao trabalho!

1 – Crie uma nova imagem (dãã) de fundo branco e com um tamanho razoavel. Minha sugestão é 500 x 500 pixels.

2 – Crie uma nova camada, e com a ferramenta de seleção retangular desenhe um retangulo de 200 x 70 pixels (Na barra de status aparece o tamanho de sua seleção). Nas propriedades da seleção (janela caixa de ferramentas – A da esquerda) marque a opção cantos arredondados e defina o raio para 15.

3 – Use dois tons de uma mesma cor, um mais escuro e outro mais claro. Eu usei a cor de primeiro-plano: #3377AD e a cor de segundo-plano: #6EACDC.

4 – Clque em Editar > Preencher com cor de frente ou use a ferramenta de preenchimento para (obviamente) preencher a seleção.

5 – Crie uma nova camada (Menu Camada > Nova Camada), e clique na seleção com o botão direito do mouse. Feito isso, escolha a opção Seleção > Encolher… Marque 1px e certifique-se que a opção “encolher a partir da borda” está ativada.

6 – Selecione a ferramenta mistura e clique no rotão para inverter o gradiente.

> Vamos criar um gradiente que começa no fundo do botão e vai até exatamente o meio do mesmo.

> Para saber onde é a metade do botão é fácil, basta observar a barra de status da janela de imagem enquanto arrasta a ferramenta (para criar o gradiente) e parar quando estiver marcando -34 – O botão tem 70px de altura, então sua metade é 35, mas tem 1px de descondo por conta daquela diminuição no tamanho da seleção. Total: 34 :)

Seu botão agora está assim: (Se não estiver faça novamente)

7 – Crie uma nova camada (não acredito que você ainda não sabe fazer isso…) e crie uma seleção retangular na metade mais escura do botão. Os cantos devem ser arredondados novamente, e com mesmo valor de raio (15)

8 – Mude a cor-de-frente para branco (ffffff). Selecione a ferramenta mistrura (blend) e mude o gradiente para “FG-Para-Transparente”. Agora crie o gradiente do topo até o fundo da seleção.

9 – Certifique-se que a última camada está ativa, desmarque a seleção atual (Select > None | Selecionar > Nada) e altere a opacidade da camada para 75%.

10 – Crie mais uma camada (sem reclamar heim!), selecione a ferramenta pincel (pencil), escolha uma espessura agradável (5px) e faça uma linha branca da mesma altura do reflexo.

Para fazer uma linha exata basta ir com o ponteiro no local próximo onde vc quer iniciar a linha e apertar a tecla SHIFT -> Irá aparecer uma linha-guia onde você só precisa posicionar o ponteiro onde deseja terminar a linha (sem soltar o SHIFT) e dar um clique para criá-la.

ATENÇÃO: esta linha deve estar numa camada única, sozinha, para que o próximo efeito tenha sucesso.

11 – Aplique um efeito de desfoque galgasiano (gausian blur) com 12px de raio na camada onde está a linha que acabou de ser criada.

> Beleza! agora seu botão está assim (ou parecido):

12 – Agora selecione a primeira camada (a que está mais abaixo) e aplique uma sobra através do menu Fitros > Sombra e Luz > Sombra Projetada. Coloque os valores como indicado abaixo.

> Agora o botão está assim:

13 – Coloque um texto usando a formatação de sua preferência, ou use as configurações abaixo (será criada uma camada para o texto automáticamente).

> Vamos iniciar agora a criação do reflexo.

14 – Combine todas as camadas, menos a camada de fundo (que deve estar nomeada como fundo ou background). A forma mais prática de fazê-lo é tornar a camada de fundo invisível (clica no olho ao lado), clicar com o botão direito do mouse em qualquer outra camada e escolher a opção “Combinar Camadas Visíveis”

15 – Torne o Plano-de-fundo visível novamente e faça uma cópia da camada onde está o botão.

16 – Vamos agora começa o espelhamento da imagem, e para isso nada melhor do que a ferramenta ESPELHAMENTO :-). Selecione a camada cópia, selecione a ferramenta espelhamento e configure-a para espelhamento vertical. Feito isso basta dar um clique na imagem para a mesma inverter-se criando o efeito.

17 – Use a ferramena de movimento para acertar o posicionamento da figura. A cópia deve estar com sua borda sobrepondo a borda inferior da figura original, dando impressão de ser uma só borda.

18 – Crie uma máscara de camada. A função de uma máscara é controlar a opacidade dos pixels da camada individualmente. isso significa que você poderia, por exemplo, aplicar diferentes opacidades em áreas deparadas de uma mesma camada.

19 – Configure a cor-de-frente (primeiro plano) para preto (#000000), selecione a ferramenta mistura (blend) e marque a opção “frente para transparente” e aplique na imageminiciando o degradê no fundo da imagem espelhada e indo até o meio da imagem original.

> Experimente outros pontos de início e término do degrdê para ver (e manter se quiser) a diferença que faz no efeito. Mas não se esqueça de deesfazer o efeito (Ctrl + Z) antes de aplicar novamente.

20 – Reduza a opacidade da camada “espelhada”para 75%. O resultado que obterá é parecido com esse:

E assim temos nosso botão estilizado. Gostou? :-)

Segue um exemplo de botão. está na extensão .xcf – nativo do GIMP.

Antes de salvar/exportar para usar em seu site, veja essa dica:

> Use a ferramenta de corte para eliminar a área branca em excesso.

> Se vai aplicar a imagem em um site cujo fundo não é branco, mude a cor do plano-de-fundo (camada funco, a primeira) para a cor de destino. Para isso basta usar a ferramenta preenchimento e não ter nehuma seleção ativa.

> Você pode também eliminar a camada de fundo (branca) e salvar a imagem na extensão .PNG – Assim sua imagem ficará com o fundo transparente.

Então é isso. Espero ter sido útil novamente. :)