Caixa de som animada

Nesse tutorial você vai aprender como animar uma imagem de caixa de som, como se ela estivesse ligada e vibrando. Esse efeito pode ser utilizado para criar propagandas online, ícones ou botões de sites ou apenas para diversão/treino. De qualquer forma, se quiser personalizar a sua caixa de som terá um pouco mais de trabalho, mas aqui vamos trabalhar com uma imagem pronta, já que a parte animada é relativamente simples:

1 – Escolha a sua imagem e abra-a no Photoshop (Ctrl+O)

2 – Pra começar, vamos precisar de espaço para a caixa de som “crescer” durante a vibração. Ao invés de diminuir a imagem, o ideal é aumentar a tela de trabalho. Para isso, vá no menu “Image” > “Canvas Size” (Alt + Ctrl + C). Se estiver em cm, clique na caixa e selecione “pixels”. Aumente cerca de 50 pixels de altura (Heigth) e 50 de largura (Width).

3 – Crie uma imagem qualquer para o fundo.

3-a. Crie uma nova camada (Shift + Ctrl + N);

3-b. Selecione a ferramenta “Paint Bucket Tool” (G) e nas opções de ferramenta (abaixo do menu do Photoshop), onde está escrito “Foreground” mude para “Pattern”.

3-c. Ao lado de Pattern, clique na caixa e selecione algum que agrade. Eu usei o “Metallic snakeskin”.

3-d. Se quiser ainda pode fazer um “Gradient overlap” na camada do fundo.

3-e. Na aba Layers arraste a do fundo para baixo da camada da caixa de som.

4 – Após desenhar (ou colar) um fundo, selecione a camada da caixa de som na aba “Layers” e vá no menu “Window” > “Animation”. Clique 3 vezes no ícone de “Duplicate selected frames”

5 – Pressione Ctrl+J para duplicar a camada da caixa de som. Vá ao menu “Filter” > “Blur” > “Radial Blur” e configure como na imagem abaixo:

6 – Na janela de animações (que abrimos no passo 4), clique na primeira imagem e, na aba “Layers” oculte a camada da caixa de som “embaçada” que criamos no passo 5. Para ocultar uma camada, basta clicar no ícone de um “olho” que fica à esquerda da camada na aba Layers (clique no mesmo local quando quiser voltar a exibir a camada).

7 – Repita o passo 6, mas para a terceira imagem da janela de animação. E então faça o inverso para a segunda e quarta imagens – oculte a camada da caixa de som original e deixe visível a camada da caixa de som embaçada. Sua área de trabalho deve ficar assim:

8 – Na janela de animação, abaixo das imagens, há um número seguido de “sec.”. Isso é o tempo que a imagem será exibida. Clique na setinha preta ao lado de “sec.” e escolha “0,1″ para a primeira imagem, “no delay” para a segunda e para a quarta imagens e clique em “Other” depois digite “0,3″ para a terceira imagem.

9 – Para garantir que a animação seja “eterna”, abaixo da configuração dos segundos da primeira imagem, ainda na janela de animações, se estiver escrito “Once” clique na palavra e selecione “forever”.

10 – O último passo é salvar o seu arquivo. Para que a animação seja válida, é necessário que fique salva em formato GIF. Vá ao menu “File” > “Save for Web & Devices” (Shift+Ctrl+Alt+S) e abaixo do escrito “Preset” (onde normalmente fica selecionado JPEG) e selecione o formato GIF. Normalmente não há o que mudar depois disso, mas pode testar os valores e ver as diferenças antes de clicar em Salvar. E para visualizar a animação, precisa carregá-la em algum navegador da Web (Firefox, Internet Explorer, Google Chrome etc)

1,700 total views, 1 views today

Postado por Ricardo Fernandes em 17 de dezembro de 2010