CDDP60 Images numériques Pédagogie autour du logiciel «The GIMP» Item du B2i concerné : C.3.7 : Je sais traiter un fichier image ou son à l aide d un logiciel dédié notamment pour modifier ses propriétés élémentaires. Les occasions pour les enseignants d intégrer des images dans les supports pédagogiques sont fréquentes. Un logiciel comme GIMP offre plus que des retouches basiques de recadrage ou de correction. Toutes les manipulations sont envisageables même si elles demandent il est vrai une connaissance parfois poussée du logiciel. L usage de GIMP est envisageable dans la quasi-totalité des disciplines. Les arts plastiques mais aussi en lettres avec l illustration, l élaboration de roman photo par exemple, en histoire géographie avec le travail sur l iconographie en général (annotation, retouche, calques), en technologie, sciences etc Voici quelques exemples en arts plastiques et technologie. Vous trouverez un exemple en géographie à exporter sur ordidactic60. Géo 6 ème Etudier un paysage urbain local : «La ville d'héricourt un après-midi» Créer une cartographie interactive de type mini SIG d'après observations. Académie de Besançon. A) Exemples en arts plastiques : La couleur : L'élève mélange les couleurs. Il expérimente les interactions entre couleurs. Préparer une image composée d'un fond blanc et trois calques transparents. Fichier, Nouveau, Valider puis calque, nouveau, transparent, valider. Donner un nom aux calques. 1
2 1) Cliquer sur Premier Plan. Choisir le mode CMJN (icône imprimante) pour accéder aux couleurs primaires. Sur chaque calque, tracer une forme circulaire par exemple avec les outils de sélection et la remplir. Pour cela, cliquer sur le sélecteur de couleurs
2) Placer les trois calques en mode «multiplier» pour obtenir une synthèse soustractive. 3) Déplacer les calques de pour obtenir des zones d'intersection. Observer ainsi les mélanges. 4) Continuer le travail en créant d'autres calques, en variant les couleurs, les modes de fusion. Pour enregistrer le fichier utiliser l'extension «xcf». (format natif de Gimp qui conserve les calques). 3
L'image animée. Créer un «GIF» Utilisation des calques pour créer un effet d'animation. Mettre une image en mouvement, c'est faire des choix qui doivent être compris par le spectateur (expression). 1) Les calques sont gérés dans la fenêtre calques canaux chemins. Si cette fenêtre ne s'est pas ouverte au lancement de Gimp, allez dans fenêtres ancrables 2) Créer une nouvelle image ou ouvrir une image existante. Elle apparaît alors en tant que calque. Le calque suivant doit être légèrement différent du précédent pour créer l'effet de mouvement fluide. Copier le premier calque en le dupliquant. 3) Appliquer un filtre à l image et la dupliquer à nouveau pour travailler sur une nouvelle copie. Renouveler l'opération autant de fois qu il sera nécessaire. Renommer les calques en fonction de la progression. 4) Avant l'enregistrement vérifier l animation en allant dans Filtres/Animation/Rejouer l'animation. Enregistrer le tout au format GIF en tant qu'animation et en couleurs indexées. 4
5 5) Enregistrer au format GIF, exporter, enregistrer chaque calque sera lu comme une image faisant partie d'une suite d'images (comme au cinéma!).
B) Exemples en technologie : technologie au collège. Académie de Paris. Fiche professeur Technologie B2i Collège Niveau d enseignement : 4ème Présentation générale : Cette séquence est tirée d un travail qui concerne 2 scénarios : 1 : Extension d'une gamme de produits (le prototype d'horloge). 2 : Production d'un service (un catalogue web d'aide à la conception de prototype). Production de l'élève : une horloge et des traitements d'images. Production du professeur : un 'catalogue web' des horloges produites par les élèves. Durant ces activités l'élève fait un travail de bureau d'études : Suite à une courte étude de marché, il fait des croquis sur papier puis utilise un logiciel de CFAO pour traduire son idée en dessin vectoriel (CAO). Après avoir défini les attributs d'usinage (FAO), il lance la simulation de l'usinage. Si la simulation convient, il réalise son support d'horloge sur une MOCN. Son prototype est réalisé, il reste à vérifier qu'il satisfait le cahier des charges. Objectifs pédagogiques de la séquence Traiter la photo d un prototype à l aide du logiciel The Gimp pour modifier ses propriétés élémentaires et ainsi permettre la construction d une page web. Compétence(s) B2i 3.7 Je sais traiter un fichier image ou son à l aide d un logiciel dédié notamment pour modifier ses propriétés élémentaires. Organisation matérielle Ressources nécessaires Une salle équipée d un réseau de 10 ordinateurs. Les prototypes ont été réalisé et photographié. Les photos sont stockées sur le poste du professeur. Le logiciel de traitement d image The GIMP est installé sur chaque poste. Un élève par poste informatique. L autre demi-groupe fait une autre activité. L activité sur poste informatique dure 25 mn, rotation dans la séance puis correction au tableau, formalisation et conclusion. Photos des prototypes. Postes informatiques en réseau. Logiciel de traitement d image The GIMP. Fiche élèves Fiche élèves Fiche élèves corrigées Déroulement de la séquence : Ici la séquence dure une séance de deux heures. 15mn : Groupe entier : dialogue sur le thème : Sur Internet, pourquoi faut-il attendre parfois longtemps l affichage des pages à l écran? Débit, haut débit, poids de fichier, poids des photos, réglage de l appareil photo, caractéristiques d un fichier photo. 35mn : (voir la fiche élève ci-dessus) l élève choisit parmi les photos prises la meilleure et la traite avec The GIMP : rotation éventuelle, réduction de la taille en pixels (avec interpolation sur le poids du fichier) en fonction du projet de mise en page web, ajustage des niveaux de couleur. La fiche élève sera corrigée par le professeur et notée. 35mn : autre activité. 20mn : correction au rétroprojecteur des activités, formalisation, conclusion. Modalités d évaluation des élèves : Le professeur dispose des fichiers traités sur son poste, il peut rapidement vérifier les dimensions et le poids des fichiers traités et ainsi évaluer la production de l élève. La correction de la fiche élève viendra compléter l évaluation de cette activité. La compétence 3.7 (Je sais traiter un fichier image ou son à l aide d un logiciel dédié notamment pour modifier ses propriétés élémentaires) est validée pour les élèves qui ont un total compris entre 15 et 20 et qui ont été relativement autonomes. 6
Fiche élève : Créer phonom.jpg, le fichier photo de votre prototype dans sa page web du catalogue. Vous avez ouvert le compte 'Eleve'. 1-Par le poste de travail, ouvrez votre dossier classe. 2-Par le voisinage réseau, allez sur le poste du professeur pour visionner les photos que nous avons prises des prototypes, entraînez-vous à repérer leur poids en Ko. 3-Choissez la meilleure photo, AU CRAYON A PAPIER notez ici..son nom de fichier, ici...son poids en Ko puis faites COPIER (clic droit). Retrouvez votre dossier classe, cliquez dedans puis faites COLLER (clic droit). Gardez le voisinage réseau ouvert. Gardez le poste de travail ouvert. 4-Démarrez le logiciel de retouche photo (ici The GIMP) et ouvrez votre photo. 5-Enregistrez-la tout de suite dans votre dossier classe en la nommant STRICTEMENT de la façon suivante: sans accent ni espace ni majuscule: photonativedenom.jpg, nom étant votre nom de famille, puis enregistrez-la à nouveau dans votre dossier classe en la nommant cette fois STRICTEMENT de la façon suivante: sans accent ni espace ni majuscule: phonom.jpg 6-S il est nécessaire de faire tourner l image, faites IMAGE / TRANSFORMATION / ROTATION, puis faire IMAGE / ETIRER L IMAGE. 7-AU CRAYON A PAPIER notez ici.la largeur d origine et ici..la hauteur d origine. Redimensionnez votre photo en modifiant soit la largeur, soit la hauteur. Faites votre choix en réfléchissant: vous voulez la photo la plus grande possible! 8-AU CRAYON A PAPIER notez ici.la nouvelle largeur et ici..la nouvelle hauteur. Quelle est l unité de mesure de ses valeurs?.. 9-Validez et faites FICHIER / ENREGISTRER. 7
10-Faites OUTILS / OUTILS DE COULEUR / NIVEAUX et réglez le taquet gauche et le taquet droit contre l histogramme, comme l a montré le professeur, puis validez. 11-Faites FICHIER / ENREGISTRER. 12-Complétez au crayon le tableau ci-dessous à l'aide de vos réponses écrites plus haut: Poids (Ko) Dimensions(pixels x pixels) photonativedenom.jpg...x. Phonom.jpg...x. 13-Faites une phrase pour comparer les deux fichiers image ci-dessus :...... 14-Fermez The GIMP. Par le poste de travail, copiez votre fichier phonom.jpg, puis par le voisinage réseau, collez dans le dossier phonom du poste professeur. 15-Fermez le compte 'Eleve' 8
Ci-dessous un rappel des mises en page web des modèles simples (une plaquette) et doubles (deux plaquettes) de vos prototypes: - 9
Correction : Créer phonom.jpg, le fichier photo de votre prototypedans sa page web du catalogue. 1-Par le poste de travail, ouvrez votre dossier classe. 2-Par le voisinage réseau, allez sur le poste du professeur pour visionner les photos que nous avons prises des prototypes, entraînez-vous à repérer leur poids en Ko. 3-Choissez la meilleure photo, AU CRAYON A PAPIER notez ici IM001399.jpg son nom de fichier, ici 546 son poids en Ko puis faites COPIER (clic droit). Retrouvez votre dossier classe, cliquez dedans puis faites COLLER (clic droit). Gardez le voisinage réseau ouvert. Gardez le poste de travail ouvert. 4-Démarrez le logiciel de retouche photo (ici The GIMP) et ouvrez votre photo. 5-Enregistrez-la tout de suite dans votre dossier classe en la nommant STRICTEMENT de la façon suivante: sans accent ni espace ni majuscule: photonativedenom.jpg, nom étant votre nom de famille, puis enregistrez-la à nouveau dans votre dossier classe en la nommant cette fois STRICTEMENT de la façon suivante: sans accent ni espace ni majuscule: phonom.jpg 6-S il est nécessaire de faire tourner l image, faites IMAGE / TRANSFORMATION / ROTATION, puis faire IMAGE / ETIRER L IMAGE. 7-AU CRAYON A PAPIER notez ici 592 la largeur d origine et ici 400 la hauteur d origine. Redimensionnez votre photo en modifiant soit la largeur, soit la hauteur. Faites votre choix en réfléchissant: vous voulez la photo la plus grande possible! 8-AU CRAYON A PAPIER notez ici 510 la nouvelle largeur et ici 345 la nouvelle hauteur. Quelle est l unité de mesure de ses valeurs? Le pixel 9-Validez et faites FICHIER / ENREGISTRER. 10-Faites OUTILS / OUTILS DE COULEUR / NIVEAUX et réglez le taquet gauche et le taquet droit contre l histogramme, comme l a montré le professeur, puis validez. 11-Faites FICHIER / ENREGISTRER. 12-Complétez au crayon le tableau ci-dessous à l'aide de vos réponses écrites plus haut: Poids (Ko) Dimensions(pixels x pixels) photonativedenom.jpg 546 592 x 400 Phonom.jpg 72,2 510 x 345 13-Faites une phrase pour comparer les deux fichiers image ci-dessus : Le fichier traité est un peu moins grand que le fichier d'origine, il est surtout beaucoup moins lourd. Le fichier traité a des couleurs plus vives. 14-Fermez The GIMP. Par le poste de travail, copiez votre fichier phonom.jpg, puis par le voisinage réseau, collez dans le dossier phonom du poste professeur. 15-Fermez le compte 'Eleve' Ci-dessous un rappel des mises en page web des modèles simples (une plaquette) et doubles (deux plaquettes) de vos prototypes: 10