Illustrer une copie d’écran | 3

Bon, après les deux premiers épisodes (un et deux), parlons enfin de LongScreen mais également de… illustrator et Photoshop. En effet, les deux précédents billets restent des exercices pour ma pomme¹ à partir d’un iPhone uniquement mais j’avais promis d’expliquer deux choses :

• Mon usage sous iOS de LongScreen ⚑…
• Et comment je place des doigts et des gestes sur mes copies d’écran sur urbanbike…

Sauf que la dernière phase se déroule exclusivement sur le Mac…

LongScreen

LongScreen ⚑ me permet de replacer les copies d’écrans réalisées individuellement dans un masque simulant l’iPad ou le iPhone 6s+, dans leur contexte…

• À gauche | Une option que je n’emploie pas, la suppression des copies d’écran employées (…je devrais mais je préfère tout garder temporairement car je suis distrait…).
• À droite | le choix des écrans supportés, entre Watch et iPad Pro…

• À gauche | Il me suffit de sélectionner les captures d’écran souhaitées dans l’ordre (de gauche à droite, ordre d’apparition dans la copie jumelée) puis de cliquer en haut à droite sur Merge (sur iPhone, je me limite à deux, voire trois écrans…)
• À droite | la fenêtre des réglages qui est accessible via une icône en bas au centre… Alignement mais aussi rassemblement (Merge) sans masque, avec un masque gris ou un masque blanc (mon préféré). Enfin, en haut l’écartement des écrans et, en bas, une option pour unifier les heures de capture sur les copies d’écran…

• À gauche | le rendu affiché de ce qui va être produit et en bas, de gauche à droite, l’icône d’export, l’accès aux réglages (…qui, généralement, n’ont plus trop lieu de bouger) ou la suppression de l’essai en cours si erreur de casting…
• À droite | J’enregistre toujours dans l’album mais cela peut filer vers DropBox ou encore vers mon FTP via Transmit ⚑ sous iOS.

Certes, cela réduit de facto la surface utile de chaque copie d’écran. Mais, en contre-partie, cela me permet de mieux placer, mettre en valeur les gestes utiles (…j’en parle ci-dessous) et, essentiellement pour les applications traitées sur l’iPhone, de monter deux copies côte à côte.

Bref, de composer, même si très connoté², une sorte de narration explicative (!) qui se déroule de duo en duo…

Et les gestes, les doigts, les pognes…?!

Bon, ce n’est pas un secret, le reste se passe sur Macintosh avec des produits classiques (mon antique CS6 fonctionne encore)…

• Je me suis composé naguère une unique (et large) planche avec toutes les options qui me convenaient à partir d’un fichier vectoriel acheté jadis sur istockphoto.com, une banque d’images. J’ai transformé à ma sauce dans Illustrator ces briques de base, dupliqué, etc. Cela ne m’empêche pas d’ajouter de nouvelles options quand je suis coincé…

• Reste ensuite à choisir puis à placer/dimensionner l’élement que je souhaite ajouter à des fins explicatives sur la copie d’écran ouverte, elle, dans Photoshop.

Puis à exporter l’ensemble avec un plug-in TinyPNG depuis Photoshop, cf. Optimiser les images PNG et JPG pour le web - urbanbike. En réduisant de 50 % la dimension du fichier… Et en restant généralement en .PNG transparent…

Les images sont ensuite renommées en batch avec Name Mangler 3 ⚑³ puis exportées via Transmit ⚑ vers mon serveur FTP…

Comme j’emploie ExpressionEngine, je peux rentrer dans mon texte Markdown un lien de l’image vers le dossier dédié et prévisualiser dans iA Writer ⚑ le rendu, le séquençage…

C’est certes rustique mais ça fonctionne pour mes besoins et vous aider à comprendre ce que j’essaye parfois d’expliquer maladroitement avec des mots…!

Voilà, voilà…