Fiat Justitia, Ruat Coelum
Minha Conta | Personalizar | Jogos | Explorar Neopia | Notícias | Central de Pets | Fóruns | Lojas | Centro NC

Sejas bem vindo guest ao NOVÍSSIMO!! Tutorial Gráfico de HTML do John Braüner. Quero comprovar que este não é um simples tutorial de HTML. Refere-se exactamente a parte gráfica de sua página e ajudará-lhe bastante, desde contador de visitas à layouts (que no qual devem estar pronto em breve). Este tutorial, acima de tudo, é constantemente actualizado, sempre em busca de facilidade para com os usuários da mesma. Optimize sua página HTML com mais facilidade. Guia actualizado!

Agradeço demasiado! pelas mais de 14.900 visitas.

Agradeço demasiado! à todas as pessoas, que passam, à me escrever diariamente, seja para 'papear', seja para tirar uma dúvida, saibas que eu adoro e leio todos os neomails, mesmo que eu possa ir a demorar para responder, eu sempre respondo, tenhas certeza, se por acaso não responder, algo aconteceu (como uma caixa lotada ou simplesmente apaguei a caixa sem querer, então envie-me novamente a mensagem)

Contacto!



Precisas ir a entrar em contacto comigo? Posso lhe ajudar de alguma maneira ou apenas quer papear comigo? Sugestões de tutoriais, dúvidas, enfim, envie-me um neomail. Terei o maior prazer em lhe responder. Sua opinião é muito importante. Vais a clicar na 'carta' acima.

NOTA!
Em relação à copia de qualquer conteúdo aqui presente neste tutorial (bem como texto, imagens) não são permitidas sem autorização, e qualquer copia desse conteúdo pode resultar em uma denúncia para a equipa do Neopets. Evite constrangimentos e problemas posteriores!!

Endereços/Hiperligações da Petpage
Tutorial de Animação
Tutorial de Blogue
Tutorial de Contadores
Tutorial Download de Fontes
Tutorial de Glitter
Tabela de Cores

Link-Me!
Outros links por mjonnys
Entrevistas por skizei

Tutorial de Animação
(Voltar para o Topo)

Introdução: Desejas a fazer uma imagem animada, 'tipo' anúncio? Precisas apenas de um programa específico para isto, que veremos logo.

Exemplo básico:


NOTA! Há diversas formas de fazer animações, que na qual diversos programas, utilitários e ferramentas possam a ser utilizados. Vou à seguir este tutorial de um jeito mais fácil e rápido.

1º. De primeira, 'acesse' este site:

(é o site oficial do programa que utilizaremos - PhotoFiltre Studio X)

Clique em English e depois em Downloads. Faça o download do primeiro ficheiro, que é justamente a versão que vem com tudo que o programa tem a oferecer. Terminado o download, logo abaixo nesta mesma página, há uma lista imensa de 'patches' de idiomas. Faça o download do ficheiro com esse nome (infelizmente não coube-me o Português de Portugal): Brazillian Portuguese / Português do Brasil / Portugais du Brésil.

NOTA! Para instalar o 'patch' de idioma, faça o download correctamente, descompacte o ficheiro (arquivo) utilizando um descompactador (WinRAR, WinZIP) e jogue o ficheiro StudioBR.plg na pasta onde você instalou o PhotoFiltre. Exclua o ficheiro StudioEN.plg e agora reinicie o PhotoFiltre, pronto, sua versão acaba a ficar na língua portuguesa.

2º. Imagem do programa:

Menu do programa:


Lista de comandos:
Novo projecto: CTRL+N
Abrir ficheiro: CTRL+O
Reverter: CTRL+R
Salvar projecto: CTRL+S
Fechar projecto: CTRL+W
Propriedades da Imagem: CTRL+J
Sair do programa: CTRL+Q

3º. Mão na massa agora. Primeiro, cliques em Camada, em seguida Novo -- Abrir como camada, como mostra o screen abaixo.


E pode repetir isso quantas vezes quiser, para assim colocar mais imagens para a animação.

Agora, clique em Ferramentas, depois Exportar como GIF animado.


A janela abaixo aparecerá, pronto, é só definir o tempo de cada imagem passará para a outra, dando se o efeito da animação.


4º. Fim. Hospede o ficheiro no Photobucket (há passos de como o instalar no tutorial de contadores, aqui).



Tutorial de Blogue
(Voltar para o topo)

Introdução! Weblog/Bloguer/Blog/Blogger - que na Internet, cujo significado - é uma página web com informações sobre o quotidiano de algo/alguém, funcionando deste modo como 'diário/caderno virtual', mas não limita-se só a isso. Clicando aqui você pode conferir uma página própria do Neopets com blogues de lojas, é e com esse estilo que vamos a fazer nosso blogue pessoal.

1. Segue aqui dois modelos de blogue:



Clica aqui, há o código-base dos modelos. Copie a imagem do modelo para algum editor de imagem (como, por exemplo, o Paint), e lá, coloque a sua ilustração, o que desejares, mas apenas onde tem escrito 2, pois o 1 é onde ficara o texto do blogue. Copiado o código, faça as alterações necessárias.

Fim! Como você deve ter notado, rapidamente você faz um bloguer, apenas é necessário o código base, e agora, é só ir a se divertir, faça bom uso.



Tutorial de Contadores
(Voltar para o Topo)

Introdução: O Contador é hoje muito utilizado por diversos sites, principalmente no Neopets, em exatamente, petpages, mas pode ir a ser utilizada no seu lookup, petlookup, páginas em geral. É uma forma de mostrar a quantidade de visitas em sua página (obviamente ).

1º. Acesse o link abaixo. É um site seguro e próprio para hospedar contadores.


Faça seu cadastro, clicando em Counter Signup.

NOTA! - Coloque seu e-mail verdadeiro, será enviado para ele a confirmação do cadastro, pois para utilizar o BoingDragon's Lair é preciso manter manter todos os seus dados correctos e ACTUALIZADOS!.



Para acessar sua conta, clique em Counter Login e digite seu login e senha.

2º. Agora iremos a fazer nosso querido contador. Clique em Add A New Counter no menu. Existem 15 modelos de contadores já prontos. Mas caso já tenha feito o seu próprio modelo, clique no Scorchio azul lá embaixo.



Exemplo básico do modelo de contador:

NOTA! Pois, você pode fazer do jeito que bem entender, com outros tipos de imagem, fonte, estilo. Use sua imaginação, e ficará perfeito.

3º. Agora, coloque em Background Image Url o endereço da imagem onde será colocado o modelo do contador para a então instalação do contador em si. LEIA a observação abaixo.

Utilizando o Photobucket

Observação: Há um 'verdadeiro' database de imagens, o seguro site Photobucket (www.photobucket.com), amplamente usado por todos os tipos de usuários. Recomendo sua utilização.

Hospedando a imagem: Clique em Choose Files e pegue o ficheiro do contador para hospedar, e espere o upload. Já hospedado, coloque o mouse em cima da imagem e pegue o Direct Link e copie o endereço e VOILA! é só ir a utilizar. Voltando ao BoingDragon's Lair, clique em Preview e a imagem do contador será mostrada.

- Agora, vais a organizar o contador dentro da imagem. Com X, você arruma horizontalmente. Com Y, verticalmente. Cada valor colocado altera o lugar do contador (obviamente). Por fim, clique em Create Counter.

4º. Vamos para a instalação (o contador, pode ser usado em qualquer lugar, não limita-se só no Neopets).
Clique em Counter Listing, e clique em Install, logo abaixo da imagem do seu contador. Uma página será exibida e copie o código em Negrito. Fim.



Tutorial Download de Fontes
(Voltar para o Topo)

Introdução! Há dezenas de milhares de sites que disponibilizam fontes para download. Se desejas fazer uma pesquisa mais específica, procure por Fontes TTF em um 'buscador', o mais utilizado, é o Google (www.google Points ), e deste modo, ver vários sites com diferentes fontes. No tutorial abaixo, estou a utilizar o 1001 free fonts, cujo site é em inglês, porém e de fácil uso.

1º. Acesses: www.1001freefonts.com. De seguida, escolha uma fonte e clique em Download Win Font (para fontes de computadores Windows) ou Download Mac Font (para fontes de computadores Macintosh), como no screen abaixo.


2º.Feito o download, vamos 'descompactar' este ficheiro (arquivo) com descompactadores (WinRAR é um bom exemplo), mas primeiro, vá na pasta onde instalas-te o ficheiro compactado com a fonte. Clique em Extrair para "nome da fonte.


3º. Siga para Painel de Controlo e depois Tipos de letra -- Ficheiro e por final Instalar novo tipo de letra (agora pegue o ficheiro da fonte) e VOILA! divirta-se com suas novas fontes.


Como você deve ter notado, foi absolutamente fácil e rápido o download e a instalação de novas fontes.



Tutorial de Glitter
(Voltar para o Topo)

Introdução! Há! Glitter é perfeito, não tenho muito a falar disto.

Exemplo básico de glitter:


1º. Acesse este site:

(é o Site oficial do programa que utilizaremos - PhotoFiltre Studio X)

Clique em English e depois em Downloads. Faça o download do primeiro ficheiro, que é justamente a versão que vem com tudo que o programa tem a oferecer. Terminado o download, logo abaixo nesta mesma página, há uma lista imensa de 'patches' de idiomas. Faça o download do ficheiro com esse nome (infelizmente não coube-me o Português de Portugal): Brazillian Portuguese / Português do Brasil / Portugais du Brésil.

NOTA! Para instalar o 'patch' de idioma, faça o download correctamente, descompacte o ficheiro (arquivo) utilizando um descompactador (WinRAR, WinZIP) e jogue o ficheiro StudioBR.plg na pasta onde você instalou o PhotoFiltre. Exclua o ficheiro StudioEN.plg e agora reinicie o PhotoFiltre, pronto, sua versão acaba a ficar na língua portuguesa.

2º. Imagem do programa:

Menu do programa:


Lista de comandos:
Novo projecto: CTRL+N
Abrir ficheiro: CTRL+O
Reverter: CTRL+R
Salvar projecto: CTRL+S
Fechar projecto: CTRL+W
Propriedades da Imagem: CTRL+J
Sair do programa: CTRL+Q

3º. Menu' de tarefas:

- Essa é a famosa Varinha Mágica Perdida do Harry Potter, é como eu chamo (tá bom, é só Varinha Mágica, lol).

Seleccionas com ela na imagem o local/locais que colocarás o glitter. De seguida, vá no menu, clique em Filtro, Ruído, e por fim Adicionar ruído.




Quanto maior ruído, maior a quantidade de glitter. Na imagem acima, mostra ela colocado como 30. Mas deves proceder do seguinte modo: Uma imagem com 50 de ruído, e uma imagem com 100 de ruído, é nisso aí que se faz o efeito do glitter (resumindo: a segunda imagem deve ser mais que o dobro da primeira)

Ou seja, tens que usar duas imagens iguais, com ruídos diferentes para se dar o efeito.

4º. Fim. Hospede o arquivo no Photobucket (há passos de como o instalar no tutorial de contadores, aqui).



Tabela de Cores em HTML
(Voltar para o Topo)





Link-me
(Voltar para o Topo)

Se por acaso, tu gostaste desse tutorial e quer linka-lo, pegue a imagem abaixo e adicionas na tua petpage e outras, enfim.


Clique aqui para pegar o código.

Voltar ao Neopets!

Voltar ao Topo!


Actualizado última vez: dia 05/11/2009
J.A.W