Ces dernières semaines j’utilise sur le blog un autre style de captures d’écrans. Elle sont réalisées avec Skitch d’Evernote. Si une image vaut milles mots, une image annotée avec Sktich en vaut bien plus. Argument ultime: il est (trop) simple d’utilisation.

Qui dit tutoriels dit images

Préparer des tutoriels n’est pas sorcier. Vous maîtrisez une tâche et vous l’expliquez à un public. Par contre, un bon tutoriel demande des illustrations. Ce n’est pas pour faire joli. Elles permettent à votre public de se représenter les étapes que vous conseillez.

L’inconvénient est que la préparation de captures d’écrans prend du temps. Enfin, le résultat illustre plus qu’il n’explique.

Pour bien expliquer il faudrait un logiciel permettant par exemple:

  • d’entourer des objets;
  • d’insérer des flèches;
  • d’insérer du texte.

Cela tombe bien: c’est justement ce que permet de faire Skitch.

Premières captures sur Skitch

Premier avantage de Skitch: il gère les captures d’écran tout seul comme un grand. Cliquez sur le menu en haut à gauche. Skitch disparaît en laissant place à un curseur. Avec celui ci vous allez choisir la zone à capturer.

Cliquez en haut à gauche de la zone à capturer. Tout en gardant le bouton de la souris appuyé glissez vers le coin inférieur droit de la zone.

La zone sélectionnée, vous pouvez relever votre doigt. Skitch fait le reste et crée une nouvelle image avec la capture que vous venez de faire.

Montrez, entourez, écrivez,…

L’intérêt de Skitch ne s’arrête pas à faire des captures d’écrans à la pelle. C’est surtout de les annoter avec une facilité déconcertante.

Montrez du doigt avec les flèches

Que souhaitez vous expliquer avec une image ? Sur ce blog met souvent en évidence la partie de l’écran ou concentrer votre attention. Skitch permet de faire avec un mouvement simple.

D’un geste de la souris cliquez et tirez le curseur vers la cible puis relâchez. Vous souhaitez modifier l’orientation de la flèche ? Cliquez 1x dessus. Deux poignées bleues apparaissent. Elles permettent de changer le point de départ et d’arrivée de la flèche.

Comment ajouter des flèches dans Skitch

Ajouter des flêches dans Skitch

 Ajoutez du texte avec Skitch

Montrer du doigt c’est bien (si ce n’est pas une personne). Expliquer ce que l’on met en évidence dans ses tutoriels c’est mieux. Cliquez sur le A dans le menu de gauche et ensuite là ou vous souhaitez ajouter du texte.

Ecrire avec Skitch sur une capture d'écran

Ecrire une annotation

Le texte est mal positionné ? Pas grave. Cliquez sur le texte pour le sélectionner.  Des poignées bleues apparaissent. Cliquez une fois de plus sur le texte pour le déplacer. Enfin, avec les poignées bleues, vous pouvez aussi augmenter ou diminuer la taille du texte.

Encadrer et encercler

Des flèches c’est bien mais il y a moyen d’être encore plus précis. Pour cela j’utilise souvent les « encadrements » (existe t-il un mot précis pour cela ?) dans mes tutoriels. Une flèche pointe vers un encadré qui indique l’option à choisir.

Le principe est le même que pour le texte. Vous sélectionnez la 4e icone en partant du haut. Suivant le choix elle est soit:

  • un rectangle aux angles droits;
  • un rectangle aux bords arrondis;
  • un ovale;
  • un trait.

Skitch-cadres

Pixellisez ce que vous ne pouvez pas montrer

Enfin dernier outil indispensable: la pixellisation. Cet outil permet de rendre illisibles des parties de l’image. Je l’ai utilisé lors des tutoriels pour migrer sur Outlook.com ou pour l’article sur Facebook Graph Search.

Encadrer un élément important avec Skitch

En pratique

Skitch est disponible sur PC comme sur mobile:

ndlr: pour faire des captures d’écrans de Skitch, j’ai utilisé la touche Print Screen et ajusté l’image. Et oui: Skitch ne permet pas de faire des captures d’écran de Skitch même pour des tutoriels !