Bem-vindo

Bem-vindo à Monnaze, uma página que disponibiliza tutoriais diversos, como tutorial de buttons. Não sou uma grande button-maker, mas tentarei ensinar o meu conhecimento à você. Qualquer dúvida é só clicar aqui e me enviar, que eu tento responder. É estritamente proibido copiar o conteúdo da petpage. Credite pelo que aprender por aqui ou usar.
O nome Monnaze vem de Mona Lisa, pintura de Leonardo da Vinci.

tutorial de button - photoshop

A imagem

Vou logo avisar que não vou colocar um link para download de Photoshop. Caso você não o tenha, peça para seu pai ou sua mãe instalarem para você. Apesar de não ser um programa grátis, pode-se encontrar a versão completa por aí. Se você possui o programa, vamos prosseguir. Para abrir o programa, clique no ícone similar à esse:

Para abrir um novo documento, pressione as teclas CTRL e N ao mesmo tempo. Uma janela abrirá. Deixe suas coordenadas iguais às abaixo:

MUITO IMPORTANTE: O padrão dos buttons no neopets são de 88x31, portanto não fuja dele.

Agora que você já criou seu documento, procure por uma imagem que você ache que ficará boa. Eu escolhi essa:

Depois que fizer sua escolha, apenas copie-a e cole-a no Photoshop. Apliquei alguns efeitos, e ficou como a imagem abaixo:

Se você quiser testar alguns, é só clicar em Image e depois Adjustments. Eu costumo usar apenas as duas primeiras partes:

E normalmente, não sei o que estou fazendo. Tente aplicar um pouco de Saturation, ou aplicar um pouco de vermelho em Color Balance ou Photo filter. Crie seu próprio efeito. Sua imagem está pronta.

A borda

Escolha uma borda que seja de seu agrado, ou crie uma própria. A que eu escolhi foi esta:

A parte preta nós vamos excluir, a parte laranja será minha borda e a branca será a "luz". Depois que você fizer todos os ajustes, copie-a e cole no documento. Suas Layers (Caso não apareçam, aperte F7) devem estar assim:

Layers são as camadas, determinam o que vai ficar em cima do que. Agora, nós precisaremos apagar a parte preta, para isso utilizaremos a borracha:

Com as seguintes coordenadas (Canto superior esquerdo):

Basta clicar para apagar a área desejada. Lembrando que você deve selecionar a camada da borda, para apagar. Vamos retirar os excessos. Para isso teremos que apagar uma parte tanto da borda, como da própria imagem. Abaixo a orientação:

(Imagens ampliadas)

Seu button está transparente.

O Texto

Para adicionar o texto, utilizaremos a seguinte ferramenta:

Primeiramente, escolha uma fonte de pixel, caso você não tenha nenhuma, precisará baixá-la (Eu recomendo o DaFont). Para baixar, siga as etapas abaixo:

1. Procure pela fonte do seu interesse (04B_03, Skinny, etc). Clique em Download.

2. A pasta provavelmente estará zipada, caso isso ocorra, abra o documento e clique com o botão direito do seu mouse. Agora clique em Extrair Aqui. Um novo documento será formado, procure por ele. Veja o antes e o depois (O correto é o segundo):

3. Seu documento foi extraído. Clique novamente com o botão direito e depois em Recortar. Vá em Iniciar - Painel de Controle - Fontes e cole-o ali. Sua fonte está instalada.

Voltando ao seu button, basta selecionar a sua fonte no menu similar a este:

Modifique o tamanho da fonte para 6pt e digite com letra maiúscula, para um melhor resultado.

Mude a cor do seu texto para qual você quiser, clicando no retângulo. Você pode utilizar o conta-gotas para isso (Basta sobrepor seu mouse sobre a imagem e selecionar a cor).

Para a borda, você terá que voltar às Layers e clicar com o botão direito sobre a layer de texto. Selecione Blending Options e uma nova janela se abrirá. Clique em STROKE.

Size mudará o tamanho da borda, Color a cor. No caso utilizei Branco com tamanho de 1px. Clique em OK, depois de pronto. Ao final de tudo, meu button está assim:

A Animação

Conte quantas letras tem a palavra que você quer animar. Adicione um. Esse é o número de Layers que você deverá criar. Para isso, selecione a layer de texto e aperte CTRL+J sete vezes (no meu caso, que é o número de letras).

Lá no menu (No topo), clique em Window e Animation. Uma nova janela se abrirá. Voltando para as Layers, antes de tudo, clique em todos os Olhos (Menos o da Layer de texto principal) para esconder textos desnecessários. Ficará assim:

O texto principal ficará com as cores originais. Na janela de animação, crie 8 frames, clicando no ícone (Dentro do retângulo vermelho):

Cada frame será uma parte da animação. Para o primeiro frame, deixe visível apenas o texto principal (Clique nos olhos de todos os outros). Para o segundo, selecione a segunda camada e o segundo frame.

Deixe todas as outras layers invisíveis (inclusive a principal), apenas a segunda deverá ser visível.

Nas layers, clique nesse ícone:

E selecione a primeira letra, mudando a cor dela. O código (Que está selecionado na imagem) corresponde à cor que você usou. Copie-o, para poder utilizar nas outras camadas também.

Repita esse procedimento com todos os frames, colorindo cada letra em uma layer diferente. Depois de pronto, vá na parte de animação e mude a velocidade de todos os frames para 0.1 segundos:

Para salvar, pressione ALT+SHIF+CTRL+S, clique em Save e salve. Resultado:

FAQ

Perguntas Frequentes

Meu texto fica um pouco embaçado.
Selecione o texto, clique com o botão direito e depois em Anti-Alias None.

Preciso de bordas, mas não consigo fazê-las.
Tutorial aqui.

Quais fontes são recomendadas para fazer buttons?
As de pixel. Algumas delas que eu recomendo: Bangalore, Skinny, 04B_03.

Estou tendo problemas na criação de button, quem eu contato?
00bonitinha00.

Não tenho photoshop, você pode ensinar à fazer buttons no Paint?
Eu não vou ensinar a fazer buttons no paint porque eles não tem qualidade nenhuma, não é possível animar ou modificar a imagem. Além de ser algo muito simples de se aprender sozinho. Então se você não tem photoshop, recomendo pedir à alguém para fazer seu button.

Pretende fazer mais tutoriais?
Com o tempo vou adicionar alguns tutoriais complementares para você melhorar seu button cada vez mais, por enquanto fica o básico para você aprender.

COMO FAZER BORDAS

Fazendo bordas

Normalmente, não temos muita noção para fazer bordas. Mas um jeito prático e fácil é utilizando as bordas dos avatares e modificando seu tamanho. Para isso, clique aqui, escolha a borda que vai querer usar.

Abra seu PAINT, cole sua imagem e copie a parte inferior dela. Aperte CTRL+E e modifique as preferências para 88 (Largura) e 31 (Altura). Agora cole a parte inferior.

Antes e Depois

Depois você pode modificá-la e adicionar a "luz".

sitely

Link-me

afiliados

Listers