All for Joomla All for Webmasters

Fazendo button com gif animado

Você quer fazer um button animado como esse? Então leia atentamente ao tutorial.

Antes de qualquer coisa, você precisa baixar o Gif Movie Gear. Ele se encontra disponível para baixar neste link (obrigada à Casinha das Gifs).

1. Abra o Gif Movie Gear.
2. Abra um Gif animado (se não tem nenhum gif animado, você pode utilizar um emoticon, só para aprender).
3. Abra o Photoshop.
4. Abra um novo documento 100 width x 30 height com fundo transparente.
5. Escreva o link ou nome do seu blog da cor que você quiser, de modo que destaque quando você misturar o nome do blog com o gif animado.
6. Selecione a Layer que está o que você escreveu e vá em: Layer - Rasterize - Type.
7. Aperte Ctrl+A (selecionar tudo).
8. Aperte Ctrl+X (recortar).
9. Abra um novo documento no Photoshop sem mexer nas medidas (vá em File - New, e quando abrir a janela, aperte OK).
10. Aperte Ctrl+V (colar). O que você escreveu vai ficar sem espaços dos lados.
11. Salve em gif e feche o Photoshop.
12. Volte para o Gif Movie Gear.
13. Clique em: Arquivo - Misturar com
14. Procure o arquivo que você salvou anteriormente (que você escreveu o nome/link do seu blog) e clique em Abrir.
15. Clique e arraste o nome do seu blog até o lugar onde você deseja na imagem.
16. Em Sincronização, marque estas duas opções: Unir quadros um a um e Repetir animação menor.
17. Aperte OK.
18. Clique em Arquivo - Salvar GIF Animada Como… e salve com o nome que você quiser.

O resultado do gif animado que eu fiz foi esse:

Se o gif animado for pequeno, o que você for escrever deve ser pequeno também, de modo que caiba dentro da animação.

No Photoshop, você pode editar a letra como preferir. Caso queira usar a opção Blending Options na letra, não esqueça de clicar em Layer - New - Layer e depois apertar Ctrl+Shift+E depois do passo 6.