Dicas e truques para o Adobe InDesign: exportar gráficos para a web com a resolução correta.

Há pessoas que realmente criam gráficos para a web no Adobe InDesign. Você pode fazer isso.

Teve uma situação em que um amigo me perguntou como era possível que, ao exportar um gráfico como JPG e abri-lo no Photoshop, a resolução não estivesse correta. Tive que investigar como isso poderia acontecer.

Passo 1

Vou mostrar como fazer isso corretamente:

Vou em Ficheiro>Novo>Documento e posso escolher em Media se é para Impressão, Web ou Publicação Digital. Eu escolho Web.

A unidade de medida utilizada são pixels, o que está correto. Posso especificar a resolução em Formato da Página ou inserir diretamente em Largura e Altura. Digamos, 800 × 200 Px e confirmo com OK.

Passo 2

Agora tenho a área de trabalho e vou criar um botão, por exemplo.

Para isso, utilizo a Ferramenta Retângulo e desenho uma forma.

Em seguida, aplico um Gradiente de cima para baixo. Então escolho Tipo: Linear e Ângulo: 90°.

Para remover a Contorno, configuro em Painéis de Cores.

Passo 3

Posso ajustar a cor conforme necessário. Mas no momento isso não é relevante.

Porém, se for, posso escolher a cor ao ir em Painéis de Cores>Novo Campo Gradiente. Isso é criado imediatamente e então posso ajustar, por exemplo, movendo o controle Preto levemente para a direita, para não ser totalmente branco.

Passo 4

Agora quero arredondar tudo e para isso vou em Objeto>Opções de Cantos.

Gosto de usar sempre a opção de Pré-visualização, para ver imediatamente. E então defino como Arredondado e 20 px.

Desta forma, fica assim:

Passo 5

Tem uma borda que não queria e então a removo. Poderia inserir um texto, mas por enquanto vamos deixar assim.

Passo 6

Agora quero exportar e vou em Ficheiro>Exportar e nomeio como "botão".

Posso escolher o formato do arquivo. PNG é interessante, pois permite salvar a transparência. Vamos fazer isso.

Então aparece a mesma janela que no JPG. Poderia exportar várias páginas, mas como tenho apenas uma, isso é irrelevante neste caso.

Também posso ajustar a Qualidade. A Resolução sempre está definida como 300 ppi - ppi significa Pixels por Polegada.

E, é claro, é importante ter um Fundo Transparente e clico em Exportar.

Passo 7

Agora abro o arquivo no Photoshop e logo vejo que está um pouco grande.

Se conferir em Imagem>Tamanho da Imagem, verá que está 3334 × 834 pixels. Mas isso não foi configurado na criação do documento!

Passo 8

Por isso, retornamos ao InDesign e clicamos em Ficheiro>Exportar. Dessa vez nomeio como "botão2".

E agora vem a questão: Aqui em Resolução, você deve inserir 72 ppi. Isso é tudo. Apenas quando esse valor é inserido, será exatamente a resolução que definimos no início.

No Photoshop, então, as dimensões são as desejadas de 800 × 200 pixels.



É basicamente isso. Não há muito mais. A única coisa a se atentar é garantir que ao exportar, seja inserido 72 ppi.