SEM 403 Découvrir et pratiquer Gimp - atelier gimp - images pour ...

SEM 403 Découvrir et pratiquer Gimp
vendredi 24 avril 2009
GIMP
C'est génial
TRAVAUX PRATIQUES – Partie II
Y ROGG – B. HAUSLER

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 1
PARTIE II A : Outils complémentaires (Greffons / Scripts-fu / Filtres )
Exercice 1 :
Objectif: créer un drapeau européen avec Gfig
D'après l'exemple:http://eric.lamarque.free.fr/?images/euflag4gimp.html
Contenu:
� Création de formes géométriques
� Utilisation du greffon Gfig
Etape 1:
Commencez par sélectionner la couleur bleue (RGB:0/0/153) pour l'arrière plan.
Créez une nouvelle image de 375 pixels de largeur et 250 pixels de hauteur. Par défaut,
l'image sera créée avec cette couleur d'arrière plan ce qui convient parfaitement.
Etape 2:
Ouvrez Gfig depuis Filtres->Rendu->Figures géométriques (GFig).
Sélectionnez l'outil "Créer une étoile" et spécifiez 5 cotés dans les Options
de l'outil.
Etape 5:
Cliquez sur une intersection,
et en maintenant le bouton enfoncé,
remontez vers le haut:
votre première étoile est née!
Etape 3:
Dans le menu Editer, sélectionnez "Grille" (ou Ctrl-g).
Spécifiez un espacement de 15.
Etape 4:
Décochez l'option "Tracé".
Choisissez l'option de "Remplir avec une couleur" et fixez la couleur de
remplissage sur jaune (RGB:255/204/0)
Cochez les cases "Afficher la grille" et "Accrocher à la grille".
Etape 6:
Dans le menu Editer, sélectionnez "Grille" (ou Ctrl-g).
Puis choisissez le type de grille Polaire avec intervalles de rayon = 40
Spécifiez un espacement de 48, secteurs souhaités pour la grille 12
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 2
Etape 7:
A l'aide de l'outil "Déplacer un objet",
positionnez l'étoile à l'intersection du deuxième cercle et de la
branche verticale.
Etape 8: A l'aide de l'outil "Copier un objet",
placez les 11 autres étoiles sur les autres branches. Pour copier
l'objet, cliquez dessus et déplacez la copie vers la nouvelle position.
Etape 9: Voilà c'est fini, il ne vous reste plus qu'à fermer le dialogue
GFig. Le greffon GFig a créé un nouveau calque nommé GFig qui
contient vos petites étoiles. Il reste donc à Aplatir l'image (-
Aplatir l'image) pour sauvegarder ce drapeau au format PNG.
Aller plus loin
essayez de créer d'autres éléments graphiques, logos ou formes géométriques par exemple
● une rose des vents pouvant servir
de papier peint à une page Web
(voir exercice 6 ImageMap ):
● ou un ballon de foot
Voir aussi « Créer des figures géométriques avec Gfig »
http://www.gimpfr.org/document/document_2/page8.html
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 3
Exercice 2 :
Objectif: créer un effet Pop-Art sur un photo
D'après l'exemple: http://www.infetech.com/article.php3?id_article=150
Contenu:
� Ajustement de Luminosité-Contraste
� Sélections et remplissages de couleurs
� Masque rapide
� Modes de fusions des calques
� Application de filtres
Voir des résultats du même style ici :
http://www.easyart.fr/posters/Andy-Warhol/Marilyn-Monroe,-1967-135466.html
Ouvrir l'image pop-art-image-1_debut.jpg
http://www.infetech.com/IMG/jpg/pop-art-image-1_debut.jpg
et enregistrez-la immédiatement au format
xcf (Marilyn.xcf)
On commence d’abord par augmenter le
contraste et la luminosité en faisant Couleur-
>luminosité et en réglant les paramètres à 58
pour la luminosité et 114 pour le contraste
remarque : pour une photo en couleur il aurait fallu désaturer la photo en
premier.
Il faut ensuite "colorier" l’image: le but est de la peindre avec quelques
couleurs sur des calques indépendants.
On crée un nouveau calque :
On sélectionne l’outil pinceau et on prend une
couleur rouge pour la bouche. On dessine sur le
nouveau calque en suivant les contours de la
bouche. La couleur apparait nettement sur l’image.
Pour l’incruster dans l’image d’origine on va
changer le mode du calque pour le passer en
multiplier
Aller plus loin : pour comprendre les modes de calques
-> http://docs.gimp.org/fr/gimp-concepts-layer-modes.html
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 4
Il faut maintenant faire les cheveux. On crée un nouveau calque. On pourrait travailler au pinceau
comme pour la bouche mais la surface étant plus grande, il vaut mieux faire d'abord une sélection des
cheveux puis utiliser l’outil " pot de peinture " pour remplir la sélection avec la couleur jaune.
La sélection peut se faire avec le lasso mais l'outil « Chemins » est ici encore mieux adapté:
Délimitez la zone qui sera ensuite colorée en jaune, en plaçant des points d'ancrages
sur le pourtour de la chevelure, et en fermant le chemin avec la touche Ctrl, au
moment de re-cliquer sur l'extrêmité du chemin
initialement tracé.
En mode « Tracer », modifiez si nécessaire la
position des points, s'ils n'ont pas été bien placés
du premier coup.
Vous pouvez aussi, en mode « Edition » améliorer la sélection, en
ajoutant ou en enlevant des noeuds et en rectifiant la courbure des
segments de sélections.
Cliquez ensuite sur « le bouton « Créer une sélection depuis un
chemin » dans la boîte d'options de l'outil « Chemin » et remplissez
ensuite cette sélection avec le pot de peinture en choisissant la
couleur jaune, après avoir passer le calque en mode multiplier.
Il ne reste plus qu’à colorer la peau, le dessus des yeux et le fond pour
obtenir l’image finale :
Pour délimiter le visage:
• si vous avez perdu la sélection, revenir sur le calque des cheveux et
clic-droit -> « alpha vers selection »; inversez la sélection des
cheveux ( -> Sélection -> Inverser )
• puis créez un masque rapide (bouton en bas à gauche de la fenêtre
de l'image) et utilisez le pinceau et le pot de peinture, pour définir la
sélection du visage et du cou que vous remplirez de rose.
Comme pour la sélection des cheveux, utilisez
l'outil « Chemin » pour colorer les paupières
Pour que la couleur du visage ne reste pas trop
uniforme, dupliquez le calque rose en mode
« extraction du grain » et ajoutez un effet en
appliquant le filtre Rendu -> Nuages -> Plasma
(turbulence 6), puis désaturez ce calque (Calque -> Couleurs -> Désaturer) et
réduisez son opacité aux alentours de 30%
Pour terminer aplatissez l'image et remplissez le fond en bleu avec le pot de
peinture et sauvegardez-la au format png (Marilyn.png)
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 5
Aller plus loin
● Pour mieux comprendre les masques («un masque de sélection est à une sélection ce qu'un
calque est à une image » :
http://docs.gimp.org/fr/gimp-channel-dialog.html#dialogs-selection-masks
● Quelques variantes pour vous inspirer: http://webexhibits.org/colorart/marilyns.html
● Reprendre le fichier xcf et modifier les teintes des différents calques
Exercice complémentaire:
Le filtre « Film » ( Filtres -> Combiner -> Film) permet de rassembler plusieurs images en une seule à
l'intérieur d'un graphisme de film photographique de manière à simuler l'aspect d'un négatif.
Sur le modèle des portraits colorés d'Albert Einstein essayer de créer une suite d'image de la mascotte
de Gimp en recolorant l'icône avec la méthode utilisée pour le portrait de Marilyn Monroe
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 6
Exercice 3 :
Objectif: créer une illusion de deux dimensions avec des objets transparents plats.
D'après l'exemple: http://abcdugimp.free.fr/gimp/realiser/traductions/transparent.php
Contenu:
� Outils de couleurs
� Filtres
� Modes de calques
� Scripts-Fu
1.-Créez une arrière-plan noir de 450x450 px qui servira de support à 3
nouveaux calques transparents, enregistrez votre image
« PassePartout.xcf »
Ajoutez un premier calque transparent, « Calque1", puis utilisez l'outil de
sélection pour faire un fond rectangulaire et remplissez-le d'un gris moyen
(RVB 180/180/180)
Faites une deuxième couche transparente, "Calque2» et créez la forme de
l'objet que vous voulez rendre transparent. Utiliser les outils de sélection et
de remplissage, pour réaliser l'objet, par exemple un carré contenant une
ouverture circulaire. Remplissez votre forme avec du blanc.
Conservez la sélection de votre forme et créez la troisième couche transparente Calque3 en dupliquant
le calque 2 puis remplissez la forme blanche par du brun foncé (p. ex RVB 130/ 80 /20).
Désélectionnez la forme (Menu Sélection -> aucune)
2. -Rendez "Calque3" invisible en cliquant de son icône d'œil dans le dialogue de Calque.
Allez sur le "Calque2", la forme blanche. Assurez vous qu'elle est visible .
Ensuite, faites un flou de 5 pixels : Menu Filtres -> Flou -> Flou Gaussien (RLE).
Rendez "Calque2" invisible (clic sur l'icône
d'œil), activez "Calque3" et rendez-le visible.
Utilisez Menu -> Filtres -> Carte -> Repoussage
d'après une carte.
Dans les Paramètres, choisissez "Calque2 »
comme carte de repoussage et mettez la
Profondeur à 4 pixels. Cliquer sur Valider.
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 7
3. Toujours sur "Calque3", sélectionnez l'objet (alpha vers sélection) et réduisez la sélection, de 4
pixels : Menu Sélection -> Réduire. Adoucissez alors la sélection de 2 pixels : Sélection -> Adoucir.
La mince marge de couleur à l'extérieur de la sélection rétrécie formera les
bords de l'objet ; nous faisons maintenant la partie intérieure de la
sélection transparente en utilisant le menu Couleurs -> Courbes.
Choisissez Alpha dans le menu déroulant "Canal", près du sommet du
dialogue.
La courbe, une ligne droite, se termine par un gros point noir dans le droit
coin supérieur du graphique. Cliquez le et maintenez enfoncé en le traînant
en bas juste sur le côté du graphique. Le déplacement du point en bas
réduit progressivement l'opacité de la région à l'intérieur du choix.
Amenez le point aux alentours d'une valeur y de 60. Validez. Assurezvous
de conserver la sélection.
4. Avec "Calque3" toujours actif et la sélection toujours en place, cliquez sur le bouton Dupliquer un
calque en bas du dialogue de Calque. Cela donne une copie de l'objet dans
un nouveau "Calque4 ».
Rendez maintenant "calque4" invisible et retournez à "calque3", en le
rendant visible et actif.
Avec la sélection toujours présente, nous nettoyons complètement l'intérieur
de la sélection par : Menu -> Edition -> Effacer. Ce résultat sera utilisé pour
faire une ombre projeté pour augmenter l'illusion d'un objet transparent.
Annulez la sélection : Menu - > Sélection - > Aucune.
d'environ 10 pixels.
Rendez "Calque3" invisible et retournez à " Calque4", en le rendant visible
et actif. Inversez maintenant la couleur de « Calque4 » : Menu -> Couleurs
-> Inverser. Vous devriez maintenant avoir l'élément de base de l'objet
transparent bleuté avec des bords correctement illuminés.
5. Pour faire l'ombre, rendez "Calque4"
invisible et retournez à " Calque3", en le
rendant visible et actif, ensuite utilisez le
menu Couleur -> Désaturer puis faites un flou
gaussien ( Filtre -> Flou -> Flou Gaussien)
Déplacez maintenant l'ombre. Clic avec le bouton droit Menu -> Calque -
> Transformations -> Décalage et indiquez une valeur pour x et y de 20
pixels chacun.
Finalement, rendez "Calque 4" de nouveau visible. L'ombre a généralement besoin d'un peu
d'ajustement. Par exemple en utilisant le Mode de calque (le sommet du dialogue de Calque)
« multiplier » et diminuez l'opacité à environ 75 %.
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 8
6. Nous pouvons maintenant utiliser la fonction de Teinte-Saturation pour obtenir à peu près n'importe
quelle couleur pour l'objet.
Activez "Calque 4" et clic avec le bouton droit Menu contextuel Couleurs -> Teinte-Saturation. Avec
les 3 curseurs Teinte, Lumière et Saturation, vous pouvez jouer sur l'aspect de votre objet transparent:
supposons, par exemple, que vous voulez une feuille claire, sans couleur de verre ou de plastique.
Dans ce cas, faites glisser le contrôle de Saturation entièrement à gauche, à une valeur de -100 et la
partie transparente devient incolore.
L'apparence et le "feeling" sont paramétrables, expérimentez les trois rajustements, Teinte, Lumière et
Saturation (et le contrôle d'opacité au sommet du dialogue de Calque)
Pour mieux mettre en évidence l'effet obtenu, intercalez un texte entre la forme transparente et le fond
gris, c'est aussi l'occasion d'utiliser un des nombreux scripts-fu de Gimp: depuis la fenêtre principale
utilisez le menu Exts-> Logos et créez par exemple un « Titre Web » ( police 50 ). Validez par
exemple le texte « Hello World » puis faites glisser le calque « fore-layer » depuis la fenêtre de calque
sur l'image « PassePartout », au-dessus du calque1.
Aller plus loin
● en savoir plus sur les greffons et les scripts-fu de Gimp :
http://docs.gimp.org/fr/gimp-scripting.html
● description détaillée de chaque filtre : http://docs.gimp.org/fr/filters.html
● document de référence p.44 à 47: différents types de filtres (Alpha vers Logo) pour générer
des textes
● http://abcdugimp.free.fr/bout_tuto/bout_tuto.htm
: quelques techniques complémentaires
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 9
PARTIE II B : Retouches et améliorations photographiques
Réglage de l’exposition d’une photographie
http://falcya.free.fr/tuto/CRW_2637.JPG
Menu / Couleurs / Luminosité et contraste...
L'outil Luminosité et contraste permet de régler
la luminosité - plus ou moins clair, et le contraste
de l’image.
http://docs.gimp.org/fr/gimp-tool-brightness-contrast.html
Menu / Couleurs / Niveaux...
L'outil Niveaux permet de modifier les niveaux
d'intensité des tons clairs et foncés en ajustant le
« point blanc » et « le point noir » d‘une image. Il
permet aussi d’ajuster le « gris moyen ».
http://docs.gimp.org/fr/gimp-tool-levels.html
Menu / Couleurs / Courbes...
L'outil Courbes est le plus sophistiqué des outils
utilisés pour modifier la luminosité et le contraste
d’une image Il permet d'agir sur n'importe quel
intervalle tonal.
http://docs.gimp.org/fr/gimp-tool-brightness-contrast.html
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 10
Echelle d’une photographie
http://docs.gimp.org/fr/gimp-tutorial-quickie-scale.html
Résolution : pour l’impression, il faut un minimum de 200 pixels par pouce.
Découper une photographie
http://docs.gimp.org/fr/gimp-tutorial-quickie-crop.html
sélectionner l’outil de découpage définir une zone avec la souris – valider avec «enter»
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 11
Réglage du chromatisme d’une photographie
Menu / Couleurs / Balance des couleurs...
Cet outil modifie l'équilibre des couleurs, il convient bien à la correction des dominantes de couleurs.
Menu / Couleurs / Teinte-Saturation http://docs.gimp.org/fr/gimp-tools-color.html
L'outil Teinte-Saturation sert à modifier la teinte, la saturation et la luminosité sur un intervalle de couleurs.
Menu / Couleurs / Coloriser...
http://docs.gimp.org/fr/gimp-tool-hue-saturation.html
L'outil Colorier transforme une image en noir et blanc comme vue à travers un verre coloré. Vous pouvez l'utiliser
pour donner un effet « Sépia » à votre image.
Menu / Couleurs / Seuil...
http://docs.gimp.org/fr/gimp-tool-colorize.html
L'outil Seuil transforme une image en noir et blanc, où les pixels blancs représentent les pixels dont la Valeur est
supérieure à l'intervalle de seuil fixé, et les pixels noirs représentent les pixels en dehors de cet intervalle.
http://docs.gimp.org/fr/gimp-tool-threshold.html
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 12
Correction partielle d’une photographie
Dupliquer le calque
Ajouter un masque de calque
« clic droit » sur le calque
http://docs.gimp.org/fr/gimp-layer-mask-add.html
Sélectionner : Blanc (opacité complète)
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 13
Masquer la calque d’Arrière-plan « » sélectionner un pinceau à bord « flou »
Peindre en noir, dans le masque de calque, les zones à « masquer »
Sélectionner la calque d’Arrière-plan et l’afficher « »
Ouvrit les réglages : Menu / Couleurs / Niveaux...
Ajuster l’exposition de la photo.
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 14
Réglage de la balance des blancs d’une photographie
Menu / Couleurs / Balance des couleurs...
Cet outil modifie l'équilibre des couleurs, il convient bien
à la correction des dominantes de couleurs.
http://docs.gimp.org/fr/gimp-tools-color.html
Menu / Couleurs / Courbes...
L'outil Courbes est le plus sophistiqué des outils
utilisés pour modifier la luminosité et le contraste
d’une image Il permet d'agir sur n'importe quel
intervalle tonal.
Pour corriger la balance des blancs, il faut agir
sur les canaux RVB.
http://docs.gimp.org/fr/gimp-tool-curves.html
En utilisant le mode de fusion des calques
Il y a 21 modes de calques disponibles. On les
appelle aussi « Modes de fusion des calques ». Le
choix d'un mode calque change la manière dont
les calques sont représentés, en fonction du ou
des calques sous-jacents.
http://docs.gimp.org/fr/gimp-concepts-layer-modes.html
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 15
Convertir une image couleur en image noir et blanc
En utilisant le changement de mode de RVB vers Niveaux de Gris.
Menu /Image / Mode / Niveaux de gris
Attention cette fonction transforme toute l’image
et tous le calques en niveaux de gris.
En utilisant la fonction désaturer
Menu / Calque / Couleur / Désaturer...
A l’aide du filtre Canal Mixer
Menu / Filtre / Couleurs / Canal Mixer…
http://www.gimpfr.org/document/document_17
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 16
PARTIE II C : Autres possibilités de Gimp
Créer d'une image panoramique à partir de plusieurs photos
D'après l'exemple http://www.emob.fr/dotclear/index.php?2006/12/04/734-tutorial-video-gimp-parjulien-pons-creation-d-une-photo-panoramique-grace-a-pandora
Photo originale : http://commons.wikimedia.org/wiki/Image:Marseille-iles-frioul.jpg
Contenu:
� Assemblage d'images
� Utilisation du greffon pandora
Pour effectuer cet exercice le greffon « pandora » pandora-combine-0.9.2.scm doit être installé sur
l'ordinateur
Aller plus loin
� en savoir plus sur les greffons et les scripts-fu de Gimp :
http://docs.gimp.org/fr/gimp-scripting.html
Créez une nouvelle image (peu importe sa taille elle sera redimensionnée automatiquement après) et
supprimez l'arrière-plan et sauvegardez-la (panorama.xcf)
Récupérez les 4 images pano1.jpg / pano2.jpg / pano3.jpg / pano4.jpg / en les ouvrant comme
nouveaux calques (via fichier -> ouvrir en tant que calque)
Mettez-vous sur le calque pano1 et utilisez le menu Filtres -> Combiner -> Arrange as Panorama
Réglez le paramètre « overlap » (percent) sur 7
Décochez la case Top Layer on right
Laissez cochée la case Use Layer Mask
puis validez
Placez vous sur le calque pano4 et après avoir fait un zoom (p. ex 300%), utilisez
l'outil de déplacement pour ajuster le bord gauche de ce calque avec le côté droit du
calque pano3, pour que le chevauchement soit exact: par exemple en prenant la bouée
jaune comme point de repère
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 17
Placez-vous ensuite sur le calque pano2 et déplacez-le
également pour l'ajuster avec le côté droit du calque
pano3, en choisissant un repère qui se distingue bien sur
les 2 calques ( par exemple sur l'île).
Terminez par le côté gauche du calque pano1et faites le correspondre
exactement avec le côté droit du calque pano2
Faites un zoom arrière ( p. ex. 50 %) pour visualiser le résultat
Utilisez l'outil de découpage de l'image pour recadrer le panorama.
Fusionnez tous les calques Menu Image -> Aplatir l'image et sauvegardez la au format jpg
Aller plus loin
● Installez le plugin Hugin qui permet aussi de réaliser des panoramas avec une interface claire et
complète, en effectuant des types d'assemblages plus complexes ( rectification des défauts de
perspectives)
site officiel : http://hugin.sourceforge.net/
http://www.commentcamarche.net/faq/sujet-3535-infographie-creer-une-vue-panoramique-avec-hugin
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 18
Créer une image cliquable (image map) pour le web
D'après le tutorial : http://www.infetech.com/article.php3?id_article=159
et l'exemple http://www.tlfq.ulaval.ca/axl/monde/Index_continent.htm
Contenu:
� Filtre Web
� Délimitation de zones polygonales
� Génération automatique de code html
Nous allons réaliser très simplement une carte cliquable avec Gimp. Une carte cliquable ou image map
est une image dont certaines zones présentent des liens vers une image, un texte, une carte etc... Une
image cliquable permet ainsi de présenter facilement des statistiques, des photos, des cartes...
Dans cet exemple, nous allons réaliser une image cliquable très simple qui permettra de cliquer sur
une carte du monde, pour afficher des cartes politiques des 5 continents.
L’image de départ :
en cliquant sur les continents, on atteindra les images correspondantes
Passons à la pratique : tout d’abord, il faut mettre les différentes images dans le même dossier ( plus
simple et plus sûr, pour que les liens fonctionnent ).
Comme alternative vous pouvez aussi utiliser les Url vers les images en ligne ( tant que ces ressources
restent atteignables )
http://www.tlfq.ulaval.ca/axl/amnord/amerik-Nord-map-clic.htm
http://www.tlfq.ulaval.ca/axl/amsudant/Amerique-Sud-map-clic.htm
http://www.tlfq.ulaval.ca/axl/europe/Europe-MAP.htm
http://www.tlfq.ulaval.ca/axl/afrique/AFRIQUE-MAP-clic.htm
http://www.tlfq.ulaval.ca/axl/asie/ASIE-CARTE-clip.htm
B.Hausler / Y. Rogg – Sem 403 2009

Cours SEM « Découvrir et pratiquer GIMP partie 2-» page 19
On ouvre d’abord l’image qui servira au fond de l’image map avec gimp. On lance l’interface de
création d’image cliquable par filtre->web->image-cliquable(imagemap).
On obtient alors une nouvelle interface sur laquelle
on va pouvoir définir les différentes zones de notre
image. A gauche il y a les outils pour créer les zones
cliquables (circulaire, rectangulaire ou polygone).
Comme on souhaite rendre cliquable les continents et
que ce ne sont pas des formes simples , on va faire
un tracé par polygone. On sélectionne donc l’outil
"définir une zone polygonale" et on clique le long de
la zone à définir.
Lorsque l’on a fini le contour de la zone, il faut faire un double
clic (sur le dernier point), pour obtenir une boite de dialogue,
dans laquelle on va pouvoir mettre le lien vers l’image qui doit
être affichée quand on clique sur la zone : indiquez ici
uniquement le nom du fichier
par exemple AmNord.png
(vous pouvez rechercher le fichier grâce au bouton
parcourir les dossiers)
ou donner l'adresse d'une page Internet par exemple
http://www.tlfq.ulaval.ca/axl/amnord/amerik-Nord-map-clic.htm
On sélectionne à nouveau l’outil polygone pour créer les autres zones. Une fois les zones définies et
les liens sur les autres image ajoutés on obtient 5 zones qui pointent vers nos 5 images
Maintenant que les zones et les liens sont faits, il ne reste qu’à générer le code html de l’image map.
Pour ça on peut enregistrer le document en faisant
fichier->enregistrer-sous (dans la boite de dialogue où
on a définit les zones).
Comme type de fichier on choisit html, on aura ainsi
une page html générée automatiquement avec la carte
cliquable et les liens vers les images. Aussi, il faut
enregistrer le fichier dans le même dossier que les
images, pour que les liens que l’on a fait restent
corrects.
Intégrer l’image à votre page web :
Si vous voulez intégrer l’image à une page web déjà existante, il faut récupérer le code de la page html
pour l’intégrer à votre page. Il suffit d’ouvrir la page html avec un éditeur de texte, sélectionner le
code pour le placer là ou vous le désirez. Il ne vous reste alors qu’a vérifier si les liens vers les images
des zones cliquables sont encore bons. S'ils ne le sont plus, il faudra remettre les chemins (vers les
images) corrects.
Aller plus loin : Quelques remarques sur le code
Le code est d’abord composé des balises permettant l’affichage de l’image du fond (balise ) puis celle qui "ouvre" la zone cliquable (). On retrouve alors les lignes qui
correspondent aux zones cliquables avec les liens vers lesquels elles pointent () et
finalement la balise qui ferme la zone cliquable
B.Hausler / Y. Rogg – Sem 403 2009