Aller au contenu principal

Faire des copies d’écran

09/12/2008

Préliminaire 1 : ce billet ne contient que des éléments basiques. Il paraîtra donc inutile à beaucoup. L’expérience m’a indiqué qu’il pouvait être utile à quelques uns. Cela suffit à justifier sa rédaction — les autres peuvent passer leur chemin (sans rancune).

Préliminaire 2 : dans la quasi totalité des cas, je dois faire des copies d’écran pour montrer des fonctionnalités de sites internet, et je dois produire ces images sur d’autres sites internet. C’est donc dans ce contexte-là que je proposerai quelques principes.

Préliminaire 3 : je laisse de côté la possibilité que fournissent par défaut certains éditeurs de blogs (dont WordPress) de faire des copies d’écran de grande taille et d’en proposer des vignettes plus ou moins grandes dans le texte, cliquables et pointant vers l’image agrandie. Ces choses là n’existent pas toujours et je partirai de la supposition qu’elles n’existent pas.

Je peux commencer.

Je rappelle qu’une copie d’écran consiste à appuyer sur la touche du clavier. Cela place l’image copiée dans le presse-papier, c’est-à-dire qu’en ouvrant ensuite un éditeur de texte (Word, mais aussi PowerPoint) ou un logiciel d’image (Photoshop) vous pouvez utiliser la fonction Coller (raccourci clavier : Ctr + — Vou clic droit de la souris puis "Coller") pour la faire apparaître.

Si la fenêtre de votre navigateur internet n’occupe pas tout votre écran, et que vous ne voulez copier que ce qui apparaît dans le navigateur, la combinaison Alt + Impr Ecran permet de ne copier que la fenêtre active.

Principes à observer pour faire une copie d’écran

1. Ne garder que les éléments utiles à votre propos

Cela signifie notamment, quand on parle d’un site internet, supprimer tout ce qui est propre au navigateur. Au lieu de ça :

univers-netvibes

Fournir ça :

Univers Netvibes 2

Plusieurs raisons :

  • ça  permet de ne faire apparaître que ce qui a du sens, au lieu d’éléments inutiles
  • ça donne moins d’informations sur vous (notamment si vous avez une barre de favoris, ou une barre d’onglets, ou encore des autres logiciels ouverts en même temps et qui apparaissent en bas de page)
  • ça gagne de la place dans l’écran

Le dernier élément m’amène au second principe :

2. Faire l’image la plus petite possible

ou plutôt : ne montrer que le strict nécessaire

  • C’est moins long à charger
  • Si vous faites une copie avec un écran de 1200 px de large, et que vous devez publier l’image sur un site où la colonne de texte fait 800 px, ça va coincer. Sans compte que les utilisateurs qui ont des écrans de 900 px de large vont vous maudire aussi.
  • Si votre image ne contient que l’essentiel, ça permet de l’afficher en meilleure définition.

Il m’est ainsi arriver de retravailler sans scrupule une copie d’écran pour que les éléments y soient plus regroupés.

Ceci :

Google - grande copie d'écran

devient cela :

Google - petite copie d'écran

Pour la même largeur d’image, les éléments y sont plus gros

De manière générale, il faut éviter les images de plus de 800 px.

3. La mise en valeur des éléments dont on parle

Entourez tant et plus !

Lien vers Google Book Search

4. Le format

Pas de JPEG : les couleurs y sont atroces pour les copies d’écran (c’est très bien pour les photos de vos salles de lecture). Toujours du PNG ou du GIF.

Quel logiciel ?

Il me faut un logiciel qui soit capable facilement de  :

  • découper (prendre une zone de l’image), déplacer des éléments (pour les rapprocher les uns des autres)
  • redimensionner (diviser le nombre de pixels par 2 ou 3)
  • entourer des zones avec des formes carrées, rondes ou ovales
  • démarrer rapidement

Paint Brush est vite disqualifié

Ce dernier argument exclut The Gimp, gratuit, open source, mais beaucoup trop lent. Je le garde pour des tâches plus complexes.

Personne ne m’a offert Photoshop.

Pour l’instant, j’en suis resté à Paint.Net (gratuit mais pas open source – mais après tout, je ne suis pas développeur), qui correspond exactement à l’usage que je recherche. Il s’ouvre vite, fonctionne en barre d’outils peu de fonctionnalités, et presque uniquement celles dont j’ai besoin (je ne me perds donc pas dans les muti-fonctions.

Démonstration (je recadre l’image et j’entoure des éléments. Je n’ai pas redimensionné l’image en plus)

[notez que je ne filme pas la totalité de mon écran : j'ai réduit la taille des fenêtres de Firefox et Pain.Net. C'est le même principe avec les screencasts qu'avec les copies d'écrans -- pardon, les snapshots]

Vidéo

About these ads
5 Commentaires
  1. David B. permalien
    10/12/2008 14:33

    Cher confrère

    Pour les utilisateurs de Firefox, je me permets de signaler, en plus de cet excellent post, l’existence de l’extension ScreenGrab, qui permet de faire des copies d’écran (tout l’écran, seulement la partie visible ou une sélection) sans même passer par un logiciel tiers, comme Paint.Net (excellent au demeurant).

    Cette extension a changé ma vie !

  2. 10/12/2008 16:34

    C’est incontestable, elle est très bien. Merci beaucoup ! Et inutile de me flatter, je n’aurais pas supprimé le commentaire de toute façon.

  3. 12/12/2008 14:41

    FireShot, extension de firefox (désormais aussi disponible sous IE), permet de faire de très belles copies d’écran : non seulement le recadrage ou le découpage sont possibles, mais on peut éditer des encarts de textes colorés, de dimensions et formes variables, des flèches pour mettre en valeur une partie de l’écran, des zones floutées (pratique quand on illustre ses cours de copies d’écran réalisées à partir de nos propres environnements, où des noms peuvent apparaître)…A découvrir, si ce n’est pas déjà fait !

  4. 08/04/2010 08:45

    Ou encore FastStone Capture 5.3 (les versions plus récentes sont payantes, il me semble). Très puissant, autant dans la capture que dans l’édition.
    Il est aussi disponible sur la Liberkey.

Rétroliens

  1. Pourquoi une copie d’écran en JPEG, c’est crade ? « Bibliothèques [reloaded]

Les commentaires sont fermés.

Suivre

Recevez les nouvelles publications par mail.

Joignez-vous à 97 followers

%d bloggers like this: