Animações são uma ferramenta significativo no web design, sobretudo no desenvolvimento de peças de publicidade e banners. Imagens em movimento chamam mais atenção do visitante do que estáticas, mesmo que essas tenham cores vibrantes ou estejam em posições ditas estratégicas. Quando surge a necessidade, vários se apegam à primeira opção que vem à mente: Flash.
Recomendada página Web usar o programa para fazer animações e exportá-las, recorrendo a sites e softwares que automatizam a fabricação. São soluções parciais, uma vez que oferecem poucas opções de personalização no produto final. É possível elaborar um GIF animado no Photoshop, que será empregado como cada outra imagem, com o mesmo tamanho ou até pequeno que um SWF (shockwave flash).
E melhor: o GIF não depende de plugins pra funcionar. Veremos nesse tutorial como formar um banner em GIF animado, utilizando a janela de animações nos modos Frames e Timeline. Ao fim, verá assim como o método de salvamento do arquivo concluído no modelo GIF. Se não alcançar acompanhar, baixe o arquivo gerado para estudo. Frame: ou quadro, é cada uma das imagens que, exibidas em sequência, formam a ilusão de movimento. clique aqui para ler , leia Como renderizar filmes a 60 FPS no Camtasia, que vai mais fundo no tópico.
Keyframe: ou quadro-chave, representa um ponto da animação em que algo acontece, seja o começo ou término de um movimento, ou modificação qualquer em elementos da cena. ver site... : linha do tempo, é a janela do Photoshop em que você poderá controlar as alterações pela imagem baseando-se no tempo de execução da animação. Frame Animation: Animação por Quadros, janela do Photoshop em que você modifica a animação quadro por quadro. clique aqui! de começar a animar, vamos fazer os elementos componentes do banner. Entre eles estão textos, logotipos e o fundo da imagem, além de outros dados.
Logo depois, adicione os elementos principais que farão cota da composição. Minha Fonte , adicionei a nuvem com o logo, a barra preta, e uma camada preta que receberá um filtro Lens Flare - Reflexo de Flash. A barra preta recebeu um degradê linear, de preto pra cinza, e um estilo de camada Drop Shadow.
Configure a tua como encontrar melhor. Na camada toda em preto, aplique um Lens Flare parelho ao visto abaixo (ele será um tipo de sol nascendo por detrás da nuvem), e depois mude a mesclagem da camada pro modo Screen. Pela divisão vazia entre a nuvem e a barra inferior, digite o primeiro texto do banner.
Usei a fonte Chunk Five, tamanho 36. Esse texto fica acima de todas as excessivo camadas. Animation. continue lendo este , pela cota inferior da tela, a janela para controle da animação. Se ela estiver como visto abaixo, estará no jeito Timeline, deste modo clique no botão do canto inferior justo pra alternar ao modo Frames, no qual vamos começar.
Vamos elaborar a animação do texto, que rapidamente desaparece e dá local a uma nova mensagem. Note pela janela de animação, que há só um quadro (frame). link gerar a animação, você terá que duplicar o frame atual, e nele pôr as modificações. Pra essa finalidade, clique no botão Duplicate Selected Frames, logo abaixo das miniaturas dos frames. Isso duplicará o frame.