Como criar um botão brilhante para web com Photoshop

Sabemos como botões e guias são muito importantes em web design. A escolha certa do botão, das cores, design e efeitos faz com que as páginas web ganhem vida. Então, hoje você vai aprender como adicionar um efeito de brilho nos botões em três passos simples usando o Photoshop CS5. Você também pode realizar estes procedimentos em versões anteriores, mas não estou certo se todos os recursos estarão disponíveis.

Você pode baixar o arquivo que eu criei mostrado no vídeo no final do artigo.

[alert color=”blue”]Este artigo é uma tradução/adaptação de Designs Collage. Por favor, visite a página original para prestigiar o trabalho, lá você poderá baixar o arquivo deste tutorial. Você também encontrará o link para o artigo original no final deste artigo. [/alert]

Abra o Photoshop e crie um novo arquivo. Isso pode ser feito através do menu superior ou pressionando Ctrl+N. Selecione o tamanho 448 x 800 pixels. Adicione uma cor de fundo #FFFFFF e nós estamos no nosso caminho.

Passo 1: Vamos para o painel de camadas, clique duas vezes sobre a camada background, desbloqueie-a e renomeie para “fundo”. Mova o controle deslizante de fill (preenchimento) para 0%. Observe a opção em detalhes abaixo.

Passo 1: Vamos para o painel de camadas, clique duas vezes sobre a camada background, desbloqueie-a e renomeie para "fundo". Mova o controle deslizante de fill (preenchimento) para 0%. Observe a opção em detalhes abaixo.

Visualização

Visualização

Passo 2: Acesse o menu Layer> Layer Style> Blending Options (Camadas> Estilo de Camada> Opções de mesclagem)

Passo 2: Acesse o menu Layer> Layer Style> Blending Options (Camadas> Estilo de Camada> Opções de mesclagem)

Clique sobre a opção Gradient Overlay (Sobreposição de gradiente) no menu à esquerda e ajuste os valores como os mostrados abaixo.

Clique sobre a opção Gradient Overlay (Sobreposição de gradiente) no menu à esquerda e ajuste os valores como os mostrados abaixo.

Passo 3: Agora vamos precisar dar ao botão uma forma. Para isso, selecione a ferramenta forma e desenhe um retângulo arredondado, com um raio de 4 pixels no meio da sua tela. Sua imagem deve parecer algo como o mostrado abaixo.

Passo 3: Agora vamos precisar dar ao botão uma forma. Para isso, selecione a ferramenta forma e desenhe um retângulo arredondado, com um raio de 4 pixels no meio da sua tela. Sua imagem deve parecer algo como o mostrado abaixo.

Assim.

Assim.

Passo 4: Para o brilho, selecione a camada da forma e abra as Layer Styles como fizemos agora pouco. Selecione a opção Stroke (Traçado) no menu à esquerda e mude os valores para os mostrados abaixo.

Passo 4: Para o brilho, selecione a camada da forma e abra as Layer Styles como fizemos agora pouco. Selecione a opção Stroke (Traçado) no menu à esquerda e mude os valores para os mostrados abaixo.

Em seguida, selecione Gradient Overlay (Sobreposição de gradiente) no menu à esquerda, como feito anteriormente e brinque com algumas combinações de cores até obter o resultado desejado. Eu usei azuis, mas você é livre para experimentar cores diferentes.

Em seguida, selecione Gradient Overlay (Sobreposição de gradiente) no menu à esquerda, como feito anteriormente e brinque com algumas combinações de cores até obter o resultado desejado. Eu usei azuis, mas você é livre para experimentar cores diferentes.

Finalmente, para completar o nosso efeito glosse selecione Bevel and Emboss (Chanfro e entalhe) na guia esquerda e altere os valores para os mostrados abaixo. Lembre-se, eu apresentei os valores que tenho usado apenas como um guia. Sinta-se livre para experimentar com valores diferentes.

Finalmente, para completar o nosso efeito glosse selecione Bevel and Emboss (Chanfro e entalhe) na guia esquerda e altere os valores para os mostrados abaixo. Lembre-se, eu apresentei os valores que tenho usado apenas como um guia. Sinta-se livre para experimentar com valores diferentes.

Pré-visualização final:

Pré-visualização final:

Passo 5: Neste passo, vamos adicionar um pouco de extrusão ao nosso botão. Dê um duplo clique sobre a camada da forma (ou abra as Layer Styles como já aprendemos) e clique em Bevel & Emboss (Chanfro e entalhe) conheça as propriedades definidas na imagem abaixo.

Passo 5: Neste passo, vamos adicionar um pouco de extrusão ao nosso botão. Dê um duplo clique sobre a camada da forma (ou abra as Layer Styles como já aprendemos) e clique em Bevel & Emboss (Chanfro e entalhe) conheça as propriedades definidas na imagem abaixo.

Passo 6: O botão já está pronto.  Agora, vamos trabalhar no texto. Para isso ative a ferramenta de texto, escolha uma cor que tenha contraste com a cor do seu botão e adicione um título.

Passo 6: O botão já está pronto.  Agora, vamos trabalhar no texto. Para isso ative a ferramenta de texto, escolha uma cor que tenha contraste com a cor do seu botão e adicione um título.

Agora adicione um pouco de Drop Shadow (Sombra projetada) na camada de texto.

Agora adicione um pouco de Drop Shadow (Sombra projetada) na camada de texto.

Passo 7: O botão brilhante está pronto agora é hora de adicionar algum efeito de sombra para deixa-lo ainda melhor. Crie uma nova camada, selecione a ferramenta de seleção elíptica (Eliptical Marquee tool), e defina no painel de controle, logo acima da tela, o Feather (Suavidade) para 30px.

Selecione uma área abaixo do botão e preencha com a cor preta: # 000000, em seguida defina a sua opacidade para 50%.

Selecione uma área abaixo do botão e preencha com a cor preta: # 000000, em seguida defina a sua opacidade para 50%.

Nosso botão brilhante está pronto:

Nosso botão brilhante está pronto:

[alert color=”blue”]Este artigo é uma tradução/adaptação de Designs Collage. Por favor, visite a página original para prestigiar o trabalho, lá você poderá baixar o arquivo deste tutorial.[/alert]

[alert color=”yellow”] Clique aqui para baixar o arquivo criado com este tutorial mostrado no vídeo[/alert]

Dúvidas? Deixe nos comentários e terei prazer em responde-las.

Compartilhe este artigo:

Guia de Estudos para Aprender Design por Conta Própria

Baixe o nosso guia e receba dicas e as novidades do Clube do Design no seu email:

Deixe uma resposta

Mais artigos pra você ler:
Affinity Photo #7 - Inserindo imagens stock

Affinity Photo #7 - Inserindo imagens stock

Você pode adicionar fotos e imagens rasterizadas adicionais à sua página como uma nova camada. As fotos e imagens inseridas…
Affinity Photo #6 - Incorporar documentos

Affinity Photo #6 - Incorporar documentos

A incorporação de documentos permite que você coloque qualquer documento do Affinity (Designer, Photo, etc.), Photoshop, Illustrator, Freehand, SVG, EPS…
Affinity Photo #5 - Criando novos documentos

Affinity Photo #5 - Criando novos documentos

Quando você cria seu novo documento, você especifica uma variedade de configurações de cores e dimensões de página em função…
Affinity Photo #4 - Abrindo imagens RAW

Affinity Photo #4 - Abrindo imagens RAW

Você pode abrir imagens raw de sua câmera digital diretamente no Affinity Photo. Ao fazer isso, você será capaz de…
Fechar Menu