Confronta le versioni

Comment créer des captures d’écran sur Windows, Mac, Linux, et sur les appareils iOS et Android afin d’ajouter l’image aux articles de la base de connaissances.

<!-- Note: We have a support article, https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem which this article was originally based on. We also have a KB “how to contribute” article, https://support.mozilla.org/en-US/kb/adding-screenshots which was shortened by moving some content to this article. --> {note}'''Note :''' consultez l’article [[How do I create a screenshot of my problem?]] si vous avez besoin d’aide pour créer une capture d’écran à ajouter à une question dans le forum d’assistance de Mozilla.{/note} Cet article explique comment créer une capture d’écran et comment modifier les images de capture d’écran sur différents systèmes d’exploitation et appareils, afin de les utiliser dans les articles de la base de connaissances. Suivez ce lien pour [[Add images and screenshots to Knowledge Base articles|apprendre à ajouter des images et des captures d’écran aux articles de la base de connaissances]]. __TOC__ <!-- These tips are copied from https://support.mozilla.org/en-US/kb/adding-screenshots --> =Repères visuels= Les repères visuels sont essentiels pour rendre la documentation claire et conviviale. Ces repères attirent l’attention sur des zones spécifiques d’une image, guidant les utilisateurs et utilisatrices à chaque étape d’un processus. ==Couleur du contour== Utilisez un contour rouge (plus précisément la couleur hexadécimale '''#f71701''') pour délimiter les zones pertinentes de vos captures d’écran. Ce choix de couleur permet de s’assurer que les zones mises en évidence attirent immédiatement l’attention. ==Style des coins== Utilisez des coins carrés pour les contours afin d’obtenir une harmonie visuelle dans vos annotations sur les captures d’écran. ==Épaisseur du trait== Équilibrez l’épaisseur du trait de contour entre 4 et 8 points (pt) pour obtenir une visibilité uniforme sur des captures d’écran de différentes tailles. ==Aligner les éléments d’interface mis en évidence au centre== Alignez l’élément d’interface au centre du contour rouge pour améliorer la clarté et la reconnaissance. ;[[Image:Screenshot outline example|width=400]] ==Marqueurs d’étapes séquentielles== L’utilisation de marqueurs d’étapes séquentielles sur les captures d’écran relie chaque action de l’interface utilisateur aux étapes textuelles correspondantes. Cela réduit l’ambiguïté et la nécessité de recourir à plusieurs images. C’est particulièrement utile pour les instructions plus longues dans la même fenêtre ou le même contexte. En utilisant cette méthode, vous pouvez afficher plusieurs instructions dans une seule capture d’écran avec des indicateurs clairs pour chaque action dans l’interface. Voici un exemple de scénario approprié pour l’utilisation de cette approche : ;[[Image:Sequential Step Markers example|width=650]] Pour ajouter ces marqueurs à vos captures d’écran, ouvrez la capture d’écran dans votre éditeur d’images préféré. Ensuite, enregistrez les marqueurs depuis la [[Sequential step markers list]] et placez-les dans les sections appropriées de la capture d’écran. =Préparation et modification des images= ==Taille== Veillez à ce que les captures d’écran soient de taille réduite. Pour améliorer les temps de chargement et l’accessibilité, en particulier pour les personnes disposant de connexions internet plus lentes, il est préférable que les dimensions des captures d’écran soient limitées à 620 pixels en hauteur et en largeur. ;[[Image:Example image size|width=620]] ==Recadrage== *Veillez à ce que les captures d’écran soient recadrées de manière à mettre en évidence les éléments de l’interface utilisateur qui se rapportent à la tâche à accomplir. ;[[Image:Cropped screenshot example|width=400]] ==Simplifications== *Simplifiez les captures d’écran complexes en éliminant les éléments non essentiels de l’interface utilisateur, réduisant ainsi la charge cognitive des utilisateurs et utilisatrices. Optez pour des nuances de gris atténuées comme '''#D4D4D4''' et '''#E0E0E8''' plutôt que pour des couleurs vives ou foncées. Ces nuances plus claires contribuent à minimiser les distractions, ce qui permet de rester concentrés sur les parties importantes de la capture d’écran. ;[[Image:Simplified screenshot example|width=820]] ==Informations d’identification personnelle== *Éliminez toutes les « informations d’identification personnelle » (PII) présentes sur les captures d’écran, y compris les e-mails, les identifiants et toutes les données personnelles qui pourraient potentiellement permettre d’identifier une personne. ;[[Image:Remove PII example|width=400]] ==Mode clair== *Faites des captures d’écran en « mode clair » dans la mesure du possible, car les images en « mode sombre » peuvent ne pas être aussi facilement reconnaissables pour certaines personnes. [https://fr.wikipedia.org/wiki/Microsoft_Paint Paint] sur Windows et [https://fr.wikipedia.org/wiki/Aper%C3%A7u_(OS_X) Aperçu] sur macOS sont des logiciels pratiques pour recadrer et éditer les captures d’écran. Vous pouvez aussi utiliser des gratuiciels comme [https://en.wikipedia.org/wiki/GIMP GIMP] sur Windows, Mac et Linux. D’autres outils de modification sont listés à la fin de cet article. [[UI:details_start]] =Captures d’écran sous Windows= ==Créer une capture d’écran== Une fois que l’écran est présenté de la façon voulue pour la capture d’écran : #Appuyez sur la touche ''impression d’écran'' {key Impr écran Syst} ou {key Imprécr Syst} ou {key Prnt Screen} (selon votre clavier). Cette touche se trouve généralement en haut à droite de votre clavier. Pour ne capturer que la fenêtre active, maintenez la touche {key Alt} enfoncée avant d’appuyer sur la touche {key Impr écran Syst} ou {key Imprécr Syst} ou {key Prnt Screen} #Cliquez sur le menu ''Démarrer'' de Windows et ouvrez le programme '''Microsoft Paint''' dans la liste des programmes (regardez sous « Accessoires »). #Une fois Paint ouvert, cliquez sur '''Coller'''. Votre capture d’écran apparait. #Enregistrez votre image en PNG dans un emplacement facile à trouver comme votre bureau. <!--These three subsections are copied from https://support.mozilla.org/en-US/kb/adding-screenshots --> ==Recadrage des captures d’écran dans Paint== Le recadrage des captures d’écran vous permet de modifier une grande image pour ne montrer que ce qui a besoin d’être vu lors de la lecture. #Ouvrez la capture d’écran dans Paint. #Dans la barre d’outils, cliquez sur '''Sélection''' puis sur '''Sélection rectangulaire'''. #;[[Image:Paint1]] #Votre curseur ressemble maintenant à une boussole. Utilisez votre curseur pour dessiner un rectangle autour de la zone que vous souhaitez voir apparaître dans l’image finale. #Cliquez sur {button Recadrer} ==Réaliser des captures d’écran dans Paint== Les captures d’écran vous permettent de vous concentrer sur une petite partie d’une image à l’intérieur d’une image plus grande. Vous pouvez vouloir montrer un bouton précis dans une barre d’outils complète. #Ouvrez la capture d’écran dans Paint. #Dans la barre d’outils ''Formes'', sélectionnez la forme rectangle. #;[[Image:Paint3]] #Dans la barre d’outils ''Couleurs'', sélectionnez la couleur rouge. #;[[Image:Paint4]] #Votre curseur ressemble maintenant à une boussole. Utilisez votre curseur pour dessiner un rectangle rouge autour de la zone que vous souhaitez mettre en valeur. #;[[Image:Paint2]] ==Redimensionner des images dans Paint== Certaines captures d’écran sont de grande taille. Mais il est préférable de ne pas utiliser de captures d’écran dont la longueur ou la largeur dépasse 620 pixels. Voici comment redimensionner une capture d’écran volumineuse. #Ouvrez la capture d’écran dans Paint. #Cliquez sur {button Redimensionner} dans la barre d’outils. Une fenêtre ''Redimensionner et incliner'' s’ouvre. #Vérifiez que la hauteur et la largeur sont toutes deux inférieures à 620 pixels. Si elles sont plus grandes, tapez un nombre plus petit dans la barre horizontale ou verticale. #;[[Image:Paint5]] [[UI:details_end]] [[UI:details_start]] =Captures d’écran sous macOS= ==Créer une capture d’écran== Une fois que l’écran est présenté de la façon voulue pour la capture d’écran : *Pour capturer l’écran, maintenez la touche {key Commande} enfoncée, ainsi que la touche {key Maj}, lorsque vous appuyez sur {key 3} *Pour capturer une zone spécifique, maintenez la touche {key Commande} enfoncée, ainsi que la touche {key Maj}, lorsque vous appuyez sur {key 4} ; ensuite sélectionnez la zone à copier. *Pour capturer une fenêtre spécifique, maintenez la touche {key Commande} enfoncée, ainsi que la touche {key Maj}, lorsque vous appuyez sur {key 4} ; ensuite appuyez sur la touche {key Espace}. Vous pouvez alors cliquer sur une fenêtre pour la capturer. Cela crée un fichier PNG sur votre bureau. ==Recadrage des captures d’écran dans Aperçu== Le recadrage des captures d’écran vous permet de modifier une grande image pour ne montrer aux lecteurs que ce qu’ils ont besoin de voir. #Ouvrez la capture d’écran dans Aperçu. #Cliquez sur [[Image:PreviewToolbar]] dans la barre d’outils. Une deuxième barre d’outils s’ouvre. #Votre curseur ressemble maintenant à une boussole. Utilisez votre curseur pour dessiner un rectangle autour de la zone que vous souhaitez voir apparaître dans l’image finale. #;[[Image:Preview2|width=75]] #Cliquez sur {button Recadrer} ==Réaliser des captures d’écran dans Aperçu== Les captures d’écran vous permettent de vous concentrer sur une petite partie d’une image à l’intérieur d’une image plus grande. Vous pouvez vouloir montrer un bouton précis dans une barre d’outils complète. #Ouvrez la capture d’écran dans Aperçu. #Cliquez sur {menu Outils} puis sur {menu Annoter} et enfin sur {menu Rectangle} #Un rectangle rouge apparaît. Ajustez le rectangle de manière à ce qu’il s’adapte à la zone que vous souhaitez mettre en valeur. #;[[Image:ReloadiOS|width=300]] ==Redimensionner des images dans Aperçu== Certaines captures d’écran sont de grande taille. Mais il est préférable de ne pas utiliser de captures d’écran dont la longueur ou la largeur dépasse 620 pixels. Voici comment redimensionner une capture d’écran volumineuse. #Ouvrez une capture d’écran dans Aperçu. #Cliquez sur {menu Outils} puis sur {menu Ajuster la taille}. Une fenêtre s’ouvre. #Vérifiez si la hauteur et la largeur sont toutes deux inférieures à 620 pixels. Si elles sont plus grandes, tapez un nombre plus petit dans la barre de hauteur ou de largeur. #Assurez-vous que la case {button Échelle proportionnelle} est cochée et cliquez sur {button OK} #;[[Image:ScalePreview|width=450]] [[UI:details_end]] [[UI:details_start]] =Captures d’écran sous Linux= ==Créer une capture d’écran== Une fois que l’écran est présenté de la façon voulue pour la capture d’écran : *Sous Ubuntu Linux, cliquez sur le menu {menu Applications}, allez au dossier {menu Accessoires}, puis sélectionnez {menu Faire une capture d’écran} *Dans les autres cas, selon votre gestionnaire de bureau, vous pouvez utiliser [https://fr.wikipedia.org/wiki/KSnapshot KSnapshot] ou [https://en.wikipedia.org/wiki/Gnome-screenshot Gnome-screenshot (en)] ou utiliser la touche {key Imprécr Syst} ou {key Impr écran Syst} (selon votre clavier) pour capturer l’écran. [[UI:details_end]] [[UI:details_start]] =Captures d’écran sur les appareils iOS= ==Créer une capture d’écran== Une fois que l’écran est présenté de la façon voulue sur l’écran de votre iPhone ou iPad : #Appuyez et maintenez enfoncée le bouton '''Veille/Éveil''', puis appuyez immédiatement sur le bouton '''Accueil'''. #Votre écran clignotera en blanc pendant une seconde et l’appareil émettra un bruit d’obturateur (si le volume est activé) pour indiquer que la capture d’écran a été effectuée. #La capture d’écran est maintenant enregistrée dans votre application Photos pour que vous puissiez la visualiser. {note}'''Appareils iOS :''' iPhone 6 et plus, le bouton {button Veille/Éveil} se trouve sur le côté droit de l’appareil.{/note} [[UI:details_end]] [[UI:details_start]] =Captures d’écran sur les appareils Android= ==Créer une capture d’écran== Une fois que l’écran est présenté de la façon voulue sur l’écran de votre téléphone ou tablette Android : #Appuyez simultanément sur la touche '''Veille/Éveil''' et sur la touche '''Volume bas''' et maintenez-les enfoncées. L’écran clignote. #Recherchez la capture d’écran dans l’application Galerie. #Envoyez la capture d’écran sur votre ordinateur. Si vous le souhaitez, modifiez la capture d’écran dans un logiciel d’édition d’images tel que Paint ou Aperçu. {note} *Sur les téléphones Android fonctionnant sous Stock Android (version non modifiée d’Android, installée telle quelle par les fabricants d’appareils) avec la version 9 (Pie) installée, vous pouvez simplement appuyer sur le bouton '''Allumer/Verrouiller/Déverrouiller''' et le maintenir enfoncé, ce qui entraîne l’affichage du menu ''Allumer''. Dans le menu ''Allumer'', sélectionnez '''Capture d’écran''' (la troisième option en bas du menu) et une capture d’écran est automatiquement enregistrée dans la galerie de votre téléphone. *Tous les appareils Android ne fonctionnent pas de la même manière. Si les méthodes précédentes ne fonctionnent pas et que votre appareil dispose d’un bouton d’accueil, appuyez simultanément sur le bouton d’accueil et le bouton d’alimentation et maintenez-les enfoncés jusqu’à ce que l’écran clignote. Pour d’autres méthodes, voir les articles suivants : <!-- the following is copied from https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem --> **[https://www.wikihow.com/Take-Screenshots-on-an-Android Comment prendre des captures d’écran sur un Android] (WikiHow) **[https://www.androidcentral.com/android-screenshots Comment faire une capture d’écran sur Android] (Android Central) **[https://www.pcadvisor.co.uk/how-to/google-android/how-take-screenshot-on-android-phones-tablets-summary-windows-ios-android-3623449/ Comment faire une capture d’écran sur les téléphones et tablettes Android] (PC Advisor) {/note} [[UI:details_end]] =Outils= *[https://en.wikipedia.org/wiki/Paint_%28software%29 Paint] (inclus avec Windows) *[https://en.wikipedia.org/wiki/Snipping_Tool Outil Capture] (inclus avec Windows) *[https://en.wikipedia.org/wiki/Preview_%28Mac_OS%29 Aperçu] (inclus avec macOS) *[https://en.wikipedia.org/wiki/GIMP GIMP] (gratuiciel pour Windows, macOS et Linux) *[https://www.irfanview.com/ Irfanview] (gratuiciel pour Windows) *[https://www.getpaint.net/ Paint.NET] (gratuiciel pour Windows) *[https://www.techsmith.com/store/snagit Snagit] (logiciel payant, avec 15 jours d’essai entièrement fonctionnel) *[https://www.xnview.com/fr/index.html XNView] (gratuiciel pour les ordinateurs et les appareils mobiles) *[https://en.wikipedia.org/wiki/Category:Screenshot_software Plus de logiciels de capture (en)] =Directives complètes de la base de connaissances= Pour plus d’informations, consultez les [/products/contributor/kb articles de la base de connaissances pour la contribution].