Gimp : Le casse-tête

Description

1. Cliquez ici pour afficher un exemple de travail.
2. Trouvez une image de votre choix et téléchargez-la dans votre espace de téléchargement

   Exemple Image initiale	Exemple Image cadre

3. Ouvrez cette image avec le logiciel GIMP.

   Étape 1 : création du cadre du casse-tête

4. Enregistrez UNE COPIE de cette image avec le logiciel GIMP sous le nom cadre.jpg.
5. Utilisez le menu SÉLECTION - TOUT
6. Utilisez le menu ÉDITION- EFFACER
7. Utilisez le menu SÉLECTION - TOUT
8. Utilisez le menu SÉLECTION - RÉDUIRE de 5 pixels
9. Utilisez le menu SÉLECTION - INVERSER
10. Utilisez le menu ÉDITION - REMPLIR AVEC COULEUR DE PREMIER PLAN
11. Enregistrez cette image sous le nom cadre.jpg .
12. Téléchargez cette image dans votre espace de téléchargement.

    Étape 2 : création du casse-tête

13. Ouvrez ensuite votre image initiale avec le logiciel GIMP.
14. Utilisez le menu FILTRE / RENDU / MOTIF / PUZZLE et réglez le filtre afin d'obtenir un casse-tête d'un minimum de 2 rangées x 2 colonnes (4 pièces).
15. Découpez en suivant la procédure ci-dessous chacune des pièces et créez pour chaque pièce un nouveau document GIMP ayant un arrière-plan transparent et collez la pièce dans ce nouveau document.
    1. Utilisez l'OUTIL CHEMIN afin de tracer le contour d'une pièce
    2. Sélectionnez ensuite le MENU SÉLECTION / DEPUIS LE CHEMIN
    3. Sélectionnez ensuite le MENU ÉDITION / COUPER
    4. Sélectionnez ensuite le MENU FICHIER NOUVEAU - OPTIONS AVANCÉES - REMPLIR AVEC - TRANSPARENCE
    5. Sélectionnez ensuite le MENU ÉDITION / COLLER
    6. Découpez au besoin l'excédant de votre pièce en utilisant l'outil de découpage.
    7. Enregistrez chacune des pièces du casse-tête sous le nom puzzle1.gif, puzzle2.gif, etc.
    8. Recommencez cette procédure pour chacune des pièces du casse-tête.
16. Téléchargez chacune des images dans votre espace de site tutoriel utilisé. téléchargement.
17. IMPORTANT : Ajoutez une page à votre portfolio en affichant la directive 34353.
    1. Inscrivez dans le champ titre : Gimp : Le casse-tête
    2. Sélectionnez dans le champ matière : Informatique
    3. Inscrivez dans le champ no de la directive : 34353
    4. Cliquez le bouton NOUVEAU
    5. Insérez dans la section BODY le texte suivant : Complétez ce casse-tête.
    6. Insérez dans la section BODY votre image entière suivi d'un saut de ligne
    7. Insérez dans la section BODY chacune des pièces de votre casse-tête
    8. Insérez en EN-TÊTE le code CSS-JAVASCRIPT suivant : cliquez ici
    9. Pour chacune des pièces du casse-tête, ajoutez dans le code HTML en utilisant la méthode intraligne la classe nommée DRAG. <img src="URL" class="drag" />
    10. Pour chacune des pièces du casse-tête, ajoutez dans le code CSS de positionnement absolu en utilisant la méthode intraligne afin de positionner chacune des pièces en position top:500px et left:0px. <img src="URL" class="drag" style="position:absolute;top:500px;left:0px;" />
    11. Mélangez vos pièces maintenant en modifiant l'ordre des pièces.
    12. Ajoutez ensuite quelques sauts de ligne.
    13. Ajoutez ensuite votre image cadre.jpg.
    14. Enregistrez votre page, affichez votre page et corrigez votre code au besoin.
    Cette page servira à la correction de votre travail et à transmettre mes commentaires concernant le travail.