Minha Conta | Central de Pets | Explorar Neopia | Sala de Jogos | NeoFóruns | Central de Neopia | Notícias | NeoVísão | Centro NC

Seja bem vindo guest ao NOVÍSSIMO! Tutorial Gráfico de HTML do mjonnys. Quero comprovar que este não é um simples tutorial de HTML. Refere-se exatamente a parte gráfica de sua página e ajudará-lhe bastante, desde contador de visitas à layouts. 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 facilidade.

Agradeço demasiado! à quase totalidade de 13.000 visitantes!.

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.

Neomail



Precisa ir a entrar em contato 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
Tutorial de Animação
Tutorial de Blogue/Blog
Tutorial de Contadores
Tutorial Download de Fontes
Tutorial de Glitter
Tabela de Cores em HTML


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

Introdução: Desejas a fazer uma imagem animada, tipo anúncio? Vais a precisar de apenas um programa especifico para isto, que veremos logo.

Exemplo básico:


NOTA! Há, diversos tipos e formas de fazer uma animação, na qual diversos programas e utilitários podem ir a ser utilizados. Vou à seguir pelo jeito mais fácil e rápido já apresentado.

1º. Primeiramente, acesse este site:

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

Cliques em Downloads e 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)

Cliques em Downloads e faça o download do primeiro ficheiro, que é justamente a versão que vem com tudo que o programa tem a oferecer. Terminado 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 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).

Selecionas 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)

Voltar ao Neopets!

Voltar ao Topo!


Actualizado última vez: dia 14/06/2009