S'exercer à modifier des images pour le Web avec The Gimp

Le travail consiste à modifier de façon manuelle (il existe des façons automatiques) des images.

Travail à faire

1. Préparation du travail

1. Créer un dossier appelé TailleGimp et placer ce dossier...
   > sur le bureau (ordinateur individuel)...
   > dans le dossier personnel (ordinateur en réseau sur un serveur).
2. Cliquer sur le lien suivant Ressources numériques Exercices taille des images (la page est un peu lourde).
3. Enregistrer les deux images Panda01.jpg et Panda02.jpg dans le dossier TailleGimp.
4. Ouvrir l'image Panda01.jpg dans The Gimp
   > soit en ouvrant le logiciel puis en allant dans le menu File > Open et en naviguant dans l'arborescence des dossiers jusqu'à l'image...
   > soit en la glissant sur l'icône du logiciel.

2. Redimensionner une image

Nous allons modifier la taille de l'image pour qu'elle devienne homothétique avec le format d'image 4/3.

1. Aller dans le menu Image > Image Size...
   L'image Panda01.jpg mesure 484 x 640 pixels. Elle devrait mesurer 480 x 640 pixels.
   La recadrer avec l'outil de recadrage est possible mais ce sera dificile de tomber juste.
2. Aller dans le menu Image > Canvas Size...
   
3. Cliquer sur la chaîne pour la briser. Les dimensions ne seront plus homothétiques.
4. Choisir les dimensions en pixels. Dans la case Width:, entrer 480.
5. Cliquer sur le bouton Resize pour valider.
   
6. Enregistrer.

3. Redimensionner une image

Nous ne voulons pas mettre des photos trop grandes sur Internet, soit pour qu'elles ne soient qu'indicatives et pas exploitables, soit pour la rapidité de chargement.

1. Aller dans le menu Image > Image Size...
2. Dans la case Height:, entrer 480.
   
3. Cliquer sur le bouton Scale pour valider. L'image mesure à présent 360 x 480 pixels.
   
4. Enregistrer ou Enregistrer sous... un nouveau nom pour conserver l'original.

4. Faire une vignette

Nous voulons créer une petite image (vignette) de P'tit Panda afin qu'elle s'affiche très vite et que si le visiteur désire la voir, il n'ait qu'à cliquer dessus.

1. Aller dans le menu Image > Image Size...
2. Dans la case Height:, entrer 160.
3. Cliquer sur le bouton Scale pour valider.
4. Enregistrer sous Panda01vig.jpg. Elle sera dans les dossiers juste à côté de Panda01.jpg et sera reconnaissable à son suffixe vig

L'image, devenue vignette, mesure à présent 120 x 160 pixels.

5. Créer une image transparente

Nous ne voulons plus voir le fond de l'image de P'tit Panda.

a) Méthode des calques

1. Aller dans le menu Layer > Duplicate Layer.
   
2. Aller dans la fenêtre Layers et cliquer sur l'oeil du calque de fond (Background) afin de le désélectionner (et donc de ne plus le voir).
   
3. Sélectionner l'outil baguette magique Select Contiguous regions (Z).
   
4. Cliquer sur le fond violet pour le sélectionner.
   
5. Effacer le fond par Ctrl+x.
   
   Le fond est à présent transparent (les petits carrés symbolisent cette transparence).
6. Sélectionner le calque d'arrière-plan (Background) et cliquer sur la corbeille pour l'effacer.
   
7. Enregistrer sous un format qui respecte la transparence, c'est-à-dire en Gif (pour les aplats de couleur) ou en Png pour les couleurs plus complexes.
   Il est également possible de garder une copie au format Adobe Photoshop (.psd).

b) Méthode de la gomme d'arrière-plan

1. Sélectionner l'outil gomme d'arrière-plan Erase to background or transparency (Maj+E).
   
2. Cliquer dans le fond pour effacer une fois une petite partie du fond.
3. Sélectionner l'outil baguette magique (Select Contiguous regions Z) et cliquer sur le fond violet pour le sélectionner.
4. Effacer le fond par Ctrl+x.
5. Enregistrer.

6. Recadrer une image

Dans une image transparente, il n'est pas toujours nécessaire de conserver de l'espace autour du sujet : cela pèse lourd pour rien. Il convient donc de recadrer l'image.

1. Sélectionner l'outil de recadrage Crop or Resize an image (Maj+C).
   
2. Dessiner un rectangle le plus près possible du sujet. Il est possible de régler finement la sélection mais avec uniquement les poignées des angles du rectangle.
   
3. Une fenêtre va également s'ouvrir.
   
4. Vérifier sur l'image si la sélection est bonne et cliquer sur le bouton Crop.
5. Enregistrer.

7. Faire un bouton avec transparence

Pour faire un bouton avec une image, il suffit de combiner...

1. Créer une image transparente,
2. Recadrer une image,
3. Faire une vignette avec un rééchantillonage de l'image en toute petite valeur (30 pixels maximum). Et voici le résultat sur un fond gris sombre. Ce bouton peut naturellement être lié à une image.

   Bonjour, Je suis P'tit Panda

8. Pour aller plus loin...

Faire les mêmes exercices avec l'image Panda02.jpg. Il faudra bien régler la tolérance de l'Outil Baguette magique pour supprimer les dégradés. À vous de vous montrer rusé...

Sauvegarder

Pour sauvegarder le fichier : Enregistrer le document (sur le disque dur) puis sauvegarder le fichier sur une « Clef USB ». Ceci évite les pertes de données importantes. 1. Insérer une « clef USB » dans une prise USB de l'ordinateur. 2. Glisser l'icône du fichier du mémoire sur l'icône de la « porte-clef USB » (sur PC, aller dans le Poste de travail). 3. Éjecter le périphérique USB : • Sur Mac glisser-le vers la corbeille, elle se transforme en icône d'éjection . • Sur P.C., cliquer sur la minuscule icône d'éjection située à droite dans la barre du bas : ou et attendre les instructions. 4. Mettre la « Clé Usb » en lieu sûr !

oOo