Design Up
Ola Visitante, Seja bem vindo ao DesignUp, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades.

Vale tambem ressaltar que durante seu acesso caso vc veja algum assunto sem nexo algum não se preucupe, é que alguns de nossos conteudos são exclusivos para membros, entao não perca tempo, cadastre-se e tenha acesso completo ao forum.

Att. Rafael Ribeiro
Equipe DesignUp
Escolha o tema
  

Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Últimos assuntos
Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Top dos mais postadores
Antunes Marcelo™ (2685)
 
Rafael Ribeiro (1442)
 
bru5no (1407)
 
San (978)
 
abandonei rs' (213)
 
Banned+ (143)
 
michellgomes (138)
 
Micheel (132)
 
Kotoquinho (125)
 
Dexter (87)
 

Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Parceiros
Fórum grátis


iZiTech
Contador de Visitas
contador free
Facebook

[TUTO] ..: Botão com efeito metálico :..

Ir em baixo

[TUTO] ..: Botão com efeito metálico :..

Mensagem por Antunes Marcelo™ em Qui Ago 05, 2010 1:28 pm

::Objetivo::

Mostrar uma técnica de construção de efeito metálico em um botão retangular para link.

::Visão antecipada::

Este tutorial mostra uma técnica para se obter o efeito metálico em um botão, conforme esta

VISÃO ANTECIPADA (abre em outra janela).

::A forma inicial::

Para este tutorial construiremos um botão com dimensões iguais a 180 x 35px. Mas, é claro, você adota as dimensões de acordo com suas necessidades.

Desenhe um retângulo de 180 x 35px com as bordas arredondadas. Ajuste o parâmetro de arredondamento para 44, a cor de preenchimento #FFFFFF (branca) e a cor da borda #999999 (cinza), conforme mostrado na figura a seguir:




::Aplicando gradiente::

Nosso primeiro efeito será a aplicação de um gradiente vertical conforme mostrado abaixo. Ajuste oa parâmentros do gradiente para:

Preenchimento: gradiente linear;
Cores de preenchimento: superior #FFFFFF (branca), no meio #999999 (cinca médio) embaixo #CCCCCC (cinza claro).
Nota: Por default só aparecem as duas extremidades para escolha de cor. Para o preenchimento no meio você cria o triangulozinho de preenchimento clicando na posição que você deseja que ele apareça. Você pode inserir quantos pontos de preenchimento quiser;
Ajustes a alça de preenchimento conforme mostrado na figura ou seja na vertical com a bolinha embaixo e o quadradinho em cima. Para aparecer a alça basta clicar a ferramenta "seta preta" na forma e para diminuir a alça clique e arraste o quadradinho;



1-) Desenhe um retângulo (sem os cantos arredondados) um pouco menor que o retângulo que já foi desenhado. Eu adotei as dimensões de 165 x 22px (menor que nosso retângulo inicial de 180 x 35px).

Aplique os seguinte efeitos neste novo retângulo:

Gradiente linear vertical com os seguintes cores:
#CCCCCC - #999999 - #CCCCCC.




Filters » Shadow and Glow » Inner Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #666666 - 63% - 3 - 315°.
Filters » Shadow and Glow » Drop Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #333333 - 65% - 1 - 180°.
Filters » Shadow and Glow » Drop Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #333333 - 65% - 3 - 90°.
2-) Depois de aplicado estes efeitos você obterá um retângulo semelhante ao mostrado abaixo:



3-) A seguir construa outro retângulo menor que este que você acabou de construir, na cor #FFFFFF (branca) com largura um pouco menor (eu adotei as dinesões de 160 x 12px) e com metade da altura daquele retângulo. Aplique uma opacidade de 25% e coloque dentro do retângulo construido anteriormente. Veja figura abaixo:



4 -E para finalizar coloque esta última construção dentro do retângulo com cantos arredondados construido inicialmente. Ver figura abaixo:



::Aplicando o texto no botão::

O botão está pronto. Agora só nos resta acresentar o texto. Você poderá obter os mais diversos efeitos no texto. Mostrarei um destes efeitos, mas você é livre para aplicar o que sua imaginação criar.

Adotei para o texto a fonte Arial Black, tamanho 17, na cor #FFFFFF (branca) e apliquei o efeito: Filters » Inner Bevel com os seguintes parâmetros:
Flat - 2 - 40% - 3 - 135°. - Inset.

E você obterá o botão pronto:



::Variações em outras cores::

E abaixo botões em outras cores construidos com esta técnica

avatar
Antunes Marcelo™
Administrador
Administrador

Gémeos
Mensagens : 2685
Pontos : 4815
Agradecimentos : 244
Data de inscrição : 19/07/2010
Idade : 27
Localização : Caldas Novas - GO

Outras Informações
Ocorrencias:
10/10  (10/10)

Ver perfil do usuário http://www.pwcentral.com.br

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum