Revista Photoshop Creative para iPad. Download gratis

Animação no Photoshop

Postado por Redação Photoshop em 20/07/2009 às 11h 58min

Crie um banner animado utilizando os recursos do Adobe Photoshop.





Em fevereiro de 1999, o Adobe Photoshop ganhava sua versão 5.5 e, o ImageReady era incorporado ao pacote de instalação da mais poderosa ferramenta de edição de imagens para trazer as inovações do mercado de Internet a essa ferramenta que precisava acompanhar o mercado que estava em expansão.
Atualmente, na versão 9.0 (conhecida como CS2 e a qual iremos trabalhar neste tutorial), o ImageReady continua sendo o braço direito de animações e produção Web do Photoshop.
Não que o Photoshop não tenha ferramentas para Web, mas elas foram incorporadas a partir do ImageReady. Mesmo assim, o software dá mais opções como animações, rollover (troca de imagens a partir do posicionamento do mouse), fatias, etc. aos trabalhos desenvolvidos em Photoshop.
Basicamente, já que o ImageReady não poderia ser um software poderoso trabalhando sozinho (pois não tem as qualidades do Photoshop), a Adobe os juntou, agregando as ferramentas do Photoshop para imagem com as facilidades do ImageReady para os trabalhos Web.
Essa união fez o pacote empatar e ganhar facilmente de vários concorrentes disponíveis, como o Gif Animator, o Macromedia Fireworks, e outros softwares que se propunham a trabalhar essa ou aquela característica do Photoshop ou ImageReady.
Para conhecermos um pouco mais sobre essa aplicação, desenvolveremos um banner animado para nosso site neste passo-a-passo utilizando o Photoshop e, em seguida, o ImageReady CS2.
Um banner é uma imagem ou animação publicitária para vender uma idéia pela Web. Seu conteúdo pode ser estático (não muito bem visto), animado (mais comum), multimídia (mais pesado) e pode possuir diversos tamanhos, respeitando uma tabela comercial existente na Internet que define:
468x60 pixels (Full Banner);
392x72 pixels (Full Banner com barra de navegação vertical);
234x60 pixels (Half Banner);
120x240 pixels (Banner Vertical);
120x90 pixels (Button 1);
120x60 pixels (Button 2);
125x125 pixels (Square Button);
88x31 pixels (Micro Button).
Além disso, quando se faz um banner, devemos nos preocupar com o peso (KB), já que o arquivo deve ser carregado rapidamente, chamar a atenção e fazer com que o visitante do web site clique sobre ele.
Também é muito importante que seu banner tenha apelo visual, ou seja, que além de chamar a atenção, seja bonito, bem trabalhado e esteja adequado ao conjunto do site em que será inserido. Algumas dicas são válidas para chamar a atenção, como simular o ambiente do Windows, colocar o movimento do cursor do mouse, simular botões etc. Mas seu bom gosto é quem ditará as regras, já que tudo isso, pode ser feito com o Photoshop e o ImageReady.


1- Abra o Photoshop e crie uma imagem. Clique em File, New. Defina o nome banner, largura 468, altura 60 e resolução 50. O limite para resolução são 72 DPIS. Trabalhe em RGB. Em seguida, clique em OK.

2- Crie uma moldura com uma cor neutra para seu banner. Clique no menu Select, All e, depois, em Select, Modify, Border. Defina a borda com 3 pixels e, com a ferramenta Balde, pinte o contorno de seu banner. Pressione as teclas CTRL + D
para tirar a seleção.

3- Selecione a ferramenta Varinha mágica e clique na parte branca do banner para selecioná-lo. Salvaremos essa seleção que será nossa área de desenho. Para isso, clique no menu Select, Save Selection e dê um nome, no exemplo, Área de Desenho.

4- Mantenha a área selecionada. Agora, clique na ferramenta Texto e digite uma parte do texto que será animado. Trabalhe o formato de cor, fonte, dimensão do texto e deixe essa parte sozinha em uma camada (layer) ao final.

5- Copie um botão de OK de alguma tela ou imagem da Internet. Faça a mesma coisa para a seta do cursor do mouse. Para achar essas imagens, utilize a ferramenta de busca do Google. Em seguida, salve-as em layers separados.

6- Agora, duplique a camada de texto, segurando e arrastando-a para o ícone Nova camada da paleta de camadas. Em seguida, clique sobre o ícone Olho para esconder a camada, e escreva outra palavra ou frase na camada copiada.

7- Digite a quantidade de texto que deseja para seu banner, lembrando que a mensagem não deve ser muito grande e deve atiçar a curiosidade do usuário. Cada camada será uma parte da animação, portanto, separe tudo.

8- Em seguida, adicione a imagem e crie os posicionamentos desejados, separando tudo em layers. Nosso texto ficou da seguinte maneira: Tecnologia? Entretenimento? Diversão? Dicas Rápidas? Tudo reunido para você. Na velocidade do mundo digital.

9- Lembre-se: cada layer é um quadro da animação. Portanto, pense neles como se cada um fosse substituído pelo outro. Finalize a mensagem com uma informação de interação com o usuário. Tente utilizar palavras como Clique, Ganhe, Entre, Veja.

10- Salve o arquivo com a extensão .PSD do Photoshop, clicando em File, Save. Mandaremos, em seguida, o arquivo para o Adobe ImageReady. Utilize o botão Alternar na própria barra de ferramentas do Photoshop para isso.

11- Note que o ImageReady trouxe todas as camadas do Photoshop, com a diferença de que a seleção das imagens é criada a partir de um contorno que indica um posicionamento em caso de fatiamento.

12- Agora, no menu Window, abra a barra de animação, onde configuraremos os quadros da nossa animação.

13- Com a janela de animação aberta, marque nos layers o que será visível neste primeiro quadro.

14- Em seguida clique em Duplicate Current Frame para criar o próximo quadro baseado no anterior. Altere as exibições dos layers para o segundo quadro que será apresentado. Repita o procedimento para todos os layers restantes.

15- Clique sobre o número 0 que aparece abaixo da seqüência de quadros e determine por quantos segundos esse quadro deverá ser exibido. Note que o número de quadros deverá ser maior que o número de layers para conseguirmos aplicar o efeito desejado. Clique em Play para testar a animação.

16- Clique sobre o menu Window, Optimize para abrir a palheta de Otimização da Imagem. Selecione o formato GIF e escolha o número de cores que será utilizado. Em seguida, na palheta da animação, escolha Optimize Animation. Marque as caixas e clique em OK.

17- Agora basta salvar sua imagem, clicando no menu File, Save Optimized. Escolha onde deseja salvar a figura. Clique em Salvar e pronto, sua imagem está criada. Agora, adicionea à sua home page.

18- No final, abra o editor de páginas Web e insira o banner onde foi planejado, para atrair mais usuários a seu site.







ARTIGOS SEMELHANTES




Deixe seu comentário
QUER UM AVATAR? Faça seu login ou cadastre-se

O comentário está desabilitado, para enviar um comentário você deve fazer login!

Abel Costa



51 imagens na galeria
das quais recebeu 1 fav
e nota máxima 8.8


Últimas postagens Mais lidas


em ,


em ,