AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Intégrer un GIF à une signature

    Partagez
    avatar
    Kaalyn
    FémininAge : 20Messages : 59

    le Mar 7 Juil 2015 - 13:48

    Intégrer un GIF dans une signature
    Bienvenue dans ce tutoriel ! Je vais vous apprendre à intégrer un GIF dans une signature avec GIMP. Voici l'outcome :        
         
         
         
    Etape 1 : réaliser la signature
         
         
    Evidemment, la première étape pour intégrer un GIF dans une signature sera de réaliser cette dernière, de manière à pouvoir y intégrer plus facilement le GIF : par exemple, j'ai positionné mon render de Simba de manière à ce qu'il touche le bord supérieur et le bord inférieur : ainsi il délimite une partie du montage dans laquelle j'insérerais le GIF. Important : il faut que vous l'enregistriez à la fois en .xcf (pour garder une version avec les calques) et en .png (ou .jpg selon vos préférences, mais j'ai toujours tendance à favoriser le .png).    
         
         
         
    Il vous faut ensuite trouver le GIF que vous utiliserez. Prenez en un qui s'accordera avec votre montage selon les couleurs et la forme que vous allez lui donner (pour éviter que la moitié du GIF n'apparaisse pas sur la création finale par exemple, ça serait dommage).      
    Mon GIF sera donc le suivant :      
         
       
       
    Préparer la forme du GIF
       
       
    Nous avons notre GIF, mais il est un peu grand et un peu trop rectangle pour passer à côté de notre render ! Il va donc falloir préparer le terrain.    
    Ouvrez la version .png de votre signature. Nous allons à présent faire une sorte de masque de la forme que remplira notre GIF.    
       
    >> Si vous savez vous servir de la plume pour détourer un render, vous pouvez l'utilisez ici pour créer une sélection qui suivra les bords de votre render en remplissant toute la partie à gauche de lui. Remplissez cette sélection de noir sur un nouveau calque que vous nommerez masque.    
       
    >> Si vous ne savez pas vous servir de la plume, vous pouvez utiliser la baguette magique. Pour cela, vous allez ouvrir en parallèle la version .xcf de votre signature afin de récupérer le calque du render. Sur la version xcf, dupliquez le calque du render, et s'il ne l'est pas déjà, mettez le aux dimensions de l'image (clic droit sur le calque dans la fenêtre des calques => mettre aux dimensions de l'image). Ensuite, coupez le calque en faisant CTRL + X puis collez le dans l'autre image avec CTRL + V. Vous pouvez à présent fermer la fenêtre de la version .xcf.    
     
    Vous obtenez ceci dans votre version .png :  
     
     
     
    Avec ce calque on va pouvoir faire la forme du GIF simplement à l'aide de la baguette magique. Je me place bien sur le calque du render en le sélectionnant dans la fenêtre des calques, puis je prends la baguette magique et je clique à gauche de Simba de manière à sélectionner toute la partie transparente sur ce calque.    
     
     
     
    Pour lisser un peu cette sélection et éviter un maximum l'aliasing (le crénelage), je vais l'agrandir de 2 pixels puis l'adoucir de 2 pixels également.  
     
    Ensuite, je crée un nouveau calque que je nomme "masque" et je remplis la sélection de noir sur ce nouveau calque. (ou d'une toute autre couleur, ça n'a pas grande importance).  
     
     
     
    Vous n'avez plus besoin du calque du render, vous pouvez donc le supprimer. De toute façon, il vous gênerait lors de la prévisualisation du GIF.  

    Etape 3 : insérer le GIF


    Ouvrez votre GIF en tant que calques. Selon la durée de l'animation vous aurez plus ou moins de calques qui s'ouvriront ; c'est l'inconvénient des GIF, il faut être patient et aimer le travail à la chaîne. Heureusement GIMP le tout puissant nous offre des outils pour nous faciliter la tâche.



    Je n'ai dans cet exemple que 20 images qui composent mon GIF, mais certains en comptent 80 ou 150... Quelque soit le nombre de calques, la méthode reste la même : vous allez chaîner tous les calques de votre GIF. De cette manière, quand vous en déplacerez un, les autres suivront de la même façon. Idem pour le redimensionnement. C'est d'ailleurs ce que nous allons faire maintenant : déplacer et redimensionner le GIF pour qu'il passe bien dans l'espace que nous lui avons réservé.  

    >> Comme dit plus haut, chaînez tous les calques qui composent le GIF en cliquant dans la zone blanche entre l'oeil et le nom du calque dans la fenêtre des calques.
    >> Prenez l'outil de déplacement, et l'outil de réduction, et redimensionnez et placez votre GIF à l'endroit prévu.

     

    Ensuite, on va lui donner sa forme !  

    >> Récupérez celle du calque "masque" de tout à l'heure en faisant clic droit dessus dans la fenêtre des calques => alpha vers sélection.  



    >> Masquez le calque du masque (hihi) en cliquant sur l'oeil à côté de son nom. Inversez votre sélection avec CTRL + I (ou simplement Sélection => Inverser), puis supprimez ce qui est sélectionné sur tous les calques du GIF (voici la partie "travail à la chaîne"). Voici le résultat :



    Désélectionnez (MAJ + CTRL + A ou Sélection => Aucune), supprimez le calque "masque" et fusionnez le premier calque du GIF avec votre signature (Clic droit sur le calque du GIF => Fusionnez vers le bas)



    Regardez à quoi ressemble votre animation en allant dans Filtres => Animation => Rejouer l'animation  

    Si cela vous plaît, parfait, vous n'avez plus qu'à enregistrer !  
    Si ça ne vous plaît pas, annulez toutes les opérations jusqu'au déplacement du GIF et recommencez.  

    Etape 4 : enregistrer l'animation


    Enregistrez une version xcf, puis exportez votre création en .gif, en veillant à bien cocher "as animation".  



    Et voilà !  



    Si vous avez des questions n'hésitez pas à les poser à la suite !
    avatar
    Chione
    MasculinAge : 16Messages : 397

    le Mar 7 Juil 2015 - 15:06

    Hannnn merci beaucoup ça faisait vraiment longtemps que je cherchait comment faire ! :bisou:

    EDIT : ben moi ça marche pas trop :
    http://image.noelshack.com/fichiers/2015/28/1436283134-paradox.gif




    FEZ!FEZ!
    avatar
    Nelra
    FémininAge : 20Messages : 57

    le Dim 5 Juin 2016 - 12:17

    Merci beaucoup pour ce super tuto ! :lovebomb:
    Pour moi ça a super bien marcher :
    Spoiler:
    par contre, tu sait comment faire pour la tête du png qui n'est pas nette ? :innocent:
    avatar
    Kaalyn
    FémininAge : 20Messages : 59

    le Dim 5 Juin 2016 - 12:57

    Malheureusement c'est le format GIF qui réduit (beaucoup) la qualité des créations Sad
    avatar
    Nelra
    FémininAge : 20Messages : 57

    le Dim 5 Juin 2016 - 16:00

    Arff et il n'y a aucune solution ? :/ comme c'est pour un header ça fait pas très jolie... :3
    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Jeu 9 Juin 2016 - 13:16

    Bonjour bonjour !

    Je réponds juste en passant, l'idée d'intégrer un gif à un header est intéressante, mais malheureusement le format GIF a été conçu pour être léger, et donc il donne des images d'assez mauvaise qualité visuellement (pixellisation, problème avec certaines couleurs, etc...). Pour avoir un meilleur rendu, il faudrait pouvoir faire un petit code pour placer ton header en premier plan, dans un format qui permet une meilleure qualité (PNG ici, pour avoir de la transparence) avec un trou où tu veux mettre ton gif, et ensuite placer ton gif en arrière plan. Comme ça il n'y a que le gif qui sera de moindre qualité et non tout le header.



    Présence réduite.
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 4:31