Ghedin, como o pessoal do Núcleo consegue fazer esse infográfico com texto selecionável, de maneira tão personalizada? Pensei que só dava pra fazer isso jogando um arquivo .jpg.
Opa! Imaginei que os ícones e marcas seriam em SVG, mas fiquei muito curioso como formatar um objeto complexo como esse, o texto está em disposições bem fora do comum para um artigo. Note que na parte cinza, onde estão os nomes dos agenciados, há um leve degradê que cobre parte dos nomes.
Fiquei pensando se não há um Photoshop/Figma que transfira um leiaute para o html da publicação, ou se realmente houve um trabalho de programação e UX Design para fazer o infográfico. Geralmente em sites de notícia são os jornalistas que fazem quase tudo, por isso fiquei refletindo se existia alguma ferramenta de uso amigável para fazer algo assim.
Aí é questão da gente esmiuçarmos arquivos JS do site pra achar uma pista das ferramentas usadas, pacotes Node, bibliotecas e etc…
Mas tipo do Sketch, Adobe XD e etc… tem como exportar os pra HTML.
Oie, Rodolfo do Núcleo aqui!
O gráfico foi desenhado no Adobe illustrator. O que eu fiz então foi exportar ele como uma imagem SVG, copiei o código dela e inclui no CMS Ghost como um snippet de HTML. Aí coloquei um CSS pra que no desktop seja exibida uma versão e no mobile outra versão do svg. É um jeito que funciona mas o texto fica truncado, o que é um problema pra quem usa leitor de tela por exemplo (como tivemos recentemente no Núcleo).
Outro jeito bastante usado de fazer infográficos pra web (que já fiz aqui no Núcleo e usávamos direto lá no Nexo Jornal) é usando um plugin de illustrator chamado ai2html (ai2html.org), desenvolvido pela equipe de gráficos do New York Times. Ele separa o texto da imagem e exporta um documento HTML que tem a imagem de fundo.
Olá, Rodolfo! Muito obrigado pela resposta.
Não sabia que do Illustrator poderia já sair um código html/css para publicar em um site. Eu já uso .svg, mas como imagem vetorial. Bem legal a dica também do plugin. Valeu por esclarecer com detalhes =)
Ghedin, como o pessoal do Núcleo consegue fazer esse infográfico com texto selecionável, de maneira tão personalizada? Pensei que só dava pra fazer isso jogando um arquivo .jpg.
SVG: https://s2.loli.net/2024/01/14/xw4t1KTqnCSjf2B.png
Opa! Imaginei que os ícones e marcas seriam em SVG, mas fiquei muito curioso como formatar um objeto complexo como esse, o texto está em disposições bem fora do comum para um artigo. Note que na parte cinza, onde estão os nomes dos agenciados, há um leve degradê que cobre parte dos nomes.
Fiquei pensando se não há um Photoshop/Figma que transfira um leiaute para o html da publicação, ou se realmente houve um trabalho de programação e UX Design para fazer o infográfico. Geralmente em sites de notícia são os jornalistas que fazem quase tudo, por isso fiquei refletindo se existia alguma ferramenta de uso amigável para fazer algo assim.
Aí é questão da gente esmiuçarmos arquivos JS do site pra achar uma pista das ferramentas usadas, pacotes Node, bibliotecas e etc…
Mas tipo do Sketch, Adobe XD e etc… tem como exportar os pra HTML.
Oie, Rodolfo do Núcleo aqui!
O gráfico foi desenhado no Adobe illustrator. O que eu fiz então foi exportar ele como uma imagem SVG, copiei o código dela e inclui no CMS Ghost como um snippet de HTML. Aí coloquei um CSS pra que no desktop seja exibida uma versão e no mobile outra versão do svg. É um jeito que funciona mas o texto fica truncado, o que é um problema pra quem usa leitor de tela por exemplo (como tivemos recentemente no Núcleo).
Outro jeito bastante usado de fazer infográficos pra web (que já fiz aqui no Núcleo e usávamos direto lá no Nexo Jornal) é usando um plugin de illustrator chamado ai2html (ai2html.org), desenvolvido pela equipe de gráficos do New York Times. Ele separa o texto da imagem e exporta um documento HTML que tem a imagem de fundo.
Olá, Rodolfo! Muito obrigado pela resposta.
Não sabia que do Illustrator poderia já sair um código html/css para publicar em um site. Eu já uso .svg, mas como imagem vetorial. Bem legal a dica também do plugin. Valeu por esclarecer com detalhes =)