Créer une image 360° pour un Thinglink

Waielbi — 2021-03-15T21:38:39Z

Utiliser Thinglink pour créer une visite virtuelle de l'école, de la classe, du jardin,... est un projet intéressant. On va pouvoir enrichir l'image de nombreux médias : sites, images, textes, vidéos, sons, ... et les visiteurs pourront explorer l'image et afficher ces différents supports.
Dans la création d'une page, Thinglink propose la création à partir d'une image à 360° mais il y a quelques règles à respecter...

Thinglink et les « hypermédias »

Qu'est-ce que c'est ? Thinglink est une application web qui permet de publier une image et de l'enrichir. Voici un exemple sur ce lien : exemple.

À quoi ça sert ? Voici une réponse en vidéo par Canopé :

Panoramique 360° ?

Au moment de la création d'une page Thinglink on peut choisir « 360° image or virtual tour » avec ce bouton.
On aura alors une image de fond dans laquelle on peut se déplacer. On y incruste ensuite des points d'intérêt par le bouton « Ajouter un étiquette » ce qui permet :

d'ajouter du texte, de l'audio, ...
d'intégrer une page web par une iframe
de lier un autre 360° Thinglink pour créer un « Tour », c'est à dire un lien vers la pièce d'à côté si on se base sur l'exemple d'une visite virtuelle.
Une fois terminée, il est possible d'intégrer la page via un iframe, comme ceci :

Visit my place.

Créer l'image 360°

Dans ce domaine, l'utilisation des appareils mobiles facilite grandement l'opération. De nombreux fabricants de tablettes et smartphones ont une application « appareil photo » qui réalise cette capture.

Si comme sur mon smartphone, votre appli « native » d'appareil photo ne le faisait pas, il y a de nombreuses applications à le proposer sur les magasins d'applications, comme P360 sur Android.

Sur PC, c'est plus complexe, il faudra travailler avec un pied photo pour réaliser des photos autour du même axe sur des angles de vue qui se chevauchent. Ensuite, on devra installer l'application Photo Stitch de Canon ou des plugins pour Gimp ou encore l'appli Hugin pour assembler toutes les photos en une seule...

Modifier l'image panoramique pour Thinglink

Une fois l'image panoramique souhaitée capturée, le parcours n'est pas terminé. Il faut que cette image réponde à certaines contraintes. Elles sont résumées dans la vidéo d'aide du site, voici un extrait :


Contraintes image 360° Thinglink

Soit :

le format jpg et rien d'autre ;
une dimension d'image de 8192x4096 pixels maximum ;
une forme d'image obligatoirement au ratio 2:1, c'est à dire deux fois plus large que haute.

Comme l'image est en général très large, bien au-delà du ratio 2:1, c'est une opération de recadrage un peu curieuse qui consiste déborder l'image et à créer du vide autour... Pour cela, je n'ai pas vu d'appli mobile qui propose cette transformation car elles proposent un recadrage DANS l'image et pas au-delà. Du coup, il faut utiliser un PC avec XnView ou Gimp. Voir cet article pour l'opération avec des captures d'écrans : « Transformer un panoramique au format 2:1 ».

Transformer un panoramique au format 2:1

Waielbi — 2021-03-15T20:47:12Z

Utiliser une image panoramique et la transformer au format 2:1 pour pouvoir l'utiliser avec certaines applications web.

Pourquoi ?
Avec XnView MP
Avec Gimp
Avec PhotoFiltre

Pourquoi ?

On vient de créer une image panoramique, c'est à dire une image dont la largeur dépasse le standard 3:2 des photographes pour aller jusqu'à 1:3, 1:5,... (trois fois plus large que haute, 5 fois plus large que haute,...). Voire créer une image « en 360° » c'est à dire la capture des 360° d'angle de vue qui entourent le photographe. C'est facile avec les appareils photos des smartphones et tablettes.

On souhaite à présent utiliser cette image dans une application telle Thinglink pour l'animer. Et là... ça ne fonctionne pas on me demande une image en 2:1.

On va donc ajouter des bandes noires (ou blanches...) au-dessus et en-dessous de l'image pour atteindre ce format 2:1 dans rogner dans l'image.


Transformer un panoramique au format 2:1

Avec XnView MP

Lancer XnView et ouvrir l'image à modifier :

Lancer XnView et ouvrir l'image panoramique
Redimensionner l'image sans déformation pour que la largeur soit paire et inférieure au maximum imposé par l'appli dans laquelle on compte l'utiliser :

Redimensionner l'image à une largeur paire
Menu « Image » → « Recadrage... » :

« Recadrage... » par le menu « Image »
Décocher « Conserver le ratio » et entrer la moitié de la largeur comme valeur de hauteur (ici 3500 pixels de haut pour 7000 de large), vérifier que la couleur de fond est bien le noir et régler la position sur « Centré » :

Redimensionner le canevas en 2:1
Enregistrer une copie de l'image avec « Enregistrer sous... » :

Enregistrer le résultat sans écraser l'original

Avec Gimp

Lancer Gimp et ouvrir l'image à modifier :

Lancer Gimp et ouvrir l'image panoramique
Redimensionner l'image sans déformation pour que la largeur soit paire et inférieure au maximum imposé par l'appli dans laquelle on compte l'utiliser :

Redimensionner l'image à une largeur paire
Par le menu « Image » → « Taille du canevas... », redimensionner en 2:1 en entrant une valeur de hauteur moitié de la largeur, décocher la chaîne qui lie les valeurs largeur et hauteur si elle était cochée, cliquer sur « Centrer » pour que la photo soit centrée verticalement dans l'image. Choisir « Couleur d'arrière-plan » dans « Remplir avec » et régler la couleur d'arrière-plan sur noir :

Redimensionner le canevas en 2:1
Si le haut et le bas de l'image sont transparents (damier), choisir « Aplatir l'image » dans le menu « Image » en ayant soins de régler la couleur d'arrière plan (sur noir par exemple) :

Applatir l'image
Exporter l'image en jpg avec « Fichier » → « Exporter sous... »

Avec PhotoFiltre

Lancer PhotoFiltre et ouvrir l'image à modifier :

Lancer PhotoFiltre et ouvrir l'image panoramique
Redimensionner l'image sans déformation pour que la largeur soit paire et inférieure au maximum imposé par l'appli dans laquelle on compte l'utiliser :

Redimensionner l'image à une largeur paire
Par le menu « Image » → « Taille de la zone de travail... », redimensionner en 2:1 en entrant une valeur de hauteur moitié de la largeur, cliquer sur le carré du centre dans « Position » pour que la photo soit centrée verticalement dans l'image. Choisir la couleur d'arrière-plan dans « Fond » :

Transformer un panoramique au format 2:1
Enregistrer une copie de l'image avec « Enregistrer sous... » :

Enregistrer le résultat sans écraser l'original