14 julho 2015

Aprenda a brincar com as animações em gifs

| |
Olá! Indo direto ao ponto, eu vim trazer um tutorial bem típico do EAH. Quem segue o blog há um tempo sabe que eu sou louca por gifs e estou sempre atrás de coisas novas relacionadas a este assunto.

Trouxe para vocês um tutorial do tipo graphic para ensinar a mexer com algumas ferramentas do PS.

Clique no coração para ver os exemplos.






Lembrete: Camadas ficam na lateral; frames (também conhecidas como quadros) ficam na parte inferior
Ctrl+Z desfaz ações, mas só funciona uma vez 


1: Crie uma camada e pinte-a com uma cor clara. Duplique esta camada, pinte-a com uma cor mais escura e deixe-a invisível.

2: Escreva algo e deixe o texto entre as duas camadas. Se quiser colocar algum style neste texto ou ajusta-lo, faça isto agora.

3: Se lembra daquela camada invisível? Deixe esta camada visível. A ordem das camadas deve ser Camada duplicada - texto - camada original.

4: Certifique-se que a janela de animação está aberta. Esta janela fica na parte inferior do PS. Selecione a primeira frame e duplique-a duas/três vezes (x).

5: Selecione a camada (não é frame) duplicada e mova-a para o lado direito. Você pode usar o mouse ou as setas do seu teclado. Quero lembrar que se sua mão tremer pode acabar estragando tudo. Você pode usar Ctrl+Z, mas essa ferramenta só desfaz um erro. Se não for confiante, use as setas.

6: Ao chegar ao ponto que você deseja clique neste botão (x) e ajuste da maneira que desejar. Quanto menor for o número que colocar na caixinha, mais "robótica" a animação fica, então indico colocar entre dez e dezesseis.

7: Duplique a última frame quantas vezes você quiser.

8: Arraste a camada de volta para o início, cobrindo o texto. Repita o 6º passo novamente.

9: Você pode aumentar ou diminuir o tempo se quiser.

10: Vá em 'File' > 'Save for Web and Devices' > 'Save'





1: Abra um documento e pinte o background da cor que desejar. Crie uma camada de texto.e, se quiser, aplique um style.

2: Após aplicar o style, clique na camada de texto para editar (para se certificar que está fazendo tudo certo, o texto deve estar rodeado por linha tracejadas). Na superior do PS, ao lado das fontes e etc, procure por este botão. Clique nele e ajuste desta maneira.

3: Na janela de animação, selecione a única frame e clique no botão de animação (x). Ajuste da maneira que quiser.

4: Duplique a última frame (x) que tiver e repita o 2º passo, mas desta vez coloque -40.

5: Repita o 3º passo e vá em 'File' > 'Save for Web and Devices' > 'Save'




1: Crie o documento e pinte o background.

2: Crie três camadas de texto. Escreva o que quiser, salve e aplique algum style/efeito que quiser.

3: Mude a opacidade das três camadas de texto para 0

4: Na janela de animação, duplique (x) a primeira frame. Selecione uma das camadas e mude a opacidade para 100.

5: Clique no botão de animação (x) e ajuste da maneira que quiser.

6: Verá que várias frames apareceram. Clique na última e duplique-a.

7: Selecione outra camada e repita o mesmo processo.

8: 'File' > 'Save for Web and Devices' > 'Save'

5 comentários:

  1. Ai que coisa legal! ~*0*~ gostei imenso do 3º modelos é muito bonito o efeito dele, e dos outros também. Arrasou no tutorial. A, aceita afiliação?

    Studio-Help.blogspot.com.br

    ResponderExcluir
  2. Eu adoro gifs também, mas eu não sei mexer muito. Eu gostaria de aprender a fazer, mas tenho uma preguiça para ir atrás zzzz.
    Achei esses modelos muito legais, gostei muito do segundo. Talvez use em alguma edição para o deviantART

    Chu~ Sugar Free

    ResponderExcluir
  3. Olá~ Woah! Que modelos legais, gostei muito do terceiro, mas sou péssima com essas coisas, então nem me arrisco porque sei que daria errado kjkfg. Tutorial muito bem explicado, assim como todos os outros do EAH.

    strawpanic.blogspot.com.br

    ResponderExcluir
  4. Olá Isa, como vai?
    Eu adorava editar gifs também e ainda gosto claro *u*
    Gostei muito dos efeitos, mas meu preferido foi o terceiro. Lindo né?
    Está tudo bem explicado e seu layout é lindamente lindo ♥
    Beijos,

    http://designer-lovers.blogspot.com.br/

    ResponderExcluir
  5. Olá~
    Pretty-Chan da ask.Vim cancelar o pedido de layout(sorry me baby >.>)
    Editar gifs é tão fodinha!Eu vivia a busca de um tutorial bom,assim!!!
    Quer afiliação?
    http://meninasmalvadas-moda.blogspot.com.br/

    ResponderExcluir

« »