Tutoriel par étapes pour créer des images interactives avec XIA sous Windows®
image/svg+xml
Tutoriel par étapes pour créer des images interactives avec XIA sous Windows®
24 janvier 2015
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.
Tutoriel produit sous licence CC-BY-SA
Auteur : Serge Raynaud, Webmestre - Sites nationaux de ressources Hôtellerie-Restauration et Métiers de l'Alimentation
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1321&largeur=480&hauteur=270" ></iframe>
Installer 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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1320&largeur=480&hauteur=270" ></iframe>
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1319&largeur=480&hauteur=270" ></iframe>
Organiser son environnement, choisir ses photos
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1318&largeur=480&hauteur=270" ></iframe>
Redimensionner ses photos avec un outil de capture
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1317&largeur=480&hauteur=270" ></iframe>
Redimensionner ses photos avec Gimp
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1316&largeur=480&hauteur=270" ></iframe>
Redimensionner ses photos avec XnView
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1315&largeur=480&hauteur=270" ></iframe>
Créer une image XIA simple sans détourage
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1314&largeur=480&hauteur=270" ></iframe>
Détourage en rectangle et en carré
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1313&largeur=480&hauteur=270" ></iframe>
Détourage en cercle
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="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1312&largeur=480&hauteur=270" ></iframe>
Détourage de forme avec des courbes de Bézier
Cette vidéo explique comment créer une image avec un arrière-plan transparent.
L'image générée sera au format « PNG » et pourra être utilisée en superposition d'autres images, par exemple pour des présentations avec le logiciel Open-Sankoré.
Voir le [http://fr.wikipedia.org/wiki/Portable_Network_Graphics format ouvert d’images numériques PNG] sur Wikipédia
----
Voir la vidéo proposées par la [http://webtv.ac-versailles.fr/restauration/ WebTV Restauration] :
<iframe frameborder="0" width="500" height="290" src="//webtv.ac-versailles.fr/restauration/spip.php?page=iframe-video&id_article=1311&largeur=480&hauteur=270" ></iframe>
Créer une image avec arrière-plan transparent
http://www.hotellerie-restauration.ac-versailles.fr/
http://www.metiers-alimentation.ac-versailles.fr/
http://www.dane.ac-versailles.fr/