Entrar
Últimos assuntos
» Alguém aqui já ganha dinheiro com seus games?por theguitarmester Ter 30 Abr 2024, 11:43
» Colisões não funcionando
por theguitarmester Ter 30 Abr 2024, 10:16
» Como ajustar velocidade de cada frame da animação no game maker
por pequetux Sex 26 Abr 2024, 16:45
» Preciso de ajuda
por AftonDuGrau Dom 21 Abr 2024, 20:18
» Como faz o evento drawn GUI, não se repetir?
por aminaro Sex 19 Abr 2024, 20:30
» PROBLEMAS COM FÍSICAS DE ÁGUA
por aminaro Ter 16 Abr 2024, 10:07
» Retorno da GMBR!!!
por Ralphed Sex 12 Abr 2024, 22:45
» JOGADOR PARANDO NO AR QUANDO ATACA
por aminaro Qua 10 Abr 2024, 13:51
» Problemas com texto interativo
por Kaaru72 Dom 07 Abr 2024, 11:31
» Erro escondido e indecifrável
por dev_gabize.azv Qui 04 Abr 2024, 10:11
» Mudar cor de apenas uma palavra
por Ralphed Sáb 30 Mar 2024, 00:39
» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27
» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30
» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17
» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18
» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34
» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13
» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18
» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12
» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02
» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55
» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42
» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56
» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21
» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21
Fazendo um botão no Photoshop Fácil.
5 participantes
GMBR :: Projetos :: Assets & Recursos
Página 1 de 1
Fazendo um botão no Photoshop Fácil.
Fazendo um botão no Photoshop Fácil
Um método fácil e rápido para fazer seus botões no Photoshop
Ás vezes preciso de fazer um botão rápido e fácil, mais ao mesmo tempo bonito. Então eu uso essa técnica que resolvi compartilhar com vocês. Siga todos os passos, você pode baixar o arquivo .PSD disponível no final do tópico, se tiver dúvidas, não hesite em perguntar ;D Então? Está Pronto? OK!
Preview:
1º Abra seu photoshop e vamos criar uma nova imagem, é recomendável que você deixe a imagem maior que o tamanho esperado para o botão, e que o Background Contents esteja em Transparent.
2º Com a ferramenta Rectangle Marquee Tool vamos fazer uma seleção retangular, do tamanho que você quiser seu botão. Certifique de que nas configurações da ferramenta o Style está em Normal:
Nota: Se o Style não estiver em normal, você não poderá fazer seleções retangulares.
3º Minha seleção ficou assim:
Você pode querer uns cantos arredondados no seu botão... Isso também é fácil de fazer, ainda com a seleção feita ativa, vá em:
Select - Modify - Smooth
Você pode colocar o quanto quiser, quanto maior mais arredondado, eu coloquei 5 pixels.4º Certo, Agora vamos adicionar um gradiente à nosso botão, eu vou fazer um simples usando Foreground e Background Color:
O quadradinho da frente é o Foreground e o de Trás o Background
Se vc quiser pode usar as cores que eu usei:
Foreground: #1e1e1e ████
Background: #000000 ████
Pronto, agora na ferramenta de gradientes, eu selecionei o gradiente Foreground to background, que pega as duas cores que agente escolheu acima e faz um gradiente simples. Agora aplique o gradiente por cima do botão... Você pode fazer do jeito que quiser, o meu ficou assim:
Não se preocupe, com essa linhe no meio eu coloquei ela pra vocês verem a direção do gradiente que eu fiz.
5º Essa é a parte que eu gosto mais, é a parte que deixa seu botão mais... Botão xD
Na janela que ficam as layers, você vai em add a layer style (o botão marcado de vermelho):
Nota: Se você não está vendo a janela das layers ela pode estar desativada, para ativá-la vá em: Window e veja se Layers está marcado. Caso já esteja mas mesmo assim não vê, procure na sua barra ao lado direito, ela pode estar oculta, como um spoiler.
Na janela que aparecer nós vamos fazer umas modificações no nosso botão, você pode fazer do jeito que quiser, eu vou mostrar o jeito que eu faço. Nós iremos configurar o Drop Shadow, o Bevel and Emboss e o Stroke
Ok então vamos configurar o Drop Shadow, que é uma sombra pro seu botão:
Pra começar a configurar basta clicar em drop shadow, eu só vou mexer na configuração Structure, se quiser você pode copiar o jeito que eu deixei:
Agora vamos configural o Bevel and Emboss que adiciona efeito de bevel e emboss também com um clique para começar a configuração, eu também só configurei o Structure ai vai a imagem:
E finalmente, vamos configurar o Stroke, é bem opicional, ele faz um contorno na imagem, veja como ficou o meu:
Você pode Salvar o estilo que agente fez, caso precise fazer de novo sem ter que editar tudo novamente, pra isso, ainda na janela de edição de Styles, clique em New Style:
Então dê o nome que você quiser, o Style vai ser salvo na área dos Styles:
Só lembrando que essa área pode estar desabilitada também.
Olha como meu botão está ficando:
Agora você pode adicionar, algum texto com a ferramenta Horizontal Type Tool você também pode fazer configurações de Shadow, Bevel and Emboss, mas agora tente fazer isso sozinho ;D
Se você fez a área grande igual eu, Basta usar a ferramenta Crop Tool para cortar, não precisa cortar perfeitamente, pois a nossa imagem é transparente.
- Código:
Arquivo Psd:
http://www.easy-share.com/1911284543/Bot%EF%BF%BDo
Última edição por Dancity em Sáb 11 Set 2010, 21:21, editado 1 vez(es)
Dancity- Games Ranking :
Notas recebidas : A
Data de inscrição : 11/01/2009
Reputação : 8
Número de Mensagens : 1339
Prêmios :
x 0 x 0 x 0
x 1 x 0 x 0
x 0 x 0 x 0
Re: Fazendo um botão no Photoshop Fácil.
Tutorial Trabalhoso em Dancity Oo
mais parece ÓTIMO... a Preview ta Perfeita
mas...
até faria... mais to sem Photoshop... mais com certeza é Maravilindo seu Tutorial *-*
Continue com esses tutoriais Fera
Té +
FLWs
mais parece ÓTIMO... a Preview ta Perfeita
mas...
até faria... mais to sem Photoshop... mais com certeza é Maravilindo seu Tutorial *-*
Continue com esses tutoriais Fera
Té +
FLWs
Re: Fazendo um botão no Photoshop Fácil.
Bom tutorial, apesar de ser fácil, requer um pouquinho de experiência com algumas ferramentas
Valeu! o/
Valeu! o/
Froidz- Data de inscrição : 03/08/2008
Reputação : 4
Número de Mensagens : 1053
Prêmios :
x 0 x 0 x 0
x 0 x 0 x 0
x 0 x 0 x 0
Re: Fazendo um botão no Photoshop Fácil.
Otimo tutorial, fica com um aspecto genial o botão
gostei de ver parabens espero ver mais tutoriais
como o seu,
gostei de ver parabens espero ver mais tutoriais
como o seu,
Re: Fazendo um botão no Photoshop Fácil.
Valew pelos comentários pessoal...
Vou tentar pensar em algo pros próximos tutos...
Froidz... Éh até que requer mesmo um conhecimento básico... Mas se a pessoa fizer uma força acho que dá... Ainda mais depois de fazer o Style...
Mas vlw ai por tudo pessoal ;D
Vou tentar pensar em algo pros próximos tutos...
Froidz... Éh até que requer mesmo um conhecimento básico... Mas se a pessoa fizer uma força acho que dá... Ainda mais depois de fazer o Style...
Mas vlw ai por tudo pessoal ;D
Dancity- Games Ranking :
Notas recebidas : A
Data de inscrição : 11/01/2009
Reputação : 8
Número de Mensagens : 1339
Prêmios :
x 0 x 0 x 0
x 1 x 0 x 0
x 0 x 0 x 0
Tópicos semelhantes
» fazendo mangazim facil facil
» [ Photoshop CS3 ] Fazendo Raios com o photoshop
» A vida não é fácil mesmo para aqueles que prosperaram fazendo jogos
» [Art 2D Tuto] Fácil, fácil Pivot (Interface, configurações e alguns efeitos) (Com download)
» [PHOTOSHOP] Como Criar Papel Amassado no Photoshop
» [ Photoshop CS3 ] Fazendo Raios com o photoshop
» A vida não é fácil mesmo para aqueles que prosperaram fazendo jogos
» [Art 2D Tuto] Fácil, fácil Pivot (Interface, configurações e alguns efeitos) (Com download)
» [PHOTOSHOP] Como Criar Papel Amassado no Photoshop
GMBR :: Projetos :: Assets & Recursos
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|