[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:
Botão Finalizado
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.
Seleção retangular e arredondada
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.
Enclhendo a seleção
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 :)
Efeito degradê na metade inferior do botão
Seu botão agora está assim: (Se não estiver faça novamente)
Botão quase pronto
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)
Seleção com bordas arredondadas
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.
Aplicação do degradê para criar o reflexo
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%.
Efeito de reflexo criado
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.
Linha inferior criada
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.
Linha com desfoque
> Beleza! agora seu botão está assim (ou parecido):
Agora falta pouco
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.
Aplicando sombra
> Agora o botão está assim:
Que lindo!
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).
Adicionando texto no botão.
> 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”
Combinando camadas
15 – Torne o Plano-de-fundo visível novamente e faça uma cópia da camada onde está o botão.
Duplicando camada
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.
Espelhamento - Usando a ferramenta
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.
Posição correta das imagens
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.
Aplicando máscara de 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.
Acabamentos no efeito de reflexo.
> 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:
Finalizando o efeito de reflexo.
E assim temos nosso botão estilizado. Gostou? :-)
Segue um exemplo de botão. está na extensão .xcf – nativo do GIMP.
Gerador de CaptCha em PHP (233)
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. :)
Comentários são bem-vindos!
Adorei o tutorial, principalmente seu bom humor.
Gimp oferece muito recursos profissionais e seu tutorial
demonstra isso.
Parabéns. Show de bola!
Hum certinho ! deu certo aqui parabens ai! abraços!
Olá marcus mto feraa seu tutorial curti pra caramba fico show d bola… porem tem 1 coisa q nao consegui fazer… cmo salva a imagem sem as bordazinhas brancas? so o botao msm? pq ja tentei tudo e nao consegui pq os cantos sao arredondados e nao tem ferramenta de cortar com os cantos arredondados… da um help ai..abras!
Olá Samuel, basta que você crie um novo arquivo com fundo transparente ao invés de fundo branco, e depois exportar este arquivo como gif ou png que são os que trabalham com fundo transparente. :0)
Vale lembrar que o IE6 e alguns dispositivos móveis não reconhecem transparência, então o ideal mesmo seria vc pintar o fundo branco na cor do local onde o botão será colocado. :-)
D+, muito bom seu tutorial!!!
Olá Eduardo, para ter variações deste botão (inclusive de formato) basta ir aplicando suas próprias preferências durante a execução. Por exemplo: No passo 2 informa um tamanho e duas cores para fazer o degradê, você poderia usar qualquer outra cor e tamnaho.:)
Quando a salvar somente o botão, acho que vc se refere ao espaço branco que sobra né? se for isso, usa a ferramenta de corte (crop).
Qualquer dúvida é só falar. :)
ola amigo, esse botão que disponibiliza consigo fazer alterações, tais como: redimensionar o tamanho do botão, trocar cor????
Não estou conseguindo salvar somente o botão para ser inserido no site poderia dar outra dica??
abraços
Testei , e deu certo … Parabéns pelo tutorial
Cara, muito bom mesmo!
Aprendi muita coisa. Obrigado1
muito bom!,nunca pensei nesse efeito com dois reflexos sempre usava aquele que é um degradê de cima para baixo,botão muito bem feito!
Obrigado!
Cara você realmente está de parabéns, a riqueza de detalhes é impressionante.
Cara eu não consegui fazer os passos, a imagem simplesmente fica diferente porque aparece uma cor verde junto com o desenho do botão, acredito que o fundo foi informado errado, até o passo 10 eu consegui fazer mesmo com a cor verde aparecendo, depois não consegui aplicar o filtro desfoque galgasiano.
Dá pra me mandar o projeto pronto para eu dar uma olhada ?
Grato.
No que se refere a cor você está certo, era pra ser um azul-claro e fosco. Estou seguindo o tutorial para ver se tem mais algum erro e logo que acabar colocarei o arquivo para download. :)
parabens pelo otimo trabalaho consigui fazer direitinho
e nao posoo deixar de parabenizar pela diversidadeque tem o seu site
adorei tudo assecibilidade te de tudo que um iniciante prescisa forea a versatilidade .deixo meus elogios sinceros ….
É isso que me motiva a escrever mais e mais; o reconhecimento :)
Fico muito feliz e grato pelos elogios. :-)