Des captures d’écran claires pour les tutoriels et la documentation

Une capture utile indique où cliquer, quel réglage choisir ou quel résultat attendre. Même nette, une image du bureau entier aide peu si le bouton ou le réglage recherché reste introuvable.

L’objectif est d’expliquer chaque action sans distraction, sans exposer de données privées et sans créer un fichier inutilement lourd. Ce guide va de la préparation de l’interface au contrôle de la capture publiée.

Définir ce que chaque capture doit expliquer

Rédigez d'abord l'action. « Choisissez Exporter, puis PNG » donne un sujet clair ; « Voici les réglages » laisse chercher l'essentiel.

Capturez le moment pertinent : menu ouvert pour les choix, confirmation pour le résultat. Séparez état initial, menu et résultat si nécessaire.

Gardez des repères : un interrupteur sans titre de panneau est difficile à retrouver. Conservez le titre ou la navigation utile et retirez le reste.

Pour un parcours long, choisissez une courte série où chaque image apporte quelque chose. Un clic évident dans le texte n'exige pas toujours une capture.

Capturer un original propre

Préparez un compte de démonstration, fermez onglets et notifications inutiles. Choisissez une largeur cohérente avec l'interface décrite : une fenêtre étroite peut modifier les menus.

• Windows : Windows + Maj + S sélectionne une zone. L'Outil Capture d'écran propose aussi fenêtre et plein écran ; voir les instructions Microsoft.
• Mac : Maj + Commande + 4 sélectionne une zone ; Maj + Commande + 5 ouvre les commandes. Voir le guide Apple.

Enregistrez le fichier original. Capturer une image affichée dans une messagerie ou télécharger son petit aperçu peut faire perdre davantage de détails. Photographier l’écran ajoute des reflets, des déformations et des éléments inutiles autour de l’écran.

Si le texte est déjà trop petit, ajustez le zoom puis capturez à nouveau. Vérifiez que menus et disposition restent conformes aux instructions. Agrandir ensuite ne recrée pas les caractères mal capturés.

Retirer les informations privées avant partage

Inspectez adresse, titres d'onglets, compte, barres latérales et notifications. Des paiements fictifs ne protègent pas une adresse réelle visible dans le menu du compte.

Recadrez l’image pour retirer les informations privées situées hors de la zone utile. Pour celles qui restent dans l’image, utilisez un aplat entièrement opaque. Le flou et la pixellisation peuvent laisser des indices sur le contenu et ne conviennent pas pour protéger un texte confidentiel.

1. Ouvrez Pixelliser une image. Dans Effet, choisissez le masquage opaque, nommé Solid cover en anglais.
2. Placez le masque. Ajustez le rectangle avec une marge pour cacher tous les bords des caractères.
3. Ajoutez une zone pour chaque occurrence. Le bouton anglais est Add area. Vérifiez champs, menu du compte, codes et QR. Déplacer un masque ne protège pas les deux emplacements.
4. Téléchargez le PNG et ouvrez-le. Contrôlez le fichier, pas seulement l'aperçu.

Dans le PNG téléchargé, le masque fait partie des pixels de l’image. Partagez cette copie plutôt qu’un document modifiable contenant un rectangle que l’on pourrait retirer pour révéler l’original. Conservez l’original hors des dossiers publics.

Cela ne protège que les zones couvertes, pas le reste du document, le presse-papiers, le compte ou les sources. Voir le guide du masquage et de la pixellisation.

Recadrer avant d'ajouter les repères

Avec Recadrer une image, retirez bureau, navigation et marges inutiles. Gardez le libellé et assez de contexte pour retrouver la commande.

Fixez le cadrage avant les annotations, pour éviter de pointer un élément supprimé ensuite. Un titre de panneau aide davantage qu'une flèche sans contexte.

Ajoutez au besoin un cadre ou un numéro dans un éditeur adapté, sans masquer le libellé. Expliquez-le dans le texte. Le recadrage Pixilo n'ajoute pas de flèches.

Gardez le même style et une numérotation cohérente. « Sélectionnez le bouton 2 » est plus précis qu'une indication fondée uniquement sur le vert.

Choisir les dimensions selon la taille de lecture

Jugez l'image dans l'article final. Un texte lisible en plein écran peut devenir minuscule dans une colonne.

Distinguez taille apparente du texte et quantité de pixels nécessaire à sa netteté. Plus de pixels ne signifie pas de plus grandes lettres.

Une vue de 800 × 500 pixels CSS capturée à une densité de 2× peut produire une image de 1 600 × 1 000 pixels. Affichée à 800 × 500 pixels CSS, elle garde la même taille apparente : le texte n’est pas automatiquement réduit de moitié. Afficher toute la vue sur une largeur de 400 pixels CSS rend en revanche les libellés plus petits.

Capture, mise à l'échelle et zoom influencent ces valeurs. MDN explique la densité de pixels. Vérifiez le fichier enregistré au lieu de supposer du 2×.

Avant de réduire les pixels, essayez un cadrage plus précis. Sur téléphone, 800 pixels peuvent tenir dans 360 pixels CSS. Séparez les vues ou proposez un agrandissement si nécessaire.

Utilisez Redimensionner une image avec proportions verrouillées pour les sources trop grandes. Comparez à taille publiée ; conservez davantage de pixels ou simplifiez si l'information disparaît.

Choisir le format en préservant le texte

Pour une capture contenant du texte et des éléments d’interface, partez du PNG : sa compression sans perte évite les artefacts JPG. Testez l’optimisation PNG avant de réduire les dimensions. Pour une capture surtout photographique, comparez aussi le JPG ou le WebP.

Comparez depuis la même source, à dimensions et affichage identiques. Inspectez petite lettre, ligne fine et annotation : bavures, ponctuation absente, halos. Gardez la version nette si l'autre perd de l'information.

Pour les formats, consultez JPG ou PNG et la référence MDN. Recommencez les comparaisons depuis la source préparée, pas un téléchargement déjà compressé.

Publier des instructions utilisables sans l'image

Écrivez les actions essentielles à côté : cela aide avec lecteur d'écran, zoom, impression ou image absente. « Ouvrez Réglages, puis Facturation et Télécharger la facture » reste compréhensible.

Le texte alternatif explique ce que l’image apporte à l’instruction. Par exemple : « Paramètres de facturation avec le bouton Télécharger la facture mis en évidence près du dernier paiement. » Inutile de transcrire les éléments sans rapport dans la barre latérale. Voir les conseils W3C sur les images informatives.

Une légende peut préciser la version du logiciel. Gardez image, légende et instruction proches, plutôt que de regrouper toutes les captures après les étapes.

Préservez les proportions et la largeur de colonne. Notre guide des images adaptatives détaille la technique. Vérifiez que l'éditeur n'a pas publié une petite miniature à la place.

Exemple : expliquer le téléchargement d'une facture

Instruction : « Réglages → Facturation, puis Télécharger la facture près du paiement ». Les dimensions suivantes sont illustratives, non mesurées dans une application.

1. Préparez la vue. Affichez des paiements fictifs et le bon bouton ; fermez les autres menus.
2. Capturez et recadrez. De 1 600 × 1 000, un cadre de 1 200 × 700 peut garder titre, paiement et bouton, sans la barre latérale. Gardez l'original privé.
3. Masquez les données restantes. Couvrez l'adresse réelle et ajoutez des zones pour ses répétitions. Téléchargez et contrôlez le PNG.
4. Soulignez l'action si nécessaire. Encadrez le bouton sans cacher son nom dans un éditeur d'annotations. Enregistrez en PNG avec un style cohérent.
5. Contrôlez dans l’article. Une image de 1 200 pixels de large affichée sur 600 pixels CSS fournit deux pixels d’image par pixel CSS. Sur téléphone, vérifiez la ligne du paiement et le nom du bouton. Montrez au besoin un gros plan de cette ligne plutôt que de réduire encore toute la vue.
6. Publiez avec les instructions. Écrivez l’action à côté de l’image. La page et tout lien vers la version en taille réelle doivent utiliser la copie PNG modifiée, dans laquelle les données privées sont masquées.

L'essentiel est de trouver paiement et bouton, pas de maximiser l'espace de bureau supprimé.

Trouver la cause d'un mauvais résultat

Suivez la publication comme un débutant : libellés et étapes doivent correspondre, et les images accompagner la bonne action.

Questions fréquentes

Faut-il une capture pour chaque étape ?

Non. Elle doit expliquer emplacement, choix ou résultat. Un texte clair suffit souvent ; les images inutiles ajoutent défilement et maintenance.

Une capture de page entière est-elle utile ?

Elle peut montrer la structure générale d’une page, mais convient rarement pour expliquer un petit bouton ou un réglage précis. Ajoutez des vues ciblées là où les détails doivent rester lisibles.

Faut-il montrer le pointeur ?

Seulement s'il aide. Sur un libellé, il gêne ; un cadre et du texte sont souvent plus clairs.

Comment suivre les changements d'interface ?

Montrez le contexte nécessaire, précisez version ou date si utile. Mettez à jour images et instructions ensemble quand les menus changent.