Prendre des captures d'écran
From Joomla! Documentation
Comment réaliser des captures d'écran
Une capture d'écran peut être réalisée très facilement dans les systèmes d'exploitation actuels à l'aide des outils propres au système. Dans la plupart des cas, il suffit d'appuyer sur la touche "Impr. Ecran" du clavier (si elle est disponible) pour enregistrer la totalité de l'écran. Des touches supplémentaires telles que "Alt" ou "Ctrl" peuvent être utilisées pour définir des zones partielles.
Un traitement ultérieur minutieux est nécessaire pour produire des images de haute qualité. Les exemples d'images de ce tutoriel ont été préparés avec GIMP Version 2.10.24, un éditeur d'images open source.
Cinq étapes faciles pour obtenir des captures d'écran de haute qualité
Le choix de l'outil à utiliser pour les étapes suivantes appartient principalement à l'auteur du JDoc. Il convient de s'assurer que l'application possède les fonctions/caractéristiques décrites ci-dessous.
De plus, il est important de procéder aux étapes de traitement décrites ici dans l'ordre.
- Prendre/Télécharger l'image
- Recadrage de l'image (si nécessaire)
- Redimensionner l'image (si nécessaire)
- Appliquer le filtre : Masque flou (essentiels)
- Sauvegarde en PNG (recommandé)
Effectuer une capture d'écran
Pour Windows et MacOS, en plus des outils système, il existe de nombreux outils supplémentaires qui promettent de rendre la capture d'écran plus pratique qu'avec les outils système. Cependant, la qualité des données brutes de la capture d'écran avec ces outils n'est pas meilleure qu'avec les outils système. La manipulation des outils système est expliquée sur les pages Windows et MacOS. Pour Linux, il existe de nombreux outils gratuits permettant de réaliser des captures d'écran. Interrogez votre moteur de recherche préféré avec les termes outil de capture d'écran linux" pour trouver une application de votre choix, adaptée à votre distribution.
L'outil choisi doit être capable de capturer n'importe quelle partie de l'écran et disposer d'une loupe d'écran pour une sélection précise. Toute application qui peut transférer la capture d'écran dans le presse-papiers ou l'enregistrer au format PNG est également préférable. Les formats d'image JPG ou JPEG, largement utilisés, sont moins adaptés car leur compression des données n'est pas sans perte.
Dans la documentation de Joomla ! (et les pages JHelp), quatre largeurs d'image sont courantes.
- 800px pour l'aperçu en haut de la page
- 600px pour les sections plus grandes (par exemple, les différents onglets)
- 400px pour les sous-zones générales
- 265px pour les sous-zones ou les détails plus petits
Cependant, ce n'est pas une bonne idée de réduire la capture d'écran exactement à la largeur de page requise après avoir chargé l'image. L'expérience a montré qu'une largeur d'image supérieure de 25 % est recommandée (800px → 1000px). Les écarts plus faibles sont insignifiants. Les fichiers trop volumineux n'apportent pas une meilleure qualité, ils ne font que consommer de l'espace de stockage.
Il faut veiller à ce que la capture d'écran réalisée (après recadrage) ait au moins une des largeurs d'image souhaitées (+25%) comme mentionné ci-dessus.
Attention : Il faut absolument éviter d'agrandir une capture d'écran trop petite en utilisant la fonction de redimensionnement. Il en résulterait une perte de qualité qui ne peut être corrigée. La documentation d'Adobe Photoshop le dit succinctement :
- :Pour obtenir de meilleurs résultats lorsque vous produisez une image plus petite, rééchantillonnez et appliquez le filtre masque flou. Pour produire une image plus grande, numérisez à nouveau l'image à une résolution plus élevée."
Si vous avez déjà défini la zone précise de l'image lors de la capture d'écran, vous pouvez passer l'étape suivante.
Recadrer l'image
Si l'image capturée est plus grande que nécessaire, il faut la recadrer après l'avoir téléchargée dans un outil d'édition d'images.
Astuce : Si les captures d'écran créées sont temporairement stockées dans le presse-papiers et que d'autres modifications doivent être effectuées avec Gimp, le raccourci suivant "Shift+Ctrl+V" (ou "Cmd+V" avec macOS) permet d'importer immédiatement les données dans Gimp.
Using the Crop Tool
If the screenshot still contains superfluous border areas, the image should first be cropped to the desired image section using the crop function. When choosing the final cropping area, it is a poorer choice if the boundary is a white area. Then the viewer cannot see the edges of the picture against the white background of the side. In professional image editing, we like to avoid such a situation and either place a slight shadow under the image or give the image area a minimal colour tone.
To open the Crop Tool, click the icon with the mouse pointer.
Move the mouse pointer to a corner or to a side line. By keeping the left mouse button pressed, the selection area can be changed. The Gimp Online Manual gives a full description on how to use up the option.
Tip: If the screen view is enlarged (here 800%) the selection can be fixed with pixel accuracy.
Scaling the Image
This step is only needed if the screenshot is much too large (i.e. more than 25-30% above the nominally required width).
A small example should explain the reason:
Let's assume we need an image that is 800px wide and 1000px high on our page. The uncompressed colour file (3 channels RGB, 8-bit each) is about 2.29 MB.
If we use the slightly larger file (1000px x 1250px) for quality reasons, the file size increases to 3.58 MB.
But if we take a screenshot in double width and height (1600px x 2000px), the file size grows to an incredible 9.16 MB.
Even at the highest compression level, this file will be displayed noticeably slower on the web.
Using the Scale Image Option
To open the image scale option, click on Image → Scale Image in the menu. Do not use the Scale Icon in the Toolbox.
The "Scale Image" dialogue in the right-hand image allows the size of an image to be changed. The new width is set in the Width field. As long as the chain icon is not deactivated, the appropriate height is calculated automatically. The setting for quality should be kept unchanged. The Gimp Online Manual gives a full description on how to use up the option.
Applying Filters: Unsharp Mask
This is the most tricky step. It requires careful adjustment, which may vary slightly depending on the motif, monitor, operating system and browser. With the help of the example pictures below, however, you can quickly find the optimal setting for your own system.
How to access
- Select Filters → Enhance → Sharpen (Unsharp Mask) to open the filter settings dialogue.
Three parameters are adjusted, of which only one should really be varied after the basic configuration. However, it is easy to exaggerate the filter effect and then destroy the quality. The "Threshold" slider must only have a higher value than "0" in special cases. The "Radius" control must be operated very sensitively, and "Amount" is often in the right place in a mid-position.
The image above shows the optimal settings (with Gimp 2.10.24) on this system for this screenshot. In a different environment and with other screenshots, the optimal values will differ slightly. The Gimp Online Manual gives a full description on how to set up the filter.
Tip: Have you noticed the yellow marked area? Click on the + button (right-hand side) to save the current settings with your individual name.
Tip: An image can always be best analysed in the 100% view (see the status bar in the above illustration, at the bottom of the figure).
Note: Other image editors partly use very different names for the sliders. The values are also defined quite differently. Which slider leads to which result - only a look in the corresponding manual will help.
The following image samples are intended to demonstrate the effect of a bad setting with regard to the image display. Check the colour coded parts of the images to see the effect of the different filter settings. The evaluation is made easier if the images are viewed in their original size (by clicking the figure).
Left: The raw data file
Right: The settings shown above were used.
Left: The "Threshold" slider is increased too much - causes light parts of the image (green marking) not to be processed.
Middle: The "Amount" slider is too high - this creates a clearly visible outline around the font (red and magenta marking).
Right: The "Radius" slider is set too high - this creates a so-called "black eye" effect (magenta marking).
Saving the Image
It sounds obvious, but is often ignored:
- Better image quality is often only possible with larger files.
- Large files demand more bandwidth to load quickly and consume valuable disk space.
Therefore, it is important to find the best possible compromise between these two requirements. An important factor influencing the size of the file is the number of pixels an image contains and has already been mentioned above. The raw version of image files can quickly exceed 10 MB. Therefore, it is necessary to compress the data when saving. The PNG format compresses loss-free. It is the first choice for the application needed here.
Tip: There is a special procedure with Gimp when files are to be saved after editing. The usual way to save a file in PNG format with "Save" or "Save as" does not allow any other image format than XCF. However, Gimp has implemented a very elegant way via "Export as". The big advantage with this way is that the edits are not saved in the original raw file, but only in the export file. See the Gimp Online Manual for details.
Related Information
For more detailed information on special cases, see the Taking Screenshots FAQ, (currently under construction).