Aprenda como fazer ícones animados para sites – Sites Incríveis #06

Autor:

Publicado:

Atualizado:

Você já deve ter se deparado ao navegar em sites pela web, que muitos deles tem imagens animadas, que chamam a atenção e trazem um toque único para sua página. Sendo assim, no artigo de hoje, aprenda como fazer ícones animados para sites.

Até não muito tempo atrás, era difícil fazer ícones animados para sites, dependiam de designers experientes na área e a colaboração de desenvolvedores de software para implementação desses projetos.

Hoje, com o LottieFiles, você consegue achar animações prontas e até fazer suas próprias e colaborar para biblioteca do site. Abaixo vamos explicar o que é um Lottie, mais sobre o LottieFiles, o que é, como e onde usar e preços dos seus planos.

Como fazer ícones animados para sites usando o LottieFiles?

Antes de qualquer coisa é necessário que faça um cadastro no site do LottieFiles. Após se inscrever, basta fazer login no site e começar a utilizar das suas ferramentas.

Para criadores de sites com wordpress, e precisa fazer ícones animados para sites, o LottieFiles possui integração nativa com os principais construtores de sites, como o Elementor e o Guttemberg.

Então você sempre poderá pesquisar por um Lottie diretamente no Elementor ou no Guttemberd diretamente, ou incorporar o link.

Veja abaixo um exemplo de um Lottie incorporado direto pelo editor Guttemberg. É muito parecido com um Gif, mas não é.

O LottieFiles tem uma biblioteca com animações prontas, sendo algumas grátis e outras disponíveis para quem preferiu adotar um plano premium. Sendo assim, se você não aprendeu ainda como fazer suas próprias animações, você pode começar por essa biblioteca.

Também é possível usar o editor do LottieFiles e criar animações do zero. O que pode ser mais difícil de você não tiver nenhuma noção de edição de imagem. A plataforma do LottieFiles é muito parecido para edição com os principais programas de edição.

No site do LottieFiles você também tem um blog para aprender mais sobre como fazer ícones animados para sites e troca de informações, e onde pode achar novidades e tutoriais completos de uso.

Preços dos planos da plataforma LottieFiles

Se você se interessou pela plataforma do LottieFiles, você pode usar ela de forma totalmente gratuita, mas com algumas limitações, sendo elas:

  • 50 arquivos privados;
  • 1 projeto privado;
  • Editor Lottie;
  • Links compartilháveis limitados;
  • Arquivos públicos ilimitados.

Porém, existem dois planos pagos, o Individual e o Plano para Equipe. Nesses planos você tem acesso também há:

  • Arquivos privados ilimitados;
  • Projetos ilimitados;
  • Links compartilháveis ilimitados;
  • Lottie Paleta de Cores;
  • Otimização do tamanho do arquivo;
  • Compartilhamento e comentários privados;
  • Incorporações personalizadas;
  • Histórico de versões;
  • Transferência de Desenvolvedores.

Os valores dos planos individual e o plano para equipe são respectivamente $19,99 e $24,99 e podem ser adquiridos no próprio site.

O que é um Lottie e sua história

como fazer icones animados para sites
Algumas integrações do LottieFiles

Para começar devemos primeiro entender o que é um Lottie. Um Lottie é um formato de arquivo de animação baseado em JSON, que permite que os designers enviem animações em qualquer plataforma tão facilmente quanto o envio de ativos estáticos.

Lotties são pequenos arquivos que funcionam em qualquer dispositivo e podem aumentar ou diminuir a escala sem pixelização.

Antes de Lottie existir, os designers de movimento estavam criando suas animações e passando-as para os desenvolvedores de software para finalizar sua implementação. As opções ainda eram pobres e limitados até meados de 2010.

Nessa época, desenvolvedores exportariam animações em formatos de baixa qualidade ou tentariam o melhor de sua capacidade para reconstruir o design de animação em código a partir do zero.

Em 2015, Hernan Torrisi teve a ideia de exportar a representação de uma animação no Adobe After Effects e renderizar a animação enquanto era executada. Com isso, ele aproveitou as habilidades do Adobe para enumerar um projeto de animação e lançar um plug-in para o Adobe After Effects, chamado de Bodymovin.

O Bodymovin que exportou a descrição do formato JSON da animação. Hernan também lançou o primeiro renderizador para o formato com um player baseado em Javascript para o navegador.

Em 2017, os engenheiros Brando Withrow, Gabriel Peal e Leland Richardson, do Airbnb, viram o potencial que essas animações apresentavam e os problemas que ela resolveu e fizeram uma parceria com o principal animador Salih Abdul-Karim, também do Airbnb, para ajudar a construir bibliotecas iOS e Android que pudessem renderizar esses arquivos de animação JSON. Depois da união, eles deram o nome dessas animações de “Lottie”, uma bela homenagem à diretora cinema alemã e principal pioneira da animação em silhuetas, Charlotte “Lotte” Reiniger.

Pouco depois, no ano de 2018, a Microsoft e a.Net Foundation lançaram uma biblioteca para renderizar Lottie no Windows.

O que é a plataforma LottieFiles?

Com o LottieFiles você pode encontrar ícones animados para sites para poder testar, colaborar e descobrir animações que atendem principalmente a extensa comunidade de animadores, designers, desenvolvedores e engenheiros. Porém, o uso da plataforma pode ser feitos por qualquer pessoa, todos são bem vindos segundo o próprio site.

No site do LottieFiles encontram-se uma gama de ferramentas e recursos para ajudar a criar ícones animados para sites que visam tornar a descoberta, criação e implementação de animações em Lottie mais fácies e eficientes para todos.

Portanto, se você se perguntar qual é a diferença entre Lottie e LottieFiles, é que Lottie é o arquivo de animação e LottieFiles a plataforma na qual você pode testar e compartilhar as animações em Lottie.

Caso tenha gostado deste artigo, veja nossos outros artigos sobre ferramentas e sites incríveis.

Sobre o autor

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Novidades

  • Logística Eficiente: Como o GNV Pode Melhorar a Distribuição de Adubo

    Logística Eficiente: Como o GNV Pode Melhorar a Distribuição de Adubo

    A logística eficiente é um fator crucial para o sucesso de qualquer operação de distribuição, especialmente quando se trata de produtos agrícolas, como adubo. A escolha das fontes de energia para os veículos de transporte desempenha um papel significativo na otimização da logística. Neste artigo, discutiremos como o GNV (Gás Natural Veicular) pode ser uma…

    Ler Mais

  • Árvores que Atraem Pássaros

    Árvores que Atraem Pássaros

    Já pensou em Árvores que Atraem Pássaros? A natureza sempre exerceu um fascínio sobre nós, e uma das maravilhas mais encantadoras que ela nos proporciona é a presença de pássaros em nosso ambiente. Essas criaturas aladas não apenas nos presenteiam com seus cantos melodiosos, mas também desempenham um papel vital na ecologia e no equilíbrio…

    Ler Mais

  • Como Cuidar da Planta Prímula: Um Guia Completo

    Como Cuidar da Planta Prímula: Um Guia Completo

    As prímulas são flores que encantam com sua beleza delicada e cores vibrantes. Cuidar dessas plantas vai além de um simples passatempo; é um ato de carinho que recompensa com flores exuberantes e ambientes encantados. Neste guia abrangente, vamos explorar tudo o que você precisa saber para cultivar prímulas com sucesso, desde os fundamentos básicos…

    Ler Mais