WarTuts - Tutoriais de Photoshop

BOTÃO ANIMADO - Pg. 3

Tutoriais - 30/04/2006 - Rogério Guerreiro

Temos agora um total de 24 quadros. Repare que estes últimos 12 quadros estão selecionados, como mostra a figura A. Essa seleção deve ser mantida, pois ainda não completamos o efeito. Siga para o próximo passo.

O que precisamos fazer é inverter a ordem desses últimos 12 quadros, para que a animação fique correta. Clique, mais uma vez, no botão do canto superior direito da paleta Animação e escolha “Reverter Quadros” (Reverse Frames).

		Teste a animação (C), clicando no botão Play, na base da paleta (1). Quando acabar, vamos *otimizar* a animação. Otimizar é conseguir um equilíbrio entre o tamanho do arquivo e a qualidade da imagem final, ou seja: o arquivo deve ser pequeno, pois destina-se à internet; mas, ao mesmo tempo, a imagem precisa parecer boa na tela. Para começar, clique na aba Fatia (Slice) (2).

A paleta ficará como na figura D. Eu estou usando outro botão animado como exemplo, mas isto não afeta o processo. Caso a paleta Fatia (Slice) não esteja visível, vá ao menu Janela (Window) e abra-a. Abra também as paletas Opções (Options) e Otimizar (Optimize) (E). A paleta Fatia será explicada depois; vamos cuidar da otimização da imagem, primeiro.

Na janela do arquivo (F), clique na aba Até 4 (1); assim teremos uma prévia da imagem em quatro modos diferentes. Observe
que o arquivo original (2) está com tamanho de 65,8 K. Compare como ficaria se salvo no formato GIF com 16 cores (3), 64
cores (4) e 256 cores (4). Nosso objetivo, como já exposto, é obter uma imagem de qualidade, no menor tamanho possível.

		A otimização de verdade é feita na paleta Otimizar (Optimize) (G). Primeiro, clique na imagem que você quer configurar. No exemplo da figura F está selecionada a quarta imagem (5). De volta à paleta Otimizar (G): Selecione o formato *GIF* (1), como se trata de uma animação, não é possível escolher o formato JPG. Escolha o número de cores (2). Em Pontilhamento (Dither) (3), deixe Por Difusão ou Sem Pontilhamento. Estas escolhas dependerão da qualidade exibida; experimente até obter um resultado satisfatório.

Pode-se também ampliar a imagem para uma melhor visualização (H); é só clicar na setinha na base da janela (1). Neste exemplo
se vê que a imagem em GIF com 16 cores (segundo quadro) não ficará boa. No caso, foi escolhida a imagem do terceiro quadro,
a de 64 cores, por ser a que melhor se enquadra no nosso objetivo. Vamos à paleta Fatia (Slice) (I):

Dê um nome à imagem (1). Como isto é um botão, deve-se indicar uma URL para ele (2). Se não souber a URL exata, atribua uma que direcione para a página index.html do seu site. Depois, em programas como o Dreamweaver ou o FrontPage, indique a URL correta.

Em Destino (3) há quatro opções; as duas primeiras são as mais usadas:
Se você escolher "_self", a nova página será aberta na mesma janela, quando o internauta clicar no botão.
Escolhendo "_blank", a nova página abrirá em uma nova janela, ao se clicar no botão.

Depois, vá em Arquivo/Salvar Otimizado Como... (File/Save Optimized as...) (J). No quadro (K), especifique o diretório onde o arquivo será salvo (1), o nome do arquivo (2) e, mais importante, salve-o no formato *.GIF.
Veja o resultado; com um pouco de prática, você sem dúvida fará coisas muito melhores do que esta. Mas e se você quisesse que o botão aparecesse “do nada”, como faríamos? É o que veremos na próxima página.

Ao clicar no botão acima,
a Galeria do site irá abrir
em uma nova janela, pois configurou-se a opção "_blank". Experimente.

Página 1 / Página 2 / Página 3 / Página 4