18. Imagens, vetores e SVGs

Descrição

Comentários

Nesta aula, desmistificamos o uso de imagens, vetores e SVGs na criação de sites utilizando o Framer. Primeiramente, expliquei como inserir imagens diretamente no Framer, destacando os formatos suportados, como JPG, PNG, WebP, GIF e VIF, e como o Framer lida com essas imagens convertendo-as automaticamente para o formato VIF quando necessário. Falei sobre as propriedades das imagens dentro do Framer, como redimensionamento proporcional, alinhamento e preenchimento, além de apresentar diferentes modos de exibição como stretch e tile. Ressaltei a importância do texto alternativo (Alt Text) para melhorar a acessibilidade de pessoas com deficiência visual. Além disso, discutimos o uso e as limitações do SVG, que são gráficos vetoriais escaláveis, explicando como eles são diferentes das imagens rasterizadas, como JPEG. Abordei as vantagens do SVG em termos de definição e escalabilidade, mas também salientei os problemas que podem ocorrer com a troca de cores e visualização no Framer. Recomendei algumas práticas que uso rotineiramente, como a transformação de SVG em PNG para evitar problemas comuns que já enfrentei, e falei sobre exportação de elementos em alta definição. Por fim, mencionei a possibilidade de usar SVGs animados a partir de serviços como o Loot Files e as considerações para seu uso seguro.

Comentários

Descrição

Comentários

Nesta aula, desmistificamos o uso de imagens, vetores e SVGs na criação de sites utilizando o Framer. Primeiramente, expliquei como inserir imagens diretamente no Framer, destacando os formatos suportados, como JPG, PNG, WebP, GIF e VIF, e como o Framer lida com essas imagens convertendo-as automaticamente para o formato VIF quando necessário. Falei sobre as propriedades das imagens dentro do Framer, como redimensionamento proporcional, alinhamento e preenchimento, além de apresentar diferentes modos de exibição como stretch e tile. Ressaltei a importância do texto alternativo (Alt Text) para melhorar a acessibilidade de pessoas com deficiência visual. Além disso, discutimos o uso e as limitações do SVG, que são gráficos vetoriais escaláveis, explicando como eles são diferentes das imagens rasterizadas, como JPEG. Abordei as vantagens do SVG em termos de definição e escalabilidade, mas também salientei os problemas que podem ocorrer com a troca de cores e visualização no Framer. Recomendei algumas práticas que uso rotineiramente, como a transformação de SVG em PNG para evitar problemas comuns que já enfrentei, e falei sobre exportação de elementos em alta definição. Por fim, mencionei a possibilidade de usar SVGs animados a partir de serviços como o Loot Files e as considerações para seu uso seguro.

Comentários

Descrição

Comentários

Nesta aula, desmistificamos o uso de imagens, vetores e SVGs na criação de sites utilizando o Framer. Primeiramente, expliquei como inserir imagens diretamente no Framer, destacando os formatos suportados, como JPG, PNG, WebP, GIF e VIF, e como o Framer lida com essas imagens convertendo-as automaticamente para o formato VIF quando necessário. Falei sobre as propriedades das imagens dentro do Framer, como redimensionamento proporcional, alinhamento e preenchimento, além de apresentar diferentes modos de exibição como stretch e tile. Ressaltei a importância do texto alternativo (Alt Text) para melhorar a acessibilidade de pessoas com deficiência visual. Além disso, discutimos o uso e as limitações do SVG, que são gráficos vetoriais escaláveis, explicando como eles são diferentes das imagens rasterizadas, como JPEG. Abordei as vantagens do SVG em termos de definição e escalabilidade, mas também salientei os problemas que podem ocorrer com a troca de cores e visualização no Framer. Recomendei algumas práticas que uso rotineiramente, como a transformação de SVG em PNG para evitar problemas comuns que já enfrentei, e falei sobre exportação de elementos em alta definição. Por fim, mencionei a possibilidade de usar SVGs animados a partir de serviços como o Loot Files e as considerações para seu uso seguro.

Comentários
Nível Aion
Nível Aion
Nível Aion

Especialistas

Henrique Sabino

Fundador da Harena

Mentor

Hashtags

#imagens #vetores #SVG #Framer #design

Olá 👋,

Em que posso ajudar?

Sugestões & Feedbacks