em , , , ,

Tutorial: Como criar um Gif no Photoshop CS3

Preview Descrição: Como criar um Gif animado simples usando o novo feature do Photoshop CS3, a paleta Animation.

  • [message]
    • ##check##AVISO: Como criar um Gif no Photoshop CS3

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

01. Pressione Ctrl+N para criar um novo documento de 504×360 pixels, com fundo branco, 72 dpi’s e modo de cor em RGB, pressione Ok, pressione a letra T do teclado para selecionar a Horizontal Type Tool e escreva algo no seu documento usando a cor preta.

Como criar um Gif no Photoshop CS3

02. Pressione Ctrl+J para duplicar a layer, pressione a letra T novamente para selecionar a Horizontal Type Tool e selecione toda a palavra, mude a cor da palavra para vermelho.

Como criar um Gif no Photoshop CS3

03. Desabilite a visibilidade da layer com a palavra em vermelho clicando no olho que existe a frente da layer na paleta de layers, vá em Window> Animation, a paleta Animation irá aparecer na sua tela, caso sua paleta Animation não esteja como a da foto abaixo clique no pequeno ícone que existe no canto inferior direito da paleta chamado Convert To Frame Animation, ao fazer isto você verá que existe apenas um frame na paleta, clique no ícone do documento que está ao lado da lata de lixo na paleta Animation chamado Duplicates Selected Frames, isto irá duplicar seu frame, agora você possui dois frames iguais, porém para criar a animação você precisa de pelo menos dois frames diferentes, então na paleta de layers ative novamente a visibilidade da layer que contém a palavra em vermelho e você verá que na paleta Animation seu segundo frame aparece com a palavra em vermelho também, como na imagem abaixo.

Como criar um Gif no Photoshop CS3

04. Clique em um dos frames na paleta Animation, pressione a tecla Shift e clique no outro frame para selecionar os dois frames, agora clique na pequena seta em um dos dois frames, esta seta apresenta ao seu lado a duração em segundos de cada frame na animação, ao clicar na seta um menu irá abrir com diversas opções, escolha 0.1 Seconds, agora clique no botão de Play na paleta de Animation para ver as cores se alternarem, agora clique no ícone Tweens Animation Frames, é um pequeno ícone que apresenta uma série de pequenos quadrados em seguencia, este ícone define a suavização entre as animações, defina os valores abaixo.

Como criar um Gif no Photoshop CS3

05. Você verá que uma série de frames foram criados automaticamente pelo Photoshop, na realidade 5 como foram definidos na caixa de Tween, agora clique no primeiro frame da esquerda para a direita e clique no botão de Play no rodapé da paleta Animation, você verá que a animação acontece porém para no final, então abaixo do primeiro frame você verá a palavra Once, clique nela e mude para Forever, isto fará com que a animação fique rodando em Looping, agora clique no último frame e clique novamente no ícone de Tweens Animation Frames, e na opção Tween With mude para First Frame, pressione Ok, isto fará com que o Photoshop crie mais frames voltando para a cor do primeiro frame, clique no primeiro frame e clique no botão de Play, você verá que a letra vai do preto para o vermelho e depois volta para o preto em uma transição suave, terminada a animação você pode fechar a paleta de Animation, para salvar seu gif com movimento vá em File> Save For Web & Devices ou pressione Ctrl+Alt+Shift+S e defina os valores abaixo.

Como criar um Gif no Photoshop CS3

06. Clique em Save, na caixa que irá aparecer defina o nome do seu gif e pressione Save, ao final seu gif estará assim.

Como criar um Gif no Photoshop CS3

site de origem: http://photoshopfiles.com/

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário para GabizinhaCancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

108 Comments

  1. aq tb não deu, achei esse arquivo aq "C:Program Files (x86)AdobeAdobe Photoshop CS6RequiredPlug-InsImport-Export"

    alterei para Save for Web.txx
    e o botão de salvar para Web simplesmente ficou desabilitado …… ainda estou sem solução continua travando tudo ao salvar…..

    se pelo menos tirar o lag de quando dar PLAY no na linha do tempo… ai eu gravo a animação pelo camtasia ….. mas ta osso, lag de +

  2. primeiramente foi a maior complicação pra eu finalmente conseguir baixar o photoshop, depois de séculos tentanto eu consegui, aí beleza, tiveram uns probleminhas de início mas eu resolvi com muita dor de cabeça, levando super em conta q o meu objetivo era fazer gifs a partir de vídeos q eu tenho no meu pc, eu fui fazer os gifs e tudo certo, na hora de SALVAR não salva!!!!! Tudo pra nada. :(((((((((( Logo no finalzinho, diante de só mais um passo…
    enfim, incrível a minha sorte, incrível! ^^)

  3. meu querido preciso de uma resposta rapida se possivel eu não estou conseguindo salvar ja fiz a animação mas nao salva a imagem animada e sim uma imagem inanimada
    se possivel me ajude por favor

  4. Olá, comigo ocorre o seguinte problema: eu faço o gif e ele fica perfeito. Aqui no meu notebook, consigo visualizá-lo através dos navegadores (tanto IE quanto Firefox).

    Porém, quando hospedo na internet, a imagem é convertida em PNG e obviamente se torna estática. Já testei hospedar outros gifs que já tinha aqui e eles funcionam perfeitamente. Somente esse meu gif se converte em PNG quando hospedado, apesar de funcionar normalmente no meu notebook.

    Alguém faz a mínima idéia do motivo disso ocorrer?

  5. Olá! Hoje aprendi a fazer gif animado, e estava com problema de salvar para web, então encontrei seu blog. Cara, muito obrigado, pela orientação dada em 2009!!!! É um best-seller!!!!
    valeu

  6. Possuo o Photoshop CS5 e quando utilizo a ferramenta Salvar para a Web este trava e aparece uma mensagem de erro. Quanto ao arquivo SaveForWebStrings eu não o possuo naquela pasta citada. Alguém poderia fazer um upload com este arquivo? Creio que não seja problema da minha máquina já que tenho Processador Intel Core I7 com 6GB de Memória.

    Obrigada!

  7. Ola, estou começando a mexer com o photohop CS3 e qdo dou o comando ctrl+shift+u aparece uma caixa dizendo que a memória é insuficiente sendo que o meu PC tem 2 GB e esta praticamente td livre, o que pode ser?

  8. Muito Obrigado… me ajudou e muito!!! pelo menos agora eu tenho uma idéia do que fazer!!!!

    Valeu mesmo… Parabéns!!! Continue assim…

    Lembrando… vou até deixar esse blog em meus favoritos pra ficar mais fácil!!!

    Higor Soler

  9. so pra explicar melhor e que os tutoriais que eu encontro na net sao com pequenos texto este funcionam normal no orkut o problema e quando uso imegens de pessoas essas nao funcionam no orku as outras com pequenos textos sim

  10. Amigo prabens pela dica ,eu faço gifs com minhas fotos em meu computador funciona normal,porem eu coloco no orkut e ai nao funciona mas se vc tiver elgumas diica porfador fiquerei rato pela dica ….valeui!!!!!

  11. Caralho lê a porra dos comentarios do topico antes de comentar..
    2 pessoas já postaram a solução desse erro !!!
    dá raiva esse povo perguntando coisa resolvida … poluindo a porra da postagem massa !!! bando de FDP

  12. Amigo quando eu vou salvar ela na web como vc diz no final do tutorial o photoshop da um erro e fecha antes de salva eu uso a versão photoshop extended compacta aquela que tem um tamanho pequeno espero que me ajude plzz *_*

  13. VAI NA PASTA ONDE SE ENCONTRA SEU ADOBE PHOTOSHOP INSTALADO !

    pow brigadoa em tava me matando tentando descobrir esse erro
    ==> C:Arquivos de programasAdobeAdobe Photoshop CS3Required <== AQUI !

    AGORA PROCURE O ARQUIVO, SaveForWebStrings NESSA PASTA.

    2 – ESSE ARQUIVO SaveForWebStrings RENOMEIE ELE PARA O FORMATO .txx E PRONTO !

    EX = SaveForWebStrings.txt = SaveForWebStrings.txx

    PRONTO BUG RESOLVIDO ""

  14. eu não consigo salvar , tento colocar no meu meadd (flog) só que parece um banner velho nunca fica igual , fica cheio de pontinhos , não sei o que fazer , isso me estressa , queria saber como faz para tirar esses pontos que deixa o banner horrivel , obrigado dez de já!

  15. Oi valeu pela dica do SaveForWebStrings RENOMEIE ELE PARA O FORMATO .txx deu certo sua dica fico muito grata porem ainda estou com um probleminha toda vez que vou salvar em >Arquivo>salvar para web>todo o tipo de configuração que uso em salvar para web não da certo …deps que configuro e salvo…..abro o arquivo e ele não está animado…..o que posso fazer neste caso o meu photoshop é o cs3 alguem pode me ajudar??????ficarei grata !!!

  16. Ai, eu faço tudo certinho, porém, quando eu vou ir em Save for Web (isso no Cs4), a opção fica inativa, e quando faço isso no Cs3, o Cs3 tava, e depois fecha O.O

    Gostaria de saber como eu faço para resolver esta… er… merda xD

  17. preciso da ajuda de vocês , gente sempre quando eu clico em File> Save For Web & Devices ou pressione Ctrl+Alt+Shift+S , ele nunca aparece (obs- o quadrado) e sempre trava dai aparece enviar relatorio & não enviar o que eu faço?

  18. Karaaa tua soluçãoo para o problema de salvar para web , me ajudou muitoo !obrigadoo aii 😉 , pq euu tava morrendo de ódioo , pq euu fis uma banner com animaçãoo e tudo mais, eu demorei 1 hora pra fazer ,e no fim , quando eu fui tentar salvar para web deu erro :s , fiquei com um ódioo do karalhoo , mais agoraa ja resolvii o problema. Vlw !

  19. Bom dia amigo, me chamo fabio e gostei muito das suas ajudas e vim te pedir ajuda também não sei como faso para o icone da ferramenta carimbo aparecer imquanto eu utilizo ela na foto??? me ajuda
    obrigado!!! VLW

  20. OLA GALERA ESTOU AQUI PARA TIRAR UMA DUVIDA DE ALGUNS USUARIOS DO PHOTOSHOP !

    A FALHA DO "Salvar para a Web".

    PARA RESOLVER O PROBLEMA !

    1 – VAI NA PASTA ONDE SE ENCONTRA SEU ADOBE PHOTOSHOP INSTALADO !

    ==> C:Arquivos de programasAdobeAdobe Photoshop CS3Required <== AQUI !

    AGORA PROCURE O ARQUIVO, SaveForWebStrings NESSA PASTA.

    2 – ESSE ARQUIVO SaveForWebStrings RENOMEIE ELE PARA O FORMATO .txx E PRONTO !

    EX = SaveForWebStrings.txt = SaveForWebStrings.txx

    PRONTO BUG RESOLVIDO ""

    MSN – nilofla@msn.com

  21. Oi meu nome e ana paula , ta acontecend comigo a mesma coisa qe com o garoto anterior ,na hora qe eu vo salvar , falaa assim o photoshop deu um erro e esta feshando o progama ;* nunca consigo salvar ._. amei o blog aprendi muita coisa , poderia mi ajudar ?

  22. Me diz uma coisa, quando eu vou salvar i gif animado meu photoshop da mensagem de erro e fecha, não to conseguindo salvar. O que posso fazer para resolver isso?
    tenho photoshop cs3, não tenho essa mensagem de falta de memoria tenho 4gb de ram

  23. quando o ps fecha na hora de salvar para web é por causa do seu pc que tá muito cheio e pesado ai o photoshop é pesado tbm quando vai salvar algoo photoshop da erro e fecha sozinho

    pode olha aparece até uma janelinha fala memoria ram insuficiente ou aparece em inglês é só traduzir

  24. CARA MUITO MASSA SUA INICIATIVA DE AJUDAR
    AS PESSOAS QUE Ñ SACAM MUITO DO PHOTOSHOP…
    MEU PHOTOSHOP É O CS3 SÓ QUE EU FECHEI AQUELAS
    CAIXAS QUE FICA DO LADO DA FOTO,,,UMAS QUE TEM AS CAMADAS AS CORES E ETC
    como faça pra colocar elas de vouta no lugar?
    é que sem ver as camadas num da pra fazer nada…

  25. Oi André, comecei estes dias a frequentar o site e todos tutorias que tentei fazer consegui, são muito bem explicados, PARABENS, só hoje tentei fazer esse tuto e nao consegui, nao passei da primeira fase pois as letras nao aparecem… o que eu fiz de errado ou deixei de fazer?? uso o CS3 Lite,a sua recomendação: “72 dpi’s ” não sei onde aparece essa opção quando vou criar um novo documento…será que foi isso? fiquei frustrado rsr…teu trabalho é ótimo! se poder me ajudar ficaria agradecido.
    Abraço!

  26. Oi Ankh, eu que agradeço a visita! volte sempre!!

    Oi Rodrigo Enghaw, em breve será postado, mas a técnica é a mesma… obrigado pela visita!

    Oi Anônimo, basta entrar em Window> Character, lá você tem todas as opções que qualquer editor de textos possui, então basta desmarcar a opção Underline para que o sublinhado desapareça ok? obrigado pela visita!

    Oi Marigcr, eu que agradeço a visita! 😀

    Oi Anônimo, caso queira postar por favor hospede as imagens em servidor próprio ok? obrigado pela visita!

    Oi João, muito obrigado pelo elogio ao blog! volte sempre!!

    Oi Pedro, plano de fundo do que? obrigado pela visita!

    Oi sojedi, o que acontece quando você tenta salvar? obrigado pela visita!

    Oi Anônimo, talvez seja problema de falta de memória no computador, quanto você tem de memória e qual a versão do Photoshop que você usa? obrigado pela visita!!

  27. Olá, sempre acompanho seu blog. Sou um iniciante do photshop e tenho o photoshop CS3. Seu blog vei a satisfazer minhas carências. Acontece que não consigo salvar o gif em “salvar para web…” pois dá erro e o programa fecha sozinho. Vc pode me ajudar?

    Desde já agradeço

  28. Olá amigo eu fiz um banner pro meu site, mais toda vez quando vou salvar para web ele da um piripac.
    o que eu faço, me manda um e-mail por que ultimamente estou sem tempo pra entrar no seu site, obrigado.

    meu e-mail é hugodf1[at]yahoo.com.br

    seu site é muito bom, obrigado.

  29. Yo!

    O teu blog é fantástico! Acabei de fazer o meu primeiro Gif atraves deste tutorial. Muito bem explicado e ilustrado. Tudo o que uma pessoa pode pedir para aprender bem. 😉

    Cumprimentos de Portugal!

    João

  30. Oi ! Estou de volta ao blog … eu andei parano de usar photoshop agora me animei melhor, agora sei bastante … esse blog realmente me ajudou , tenho um blog tbm e adoro quando flam bem dele, espero que goste do meu comentário ! disney-estrelas.blogspot.com

  31. Oi Anônimo, eu que agradeço a visita!! volte sempre!!

    Oi Marigcr e Ankh, basta pressionar Ctrl+O, abrir a imagem que desejam trabalhar e os passos seguintes são os mesmos, lógico que aplicando outros efeitos que queiram aplicar, obrigado pela visita!!

  32. ola, meu nome eh lucas sou de Macae – RJ

    gosto muito do seu blog, e posso com toda certeza dizer que praticamente tudo que sei fazer no Photoshop é graças à ele

    este era o tutorial que eu mais esperava que você colocasse, agora posso fazer imagens gifs graças a você ^^

    quero agradecer muito, e você está de parabéns

    continue assim

    vlwww

  33. Oi Renato «®» , a paleta de Animation é uma novidade da versão CS3 do Photoshop, ele está presente na versão CS3 normal e na CS3 Extended, sendo que na Extended esta paleta tem algumas outras funções para quem edita vídeos e 3D, obrigado pela visita!!

    Oi pauloallex24, eu que agradeço a visita!

    Oi Ramon, fico feliz que tenha gostado, quanto as traduções alguns termos ainda podem não estar no banco de dados mas se encontrar algum termo sem tradução basta deixar um recado que eu incluo na base de dados o mais rápido possível, obrigado pela visita!!

    Oi Jader, o Photoshop CS3 foi bem otimizado tanto em recursos quanto em economia de espaço na área de trabalho, vale a pena o upgrade, obrigado pela visita!! 🙂

    Oi Jair, ficou bem legal hein, obrigado pela visita!!

    Oi Blogart, vou estudar este efeito e assim que possível posto aqui ok? obrigado pela dica e pela visita!! 🙂

  34. André, beleza de blog! Parabéns. Gostaria que você nos trouxesse algum tutorial como deste artista TEODORU BADIU, lightmylife.blogsome.com/2008/01/01/teodoru-badiu-digital-art/
    nesse site acima.
    Fico no aguardo.Abraços,Fernando

  35. E ai Galera eu usei esse recurso um dia antes de ser postado esse tutorial se quiserem da uma olhada e só entrar lá

    bp3.blogger.com/_H631u_fZ5KE/R7m3Y_bhP3I/AAAAAAAAAII/OFST2ikHAdI/s1600-h/magnum.gif

    vlw eu curto pra kct esse blog
    Vlw mesmo!!!!

  36. Poxa, eu achei que o ImageReady tinha sido deixado pra trás e que animação agora era só com o Flash, mas, pelo visto, o que a Adobe fez foi incorporar o IR no PS…

    O IR não é lá grandes coisas, mas quebra um galhão na hora de fazer gifs simples.

    Bom saber disso. 🙂

  37. É isso ae André, vlw por ter atendido ao meu pedido que eu fiz a poucos dias, fiquei mto feliz de ter sido atendido tão brevemente, tá mto legal esse post. Vlw mais uma vez.

    Eu instalei o Mozilla Firefox aki no meu PC, só pq vc disse q nele tem a tradução de algumas ferramentas, pq infelizmente uso o PS em PT (português), está ajudando mais ainda.

    Fui!!!!

  38. Boa Tarde André…
    cara, sempre visito seu blog para ver as novidades e aprender novos recursos…esse tutorial apesar de bem simples, apresenta um recurso bem interessante!
    Uma pergunta, para o CS3 apresentar esta opção de animação é necessaria alguma atualização?
    ou todas as versões apresentam a opção de animação?!

    abraço!

  39. Oi Jonilson, este tutorial realmente é bem simples, mas vale para apresentar o novo recurso do Photoshop CS3, a paleta Animation que foi incorporada depois que o Image Ready foi descontinuado, futuramente postarei como criar Gif´s mais complexos usando este recurso, obrigado pelas visitas!! 🙂

    Oi Dico, pode deixar que em breve postarei ok? obrigado pela visita!!

  40. oi meu nome é Jonilson Lobo, sou de Manaus AM. Gosto muito do seu blog acompanho todos os dias, e foi muito legal esse tutorial do gif e pediria que se fosse possivel você fazer uma animação mais elaborada, pois queria muito aprender mais sobre animação no photoshop.

    grato

Sleeveface, arte com capas de discos de vinil.

Palestra – Adobe Creative Suite 3 Web Premium – Universidade Estácio de Sá (RJ)