Tutoriel par étapes pour créer des images interactives avec XIA
image/svg+xml
Tutoriel par étapes pour créer des images interactives avec XIA
Auteur : Serge Raynaud, Dane de l'académie de Versailles (Images, textes et vidéos).
Remerciements : Pascal Fautrero, développeur du logiciel XIA.
Les étapes 1 et 1bis sont incontournables : il faut installer ces logiciels libres, préalable à toute suite à donner.
Ensuite, chacun choisira en fonction de ses besoins, parmi les autres étapes proposées..
Organiser son environnement, choisir ses photos
Avant de commencer à créer, il faut prévoir et organiser les conteneurs de stockage des futures images interactives, choisir des photographies libres de droits, etc.
Voici à quoi peut ressembler une arborescence de conteneurs ; dans chaque sous-dossier « Travail », les dossiers css, datas, font, img et js sont générés par XIA au moment de la création de l'image interactive :
http://webtv.ac-versailles.fr/restauration/IMG/jpg/arborescence.jpg
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1319&largeur=600&hauteur=338" ></iframe>
CRÉER DES IMAGES INTERACTIVES AVEC XIA
Inkscape est un logiciel libre ; vous trouverez sur Internet et sur le site [https://inkscape.org/fr/ inkscape.org] des informations et des tutoriels pour l'installer et vous familiariser avec ses innombrables fonctionnalités.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1321&largeur=600&hauteur=338" ></iframe>
Installer Inkscape
Étape 1Installer Inkscape
Installer XIA
Après avoir installé Inkscape (les liens sont présents sur la page d'accueil du site de XIA, il faut installer l'extention XIA. Ces deux outils sont des ·***logiciels libres***.
- [http://xia.dane.ac-versailles.fr/ Visiter le site de XIA]
- [http://xia.dane.ac-versailles.fr/documentation-fr.pdf Voir la documentation] au format PDF
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1320&largeur=600&hauteur=338" ></iframe>
Étape 1 BisInstaller XIA
Étape 2
OrganiserChoisir
Pour diminuer la taille d'une photo, utiliser un outil de capture est la moyen le plus simple ; mais en fonction de la définition originelle et de de votre écran, la photo finale ne sera peut-être pas de grande qualité.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1318&largeur=600&hauteur=338" ></iframe>
Redimensionner ses photos avec un outil de capture
Étape 3
DimensionnerCapture
Gimp est un logiciel libre de traitement des images.
- [http://www.gimp.org/ Visiter le site De Gimp]
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1317&largeur=600&hauteur=338" ></iframe>
Redimensionner ses photos avec Gimp
Gimp est un logiciel libre de traitement des images.
- [http://www.gimp.org/ Visiter le site De Gimp]
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1317&largeur=600&hauteur=338" ></iframe>
Étape 4
DimensionnerGimp
XnView est un gratuiciel ; ce n'est pas un logiciel libre, mais il est autorisé dans le cadre de l'Education nationale.
- [http://www.gimp.org/ Visiter le site du gratuiciel XnView]
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1316&largeur=600&hauteur=338" ></iframe>
Redimensionner ses photos avec XnView
Étape 5
DimensionnerXnView
Sans faire de détourage on associe à une image des informations.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1315&largeur=600&hauteur=338" ></iframe>
Créer une image XIA simple sans détourage
Étape 6
Image activesimple
Un outil de forme prédéfinie permet de faire des détourages carrés et rectangulaires.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1314&largeur=600&hauteur=338" ></iframe>
Détourage en rectangle et en carré
Étape 7
Détouragerectangulaire
Un outil de forme prédéfinie permet de faire des détourages circulaires, ovoïdes et en arcs de cercles.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1313&largeur=600&hauteur=338" ></iframe>
Détourage en cercle
Étape 8
Détouragecirculaire
Détourage de forme avec des courbes de Bézier
Ce tutoriel permet de faire des détourages précis de formes diverses.
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="620" height="358" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1312&largeur=600&hauteur=338" ></iframe>
Étape 9
Détourageforme variée
Créer une image avec arrière-plan transparent
Étape 10
Image sansarrière-plan