|
body {background:url('http://i55.tinypic.com/wlx5ra.gif'); background-color:#B3BAC0;}
body, a, table, p{
font:8pt verdana;
color:#969696;
text-align: center}
textarea
{
color:#404040;font:8pt verdana;border:1px dashed #000000
}
blockquote
{
background: #fff; color: #383838;
font-family: Verdana, Arial, tTahoma, Sans-serif;
font-size: .8em; text-align: center;
border:thin #FF006F dashed; padding: 5px 25px 5px 25px;
}
b {font-weight:bold;color:#8BB655;}
u{color:#8CDEFF;text-transform:none;border-bottom:1px #B5F357 dashed;text-decoration:none;}
i{color:#FF8BB9;}
h1 {font-family:georgia;
color: #97A8B4;
font-size: 16px;
border-bottom:2px solid #D4F7FF;
text-align:center;
font-style: italic;}
h2 {font-family:rockwell;
color: #fff;
font-size: 13px;
font-weight:bold;
border-bottom: 1px dotted #FFA4B4;
background: #FFCED6;
text-align:left;}
a:link, a:visited{
color:#84AFDF;
text-transform:bold;
font-weight:bold;
border-bottom:1px dashed #84AFDF;}
a:hover, a:active{
color: #BCD3ED;
font-weight: none;
cursor:help;
}
a.nav, a.nav:visited, a.nav:active{
align:center;
font-family:calibri;
font-size: 9pt;
color:#fff;
background:#75A23F;
text-transform:bold;
font-weight:bold;
display:block;
padding: 8px 8px 8px 8px;
margin:1px;
text-decoration:none;
border-bottom: 0px solid #fff;}// *{}
a.nav:hover{
padding: 8px 8px 8px 8px;
color: #75A23F;
background:#fff;
font-size: 9pt;
font-variant: small-caps;
font-weight: none;
text-transform: none;
opacity:0.7;}.sf, table
{display:none;}
#klays{overflow:hidden; left: 630px; top: 55px; width: 356px; height:517px;}
#pag{overflow:auto;width:356px; height:517px;}
#nav {overflow:hidden; left: 445px; top:72px; width: 181px; height:376px;}
Home
Credits
Layout and CSS by
Evidence
Content by me(thuanefbuchner).
Place horders and Counter Base by
Idiosyncratic
Fazendo um Button simples
Primeiramente, abra o Paint. Em seguida, vá em Imagem(que se localiza na barra superior) e depois em Atributos..., se preferir aperte ao mesmo tempo, Ctrl e a letra E no teclado.
Aparecerá uma janela de medidas. Onde está Largura você muda o número para 88 e em Altura você muda para 31.
88x31 é a medida padrão dos Buttons, mas você pode colocar outras medidas, a escolha é sua.
Antes e Depois
Nessa mesma janela de medidas, certifique-se que a parte Unidades está com a opção Pixels selecionada.
Quando terminar, você verá que a imagem ficou menor, no tamanho de um Button.
Agora vem a melhor parte, vamos enfeitar o Button. Primeiro vamos colocar uma imagem, precisaremos da ferramenta Selecionar.
Faça um pequeno quadrado no Button em branco e clique com o botão direito do mouse nele. Depois clique em Colar de..., aparecerá uma janela com todas as imagens salvas no seu computador, escolha uma e clique duas vezes.
A imagem aparecerá no Button, mesmo que ela seja grande, você poderá movê-la de modo que fique como você quer. O meu Button ficou assim:
Agora se preferir você pode fazer a borda, eu geralmente faço bordas simples, por isso vou ensiná-las, é o modo mais fácil.
Para isso, precisaremos da ferramenta Linha:
Para melhor visualização, vamos usar a ferramenta Lente de Aumento. Clique sobre a lupa e depois em 8x:
A imagem aumentará, fique tranqüilo, ela continuou do mesmo tamanho, só a visualização aumentou. Agora, faça um contorno no Button, como mostra abaixo:
Na imagem acima, a borda está verde limão, mas na realidade é preta, apenas mudei a cor para melhor visualização.
A borda simples está pronta, se preferir pode destacá-la fazendo uma segunda borda de cor branca:
Vá novamente na ferramenta Lente de Aumento e clique em x1. O Button voltará ao tamanho original.
Devemos agora, colocar algo escrito no Button, lembrando que o Button não precisa ser necessáriamenteapenas um link-me, você pode fazê-lo como plaquinha entre outros.
Um bom programa de edição de imagem para escrever no Button é o Photofiltre, ele é um programa que pode ser baixado online gratuitamente. O tutorial Photofiltreando, explica exatamente como baixar e usar o programa Photofiltre Studio que é uma segunda versão com os mesmos recursos, só que ainda melhor. Eu recomendo.
Eu ensinarei como escrever nos dois programas, eu particularmente, uso o Photofiltre e acho melhor, mas pode também ser feito no Paint.
Escrevendo no Paint
Vamos usar a ferramenta Texto, certifique que esteja selecionada a opção de Fundo Branco:
Selecione no Button a área onde você escreverá. Aparecerá um caixinha onde você pode escolher a fonte(letra), o tamanho, o tipo de escrita, e se quer negrito; itálico; ou sublinhado:
Faça como quiser e escreva o "texto" no seu Button (no meu Button eu escrevi o nome da Knupp):
Finalmente, terminamos um Button simples escrito no Paint. Vamos salvar. Vá em Arquivos e depois em Salvar como..., aparecerá a janela onde estão suas imagens. Onde está Nome do Arquivo, você põe o nome que preferir, em Salva como tipo, você DEVE escolher a opção PNG. As outras opções modificam a qualidade de sua imagem e a destruirá completamente. Então, não se esqueça, sempre escolha a opção de arquivo PNG.
Enfim, o meu Button:
Escrevendo no Photofiltre
Para escrever no Photofiltre você deve ter um Button sem nada escrito salvo nos seus documentos. Os Buttons que eu geralmente faço, são praticamente feitos no Paint exceto pela hora de escrever.
O meu Photofiltre é em francês, por isso eu explicarei como fazer em francês, mas se o seu é em português ou inglês, sem problemas, basta comparar o meu Photofiltre com o seu que você achará os botões.
Clique na pastinha que está na barra superior do Photofiltre:
Aparecerá um janela com todas as imagens salvas no seu computador, escolha o Button que você começou a fazer no Paint e clique duas vezes. O Button aparecerá.
Aqui eu usei um Button diferente para escrever, só pra diferenciar :)
Agora clique no T que está na barra superior.
Aparecerá um janela de edição de imagens. Um dos diferenciais do Photofiltre é que você pode por alguns efeitos no texto. Para ficar com fácil entendimento, eu fiz um imagem explicando exatamente com por esses efeitos. Parece ser complicado, mas é rápido e fácil.
Como a imagem é grande, tive de dimunui-la. Para ver no tamanho original, arraste-a até o seu navegador. Ou se preferir, se você usa Mozilla Firefox ou Google Chrome clique com o botão direito e depois em Copiar URL da imagem. Mas se você usa Internet Explorer, clique com botão direito do mouse, depois em Propriedades e copie a URL.
Depois que tiver escolhidos todos os efeitos, clique em Ok. O texto aparecerá no button e você poderá movê-lo para onde quiser.
Para salvar clique no disquete que está na barra superior.
Aparecerá a janela onde estão suas imagens. Onde está Nome do Arquivo, você põe o nome que preferir, em Salva como tipo, você DEVE escolher a opção PNG. As outras opções modificam a qualidade de sua imagem e a destruirá completamente. Então, não se esqueça, sempre escolha a opção de arquivo PNG.
O Button:
Hospedando o Button
Hospedar o Button é basicamente criar uma URL para ele, ou seja, um "site" da imagem. Só assim você poderá usá-lo, senão ele continuará para sempre nos seus arquivos(a não ser que você exclua ele ._.).
Enfim, existem vários sites de hospedagem de imagens. Inclusive alguns que eu nem conheço ou nunca usei. Pelo que sei os mais conhecidos/usados são Photobucket, Imageshack e Tinypic. Qual é o melhor eu não sei, pois cada um tem seus critérios, mas são todos confiáveis.
Imageshack
O meu preferido e que eu mais uso é o Imageshack, é gratuito. Na minha opnião, é o mais fácil e rápido de usar e você não necessariamente precisa se cadastrar. A vantagem de se cadastrar é que você sempre terá seu álbum, ou seja, todas as imagens que você hospedar estarão sempre lá. Sem o cadastro, você hospeda a imagem e pega a URL, mas quando sair da página a imagem não ficará salva e se houver o caso de você perder a URL, nunca poderá recuperá-la, só re-hospedando a imagem.
Uma coisa bem estranha no Imageshack é que mesmo estando na opção de tradução em português, o site fica meio português e meio inglês(igual a essa página -.-). Mesmo assim, dá pra mexer tranquilamente por ser um site simples.
Cadastrando
Primeiramente, entre no site Imageshack. URL abaixo:
Depois clique em Inscrever-se. O segundo botão da barra laranja.
Aparecerá um formulário que você terá que preencher, conforme mostrado abaixo.
Quando preencher tudo, aperte no botão azul Sign up.
Aparecerá tal mensagem, ignore-a.
Clique em Logon do canto superior direito do site.
Aparecerá os campos que deverão ser preenchidos para entrar em sua conta.
Quando terminar, clique em OK. Pronto, você acaba de criar e entrar na sua conta. Agora vamos hospedar o button ou imagem.
Na página inicial, estará aparecendo isso:
Clique em Browse. Clique duas vezes no seu button ou imagem que aparecerá na pasta de imagens. Depois clique em Carregar agora e aguarde.
Quando terminar de carregar, mudará de página automaticamente. Nesta outra página, aparecerá algo assim:
Copie a parte onde diz Link direto como mostra a imagem acima. Guarde essa URL em seu bloco de notas ou Microsoft Words. Pronto, você já sabe hospedar um button ou imagem.
Se você quiser ver a URL dessa imagem novamente sem ter que hospedá-la, siga os seguintes passos:
Clique em Minhas imagens, o último botão da barra laranja.
As imagens já hospedadas por você aparecerão juntas em pequenos quadrados. Clique no minúsculo I ao lado da imagem.
Aparecerá uma caixinha com as URLs da imagem. Novamente copie o Link direto.
Codificando o button
É necessário codificar o button para que funcione, ou seja, com a codificação, será possível clicar nele, assim levará até a página que o button pertence. Codificar o button é extremamente simples. O código é pequeno e de fácil compreensão. Com tempo você vai memorizá-lo.
Entendendo o código
O código é este:
Observe o código...
O a h ref é a tag de link. É onde o link da sua página deverá ser posto.
E o img src é a tag de imagem. É onde você deverá por a URL do Button que foi hospedado no tutorial anterior.
O border="0" é a tag da borda do link. Essa borda fica envolta do Button. Como não é muito bonita e "estraga" o Button, geralmente é posto o número 0 para que não apareça. O número define a largura.
Codificando
Agora é só copiar o código abaixo, e colar no bloco de notas ou Microsoft Word.
Onde está link, você substitui pelo link da página para onde o button levará.
E onde está imagem, você substitui pela URL do button que hospedou.
Disponibilizando o código
É necessário usar textarea para criar uma "caixinha" onde as outras pessoas poderão copiar o código de seu button.
A caixinha é como esta...
Para isso, use o código abaixo:
Onde está URL, você substitui pela URL do button que hospedou.
Onde está código, você substitui pelo código que fizemos ali em cima.
Ficará assim:
Acima usei o button que a infel fez para a Knupp.
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® 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
