Introduction

L'autre jour je cherchais comment créer un macro d'image qui montre un design de site web sur plusieurs appareils différents côte à côte.

Un truc comme ça, quoi

Et je n'ai rien trouvé qui réponde à mes besoins. En partie parce que c'est difficile de savoir que taper dans la recherche (qui est aussi la raison principale du titre vraiment louche de cet article) et ensuite parce que trouver des images gratuites sur les Internets c'est assez épuisant psychologiquement à moins que ça se trouve directement sur Wikimedia.

Résultat: je l'ai fait moi-même à l'arrache, et je le livre dans cet article en espérant que ça puisse aider quelqu'un dans la même situation, pourvu que cet article puisse être trouvé sur un moteur de recherche parce que c'est difficile de prédire ce que les gens vont taper comme mots clés à la recherche d'une macro d'image de... Démonstration prévisualisation de site web responsive que je suis même pas sûr que responsive ça se dise en Français.

Et puis de toutes façons si ça sort dans la recherche, ce sera dans une recherche d'images et personne va lire cet article trop long, phrase qui sera écrite sur ma tombe.

Il n'y a vraiment rien qui existe déjà?

Peut-être qu'il existe un outil en ligne quelque part.

Après tout, les outils qui testent si votre site est est responsive utilisent parfois ce type d'infographie pour afficher vos résultats.

Quoi qu'il en soit, ça m'arrange pas trop parce que je veux pouvoir travailler avec des sujets qui ne sont pas en ligne sur l'Internet public.

En pratique, ce site-qui-n'a-pas-de-https-en-2020 répond à peu près à la demande et je pourrais tout pomper dessus:

C'est presque exactement ça que je cherche, presque

Sauf que je préfère spécifiquement ne pas avoir laptop + écran large parce que pour moi c'est la même chose.

Pire, mes "designs" (lol) n'uilisent en général qu'un seul breakpoint — c'est-à-dire qu'il y a la même chose pour mobile et tablettes puis des media queries pour "grand écran" et parfois un intermédiaire pour des exceptions.

Je vous ai déjà dit que le "mobile first" ça me rend triste?

Sinon, cette page de blog-sans-https-en-2020 contient quelques modèles qui pourraient potentiellement faire l'affaire, mais il faut s'inscrire sur Pinterest et ça m'épuise.

J'ai aussi trouvé plusieurs outils qui utilisent puppeteer ou PhantomJS pour prendre des captures d'écran après avoir configuré la taille de l'écran sur le Chrome robotisé qui visite le site.

Ce qui pourrait être bien pour créer un outil automatique qui génère les captures d'écran aux tailles souhaitées sauf que parfois je veux une mise-en-scène bien particulière (par exemple, pas d'avertissement "TU VEUX DES COOKIES") et pas juste ce que voit le navigateur lors d'une première visite.

Trouver un modèle

Si je trouve une image libre de droit avec les différents appareils (large, tablette et mobile, pas plus s'il-vous-plait), je peux utiliser Gimp ou Photoshop pour insérer mes captures d'écran faites à l'arrache moi-même.

Alors, je m'y suis peut-être mal pris parce que je connais pas les bonnes adresses pour tout ce qui est stock images, mais tous les premiers résultats de recherche c'est des machins tout mafieux qui demandent de s'inscrire avec un carte de crédit et tout a l'air louche et pénible.

Une semaine gratuite pour 10 images puis c'est... 36 par semaine?? Attend c'est beaucoup plus cher que du porno ça, non?

JE FAIS TOUT MOI-MEME

Au départ je comptais quand même recycler des SVGs en utilisant, par exemple, ceux de FontAwesome.

Sauf que leurs bordures sont trop épaisses et c'est impossible à éditer tel quel.

Autant tout refaire moi-même avec Inkscape. Après tout, je suis un genre de référence sur le sujet SVG en général qui dispense des présentations sur le sujet en convention internationale (bookez moi sur business-talks-nordvpn-candycrush@dkvz.eu).

Du coup j'ai fait ces trucs, en prenant de vraies tailles d'écran en pixels (1080p etc.) — Ce qui est légèrement étrange mais j'avais pas envie de faire des calculs.

Le tout sous licence pas de licence paske de toutes manières c'est des formes ultra simplistes que n'importe qui devrait avoir honte de pas filer gratuitement parce que si je sais les dessiner en 10 minutes un enfant de 5 ans sait le faire aussi.

C'est cadeau, vous pouvez cliquer-droit et enregistrer les images, c'est juste sur mon Skublog qu'on peut pas.

Reste plus qu'à bourrer ça dans une nouvelle image sur Gimp, parce que j'ai vraiment plus l'âge de pirater Photoshop et j'ai perdu toutes mes pochettes à CD de WAREZ et DivX.

Je suis parti sur une dimension un peu plus grande que 2000 pixels de large pour avoir un truc grand mais pas trop grand, puis j'ai balancé les SVGs par-ci par-là avec ma légendaire intuition artistique à son niveau ultime:

Ne téléchargez pas cette version, je fournis le .psd du pauvre (dit aussi .xcf) plus bas

Téléchargez le .xcf ici (nécessite d'avoir Gimp installé, je précise au cas où): responsive_model.xcf

Comment que j'utilise ton truc?

Premièrement: téléchargez le .xcf ci-dessus et ouvrez le dans Gimp.

Nous avons besoin de trois captures d'écran du site que vous souhaitez présenter, dans des dimensions différentes.

Il y a tout un tas de manières différentes de prendre ces captures, y compris utiliser un outil en ligne de commande.

Je vous présente ma méthode à l'arrache — qui utilise Firefox mais Chrome a quasiment les mêmes options aux mêmes endroits:

1. Pour la capture "large", je presse F11 pour passer en mode plein écran puis je fais une capture d'écran — Oui c'est très nul comme méthode.
2. Pour les deux autres captures, j'affiche la console développeur avec Ctrl+Shift+I, et je clique le bouton pour passer en "RESPONSIVE DESIGN MODE" (voir ci-dessous) - Et j'utilise l'outil de capture intégré.

Je vous ai déjà dit que j'étais un artiste?

Pour les tablettes je choisis "Ipad" dans la liste des appareils. Pour le téléphone je choisis "Iphone X", choix qui sont évidemment légèrement arbitraires:

Assez explicite, je sais pas pourquoi je vais si loin dans l'explication

Vous devriez être en possession de trois captures d'écran dans trois tailles différentes. Sisi, je vous jure.

Il s'agit maintenant de les glisser-déplacer dans Gimp, une par une.

Par exemple, commençons par la version large, à aligner avec le coin du laptop:

Avec l'outil "déplacer" actif on peut même utiliser les touches directionnelles, trop bien quoi

Ensuite, choisir l'outil "scale", cliquer sur l'image collée et déplacer pour redimensionner, avec la touche Ctrl enfoncée:

OK je pense qu'on a compris

Avant d'exporter la version finale avec Ctrl+E, vérifiez que l'ordre des calques (dit aussi layers) est correct, il devrait ressembler exactement à ça:

Placez vos calques capture d'écran au bon endroit où le résultat aura l'air (encore plus) bizarre

Reste plus qu'à décider si vous voulez ajouter un arrière plan. Il suffit simplement de le mettre sur un calque à placer tout en bas de la liste.

C'est courant de flouter un arrière plan un peu trop chargé pour faire comme un appareil photo qui réalise sa mise-au-point sur l'avant plan. Oui j'ai des super conseils d'artistes gratuits à dispenser comme ça, BOUM. Me remerciez pas.

Y a plus qu'à mettre ça dans mon portfolio:

Engagez-moi

Conclusion

Je suis au courant que le smarthpone est presque plus grand que la tablette, c'est parce que je suis visionnaire du turfu.

C'est probable que les téléphones soient téléscopiques en longueur dans l'avenir et tu peux le dérouler avec un cran d'arrêt et ça fait un bruit de sabre laser et tout.