Recettes InDesign ultra-précises.

Conseils et astuces pour Adobe InDesign : exporter des graphiques pour le web avec la résolution correcte.

Toutes les vidéos du tutoriel Recettes Adobe InDesign ultra-pointues

Il y a des gens qui créent réellement des graphiques pour le Web dans Adobe InDesign. C'est possible.

Il y a eu une situation où un ami m'a demandé comment il se peut que lorsque j'exporte un graphique en JPG et que je le regarde dans Photoshop, la résolution ne soit plus correcte. J'ai dû regarder moi-même comment cela pouvait arriver.

Étape 1

Pour cela, je vais simplement montrer comment le faire correctement :

Je vais dans Fichier>Nouveau>Document et là je peux déjà choisir si je veux le faire pour Impression, Web ou Publication numérique. J'ai besoin du Web.

Les pixels sont utilisés comme unité cible, c'est correct. Je pourrais aussi préciser quelle résolution exacte je souhaite dans Format de page ou je pourrais directement la saisir dans Largeur et Hauteur. Disons 800 × 200 px et confirmons avec OK.

Conseils et astuces pour Adobe InDesign: exporter des graphiques pour le web avec la résolution correcte.

Étape 2

Ensuite, j'ai l'espace de travail ici et je vais par exemple créer un bouton.

Pour cela, je prends l'Outil Rectangle et je dessine une forme.

Ensuite, je veux y ajouter un Dégradé de haut en bas. Je choisis donc Type : Linéaire et Angle : 90°.

Je ne veux pas de Contour, je le configure via Champs de couleur.

Conseils et astuces pour Adobe InDesign: Exporter des graphiques pour le web avec la résolution correcte

Étape 3

Je peux bien sûr aussi ajuster la couleur moi-même si elle ne me plaît pas. Mais c'est pas le moment.

Mais si jamais, je peux choisir la couleur en allant dans Champs de couleur>Nouveau dégradé. Cela se crée immédiatement et ensuite je peux y aller avec un Double-clic et déplacer par exemple le curseur Noir légèrement vers la droite, pour éviter que cela ne passe directement au blanc complet.

Conseils et astuces pour Adobe InDesign : exporter des graphiques pour le web avec la résolution correcte

Étape 4

Ensuite j'aimerais bien arrondir le tout et pour cela je vais dans Objet>Options de coin.

Je le fais toujours avec Aperçu, comme ça je vois tout de suite. Et ensuite je configure Arrondi et 20 px.

Ça donne quelque chose comme ça :

Astuces et conseils pour Adobe InDesign: exporter des graphiques pour le web avec la résolution correcte

Étape 5

Il y a encore une bordure, que je ne veux pas, et je la supprime. Je pourrais maintenant entrer un texte, mais nous allons laisser cela tel quel.

Conseils et astuces pour Adobe InDesign: exporter des graphiques pour le web avec la résolution correcte.

Étape 6

Je veux maintenant l'exporter et je vais donc dans Fichier>Exporter et je l'appelle "bouton".

Ensuite je peux choisir le format de fichier souhaité. PNG est intéressant car je peux y enregistrer les transparences. C'est fait.

Ensuite j'obtiens exactement la même fenêtre que pour JPG. Je pourrais exporter plusieurs pages, mais comme j'en ai actuellement une seule, cela est irrelevant dans ce cas.

En outre, je peux définir la Qualité. La Résolution est toujours réglée sur 300 ppp - ppp signifie pixels par pouce.

Ensuite bien sûr, le Fond transparent est important et je vais sur Exporter.

Conseils et astuces pour Adobe InDesign : exporter des graphiques pour le web avec la résolution correcte

Étape 7

Maintenant j'ouvre ce fichier dans Photoshop et je vois immédiatement que c'est un peu grand.

Et si je regarde dans Image>Taille de l'image, il affiche 3334 × 834 pixels. Mais je n'avais pas configuré ça lors de la création du document !

Conseils et astuces pour Adobe InDesign : Exporter des graphiques pour le web avec la résolution correcte.

Étape 8

C'est pourquoi : Nous retournons à InDesign et allons dans Fichier>Exporter. Cette fois-ci je vais l'appeler "bouton2".

Et maintenant c'est crucial : Ici dans Résolution il faut entrer 72 ppp. C'est tout. Ce n'est que lorsque cette valeur est entrée que c'est exactement la résolution que nous avions définie au départ.

Conseils et astuces pour Adobe InDesign : exporter des graphiques pour le Web avec la résolution correcte

Alors dans Photoshop j'obtiens les 800 × 200 pixels souhaités.

Conseils & astuces pour Adobe InDesign: exporter des graphiques pour le web avec la résolution correcte



C'est essentiellement tout. Il n'y a pas plus. Vous devez juste vous assurer que vous entrez 72 ppp lors de l'exportation.