{"id":2108,"date":"2022-12-20T15:01:38","date_gmt":"2022-12-20T15:01:38","guid":{"rendered":"https:\/\/www.animaker.co\/blog\/?p=2108"},"modified":"2023-04-06T12:40:55","modified_gmt":"2023-04-06T12:40:55","slug":"how-to-make-a-logo-animation","status":"publish","type":"post","link":"https:\/\/www.animaker.co\/blog\/how-to-make-a-logo-animation\/","title":{"rendered":"Como fazer uma anima\u00e7\u00e3o de logotipo para sua marca como um profissional"},"content":{"rendered":"

<\/span><\/p>\n\n\n

O que \u00e9 importante quando se trata de uma marca?<\/p>\n\n\n\n

\u00d3timos produtos? Claro.<\/p>\n\n\n\n

Uma boa vis\u00e3o? Definitivamente.<\/p>\n\n\n\n

Boas refer\u00eancias? Sim!<\/p>\n\n\n\n

Mas para que sua marca fique presa na mente das pessoas, elas precisam conseguir visualiz\u00e1-la.<\/p>\n\n\n\n

E \u00e9 a\u00ed que o logotipo entra em cena.<\/p>\n\n\n\n

Os logotipos s\u00e3o a representa\u00e7\u00e3o da marca. Tem o poder de comunicar o que \u00e9 a sua marca sem usar palavras.<\/p>\n\n\n\n

Seja em um an\u00fancio, uma mensagem sobre a marca ou apenas um an\u00fancio de produto, o logotipo \u00e9 o que as pessoas veem primeiro.<\/p>\n\n\n\n

Muitas empresas cometem o grave erro de n\u00e3o se concentrar em projetar seus logotipos adequadamente.<\/p>\n\n\n\n

N\u00e3o seja como eles!<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Por qu\u00ea?<\/p>\n\n\n\n

Como todos sabemos, a primeira impress\u00e3o \u00e9 a que fica! Por isso, ter um logotipo atraente e que chame a aten\u00e7\u00e3o das pessoas \u00e9 muito importante.<\/p>\n\n\n\n

Algumas empresas criam um logotipo perfeito na primeira tentativa e simplesmente continuam evoluindo conforme os tempos mudam! Como o Google\u2026<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Fonte: https:\/\/bit.ly\/3tRNqXU<\/a> <\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

Outras empresas redesenham seus logotipos completamente devido a v\u00e1rios motivos. Como a Apple,<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Fonte: https:\/\/www.tailorbrands.com\/blog\/apple-logo<\/a> <\/em><\/p>\n\n\n\n

Em vez de perceber tarde demais e fazer mudan\u00e7as depois de anos, \u00e9 melhor acertar de primeira.<\/p>\n\n\n\n

\u00c9 por isso que investir em um bom software para criar e animar seu logotipo \u00e9 muito importante.<\/p>\n\n\n\n

N\u00e3o tem certeza de qual seria o software de design certo para fazer um logotipo animado para a sua marca?<\/p>\n\n\n\n

Esse \u00e9 o Animaker<\/a>, um software de cria\u00e7\u00e3o de v\u00eddeo DIY usado por mais de 15 milh\u00f5es de usu\u00e1rios em todo o mundo para criar v\u00eddeos animados e live actions online.<\/p>\n\n\n\n

Em minutos, voc\u00ea pode criar uma anima\u00e7\u00e3o de logotipo do zero no Animaker.<\/p>\n\n\n\n

Para este exemplo, veremos como criar e animar o logotipo da popular plataforma de streaming de \u00e1udio Spotify.<\/p>\n\n\n\n

O Spotify se destaca como um dos maiores provedores de streaming de \u00e1udio do mundo. Milh\u00f5es de pessoas (inclusive eu) usam o Spotify para criar listas de reprodu\u00e7\u00e3o personalizadas e descobrir m\u00fasicas e podcasts de seus artistas favoritos.<\/p>\n\n\n\n

Aqui, estaremos criando uma anima\u00e7\u00e3o de logotipo como esta\u2026<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Qu\u00e3o legal \u00e9 isso?!<\/p>\n\n\n\n

Sem mais delongas, vamos conferir os passos para fazer a anima\u00e7\u00e3o do logotipo do Spotify.<\/p>\n\n\n\n

    \n
  1. Criando um projeto<\/a><\/li>\n\n\n\n
  2. Adicionando um plano de fundo<\/a><\/li>\n\n\n\n
  3. Criando o logotipo do Spotify usando recursos do Animaker<\/a><\/li>\n\n\n\n
  4. Animando o logotipo do Spotify<\/a><\/li>\n\n\n\n
  5. Baixando o logotipo animado<\/a><\/li>\n\n\n\n
  6. Dica b\u00f4nus<\/a><\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    Passo 1 \u2013 Criando um Projeto<\/strong><\/h2>\n\n\n\n

    Visite o Animaker<\/a>. Fa\u00e7a login se voc\u00ea j\u00e1 criou uma conta. Se ainda n\u00e3o criou, crie uma nova conta e fa\u00e7a login.<\/p>\n\n\n\n

    Depois de fazer login, voc\u00ea ser\u00e1 direcionado para o Painel.<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    Para criar um novo projeto, clique na op\u00e7\u00e3o \u2018Criar\u2019 \u00e0 esquerda e siga conforme as instru\u00e7\u00f5es na imagem abaixo.<\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>\n\n\n

    Antes de come\u00e7ar a criar uma anima\u00e7\u00e3o de logotipo, vamos apresent\u00e1-lo \u00e0 interface do Animaker.<\/p>\n\n\n\n

    Existem cinco se\u00e7\u00f5es no aplicativo:<\/p>\n\n\n\n

      \n
    • Biblioteca<\/li>\n\n\n\n
    • \u00c1rea de trabalho<\/li>\n\n\n\n
    • Cenas<\/li>\n\n\n\n
    • Barra de Menu<\/li>\n\n\n\n
    • Linha do tempo<\/li>\n<\/ul>\n\n\n
      \n
      \"\"<\/figure><\/div>\n\n\n

      Biblioteca<\/strong> \u2013 A Biblioteca do aplicativo Animaker \u00e9 onde voc\u00ea encontrar\u00e1 todos os ativos necess\u00e1rios para o seu v\u00eddeo, incluindo personagens, propriedades, \u00edcones, ativos de estoque, m\u00fasicas e muito mais.<\/p>\n\n\n\n

      Espa\u00e7o de trabalho<\/strong> \u2013 O espa\u00e7o em branco no centro \u00e9 chamado de espa\u00e7o de trabalho. \u00c9 aqui que seu v\u00eddeo animado ganhar\u00e1 vida.<\/p>\n\n\n\n

      Cenas<\/strong> \u2013 Esta se\u00e7\u00e3o cont\u00e9m todas as cenas do v\u00eddeo. Assim como quantos slides se juntam para formar uma apresenta\u00e7\u00e3o, as cenas se juntam para formar seu v\u00eddeo incr\u00edvel.<\/p>\n\n\n\n

      Barra de Menu<\/strong> \u2013 Voc\u00ea pode visualizar o v\u00eddeo, alterar seu t\u00edtulo, compartilhar e publicar o v\u00eddeo nas op\u00e7\u00f5es do menu.<\/p>\n\n\n\n

      Linha do tempo<\/strong> \u2013 Na parte inferior da tela est\u00e1 a linha do tempo. A linha do tempo ajuda a monitorar os limites de tempo e os efeitos dos recursos adicionados \u00e0s cenas.<\/p>\n\n\n\n

      <\/p>\n\n\n\n

      Passo 2 – Adicionando um plano de fundo<\/strong><\/h2>\n\n\n\n

      Vamos come\u00e7ar adicionando um plano de fundo \u00e0 cena. A biblioteca do Animaker \u00e9 preenchida com diferentes tipos de planos de fundo, como planos de fundo de cores s\u00f3lidas, planos de fundo de degrad\u00ea, planos de fundo de imagem\/v\u00eddeo e planos de fundo animados.<\/p>\n\n\n\n

      Tudo o que voc\u00ea precisa fazer \u00e9 ir para a se\u00e7\u00e3o \u2018Planos de Fundo\u2019 na biblioteca, inserir o termo de pesquisa para o plano de fundo que voc\u00ea precisa e aplic\u00e1-lo \u00e0 cena clicando nele.<\/p>\n\n\n\n

      Para este exemplo, adicionarei um fundo preto s\u00f3lido \u00e0 cena. Para fazer isso, basta clicar em qualquer lugar no espa\u00e7o de trabalho.<\/p>\n\n\n\n

      Voc\u00ea poder\u00e1 ver a op\u00e7\u00e3o de cor de fundo no lado esquerdo.<\/p>\n\n\n\n

      Agora, clique na cor branca \u00e0 esquerda. Isso abre a paleta de cores.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Voc\u00ea pode selecionar Preto nas cores listadas abaixo ou usar a op\u00e7\u00e3o \u201cAlterar cor\u201d [\u00edcone de l\u00e1pis] para selecionar manualmente a cor na paleta.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Dica:<\/strong> Se voc\u00ea deseja adicionar alguns planos de fundo com gradiente interessantes, clique no bot\u00e3o ‘+’ e adicione at\u00e9 5 cores para trazer um plano de fundo com gradiente.<\/p>\n\n\n\n

      <\/p>\n\n\n\n

      Passo 3 \u2013 Criando o logotipo do Spotify usando recursos do Animaker<\/strong><\/h2>\n\n\n\n

      O logotipo do Spotify tem um c\u00edrculo verde com 3 linhas curvas no meio do c\u00edrculo. O c\u00edrculo representa um senso de comunidade e inclus\u00e3o. As tr\u00eas linhas curvas denotam ondas sonoras, expressando de forma perfeita que o Spotify \u00e9 um aplicativo de m\u00fasica.<\/p>\n\n\n\n

      Vamos come\u00e7ar a recriar esse logotipo incr\u00edvel com os recursos do Animaker.<\/p>\n\n\n\n

      Primeiro, vamos adicionar o c\u00edrculo verde. Para isso, clique na se\u00e7\u00e3o ‘Propriedades’ \u00e0 esquerda. Pesquise o termo “c\u00edrculo”. Escolha qualquer forma de c\u00edrculo<\/p>\n\n\n\n

      Por exemplo, escolhi uma forma de cor vermelha.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Agora, vamos mudar a cor do c\u00edrculo para verde. Clique na op\u00e7\u00e3o ‘alterar cor’ na parte superior e escolha a paleta de cores personaliz\u00e1vel, conforme mostrado abaixo.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Clique na op\u00e7\u00e3o de c\u00f3digo de cores e cole o c\u00f3digo de cor verde do Spotify, #1DB954.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Pronto! F\u00e1cil, certo?<\/p>\n\n\n\n

      Agora, vamos adicionar as tr\u00eas linhas curvas dentro do c\u00edrculo verde. Essas linhas s\u00e3o geralmente de cor branca ou preta.<\/p>\n\n\n\n

      Para o nosso design, vamos escolher preto para as linhas internas.<\/p>\n\n\n\n

      Para isso, v\u00e1 para ‘Propriedades’ na se\u00e7\u00e3o da biblioteca.<\/p>\n\n\n\n

      A biblioteca do Animaker tinha mais de 70 mil \u00edcones e formas. Basicamente, voc\u00ea tem o que voc\u00ea quiser.<\/p>\n\n\n\n

      Existem muitas vers\u00f5es de linhas curvas dispon\u00edveis na biblioteca. Como as linhas no logotipo do Spotify se assemelham ao s\u00edmbolo wi-fi, vamos restringir nossa pesquisa e inserir ‘wi-fi’ na barra de pesquisa.<\/p>\n\n\n\n

      Clique no primeiro s\u00edmbolo de wi-fi (ou se voc\u00ea encontrar qualquer outra propriedade relevante, voc\u00ea tamb\u00e9m pode peg\u00e1-la). Neste s\u00edmbolo, precisamos apenas das linhas curvas e n\u00e3o do grande ponto laranja. Vamos escolher as cores de acordo para omitir o ponto laranja.<\/p>\n\n\n\n

      Clique na propriedade e selecione a op\u00e7\u00e3o ‘alterar cor’. Voc\u00ea pode escolher duas cores para esta propriedade \u2013 uma para as linhas curvas e outra para o c\u00edrculo laranja.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Vamos escolher preto para as tr\u00eas linhas e o verde do Spotify para o ponto laranja. Isso mescla o ponto com o c\u00edrculo verde de fundo, deixando aparecer apenas as linhas.<\/p>\n\n\n\n

      Como j\u00e1 conhecemos o c\u00f3digo de cores do verde do Spotify, podemos inserir o c\u00f3digo diretamente na paleta de cores. Caso contr\u00e1rio, voc\u00ea pode selecionar a cor usando o pincel de sele\u00e7\u00e3o de cores na paleta de cores.<\/p>\n\n\n\n

      Confira o GIF abaixo para entender melhor, onde aplico a cor preta diretamente das cores listadas e a cor verde usando o pincel de sele\u00e7\u00e3o de cores.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Agora, reduza o tamanho do c\u00edrculo verde e, consequentemente, do s\u00edmbolo do wi-fi. Em seguida, gire o s\u00edmbolo de wi-fi um pouquinho para o lado direito.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Bam, o logotipo do Spotify est\u00e1 pronto! Mas espere, vamos adicionar algumas anima\u00e7\u00f5es e torn\u00e1-lo ainda melhor!<\/p>\n\n\n\n

      <\/p>\n\n\n\n

      Passo 4 \u2013 Animando o logotipo do Spotify<\/strong><\/h2>\n\n\n\n

      Para adicionar um efeito de anima\u00e7\u00e3o a todo o logotipo, vamos agrupar os dois s\u00edmbolos diferentes \u2013 o c\u00edrculo verde e as linhas curvas pretas.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Ap\u00f3s agrup\u00e1-los, clique no objeto e clique em \u2018Anima\u00e7\u00e3o\u2019 na parte superior.<\/p>\n\n\n\n

      Isso abre a janela Anima\u00e7\u00e3o. Usando esta janela, voc\u00ea pode aplicar qualquer tipo de anima\u00e7\u00e3o de entrada e sa\u00edda ao item selecionado.<\/p>\n\n\n\n

      Voc\u00ea pode fazer o recurso aparecer da esquerda, pular na tela, aparecer ou desaparecer lentamente… Como m\u00e1gica!<\/p>\n\n\n\n

      A janela Anima\u00e7\u00e3o tem duas guias, \u2018Entrada\u2019 e \u2018Sa\u00edda\u2019. Como voc\u00ea pode imaginar, essas guias servem para escolher os efeitos de entrada e sa\u00edda dos ativos.<\/p>\n\n\n\n

      Clique em qualquer efeito de entrada e sa\u00edda para o logotipo do Spotify.<\/p>\n\n\n\n

      Ao clicar no efeito, voc\u00ea poder\u00e1 ver uma barra de cor violeta escura sendo adicionada \u00e0 linha do tempo. Esta barra ilustra a dura\u00e7\u00e3o do efeito de entrada\/sa\u00edda aplicado.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Voc\u00ea pode controlar a dura\u00e7\u00e3o do efeito arrastando a barra violeta para um dos lados. Veja o GIF abaixo para uma melhor compreens\u00e3o.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      E tad\u00e3aaa, aqui est\u00e1 o resultado! \ud83e\udd29<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      <\/p>\n\n\n\n

      Passo 5: Baixando o logotipo animado<\/strong><\/h2>\n\n\n\n

      Depois que a anima\u00e7\u00e3o do logotipo estiver pronta, \u00e9 hora de mostrar seu trabalho para o mundo.<\/p>\n\n\n\n

      Para baixar seu trabalho como um v\u00eddeo ou GIF, clique no bot\u00e3o ‘Publicar’ no canto superior direito.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Voc\u00ea tamb\u00e9m pode compartilh\u00e1-lo diretamente nas plataformas de m\u00eddia social, selecionando as diferentes op\u00e7\u00f5es no bot\u00e3o ‘Publicar’.<\/p>\n\n\n\n

      Para compartilh\u00e1-lo com seus amigos ou colegas, clique no \u00edcone de compartilhamento na parte superior (perto do bot\u00e3o Publicar).<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Muito simples! N\u00e3o foi r\u00e1pido e divertido?<\/p>\n\n\n\n

      <\/p>\n\n\n\n

      Passo 6: Dica B\u00f4nus<\/strong><\/h2>\n\n\n\n

      Agora que a anima\u00e7\u00e3o do seu logotipo est\u00e1 pronta, o pr\u00f3ximo passo seria us\u00e1-la em sua pr\u00f3pria introdu\u00e7\u00e3o ou finaliza\u00e7\u00e3o e apresent\u00e1-la em seu incr\u00edvel v\u00eddeo do Youtube!<\/p>\n\n\n\n

      Para facilitar as coisas para voc\u00ea, recheamos nosso painel com modelos de introdu\u00e7\u00e3o e modelos de finaliza\u00e7\u00e3o.<\/p>\n\n\n\n

      Basta digitar ‘intro’ ou ‘outro’ na barra de pesquisa em nosso painel, explorar os modelos e come\u00e7ar a editar um modelo no qual voc\u00ea pode apresentar seu logotipo!<\/p>\n\n\n\n

      Veja como voc\u00ea procura os modelos de introdu\u00e7\u00e3o\/final.<\/p>\n\n\n

      \n
      \"\"<\/figure><\/div>\n\n\n

      Aqui est\u00e3o as etapas para usar seu logotipo em um de seus modelos de introdu\u00e7\u00e3o\/final favoritos:<\/p>\n\n\n\n

        \n
      1. Envie o seu logotipo na se\u00e7\u00e3o \u2018Upload\u2019.<\/li>\n\n\n\n
      2. Personalize todo o tema (fundo, m\u00fasica, propriedades, cores, fontes, etc.) do modelo.<\/li>\n\n\n\n
      3. Visualize o v\u00eddeo.<\/li>\n\n\n\n
      4. Fa\u00e7a o download como um v\u00eddeo\/GIF.<\/li>\n<\/ol>\n\n\n\n

        Aqui est\u00e1 um v\u00eddeo para gui\u00e1-lo na edi\u00e7\u00e3o de um modelo do Animaker:<\/p>\n\n\n\n