Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Tutoriais de web design
SEÇÕES
Manuais relacionados
+Tutoriais de web design
Categorias
+Design
+Guias de desenho

Índice do Manual Tutoriais de web design
+ Como fazer um gif animado com Photoshop
+ Definições de tela
+ As cores e HTML
+ Formatos gráficos para páginas web
+ Tabela com esquinas arredondadas
+ Tabela com desenho em sua base
+ Tabela com desenho em sua base II
+ Frames sem bordas
+ Barra de navegação HTML simples
+ Barra de navegação HTML
+ Setores de Photoshop
+ Listas HTML feitas com tabelas
+ Tabela melhorada com imagens para barra de navegação
+ Informe sobre o estudo Eyetrack III
+ Montar uma web a partir de uma imagem com Photoshop
+ Como criar um gif com Photoshop II
+ Fluxograma
+ Formatos de Arquivos
+ 30 dicas de Photoshop
+ Criar imagem em miniatura (thumbnail) com Photoshop
+ Efeito de texto com Photoshop
+ Links sem sublinhado
+ Fundo tipo mosaico a partir de uma imagem com Photoshop
+ Efeito de reflexo de texto em Photoshop
+ Fazer um texto que se adapta a um círculo, Photoshop CS2
+ Trabalho com ações de Photoshop. Gravar e executar uma ação
+ Lote com Photoshop para executar uma ação sobre os arquivos de um diretório
+ Mudar o tamanho de todas as imagens de uma pasta com Photoshop
+ O banner perfeito
+ Páginas fluidas

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net


Como fazer um gif animado com Photoshop

Descrição passo a passo de como fazer um gif animado com Photoshop e Image Ready.


A partir da versão 5.5 de Photoshop temos a nossa disposição um programa muito interessante para realizar, entre outras coisas, trabalhos específicos para o web, como podem ser a criação de GIFs animados ou imagens que mudem ao passar o mouse por cima (Rollover). O produto em concreto é Image Ready e vamos estudar a maneira de trabalhar com ele para realizar um GIF animado.

Criar um arquivo .psd com os diferentes fotogramas

A primeira tarefa para realizar um GIF animado com Photoshop eé criar um arquivo .psd, que é o formato próprio de Photoshop onde podemos manter as "layers", ou seja, as camadas que serão necessárias para realizar o GIF animado.

Nota: As camadas são próprias de Photoshop e de outros programas de desenho gráfico e permitem editar partes do gráfico de maneira independente. Quem quiser dominar Photoshop e similares deverá familiarizar-se com o trabalho com camadas.

Cada camada criada com Photoshop pode ser um fotograma do GIF animado, por isso podemos criar tantas camadas de acordo com quantas imagens quisermos que tenha na animação. Logo com Image Ready poderemos intercalar essas camadas na ordem que quisermos e atribuir-lhes um tempo de visualização a cada uma.

Imagem das camadas criadas para fazer a animação


Botão para passar entre Photoshop e Image Ready Uma vez criada a imagem com as diferentes camadas com Photoshop, podemos salvá-la com extensão .psd, para que salve toda a informação das camadas. Uma vez salvas podemos passar o arquivo a Image Ready, que é o programa que utilizaremos para animar as camadas em um GIF animado.

Para passar o arquivo do Photoshop a Image Ready comodamente, podemos utilizar um botão que existe na parte debaixo da barra de ferramentas. O botÃO se encontra nos dois programas e podemos vê-lo remarcado na imagem à direita.

Nota: A ação de passar de um programa a outro será muito repetida durante o trabalho com Photoshop e Image Ready, visto que cada programa tem capacidades distintas e as ações que se fazem com um programa não costumam estar disponíveis no outro. Por exemplo, se quisermos editar uma camada, temos que fazer a partir do Photoshop e se quisermos criar fotogramas e selecionar as camadas que devem ser visualizadas em cada um, teremos que fazer com Image Ready. É aconselhável salvar o arquivo .psd antes de passar de uma aplicação a outra.


Trabalho com Image Ready

Para definir cada um dos fotogramas da animação e suas propriedades temos uma janela chamada Animação. Se não a vemos ao abrir Image Ready podemos mostrá-la no menu da janela > Mostrar animação.

A janela de animação contem um botão para adicionar fotogramas que tem forma de documento novo. Em cada fotograma podemos selecionar de maneira independente as camadas que se desejam visualizar, de modo que devemos criar os distintos fotogramas da nossa animação e indicar que camadas devem ser visualizadas em cada um deles. Aliás, as camadas se podem fazer visíveis ou invisíveis pela janela de camadas com o olho que aparece do lado de cada uma das camadas. Quando se pode ver o olho, a camada está visível e quando não aparece o olho é porque está invisível.

Janela de animação de Image Ready


Para atribuir o tempo de visualização de cada um dos fotogramas temos um registro dos segundos de visualização exatamente embaixo da miniatura do fotograma. Ao clicar sobre esse registro de segundos, aparecerá uma janela para selecionar qualquer duração, em segundos.

Escolher o tempo de cada fotograma


Quando tivermos a animação tal como desejarmos que apareça em nossa página web selecionamos no menu Arquivo, a opção "Salvar otimizada como..." e aparecerá a janela típica para selecionar o diretório e o nome de arquivo que queremos atribuir-lhe.

Otimizar a imagem com Image Ready

Podemos modificar as propiedades da imagem GIF, como número de cores ou o tipo de paleta para otimizar a imagem, com o objeto que ocupe o menor espaço possível em bytes e que seja rápida para baixar. A otimização se deve realizar respeitando a qualidade da imagem tanto como sejamos capazes. Para realizar estas ações Image Ready dispõe de uma janela chamada Otimizar, que se não aparece poderemos mostrá-la pelo menu Janela > Mostrar otimizar.

A característica mais interessante para otimizar em um arquivo GIF é o número de cores. Em geral, ao menor número de cores, menor o tamanho do arquivo. Na janela do documento podemos encontrar opções que nos permitenm selecionar a versão da imagem que queremos visualizar: a versão Original ou a Otimizada. As opções 2 cópias ou 4 coópias permitem comparar entre a versão original e algum tipo de otimização.

Janela para otimizar a imagem

Selecionar o modo de visualização do documento


Resultado obtido

Para realizar este artigo criamos um GIF animado que pode ser visto a seguir. Não é muito atraente, mas será interessante ver o resultado conseguido.

GIF animado resultado do exercício

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Tutoriais de web design

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Design
+ Entrar em Guias de desenho


Comentários dos visitantes
Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
 Mostram-se 19 Comentários revistos

 Comentário de Stephanie  09/12/05 
Oie Eu fiz a gif... fico super fofs... acontece q vcs naum ensinaram como salvar hehehehehe eu jah tentei mas num dah M respondam por e-mail por favor! bjs

 Comentário de mayy  11/1/06 
oii...eu tenho esses 2 programas e esse seu tutorial ta me ajudando muito. so que eu nao to conseguindo colacar outras camadas diferentes do ImageReady.pode me ajudar? eu estou utilizando gifs dolls serve? so pra testa. obrigadinha

 Comentário de Flavia  28/3/06 
Oi! Essa explicação esta muito boa, mas eu não consegui entender a qual é a janela animação... se puder me ajudar to ai Obrigada!

 Comentário de Flavia  29/3/06 
Olá! consegui fazer o gif! quando eu fazia em outros programas, o gif ficava meio "defeitoso" nas cores, mas quando eu fiz do geito que você me ensinou, ficou perfeito! Muito Obrigada! Beijos!

 Comentário de barbara  03/4/06 
olá,tentei fazer como vc ensina,mais não tô conseguindo,poderia mostrar detalhadamente?mostrar onde e como começar,quais os botões a serem usados.como iniciar e terminar,na sua explicação vc apenas resumiu tudo...e não deu pra entender quase nada. desde ja fico muito agradecida.. obrigada

 Comentário de julia  07/12/06 
nem é! esse tutorial até está explicado, mas tem mané que espera que o tutorial crie mãos e segure o mouse pelo manezão, que milagrosamente consegue abrir o programa sem achar que trabou ou algo assim, e faça as coisas por si só. além de aprender a ler, interpretar texto, e entender, quando se procura um tutorial, de preferência esteja disposto a dar uma olhada no programa... ver onde ficam as coisas... não só olhar os 'print screen'.

 Comentário de José Eduardo  08/12/06 
Só pelo fato de você ter se disponibilizado a escrever um tutorial, isso já é louvavel, mas vamos acrescentar algumas informações utéis para quem esta tendo dificuldade. Depois de exportar seu arquivo com diversas camadas para o Image Ready, e visualizar a linha de animação de acordo com o ensiamento do tutorial adicione a quantidade de frames que desejar, observe que todos serão iguais ao primeiro, basta selecionar o frame numero dois e ir a barra de layers e clicar no olhinho que esta ao lado de cada camada e ir retirando o olhinho que significa visualizar camada de camada quadro, deixando apenas a imagem da camada que deseja exinir em sua animação. espero ter ajudado...

 Comentário de edi  10/12/06 
oi sou loukjo pra aprender , mas nao tenho os programas qual seria a sua indicacao , mas tipo phothop que possa ser baixado em algum site e o outro programa o ready tb posso baixalo em algum site ??

 Comentário de Ana Lígia  05/1/07 
Olá, consegui fazer! As indicações de onde estavam os menus foram bem precisos. Só achei q poderia ter 1 passo a passo na hora do ImageReady, mas isso não torna impossívem e nem mesmo difícil aprender. é só ter um pouco de paciência. Valew!!! :)

 Comentário de fernanda  19/1/07 
Bom a explicação esta boa. Mas é preciso + informações; como do tipo como salvar, como se chegar as tais janelas. Mas ficou bom ... =] Origada

 Comentário de Nilton Castro  31/1/07 
Muito bom o seu artigo, parabens amigo pelo seu artigo, ele é bem simples e prático de se aprender a criar gifs animados. Abraço e sucesso.

 Comentário de Hugo  03/2/07 
OBRIGADOOOOO³³³³³³³³ Caramba, a um tempo atras eu já tinha utilizado isso com certa facilidade, mas agora sem pratica fui pegar pra fazer, e não sabia mais,... graças a vocês eu consegui fazer meu gif huahuahuah muito obrigado, muito obrigado também ao José Eduardo, o problema que eu estava tendo, que não lembrava como solucionar, era exatameeeente o que vocÊ me disse. Parabéns... realmente, só de você terem o bom coração de escreverem um tutorial aqui, já é louvavel!

 Comentário de Milena  08/2/07 
Pelo amor de Deus, o cara ensina passo a passo e ensina como salvar, e todo mundo reclamando que não consegue salvar, leiam até o fim!!! E se vocês quiserem mesmo aprender, é só fuçar um pouquinho ¬¬

 Comentário de Danielle  11/2/07 
oieee achei muito bacana a sua iniciativa, parabéns! é raro de se ver alguém expor o q sabe sobre photoshop assim, de graça xD ajuda bastante sim! é só mexer mesmo, como já disse alguém aki. eu não sabia dessas paradas, fui mexendo e fui aprendendo, achava muito difícil e depois me dei conta q era muito fácil... mas, tenho ainda uma dificuldade... a mesma q muita gente anda se queixando ^^ não sei criar gifs animados no image ready... tipo, os frames todos eu trabalho com eles, mas na hora de salvar o arquivo, só tem a opção de "psd" e pra onde eu quero usar o arquivo, não é permitido esse formato, tem q ser gif mesmo :( como faço? desde ja, obrigada!

 Comentário de cleverton  24/3/07 
muito bom esse site!!! gostei.. fez a giff sem nenhum problema!

 Comentário de ricardo  26/4/07 
Funcionou perfeitamente o passo-a-passo do tutorial. Nunca tinha feito e ficou perfeito, veja o resultado em http://www.expedicaomochila.com.br/imagens/capa/em_animado.gif Valeu, obrigado...

 Comentário de Alexchaivike  08/5/07 
Cara Muito obrigado , legal ver gente se importando em ajudar e ensinar !!!!

 Comentário de João  02/8/07 
Parabéns pelo tuto e tbm as dicas de como enxergar os frames. Muito bom, até que enfim acertei um ótimo tudo.

 Comentário de Cida  26/9/07 
Consegui fazer como no tutorial mas não consigo salvar como gif animada.O que faço?Parabéns pelo tutorial e agradeço a resposta.

Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foram econtrados 31 comentários sem rever

VerVer os comentários não revistos



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites