Seja bem-vindo a Pudding, uma página de tutoriais por Night. Ofereço aqui tutoriais de fácil entendimento para te ajudar a construir sua petpage. Meu objetivo é ensinar de maneira eficiente e atenciosa, guiando você no caminho para o desenvolvimento da sua página.

Sou uma pessoa razoavelmente liberal, então não vou te bombardear com trocentilhões de regras chatas que você não vai entender. A Pudding se baseia em uma única regra extremamente simples: créditos. Ou seja, se você utilizar algo daqui, é só colocar em algum cantinho que usou essa página, pôr um link para cá e estamos feitos. Dessa maneira, você ajuda outras pessoas a encontrar esses tutoriais.

Sem mais delongas, sinta-se à vontade para navegar pela página. Espero sinceramente que você encontre o que procura. Em caso de dúvidas, críticas ou comentários, pode me mandar um neomail. Responderei com toda a dedicação que você, como meu convidado, merece!


Contando desde 21/jan/2012

Atualizações

28 de Janeiro de 2013

Novo layout! Agora estamos na versão 5 - caramba, como o tempo passa!
O novo layout foi um presentinho que o Geel fez para mim alguns meses atrás, e eu enrolei um bocado para pô-lo na página (desculpa, Geel, foi mal mesmo). Eu fiz o CSS, como de costume -não fiquei plenamente satisfeita, mas tudo bem...
Passei algumas tardes e madrugadas das minhas férias mexendo na Pudding, decidida a atualizá-la antes da volta às aulas. Bem, minhas aulas voltam amanhã, então eu tecnicamente cumpri meu objetivo!

De todo modo, com orgulho eu apresento algumas mudanças na página!
# A navegação foi modificada segundo sugestões dadas pelos usuários da página
# Tutorial de CSS lançado (com algumas partes ainda faltando)
# Tutorial de multipáginas contínuo lançado
# Layouts dos tutoriais editados por futilidade minha
# Ranking atualizado

Espero que aproveitem as novidades! Um abraço!

F.A.Q.

Quando eu vou salvar minha petpage, o botão de salvar mudanças não aparece!
Calma lá. É só apertar ctrl - (menos) no seu teclado até o botão aparecer.

De que tamanho devo fazer meu layout?
Se ele for multipáginas, faça-o com 800px de largura e 600px de altura, aproximadamente. Se for contínuo, faça com 750px de largura (sem considerar as bordas) e qualquer altura.

Codifica uma coisa para mim?
Sinto muito, mas eu não tenho tempo para codificar layouts para todos que precisam, e justamente por isso criei esses tutoriais. Se você não encontrar aqui o tutorial que precisa, envie-me um neomail e verei o que posso fazer por você.

Você faria parceria com a minha petpage?
Sinto muito, mas eu não estou aceitando parcerias com a Pudding, pelo menos por agora. Eu aceito listings, rankings e até awards, mas não parcerias. Eu também consideraria um sister site, eu acho.

Você não deu os devidos créditos à minha PP.
Se isso acontecer, minhas sinceras desculpas! Caso eu me esqueça de creditar algo, é só me avisar que consertarei isso em um instante.

No tutorial de buttons, qualquer versão do Paint serve?
Sim. Eu uso a versão do Windows 7, mas em qualquer uma dá certo. Pode ser que com uma versão muito antiga você tenha dificuldades para redimensionar as imagens.

Básico

Estes tutoriais foram feitos para quem está começando a aprender como fazer petpages. Aqui, você aprenderá os códigos mais simples e terá uma ideia do que é necessário para criar sua própria página.

» HTML básico

Projetos

Ainda tem muito o que acrescentar nos tutoriais básicos. Os meus próximos trabalho nessa seção da página serão:
# Como criar uma petpage (noções básicas de conteúdo)
# Hospedando imagens
# Como obter um código de cor no Paint
# Ética e boas maneiras em petpages e nos fóruns

HTML Básico

Ok, essa parte é pro caso de você estar realmente iniciando sua jornada no ramo das petpages. Tem os códigos mais básicos, indispensáveis para quem quer ter uma PP.

Para deixar o seu texto em negrito:


Para deixar o seu texto em itálico:


Para deixar o seu texto riscado:


Para colocar um link na página:

Substitua / pela página para a qual a pessoa vai ao clicar.

Para dar um enter no texto:


Para fazer um novo parágrafo:


Para colocar um cabeçalho no texto (como o que tem no início dessa página):

Nota: esse código só vai funcionar apropriadamente se sua página tiver um CSS.

Para colocar uma imagem:

Substitua http://imageshack.us/imagem.png pela url da sua imagem (para obter uma url para a sua imagem, você precisa hospedá-la).

Para colocar uma caixinha de texto:


Codificando Layouts

Para abrir um tutorial, clique no título dentro da caixinha.
As imagens dos tutoriais tiveram seus tamanhos reduzidos. Se necessário, arraste-as para a barra do seu navegador para ver o tamanho integral.

Multipáginas I

Também conhecido como "âncora", o multipáginas é uma boa alternativa, especialmente para páginas com muito conteúdo. Funciona de maneira bem simples: ao clicar em um link da navegação, outro texto aparece na caixinha de conteúdo, assim como acontece no lay dessa página! Nesse tutorial, você vai aprender a codificar um lay simples de duas caixinhas.

Multipáginas II

O "falso mapeamento", como costumam chamar, é uma variação do multipáginas clássico, em que os links de navegação são imagens que fazem parte do layout. Dá um pouco mais de trabalho que o outro tipo, mas, se você tiver mais paciência que eu para ficar fazendo lays, sem dúvida pode conseguir bons resultados. Leia o tutorial anterior antes de ler esse, para conseguir entendê-lo bem.

Contínuo

Um tipo de layout bem diferente dos dois anteriores, que dispõe de apenas uma caixinha que não termina, mas continua até o fim da página, adaptando-se à quantidade de conteúdo inserido. Nesse tutorial você vai aprender a fazer lays contínuos com o background monocromático.

Multipáginas Contínuo

Como você pode imaginar, essa é uma mistura de layout multipáginas com contínuo. Explicando melhor, é um layout multipáginas, mas as caixinhas são contínuas, ou seja, continuam até o final da página. Este tutorial é bem complicado e para entendê-lo você precisa conhecer o layout multipáginas I e o contínuo.

Multipáginas I

O primeiro passo para fazer um layout multipáginas é, obviamente, fazer seu lay. O meu é esse aqui embaixo. Eu o fiz com duas caixinhas: uma maior para o conteúdo e outra menor para a navegação.

O próximo passo é codificar o seu layout. Vou começar abrindo o meu layout no Paint e selecionando a caixinha do conteúdo com a ferramenta de seleção. Você só precisa procurar por uma ferramenta que pareça um retângulo tracejado (é a que está marcada em amarelo no topo da imagem abaixo).

Feito isso, você vai ver que aparecem quatro números lá embaixo, na seguinte ordem: left (esquerda), top (topo), width (largura), height (altura). Anote esses números, serão usados mais tarde.

Faça o mesmo com a sua caixinha de navegação.

A próxima coisa a fazer é hospedar o seu layout. Eu uso o imageshack para isso, mas existem vários outros sites, escolha o que achar melhor. Uma vez hospedada a imagem, você vai ter um link para ela. Guarde isso também.

Agora vem a parte em que você vai usar o código. Comece copiando o código abaixo e colocando no word, bloco de notas ou qualquer coisa assim.
(Clique dentro da caixinha, pressione ctrl+a para selecionar o texto e ctrl+c para copiar.)

Aqui, há algumas partes que devem ser editadas:
http://imageshack.us/layout.png: substitua pela URL do seu lay.
01: substitua pelo primeiro valor que você obteve ao selecionar a caixinha do conteúdo.
02: substitua pelo segundo valor que você obteve ao selecionar a caixinha do conteúdo.
03: substitua pelo terceiro valor que você obteve ao selecionar a caixinha do conteúdo. (Aparece duas vezes, certifique-se de usar o mesmo valor nas duas.)
04: substitua pelo quarto valor que você obteve ao selecionar a caixinha do conteúdo. (Aparece duas vezes, certifique-se de usar o mesmo valor nas duas.)
05: substitua pelo primeiro valor que você obteve ao selecionar a caixinha de navegação.
06: substitua pelo segundo valor que você obteve ao selecionar a caixinha de navegação.
07: substitua pelo terceiro valor que você obteve ao selecionar a caixinha de navegação.
08: substitua pelo quarto valor que você obteve ao selecionar a caixinha de navegação.
tamanho: coloque aqui o tamanho da letra do seu texto (recomendo 10 ou 12).
fonte: coloque a fonte da letra do seu texto (recomendo verdana, arial ou tahoma, que são bem legíveis).
444444: coloque a cor que vai ter seu texto, de preferência uma que facilite a leitura. Você encontra códigos de cores no site color-hex, é um site excelente.

Acrescentando páginas

Para acrescentar novas páginas, é muitíssimo simples. Apague a última /div do código e insira isso:

Substitua "número" pelo número da página. Na navegação, ponha isso:

Substitua "número" pelo mesmo número que você colocou anteriormente.

Depois, é só escrever seu texto!

Multipáginas II

Para começar, aqui está o layout que eu quero codificar. Como você pode ver, esse lay só tem uma caixinha. O que vou usar para a navegação são os textos Home / Conteúdo / Sitely / Neopets, à direita. Nesse tutorial, vou ensinar como fazer usando quatro links de navegação, mas não se preocupe se você for precisar de mais, eu vou explicar depois como adicionar mais links.

Como você já sabe como fazer com a caixinha de conteúdo, vamos aos links da navegação. O primeiro a ser feito é isso:

Tome nota das coordenadas (você só vai precisar dos dois primeiros números). Feito isso, copie o pedacinho da imagem que você selecionou e salve em um novo arquivo. Você vai ficar com algo assim:

Depois, faça o mesmo com os seus outros links de navegação.

Depois disso tudo, você vai ter:
# A imagem do seu layout
# As imagens dos seus links de navegação
# As coordenadas dessa parafernalha toda
# O código:

Os trechos que você deve substituir:
http://imageshack.us/layout.png pela url do seu layout
01, 02, 03, 04 pelas coordenadas da caixinha (como explicado no "multipáginas I")
05, 06 pelos dois valores, na ordem, das coordenadas do primeiro link da sua navegação
07, 08 pelos dois valores, na ordem, das coordenadas do segundo link da sua navegação
09, 10 pelos dois valores, na ordem, das coordenadas do terceiro link da sua navegação
11, 12 pelos dois valores, na ordem, das coordenadas do quarto link da sua navegação
http://imageshack.us/linknav.png pela url dos seus links da navegação (esse texto aparece quatro vezes, coloque a url dos links cada uma em um espaço, na ordem)

Adicionando novos links

Para colocar mais links na navegação, coloque em algum lugar entre as tags style e /style:
Substitua number pelo próximo número da sequência (five, six, por aí vai), e os 00 pelas coordenadas do link.
Após a tag /style você deve acrescentar o seguinte:
Substitua number pelo mesmo usado anteriormente e número pelo numeral correspondente (5, 6, …).
No fim do código, apague a última /div e acrescente a página:
Substituindo número pelo número anterior!

Faça isso o tanto de vezes necessário e então seu layout estará codificado!

Contínuo

Muito bem, vamos começar. Eu quero que você faça o seu lay e o abra no Paint, deixando-o assim:

Depois, abra o site color-hex.com e escolha uma cor para o fundo do seu lay (dê preferência a cores mais delicadas, para não cegar os visitantes da sua página!). Pinte o espaço branco aos lados com ela:
Cor escolhida: #f7e7da

Agora você vai selecionar a caixinha assim:

Tome nota dos três valores marcados com retângulos vermelhos.

O próximo passo é inverter a imagem, deixando-a de ponta-cabeça. Para fazer isso, aperte ctrl+a para selecionar a imagem inteira e clique nela com o botão direito do mouse. Vai aparecer uma série de opções. Escolha "inverter verticalmente".


Depois, siga as instruções da imagem abaixo:

Você vai ficar com uma coisa que parece uma linha (que, por sinal, é o que muitos chamam de "linha" - pois é). Salve em um arquivo separado.
Agora, hospede o layout e a sua "linha" e deixe as urls em um cantinho.

Código:

Vamos agora às partes que você deve substituir:
http://imageshack.us/layout.png pela url do seu lay
01 pelo primeiro valor obtido ao selecionar a caixinha
02 pelo segundo valor obtido ao selecionar a caixinha
03 pelo terceiro valor obtido ao selecionar a caixinha
http://imageshack.us/linha.png pela url da sua "linha".
bdbdbd pela cor que você escolheu para o fundo do seu lay
Tamanho pelo tamanho da letra do seu texto (recomendo 10 ou 12)
Fonte pela fonte da letra do seu texto (recomendo verdana, arial ou tahoma, que são bem legíveis)
444444 pela cor da letra do seu texto, de preferência uma que facilite a leitura (você pode procurar no site color-hex!)

Agora, é só escrever seu texto no lugar indicado!

Multipáginas contínuo

Vamos começar? Como sempre, começamos com o layout. Esse aqui é muito parecido com o lay contínuo, com a diferença de ter duas caixinhas em vez de uma. A da esquerda é para o conteúdo e a da direita vou usar para a navegação.

Agora, é só pegar as coordenadas das caixinhas, como você já aprendeu!
Codificar um layout desses é igual codificar um lay multipáginas comum, com uma única diferença: nós não vamos usar o valor da altura (height) quando selecionarmos a caixinha. No lugar desse valor, vamos colocar um número fictício bem grande. Isso vai fazer com que a sua caixinha de conteúdo fique parecendo uma caixinha contínua (porque ela vai ficar super comprida e se prologar até o fim da página). No código abaixo, eu coloquei o valor 3000.

E agora, como de costume, vamos ver as partes que você precisa substituir:
http://imageshack.us/layout.png pela url do seu layout
01, 02 e 03 pelos três primeiros valores que você obteve quando selecionou a caixinha de conteúdo (lembre que o 03 aparece duas vezes!)
04, 05 e 06 pelos três primeiros valores que você obteve quando selecionou a caixinha de navegação
http://imageshack.us/linha.png pela url da sua "linha" (igual no lay contínuo)
bdbdbd pela cor do fundo do layout (igual no lay contínuo)
Tamanho pelo tamanho das letras do seu texto
Fonte pela fonte de letra do seu texto
444444 pela cor das letras

Seu layout deu um bug?

O layout multipáginas contínuo é meio temperamental. Se a sua petpage tiver muito conteúdo, pode ser que apareça uma barra de rolagem dentro da caixinha de conteúdo (o que realmente não deveria acontecer).
Se você tiver esse tipo de problema, substitua o 3000 no código por um número maior. Isso vai fazer sua caixinha de conteúdo ficar mais comprida. Tente ir aumentando o número de 1000 em 1000 até a barra de rolagem dentro da caixinha sumir.
Mas atenção! O número 3000 aparece três vezes no código. Você precisa colocar o mesmo valor nesses três lugares.

CSS

Antes de mais nada, o que é CSS? Essa é uma sigla para Cascading Style Sheets (traduzindo, seria algo como "folhas de estilo em cascata"). Mas o que mais importa é entender para que o tal do CSS serve.
Ele é uma espécie de código usado como complemento do HTML. É muito útil para melhorar a parte estética da sua petpage!

Os códigos CSS ficam dentro do que chamam de tags de estilo ou tags style. Ou seja:
(style)
Seu código CSS fica aqui!
(/style)

-No trecho acima, substitua parênteses por tags-

Cada "pedacinho" do seu CSS segue este formato:
seletor{propriedade:valor;}
O seletor é aquilo que queremos modificar. A propriedade é como vamos modificá-lo. O valor explica a propriedade. Por exemplo:
b{color:#ff0000;}
b (que no código significa "negrito") é o seletor. color (cor) é a propriedade. #ff0000 (que no código significa "vermelho") é a explicação/detalhamento da propriedade. Ou seja, o exemplo acima é como se eu tivesse dito: "quero que todas as palavras em negrito da minha página fiquem da cor vermelha".

Você deve entender isso tudo melhor quando começar a ler os tutoriais abaixo.

Esse tipo de código possui um número gigantesco de funções. Na parte 1, vou apresentar várias dessas funções separadamente. Na 2, explicarei como usá-las em sua página. Se você já tiver conhecimentos básicos de CSS, pode tentar ir direto para a parte 2.

Parte 1

Parte 2

CSS – Parte 1

Fonte, tamanho e cor

Essas três características são usadas para letras. Para decidir a fonte e o tamanho da letra, utilizamos:
font: tamanhopt fonte;

Para escolher a cor da letra, usamos:
color: #cor;

As partes em itálico são editáveis. Substitua tamanho por um número, fonte pela fonte da letra e cor por um código de cor.

Negrito e itálico

Para deixar algum texto em negrito, você usa:
font-weight: bold;
Para o itálico:
font-style: italic

Margens e bordas

Uma borda é uma linha que fica ao redor de um elemento.

Exemplo

O código para bordas é:
border: espessurapx tipo #cor;

A espessura é definida por um número:

1px2px3px4px5pxetc.

O tipo é o modelo de linha que você quer:

soliddasheddotteddoublegrooveridgeinsetoutset

A cor é definida por um código de cor:

#000000#ff0000#00ff00#0000ffetc.

As bordas podem ser usadas só em um pedacinho do elemento, se você preferir. Veja:

border-topborder-bottomborder-leftborder-right
Para fazer isso, substitua border por uma das opções acima. Por exemplo:
border-bottom: 1px solid #000000;

Agora que você sabe o básico sobre bordas, vou explicar dois tipos de margem: margin e padding.
O margin serve para um elemento ficar um pouco separado do outro:
margin: 0px elemento 1elemento 2

margin: 3pxelemento 1elemento 2

margin: 10pxelemento 1elemento 2

O padding coloca uma distância entre o elemento e a borda:

padding:0pxpadding:3pxpadding:10px

Se você quiser usar os três juntos, vai ter algo como isso:
{border: 2px solid #b3b3b3; padding: 3px; margin: 5px;}

Cor/imagem de fundo

Se você quiser usar uma cor de fundo:
background-color:#cor;

Se quiser utilizar uma imagem de fundo:
background-image:url(url do fundo);

Alinhamento

O alinhamento se refere a como o texto da sua página vai ficar organizado.

Este é um parágrafo alinhado à direita (right). Não costumamos deixar todo o texto da página alinhado assim porque nossos olhos não estão acostumados a ler desse jeito, então pro nosso cérebro parece estranho! Mas se você quiser deixar, por exemplo, um título alinhado à direita, pode ficar muito bonito.

Este é um parágrafo alinhado à esquerda (left). É uma opção clássica e ótima para páginas com muito texto.

Este é um parágrafo centralizado (center). A centralização costuma ser boa para títulos e imagens. Se você quiser, pode deixar o texto da sua página todo alinhado assim.

Este é um parágrafo justificado (justify). É parecido com o alinhamento à esquerda, mas ele deixa o texto alinhado dos dois lados da página. É uma opção bonita e organizada, mas se sua caixinha de conteúdo for muito pequena pode não ficar bom.

text-align: alinhamento;
Substitua alinhamento por right, left, center ou justify.

Espaçamento e caixa alta/baixa

letter-spacing: númeropx;

O espaçamento entre as letras pode ser definido por um número positivo ou negativo. Se o número for positivo, as letras ficarão mais separadas umas das outras. Se for negativo, ficarão mais juntas. Um espaçamento zero equivale ao espaço normal entre as letras.
Espaçamento 0px
Espaçamento 5px
Espaçamento -2px

Caixa alta é o que chamamos geralmente de CAPS LOCK. Ou seja, ela permite deixar o texto desejado em letras maiúsculas sem que você precise digitá-lo em caps. A caixa baixa faz o oposto: deixa tudo em letras minúsculas.
Caixa alta: text-transform: uppercase
Caixa baixa: text-transform: lowercase

CSS - Parte 2

Body (corpo do texto)

O body é, basicamente, todo o texto da sua página. Ele tem que ser de uma fonte legível. Procure, principalmente, usar uma cor que tenha um bom contraste com sua caixinha. Se ela for branca, o mais recomendável é usar letras pretas ou de um cinza escuro.
body{font: tamanhopt fonte; color:#cor;}
Para o tamanho, o mais apropriado é 10 ou 12. As melhores fontes são Arial, Verdana e Tahoma.
Para a cor, você vai precisar de um código de cor. Utilize o site color-hex para isso e lembre-se da recomendação acima. E lembre-se de deixar um # antes do código de cor (não deixe ##).

B (negrito)

Para fazer com que o negrito (simbolizado com b) na sua página fique personalizado, com uma fonte e cor diferentes, como nessa página, basta usar códigos simples:

b{font:tamanhopt fonte; color:#cor; font-weight:bold;}
Edite as partes em itálico conforme você já aprendeu. É recomendável que a cor do seu negrito combine com as cores do seu layout.
Você também pode adicionar bordas, mudar o espaçamento das letras, etc. Por exemplo:
b{font: 10pt arial; color: #088da5; font-weight:bold; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px dashed #f9ab2a;}

I (itálico)

É muito parecido com o negrito:
i{font:tamanhopt fonte; color:#cor; font-style:italic;}
Edite igual você faria com o negrito. Recomendo evitar cores muito claras para o itálico (fica difícil de ler).
Você pode editar outros elementos, assim cmo no negrito.

Strike (riscado)

Esse código não é muito utilizado, mas existe. Ele deixa o seu texto assim. Editá-lo é ainda mais simples do que com o negrito e itálico:
strike{font:tamanhopt fonte; color:#cor;}
Geralmente evitamos deixá-lo muito chamativo. Eu recomendo usar a mesma fonte que o body e uma cor parecida. Ou ainda, se você preferir, nem precisa incluir o strike no CSS (nesse caso, ele simplesmente vai ficar com a mesma configuração do body).

A (link)

Olhe este exemplo. Quando você pôe o mouse, ele fica diferente, não é mesmo?
Isso acontece porque o link tem três divisões: a (link normal), a:visited (link no qual a pessoa já clicou), a:hover (link enquanto a pessoa está com o mouse sobre ele). O mais comum é que os donos de PPs deixem o a igual ao a:visited, então ensinarei a fazer desse jeito.

Vamos começar com o a e o a:visited.
a, a:visited {font: númeropt fonte; color:#cor; text-decoration: none;}
Importante! Os links vêm automaticamente com um sublinhado. Se você não quiser isso, basta adicionar o trecho em roxo. Se você gostar do sublinhado, simplesmente retire esse trecho!
Após editar as partes em itálico, já teremos escolhido a fonte e cor do nosso link normal. Agora, podemos adicionar outros detalhes (veja a parte 1 do tutorial de CSS).

Feito isso, vamos faver o "link hover". Fazemos assim:
a:hover, a:hover:visited {font: númeropt fonte; color:#cor; text-decoration: none;}
Faça igual ao link normal, mas mudando algumas características (por exemplo, a cor).

Projetos

O tutorial de CSS ainda não está completo. Veja os próximos tutoriais que escreverei:
#Headers
#Caixas de texto
#Background da página
#Navegação

Buttons

Nesse tutorial, você vai aprender a fazer buttons animados usando apenas o Paint. O resultado fica até que bem satisfatório:

» Abrir o tutorial.
» Ver outros buttons feitos com esse tutorial.

Animações

Como a animação é a parte mais difícil, fiz uma seção só para isso, destinada a te ensinar diversos tipos de animação diferentes. Escolha uma das animações abaixo e clique para abrir o tutorial.

Gradientes

(Relativo aos estilos de borda 2/3 e qualquer estilo de letra.) Isso aqui é só um anexo para o caso de você querer fazer bordas ou letras com degradê, como esses:

» Abrir.

Buttons

Bem, como já disse antes, com esse tutorial você vai aprender a fazer buttons animados usando só o Paint, sem instalar quaisquer programas ou fontes. Dividi esse tutorial em 6 passos simples, que são:
» Imagem
» Borda
» Texto
» Animação
» Transparência
» Código


O que vai dar um pouquinho mais de trabalho é a animação, o resto é bem fácil!

Começando

Antes de mais nada, temos que saber com que ferramentas estamos trabalhando. Aqui eu fiz um pequeno esquema explicativo, usando como referência o Paint do Windows Vista e do Windows 7.
Não precisa se preocupar com as coisas escritas em azul, a parte realmente relevante é a que está escrita em vermelho.

Paint antigo:

Paint novo:




Importante! Quando estiver fazendo o seu button, salve as imagens no formato png.
Por quê? Se você salvar no formato jpg, o button vai ficar com uma qualidade de imagem inferior.
Para se certificar de que você está salvando a sua imagem no formato png, na hora de salvar selecione a opção "salvar como". Vai aparecer uma janela parecida com essa:


Depois de feita a animação, o button deverá ser salvo no formato gif.

» Prosseguir para o passo 1: imagem

Buttons

Passo 1: imagem

Muito bem, escolher uma boa imagem é o primeiro passo para se fazer um button bonito. Os wallpapers do neo e o site deviantART são bons lugares para se encontrar imagens.
A imagem que eu escolhi para o meu button é essa:


Preciso recortar um pedacinho dessa imagem que meça 88px de largura e 31px de altura. Eu gostaria de fazer um button com o rosto dessa menina, mas a imagem é muito grande. Nesse caso, preciso redimensioná-la.
No Paint antigo: diminua o zoom da imagem e aperte o botão print screen do seu teclado. Depois, aperte crtl + v. Aumente o zoom de volta. Agora você já pode recortar a imagem.
No Paint novo: (importante: enquanto estiver fazendo isso, não deixe a imagem selecionada!) Aperte o botão redimensionar e distorcer do menu. Depois, insira uma porcentagem na janela que abrir (exemplo: se você colocar 80 lá, a imagem fica com 80% do tamanho original). Quando a imagem estiver num tamanho satisfatório, já pode recortá-la.
Depois de redimensionar minha imagem, ficou assim:


Agora que a imagem está menor, vou conseguir recortá-la. Ela ficou assim:

É essa a imagem que usarei no meu button.

Importante! Certifique-se de que a imagem tenha o tamanho 88x31.

» Voltar para a introdução
» Prosseguir para o passo 2: borda

Buttons

Passo 2: borda

Uma borda serve para deixar o seu button visualmente mais atraente. Ela pode ter vários formatos e cores, basta escolher uma que lhe agrade.
Você pode fazer a sua própria borda ou usar uma pronta. Você encontra bordas prontas aqui.

Como usar a borda: copie a borda que quer usar e cole no Paint (em um arquivo separado da imagem). Eu escolhi essa aqui:


A borda pode ser feita com três tipos de "estilo", como você vai ver agora. Escolha o que gostar mais e mãos à obra!

Estilo 1


Ampliado:

Você colou na sua borda no Paint, certo? Agora, faça um contorno azul por dentro da borda preta. Depois, pinte o interior do button de preto. Por fim, pinte o contorno azul de branco. Você vai ficar com algo desse estilo:


Copie a sua borda e abra o arquivo onde está a imagem do button. Selecione o preto como sua cor secundária e marque a opção seleção transparente. Agora, aperte ctrl + v. Você vai ficar com algo assim:

Pronto!

Estilo 2


Ampliado:

Esse estilo só pode ser feito no Paint do Windows 7.
Selecione o branco como sua cor secundária e marque a opção seleção transparente. Copie a borda e cole em cima da imagem. Você vai ficar com algo assim:

Ampliado:

Apague a parte da imagem que ficou para fora da borda.

Agora, clique na opção "linha". Selecione o tamanho 1 e, nas opções de contorno, marcador. Coloque o branco como sua cor principal.
Usando a ferramenta de linha, desenhe uma borda por dentro da borda preta. Você vai ficar com isso aqui:


Pinte a borda preta da cor que quiser e estará terminado!

Estilo 3


Ampliado:

Esse é o mais fácil dos três.
Coloque a borda sobre a imagem, que nem eu expliquei no "estilo 2", e vai ficar com algo assim:

Ampliado:

Apague a parte da imagem que ficou para fora da borda.

Depois, selecione o branco como sua cor principal e escolha a ferramenta lápis. passe um contorno por dentro da borda preta, assim:


Depois, é só pintar a borda preta da cor que quiser.

Dica

Se você usar o estilo 2 ou 3, é uma boa ideia experimentar cores diferentes para a borda, mas tente sempre usar cores que combinem com o button.



» Voltar para o passo 1: imagem
» Prosseguir para o passo 3: texto

Buttons

Passo 3: texto

Agora, vamos ao texto do button. Para prosseguir com a explicação, eu vou usar essa imagem:


O texto nos buttons costuma usar um tipo de fonte que chamamos de "fontes de pixel". Você provavelmente não tem uma dessas no seu computador, mas não vai precisar.
Eu arrumei para você três pequenos "alfabetos". Também coloquei cada um deles no meu button, para você ver como eles ficam.










Como usar

Escolha o alfabeto que você achar mais bonito. Como exemplo, vou pegar o segundo.
Copie o alfabeto e cole no Paint, em um arquivo separado. Depois, use as letras de lá para montar o texto do seu button.
As letras maiores, da primeira linha, são as "maiúsculas"; as menores, da segunda linha, são as "minúsculas".
Montando o meu texto, ele ficou assim:

Agora, pinte o fundo do texto de verde, assim:

E depois pinte a borda preta da cor que quiser. No meu caso, vou usar o rosa:

Copie a imagem que tem o seu texto.
Por fim, abra o arquivo onde está o seu button. Coloque o verde como sua cor secundária e marque a opção seleção transparente. Aperte crtl + v para colocar o seu texto no button e arrume a posição do texto.


Importante!
O terceiro alfabeto é diferente dos outros dois. Para usá-lo, desenhe um retângulo branco dentro do seu button. Depois, coloque seu texto dentro do retângulo e pinte-o da cor que quiser.

» Voltar para o passo 2: borda
» Prosseguir para o passo 4: animação

Buttons

Passo 4: animação

A primeira coisa a fazer é pintar o fundo do button. Pense em uma cor que não haja em lugar algum do button. No meu caso, escolhi o verde. Veja isto:


Seguindo as instruções da imagem, pintei o fundo do meu button (ou seja, a parte que fica pra fora da borda). Ele ficou assim:


Depois você vai entender por que fazer isso. Agora, vamos começar a animação. Agora é hora de usar a imaginação. Quero que meu button fique assim quando pronto:


Para fazer isso, eu vou agrupar uma sequência de imagens. Ou seja, eu vou fazer a imagem ir mudando (seguindo a sequência indicada pelas setas vermelhas) para produzir o efeito desejado.

Essas são as imagens que vou usar no meu button. Agora, crio no meu computador uma pasta chamada "button". Dentro da pasta, vou salvar cada uma dessas imagens separadamente.


Agora, é finalmente a hora de fazer a animação. Copie o endereço dessa caixinha e cole no seu navegador:

Agora, é só seguir as instruções dessa imagem (arraste para o navegador para ver melhor):


Quando você terminar, clique no button animado com o botão direito e salve-o dentro da pasta "button". Recomendo salvar com um nome facilmente identificável, como button animado ou algo do gênero.

» Voltar para o passo 3: texto
» Prosseguir para o passo 5: transparência

Buttons

Passo 5: transparência

Antes de mais nada, lembra que eu pintei o fundo do meu button de verde? Agora eu vou tirar esse fundo verde e deixá-lo transparente. Mas por que um fundo transparente?
Se você deixar o fundo do seu button branco, ele vai ficar feio em uma página cuja caixinha não é branca. Com o fundo transparente, isso não acontece. Veja:


Muito bem, para deixar o fundo do button transparente, entre nesse site:

Clique no botão laranja com uma seta preta. Vai abrir uma página. Lá, você clica no botão "escolher" e seleciona o button animado. Depois, clique nesse botão:


Espere a imagem carregar.

Lá tem várias colunas com opções. Clique na primeira opção da coluna da direita.
Vai abrir isso aqui:


Quando terminar, clique no button com o botão direito do mouse e salve na pasta "button".

» Voltar para o passo 4: animação
» Prosseguir para o passo 6: código

Buttons

Passo 6: código

Primeiramente, você vai precisar hospedar o seu button. Existem vários sites em que você pode fazer isso, como o Tinypic. Escolha o que você preferir.
Importante! O Imageshack não serve para hospedar buttons.

Depois de hospedar o button, você vai ter uma URL para ele. Agora, copie o código dessa caixinha e cole no Bloco de Notas ou no Word:


Substitua:
/ pelo endereço da sua petpage.
http://site.com/urldaimagem.gif pela URL do seu button.



Com isso, você acaba de terminar o seu button!
(Se quiser, pode deletar a pasta "button" agora.)
Resultado:

Se você fez um button usando esse tutorial, me mostre! Eu ficarei muito contente em ver seu trabalho. Clique aqui para me mandar um neomail.

» Voltar para a lista de tutoriais de buttons
» Voltar para o passo 5: transparência

Buttons

Buttons feitos por mim:


Butons feitos por pessoas que usaram o tutorial:


Animação 1



Primeiro, você precisa ter seu button já com o texto, assim:

Lembrando que eu pintei o fundo do meu button de vermelho para poder colocar a transparência depois.

Escolha uma cor para pintar as letras. Para o meu button, eu escolhi:

Agora, clique no botão "editar cores" e faça isso:

Hora de pintar as letras do button. Na primeira imagem, deixe todas as letras brancas. Depois, vá fazendo isso:

E assim sucessivamente. Depois que já tiver usado todas as cores, vá deixando as letras que ficaram "para trás" em branco.

Quando terminar de fazer todas as imagens, abra o Gifmake. Deixe a primeira imagem com o tempo 100, e as outras com o tempo 12, assim:


Clique no botão "Generate GIF" e a animação está pronta!
Depois, é só fazer a transparência e o código do button.

Animação 2



Primeiro, você vai precisar do seu button com texto:

(No meu caso, pintei o fundo de vermelho para depois poder fazer a transparência.)

Escolha uma cor para pintar as letras. Eu escolhi essa:

Vá pintando as letras, uma por uma, da cor que escolheu, e depois pintando de volta em branco.
Abra o site Gifmake e faça como explicado no tutorial. Na hora de programar o tempo da animação, faça assim:


É só clicar no botão "Generate GIF" e a animação estará pronta. Depois, é só prosseguir para o próximo passo do tutorial.

Animação 3



Primeiro, vocêvai precisar do seu button sem texto. Desenhe um retângulo branco nele. Certifique-se de fazer o retângulo de um tamanho que caiba o texto do button.

Depois, vá colocando uma letra de cada vez e aquela barrinha vertical ao lado do texto. Salve cada imagem separadamente e depois abra o Gifmake.

Faça o upload das suas imagens e arrume-as assim (preste atenção ao tempo que deixei em cada imagem):


Depois, é só prossegir com o tutorial.

Gradientes

Às vezes, bordas ou letras com degradê enriquecem o seu button. Mas use-os com moderação, para não ficar estranho. Se a sua imagem for muito colorida ou "cheia", é melhor colocar a borda de uma cor só, para não ficar com excesso de detalhes.

Esse tipo de borda/letra fica mais adequado em imagens limpas, sem grandes detalhes e com pouca variação de cores. Veja abaixo um exemplo de imagem boa para se utilizar com esse efeito:

Essa imagem tem uma relativa simplicidade nas cores, fazendo com que o gradiente fique agradável aos olhos. A borda de uma cor só também fica boa, mas com o degradê fica um charme a mais. O posicionamento das duas cores (preto-vermelho) está em harmonia com a imagem.

Como usar

Não dá para fazer o degradê só com o Paint, por isso você vai ter que usar um dos gradientes que eu disponibilizo aqui. Primeiro, escolha uma das imagens abaixo, copie e cole no Paint.
Se aqui não tiver a combinação de cores que você precisa, fale comigo e eu faço para você.
Preto-vermelho


Roxo-rosa


Azul-lilás


Azul-turquesa


Antes de mais nada, você tem que ter a borda ou o texto que você vai colorir. Copie e cole no Paint, em cima da imagem do gradiente. Selecione o preto como sua cor secundária e marque a opção "seleção transparente". No caso da minha borda, eu fiquei com isso:


Copie. Depois, abra o arquivo onde está a sua imagem e cole a borda sobre a imagem. Deixe o branco como sua cor secundária e marque "seleção transparente". Feito isso, está pronto.

Você pode fazer isso tanto com a borda quanto com o texto.

Sitely

Listers



Achievements

Hover para informações




Créditos

Layout por Geel (de cabelo).
Resources por:
Buttons e layouts anteriores linkados às páginas de seus criadores.
Código, CSS, conteúdo e essa parafernalha toda feitos por mim.

Link Back








Layouts anteriores

Versão 1


O primeiro layout da página. Tanto o layout quanto o CSS foram feitos pela Hemily (user: ilusioniista) através de sua petpage Checkmate. Foi usado do dia da abertura da página, em 1º de abril de 2011, até o dia 19 de novembro do mesmo ano – vários meses!
Na época, a Pudding era uma petpage de histórias...
Bem, esse layout hipnotizante foi parte do meu ingresso ao mundo das petpages, então eu o amo muito!

Versão 1 1/2


Eu chamo essa versão de "um e meio" porque na verdade foi um layout que usei paralelamente às versões 1 e 2. Como eu disse, a Pudding era uma pp de histórias, mas eu comecei a fazer tutoriais em julho de 2011. Para não ter que criar outra petpage, coloquei os tutos em uma página anexada, usando esse layout. Na verdade, ele foi reciclado de um lay usado um bom tempo antes numa apply, por isso nem tinha o nome da página.
De todo modo, adoro esse lay, principalmente porque foi minha amiga Gi (user: fofodagi) que fez pra mim, através de sua petpage GiCute!
O CSS (que era bem simples, a propósito) foi feito por mim.
Esse layout foi usado de julho de 2011 a 21 de janeiro de 2012.

Versão 2

Bacon_Dada
Essa versão foi feita com base em um desenho que retratava a "forma humana" das estações do ano. Quem fez foi minha maravilhosa amiga Bacon (user: bacon_dada).
O CSS foi feito por mim (eu pessoalmente achei que ele ficou bonitinho).
Usei esse layout de 19 de dezembro de 2011 a 21 de janeiro de 2012.
Acho que o que mais gosto nessa versão foi o fato de eu ter podido usar e abusar das cores. Rosa, roxo, laranja, amarelo, vermelho, branco, marrom... O colorido do layout, sobretudo da navegação, era algo que eu amava!

Versão 3


Quando inaugurei essa versão, em 21 de janeiro de 2012, foi quando tirei a parte de histórias da Pudding e transformei-a em uma página exclusivamente de tutoriais.
O layout é incrivelmente fofo e, eu diria, excessivamente rosa. O banner foi feito pela Chinensis Designs, e eu arrumei o resto do layout e o CSS. A versão 4 trouxe uma renovação organizacional na Pudding, em questão de layout, divisão de páginas e minha forma de dialogar com os leitores da página.
Esse layout ficou na pp até 1º de abril de 2012, quando a Pudding completou um ano.

Versão 4


Esse layout era tão lindo... Foi feito por Nienke (user: nienkju) através da página Perfect Symmetry. Nessa época, atualizei a página muito pouco. O layout também ficou muito tempo na página: utilizei-o de 1º de abril de 2012 a 28 de janeiro de 2013!

Extras

Clique no título para abrir.

Bordas para buttons

Algumas bordas sem vergonha que fiz para o caso de você precisar. Uso livre, não precisa creditar.

Ranking

As melhores páginas de cada categoria estão aqui. Sou uma fã entusiástica do trabalho de cada uma delas.

Bordas para Buttons

Você pode usar estas bordas livremente para fazer seus buttons. Você não é obrigado a creditar, mas seria legal.






» Voltar para os extras
» Voltar para o tutorial de buttons

Ranking

Primeiro, segundo, terceiro e quarto, nessa ordem.
Ponha o mouse sobre o button para ler informações básicas sobre o site.
Se sua página estiver no ranking, você pode usar o button abaixo.
First, second, third and fourth, in this order.
If your petpage is here, you may use the following button.




Guides and Tutorials



Requests



Button requests



Premades and Templates



Directories




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions