Como criar um GIF animado no Fireworks

O que saber

• Crie uma ilustração e duplique-a. Faça alterações em um, converta ambos em símbolos, crie um segundo estado. Visualize a animação.
• Altere o tempo de duração de ambos os estados, salve o arquivo como um GIF animado e visualize-o em um navegador da web.

Neste tutorial, você aprenderá a usar o Fireworks CS6 para criar um GIF animado de um peru com penas da cauda que mudam de cor. Embora o Fireworks CS6 seja usado neste tutorial, você deve ser capaz de acompanhar usando qualquer versão recente do Fireworks ou mesmo do Photoshop.

Como fazer um GIF animado de Turquia em fogos de artifício

É importante observar que a Adobe não oferece mais o Fireworks CC como parte da Creative Cloud. Se você estiver procurando pelo Fireworks, ele pode ser encontrado na seção Encontrar aplicativos adicionais da Creative Cloud. Quando a Adobe anuncia que não oferecerá mais suporte ou atualização de aplicativos, você pode presumir que é apenas uma questão de tempo até que o aplicativo desapareça.

1. Crie um novo documento

   Primeiro, você criará um novo documento escolhendo Arquivo> Novo. Faça a largura e a altura 400 x 400 pixels e a resolução de 72 pixels por polegada. Escolha branco para a cor da tela e Clique OK.

   Em seguida, escolha Arquivo> Salvar, nomeie o arquivo Peru com uma extensão png, escolha onde deseja salvá-lo e clique em Salvar.

   

2. Desenhar um círculo

   No painel Ferramentas, clique na caixa Cor do traço e escolha preto, depois na caixa Cor de preenchimento e escolha uma amostra marrom ou digite no campo Valor numérico hexadecimal, # 8C4600. No painel Propriedades, defina a largura do traço em 2 pixels. Em seguida, escolha a ferramenta Elipse no painel Ferramentas, que pode ser encontrada clicando na pequena seta ao lado da ferramenta Retângulo ou outras ferramentas de forma visível. Enquanto mantém pressionada a tecla shift, clique e arraste para criar um grande círculo. (Usar a mudança garante que o círculo será perfeitamente redondo.)

   

3. Desenhe outro círculo

   Novamente, mantenha pressionada a tecla shift enquanto desenha outro círculo, com a intenção de que este círculo seja menor que o anterior. Com a ferramenta Ponteiro, clique e arraste o pequeno círculo para o lugar. Você deseja que ele se sobreponha ao topo do círculo grande, como mostrado.

   

4. Desenhe um retângulo arredondado

   Com a ferramenta Retângulo arredondado, desenhe um retângulo. Com a ferramenta Ponteiro, mova-o para o lugar. Você deseja que ele seja centralizado e se sobreponha levemente à parte inferior do pequeno círculo.

   

5. Combine Paths

   Mantenha pressionada a tecla shift enquanto clica no pequeno círculo e depois no retângulo arredondado. Isso selecionará as duas formas. Então escolha Modificar, combinar caminhos > União.

   

6. Mudar cor

   No painel Ferramentas, clique na caixa Preencher e escolha uma amostra de creme ou digite # FFCC99 no campo Valor hexadecimal e pressione Enter.

   

7. Faça os olhos

   Você pode desenhar dois pequenos círculos para fazer os olhos, mas, em vez disso, use a ferramenta Tipo para isso. Clique na ferramenta Tipo no painel Ferramentas e, em seguida, na tela. No inspetor de propriedades, escolha Arial Regular para a fonte, defina o tamanho 72 e altere a cor para preto. Mantenha pressionada a tecla Alt ou Opções enquanto pressiona a tecla que contém o número 8, o que criará um marcador. Em seguida, pressione a barra de espaço antes de fazer outro marcador.

   

8. Faça o Bico

   No painel Ferramentas, clique na ferramenta Forma poligonal. No painel Propriedades, escolha uma amostra laranja para o preenchimento ou digite # FF9933 no campo Valor hexadecimal. Também no painel Propriedades, deixe o traço preto com uma largura de 1. Em seguida, escolha Janela > Propriedades de Auto Shape. Clique na forma do polígono e indique que deseja que os pontos e os lados tenham 3 e o raio 180 graus. Para diminuir o triângulo, digite 20 no campo de valor Outer Radius. O número para isso depende do tamanho do triângulo, para começar. Em seguida, pressione Enter. Com a ferramenta Ponteiro, clique no triângulo e arraste-o para onde você acha que ele deve ficar para o bico.

   

9. Faça o Snood

   A coisa vermelha que fica pendurada no bico de um peru é chamada de Snood. Para fazer um, você usará a ferramenta Caneta. Após selecionar a ferramenta Caneta no painel Ferramentas, clique na caixa Preencher e escolha uma amostra vermelha ou digite # FF0000 no campo Valor hexadecimal e pressione Enter. Com a ferramenta Caneta, clique para criar pontos que formem um caminho e, às vezes, clique e arraste para criar um caminho arredondado. Quando o último ponto se conectar com o primeiro, você terá formado uma forma semelhante a um laço de peru.

   

10. Faça as pernas

    Você pode definir a cor de preenchimento para a mesma laranja do bico clicando na caixa Preenchimento e depois no bico. Com a ferramenta Caneta selecionada, torne a cor do traço preta e defina a largura do traço como 2 no painel Propriedades. Em seguida, use a ferramenta Caneta para criar pontos que formam uma forma semelhante à perna de um peru. Com a forma selecionada, escolha Editar > Duplicado. Então escolha Modificar > Transformar > Virar na horizontal. Com a ferramenta Pointer, posicione as pernas onde parecerem melhor.

    

11. Reduzir tamanho

    Escolher Selecione > Selecionar tudo. Em seguida, clique na ferramenta Escala no painel Ferramentas. Uma caixa delimitadora aparecerá com alças que podem ser movidas para dentro ou para fora. Clique em uma alça de canto e mova-a para dentro, tornando o todo menor, e pressione Enter. Com todas as formas ainda selecionadas, use a ferramenta Ponteiro para mover o peru no lugar. Você quer centralizá-lo na parte inferior da tela.

    

12. Faça as penas da cauda

    Com a ferramenta Elipse, clique e arraste para formar um oval longo. Então escolha Editar > Duplicado. Você duplicará a forma oval várias vezes até ter um total de cinco formas ovais.

    

13. Mudar a cor

    Com uma das formas ovais selecionada, clique na caixa Preenchimento e escolha uma cor diferente. Faça isso com mais três formas ovais, escolhendo uma cor diferente para cada uma.

    

14. Mover Ovais

    Com a ferramenta Ponteiro, clique e arraste sobre as cinco formas ovais para selecionar todas. Então escolha Modificar> Organizar> Enviar para trás. Isso fará com que as penas da cauda caiam para trás do peru quando você colocá-las no lugar. Clique fora das formas ovais para desmarcá-las e, em seguida, clique em uma forma oval de cada vez e arraste-as separadamente para onde ficarão lado a lado e parcialmente atrás do peru. O uso de guias inteligentes pode ajudar a posicionar uniformemente as formas ovais opostas. Se você não vê os guias inteligentes no trabalho, escolha Exibir> Guias inteligentes> Mostrar guias inteligentes.

    

15. Girar ovais

    Você vai querer girar as formas ovais e reposicioná-las. Para fazer isso, selecione um e escolha Modificar> Transformar> Transformação Livre. Em seguida, clique e arraste o cursor para fora da caixa delimitadora para girar levemente o oval. Com a ferramenta Ponteiro, posicione a forma oval onde achar que fica melhor. Gire as formas ovais restantes da mesma maneira e posicione-as no lugar; distribuindo-os uniformemente.

    

16. Salvar e salvar como

    Olhando para a sua imagem, você verá que o peru está muito baixo na tela, então escolha Selecione> Selecionar tudoe, em seguida, use a ferramenta Ponteiro para colocar o peru no centro da tela. Quando estiver satisfeito com a aparência, escolha Arquivo> Salvar.

    Em seguida, clique em uma pena de cauda para selecioná-la, depois na caixa Preenchimento e escolha uma cor diferente. Faça isso para cada pena da cauda e, em seguida, escolha Arquivo> Salvar como. Renomeie o arquivo, turkey2 com uma extensão png e clique em Salvar.

    

17. Converter para símbolo

    Escolher Arquivo> Abrir, navegue até o arquivo turkey.png e clique em Abrir. Clique na guia turkey.png na parte superior e escolha Selecione> Selecionar tudo. Você então escolherá Modificar> Converter> Converter para símbolo. Nomeie-o como símbolo 1, escolha Gráfico para o Tipo e clique em OK. Clique na guia turkey2.png e faça o mesmo, só que você nomeará este símbolo 2.

    

18. Crie um novo estado

    Clique novamente na guia turkey.png. Se o painel de estados não estiver visível, você pode escolher Janela> Estados. Na parte inferior do painel Estados, clique no botão Novos estados duplicados. Ao clicar no primeiro estado para selecioná-lo, você verá que ele contém um símbolo. Ao clicar no segundo estado, você verá que ele está vazio. Para adicionar um símbolo a este estado vazio, escolha Arquivo> Importar> navegar ao arquivo turkey2.png, clique em Abrir e em Abrir novamente. Em seguida, clique no canto superior direito da tela para colocar o arquivo na posição correta. Agora, ao clicar entre o primeiro e o segundo estados, você verá que ambos contêm imagens. Você também pode pressionar o botão Reproduzir / Parar na parte inferior da janela para visualizar a animação. Se você não gosta da velocidade da animação, pode clicar duas vezes nos números à direita de cada estado para fazer ajustes. Quanto maior o número, maior será o tempo de duração.

    

19. Salvar GIF animado

    Finalmente, escolha Arquivo> Salvar como, renomeie o arquivo, escolha GIF animado (* .gif) e clique em Salvar. Para abrir e reproduzir o GIF de animação em seu navegador, inicie seu navegador e escolha Arquivo> Abrir ou Abrir arquivo. Navegue até o arquivo GIF animado salvo, escolha-o, clique em Abrir e aproveite os frutos do seu trabalho!