Elementos Comuns Utilizados no Design do Botão de Interface
Botões e elementos de navegação são possivelmente os objetos de interface mais usados no design de desktop e móvel. Eles puxam uma interface juntos, permitindo que os usuários passem de A para B em um único clique.
Mais importante, um botão tem que ter boa aparência. Tem que gritar “Click me!”, Ou então simplesmente não será tão eficaz quanto precisa ser. Botões são comumente usados para “” Pesquisar ”,“ Enviar ”,“ Enviar ”,“ Comprar ”e“ Carregar ”.
Neste artigo, veremos sete elementos de botão comuns no design de interface moderno: texturas, padrões, traçados tridimensionais perfeitos em 3D, planos de fundo recortados, brilhos e realces.
Você encontrará 35 exemplos fantásticos dessas técnicas, bem como um punhado de mini-tutoriais para o Photoshop.
1. Texturas
Usar textura é uma ótima maneira de adicionar profundidade aos botões e fazer com que eles se destaquem um pouco no restante da interface (e, finalmente, torná-los mais clicáveis). Abaixo estão alguns ótimos exemplos de texturas nos botões.
O ShelfLuv usa a textura em toda para adicionar dimensão à sua interface, especialmente nas áreas de botão e campo de texto.
A textura é usada em toda esta interface, mas é mais pesada na área do botão "Carregar", tornando-se um ponto focal.
A textura aqui é misturada bem com o botão chanfrado, fazendo com que pareça real.
A textura não é realmente usada neste botão de interface do usuário, mas aparece em segundo plano, permitindo que o botão se destaque.
Criando um botão texturizado
Crie um fundo simples usando a ferramenta Forma e adicionando ruído (Filtro → Ruído → Adicionar Ruído).
Selecione novamente a ferramenta Forma e desenhe um retângulo, certificando-se de que a parte superior esteja oculta na borda da tela.
Altere a cor da forma para azul. Eu usei # 00A3D9.
Duplique a camada Shape e redimensione-a na mesma posição. Mude a cor para um azul ligeiramente mais escuro.
Duplique a camada mais uma vez. Posicione a camada abaixo das duas últimas camadas Shape e altere a cor para cinza claro.
Fotografe ou baixe uma textura de papel (usei uma de Perdido e Tomado ). Vá para Arquivo → Colocar e localize o arquivo para colocá-lo no documento. Redimensione e posicione sobre suas formas azuis.
Remova qualquer excesso de textura usando a ferramenta Marquee e altere o modo de mesclagem da textura. Experimente modos diferentes porque diferentes texturas produzem resultados diferentes. Você também pode querer diminuir um pouco os níveis de opacidade.
Abra a janela Layer Style para sua forma azul mais escura e aplique o seguinte estilo Drop Shadow para adicionar uma sombra branca sutil.
Agora, aplique um Stroke à sua forma usando as configurações abaixo.
Por fim, adicione uma sombra interna à forma, para dar mais dimensão.
Adicione algum texto ao botão e pronto!
2. Padrões
Os padrões são outra ótima maneira de adicionar um pouco de interesse e profundidade aos botões da interface. Abaixo estão alguns exemplos de padrões em botões, todos sutis, mas eficazes.
Uma reflexão diagonal é usada no lado esquerdo do botão para separar o ícone do tipo.
Uma linha diagonal é usada neste botão, ajustando a aparência vintage ao adicionar dimensão ao design.
Este é o meu uso favorito de um padrão nesses exemplos. Embora não seja usado nos próprios botões, o padrão no cabeçalho cinza adiciona dimensão a todo o design e, em última análise, ajuda os botões laranja a se destacarem.
Criando um botão de faixa de opções padronizada
Depois de criar um plano de fundo texturizado usando a técnica no minitutorial anterior, desenhe um retângulo usando a ferramenta Forma e preencha-o com um azul-verde. Eu usei a cor # 008B8D.
Desenhe outra forma com a mesma altura e cor.
Usando a ferramenta Lasso, crie um triângulo, conforme mostrado abaixo. Posicione-o sobre a borda da nova forma e pressione a tecla “Delete” para remover a área que não precisamos.
Duplique a forma e vá até Edit → Transform → Flip Horizontally para fazê-la enfrentar a direção oposta.
Posicione as duas formas abaixo da forma maior, como visto abaixo.
Clique com o botão direito do mouse em uma de suas formas e abra a janela Opções de mesclagem / Estilo de camada. Aplique uma Sobreposição de Gradiente semelhante à vista abaixo. Você também pode adicionar um Drop Shadow sutil. Uma vez feito, clique com o botão direito do mouse na camada e selecione “Copy Layer Style”. Selecione a outra forma de banner. Clique com o botão direito do mouse e selecione “Colar estilo de camada”. Abra a janela Layer Style e altere o ângulo da sua Gradient Overlay de 180 ° para 0 °.
Usando a ferramenta Lasso, crie uma seleção semelhante à vista abaixo para combinar os dois cantos de nossas formas. Preencha com uma cor ainda mais escura.
Duplique a layer, vire-a horizontalmente e posicione-a no outro lado.
Crie um padrão de linha. Alternativamente, você poderia usar o que eu fiz abaixo.
Cole o padrão sobre todo o seu banner. Enquanto segura Command + Shift, clique nas miniaturas das camadas de todas as suas camadas de banner. Isto irá selecionar todos eles. Clique com o botão direito do mouse e selecione “Select Inverse”. Com sua camada de padrão de linha selecionada, pressione a tecla “Delete” para remover as áreas do padrão que você não precisa.
Altere o modo de mesclagem da camada padrão para “Multiply” para ocultar o branco da camada. Agora, reduza a opacidade para algo entre 25 e 75%. Experimente o melhor resultado.
Usando a ferramenta Forma, crie algumas linhas semelhantes às abaixo.
Remova as áreas que se encontram no fundo da imagem.
Experimente o modo de mesclagem de cada uma das suas linhas. Aqui está o resultado:
3. 3-D
Os botões tridimensionais são ótimos porque tornam os botões mais realistas. Eles são quase impossíveis de não clicar! O único inconveniente é que o efeito é bastante divertido e, portanto, não combina com todos os sites (como os corporativos). Abaixo está uma seleção de alguns adoráveis botões 3-D.
As sombras e linhas de 1 pixel destacam determinadas áreas e fazem o botão aparecer em 3-D. Isso e alguns bons efeitos CSS criariam um botão super interativo.
Nosso segundo elemento (padrões) também é usado neste design para adicionar dimensão a um botão já muito 3D.
Esse botão usa uma abordagem ligeiramente diferente, contando apenas com gradientes para sua aparência 3D.
Este conjunto mostra diferentes alturas para indicar se o botão está em estado normal, em foco ou ativo. As linhas e a textura dão aos botões uma aparência mais real.
Como alguns outros exemplos nesta seção, uma combinação de gradientes e traços faz com que esses botões pareçam 3D.
Este botão parece 3D por causa de seu design "out of the box", sendo enrolado na interface do usuário.
Criando um botão 3D
Comece desenhando uma forma com a ferramenta Retângulo, com um raio de 7 pixels. Abra a janela Layer Style e aplique uma Gradient Overlay passando de vermelho escuro a vermelho claro. Use um vermelho ainda mais claro no final da barra de gradientes para destacar o topo do que será o nosso botão 3D.
Agora aplique um golpe no botão. Altere o tipo de preenchimento para “Gradiente” para que você possa alterar a cor da parte superior e inferior do traço. Vá de uma luz a um vermelho escuro (o oposto da Sobreposição de Gradiente).
Deve parecer algo assim até agora:
Duplique a camada Forma. Deslocar a camada original para baixo por cerca de 10 pixels.
Aplique um Drop Shadow à camada original usando as configurações vistas na imagem abaixo.
Além disso, escureça a Sobreposição de degradê, tornando cada cor individual na barra de gradiente um pouco mais escura.
Você deveria ter algo parecido com isto:
Selecione a ferramenta Texto e digite alguma coisa no botão. Abra a janela Layer Style e aplique uma Gradient Overlay semelhante à vista abaixo:
Aplique uma sombra interna usando estas configurações:
Aplique um Drop Shadow usando estas configurações:
E acabamos! Você deve acabar com algo assim:
4. Pinceladas Pixel-Perfect
A arte de aperfeiçoar os pixels tornou-se parte integrante de todos os aspectos do design da interface do usuário, não apenas dos botões. Linhas de um pixel (ou traços) dão profundidade aos botões e uma aparência levemente tridimensional. Eles também fazem os botões parecerem recuados. Aqui estão alguns exemplos brilhantes disso.
Você pode ver claramente que uma linha de 1 pixel branca (sobreposta) é usada como destaque na parte superior do botão vermelho, com uma linha mais escura na parte inferior. Isso faz com que pareça um pouco em 3-D e adiciona muitos detalhes à página.
A tipografia neste botão tem uma sombra interna, fazendo com que o botão apareça como se estivesse acima da interface.
Esses botões somente CSS3 (absolutamente nenhum Photoshop) têm traçados de 1 pixel que os diferenciam do plano de fundo e aparecem recuados quando clicados.
Outro exemplo de um traço leve de 1 pixel na parte superior do botão para atuar como um destaque.
Este botão verde mostra uma abordagem ligeiramente diferente, com um brilho interno agindo como um destaque na parte superior do botão. O traço do lado de fora cria uma sombra muito fina.
Ainda outro botão que combina as técnicas acima mencionadas.
Este botão básico tem um traço fino e sombra delicada para que ele se destaque do design simples.
Este botão tem um brilho interno sutil para destacá-lo do fundo. Seu estado ativo tem uma opacidade reduzida, o que faz o truque.
Esqueça o botão: todo esse design é perfeito para pixels, com sua tipografia moderna e linhas para uma interface bonita.
Crie um botão Pixel-Perfect
Selecione a ferramenta Forma do retângulo (localizada na barra de ferramentas na parte superior do Photoshop quando a ferramenta Forma estiver selecionada) e atribua a ela um raio de canto de 5 pixels. Desenhe um retângulo preto semelhante ao abaixo.
Abra a janela Layer Style e aplique uma Gradient Overlay à forma. Eu usei um verde escuro para um verde ligeiramente mais claro.
Dê à forma um traço gradiente, indo de verde a verde sempre um pouco mais escuro.
Agora, dê à forma um estilo branco Inner Shadow, usando as configurações mostradas abaixo.
E agora um Drop Shadow, com um tamanho de 0 pixels e uma opacidade de apenas 5%.
Encontre um ícone na Internet (ou crie o seu próprio), e coloque-o no seu documento indo até Arquivo → Colocar, posicionando-o corretamente. Aplique uma sobreposição de degradê a ela.
Dê ao Sombra Interior do seu ícone uma distância de 1 pixel, e o Sombreamento Branco uma distância de 1 pixel. Isso faz com que o ícone pareça estar gravado no botão.
Adicione algum texto ao botão e aplique um efeito Drop Shadow de baixa opacidade usando a janela Layer Style. Aqui está o resultado:
5. Fundos recuados
Um fundo recuado faz com que um botão pareça estar enterrado nele, dando a profundidade do botão e o interesse visual. Abaixo estão alguns ótimos exemplos disso.
Este fundo de botão tem uma sombra interna sutil para fazê-lo aparecer recuado.
Os gradientes invertidos neste plano de fundo fazem os botões aparecerem recuados.
Uma combinação de traços e sombreamentos dá a esses botões recuados mais profundidade.
Este fundo de botão tem vários estilos, incluindo um gradiente, sombra interna e sombra projetada.
Este fundo recuado do botão é muito menor do que o que vimos, mas ainda segue as mesmas técnicas.
Mais uma vez, uma sombra e uma sombra interna são usadas para criar um recuo.
6. Brilha
Os brilhos são uma técnica bastante difícil de realizar no design da interface e geralmente são vistos apenas em interfaces escuras (embora vejamos um exemplo de luz abaixo). Estes exemplos mostram como os brilhos podem ser usados de diferentes maneiras.
Um brilho é usado no interior deste botão, dando-lhe um destaque geral.
Os brilhos são habilmente usados para fazer a tipografia neste botão se destacar do fundo escuro. E os brilhos fazem as barras de carregamento parecerem reais.
Os brilhos são comumente usados em interfaces escuras para o iPhone. Aqui vemos um brilho em torno da tipografia quando o botão está no estado ativo.
O brilho leve e bastante sutil dá a esse botão o impulso extra de que ele precisa para ficar bonito.
Criando um botão de luz brilhante
Usando a ferramenta Forma de retângulo mais uma vez, desenhe um retângulo, desta vez com um raio de 3 pixels. Aplique uma Sobreposição de Gradiente semelhante à abaixo. Dê ao seu centro cores uma posição de “49” e “50”.
Aplique a seguinte sombra interna.
Aplique o seguinte sombreamento.
Aplique o seguinte Outer Glow.
Adicione alguma tipografia ao botão. Você deve acabar com um resultado bom, limpo e incrivelmente fácil de produzir assim:
7. Destaques
Destaques dão profundidade aos botões, interesse visual e clicabilidade. Os exemplos abaixo provam isso.
Uma forma branca simples de baixa opacidade é usada na metade superior deste botão para dar um pouco de profundidade e ajudar a ajustar a interface vermelha e cinza.
Tal como acontece com muitos outros botões neste post, um traço de 1 pixel destaca este.
Os gradientes de claro a escuro a claro servem como destaques e sombra para esses botões.
Este post foi escrito exclusivamente para WDD por Callum Chapman o homem por trás Loja Picmix e Blog do Circlebox .
Quais projetos de botão você usa mais e por quê? Você encontrou uma taxa de cliques mais alta para alguns designs? Por favor, compartilhe abaixo ...