Ishimaru-Design

Ce tuto a été réalisé avec la version 2.6 de Gimp.  Si vous utilisez une version antérieure, certaines choses peuvent différer !

Que ce soit pour un forum Forumactif utilisant la version phpBB3, ou bien pour un forum phpBB3 dont vous voulez personnaliser le style Prosilver, ce tutoriel va vous montrer comment réaliser un ruban "Connecté" comme celui-ci :



1- Tout d'abord, créez un nouveau document transparent de 70*70 pixels.  Pour la transparence, cliquez sur la flèche vis à vis "Options avancées" puis sélectionnez "Transparent" vis à vis "Remplir avec".



2- Pour la démonstration, je vais mettre un fond blanc, mais vous pouvez continuer avec le fond transparent.



Pour faire notre ruban, on va devoir utiliser l'outil Chemin, mais tout d'abord, on a besoin de placer des guides, aussi appelés repères, qui auront un effet magnétique sur les points qu'on placera.  Pour faire apparaître un guide, cliquez sur les règles qui sont normalement présents par défaut, dans votre fenêtre centrale, puis en tenant le bouton de la souris enfoncé, déplacez ce guide pour le positionner sur l'image.  Si vous cliquez sur la règle du haut, vous aurez des guides horizontaux.  Si vous cliquez sur la règle de gauche, vous aurez des guides verticaux.

Maintenant, zoomez votre image à 800% et placez trois guides verticaux à 5, 20 et 70, et trois guides horizontaux à 0, 50 et 65.

Pourquoi des guides sur le bord de l'image ?  Parce que pour positionner précisément un point à la fois horizontalement et verticalement, on doit faire des intersections aux endroits où l'on veut faire nos points.

Vous devriez avoir maintenant ceci :



3- On est maintenant prêt à faire notre ruban !  Créez d'abord un nouveau calque transparent que vous appellerez "Ruban", puis sélectionnez la couleur de premier plan que vous voulez utiliser pour colorier le ruban.  Pour l'exemple, j'utiliserai la couleur #afafaf qui est un gris moyen.

Prenez maintenant l'outil Chemin , puis placez vos ancres où se trouvent vos intersections de guides, pour faire le tour de votre ruban.  Pour fermer le chemin, placez une ancre sur le premier ancre que vous avez mis.



4- Maintenant, on va créer notre sélection à partir de ce chemin.  Dans la fenêtre centrale, allez dans Sélection > Depuis le chemin, puis remplissez la sélection avec la couleur que vous avez choisie (Édition > Remplir avec la couleur de premier-plan).  Désactivez maintenant votre sélection (Sélection > Aucune).



5- Maintenant, on passe à notre texte !  Par expérience, j'ai remarqué qu'une police classique de type sans-sérif convient mieux pour ce type d'icône.  Prenez l'outil Texte et choisissez la police Sans Bold qui est juste parfaite pour l'icone, mettez la taille à 10 et cochez "Lissé".  Quant à la couleur, ça importe peu, pourvu que vous pouvez voir ce que vous écrivez.



Maintenant, tapez votre texte CONNECTÉ tout en majuscules, c'est très important pour une esthétique optimale.



6- Maintenant, on va créer un chemin à partir de ce texte et ensuite, on va lui appliquer une rotation.

Pourquoi ne pas simplement appliquer une rotation au texte ?  Par expérience, j'ai remarqué que le fait de faire directement une rotation au texte donnait un résultat flou, voire pixellisé.  En utilisant un chemin, qui est un élément vectoriel, la qualité de ce qui est généré à partir de ce chemin sera optimale et donc, le texte aura un rendu plus beau.

Donc, allez dans les options de l'outil Texte, puis cliquez sur le bouton "Créer un chemin depuis le texte" :



Le nouveau chemin créé n'est pas visible par défaut, donc allez dans votre fenêtre des chemins, puis cliquez vis à vis le nouveau chemin pour faire apparaître un oeil :



Masquez votre calque de texte, en cliquant sur l'oeil vis à vis ce calque, dans la fenêtre (ou l'onglet) des calques.  On n'en aura plus besoin, à moins que vous voulez traduire le texte dans d'autres langues, comme l'anglais par exemple.
Maintenant, votre chemin est visible sur votre image :



7- Le chemin maintenant créé, on va lui appliquer une rotation.  Pour cela, prenez l'outil Rotation puis allez dans les options de l'outil pour sélectionner l'icône "Chemin" vis à vis "Transformer" :



Maintenant, cliquez sur le chemin, puis faite-lui une rotation de 45 degrés en réglant "Centre X" et "Centre Y" dans la fenêtre Rotation pour bien positionner le chemin transformé sur le ruban, puis validez.



8- Maintenant, il ne vous reste plus qu'à créer votre texte à partir du chemin transformé.  Créez un nouveau calque transparent que vous appellerez "Texte Connecté" puis choisissez la couleur définitive pour le texte (couleur plus claire si le ruban est foncé, ou plus foncée si le ruban est clair).  Dans mon cas, puisque j'ai pris un gris moyen, je vais prendre un gris très clair (#fafafa).

Maintenant, récupérez la sélection depuis le chemin (Sélection > Depuis le chemin) puis remplissez la sélection de la couleur que vous avez choisi pour le texte (Édition > Remplir avec la couleur de premier plan).
Désactivez la sélection (Sélection > Aucune) puis masquez le chemin dans votre fenêtre des chemins.

Maintenant, vous avez votre ruban !



Enregistrez une copie en .xcf afin de pouvoir modifier l'icône à volonté, en choisissant d'autres couleurs.

Ensuite, vous pouvez l'enregistrer en .png, mais si vous voulez le rendre compatible avec Internet Explorer 6 sans recours aux hacks pour corriger le problème de transparence, suivez le bonus ci-dessous pour avoir un GIF transparent sans avoir une pixellisation visible sur les bords du ruban :

9- créez un nouveau calque que vous appellerez "Fond pour GIF" et placez-le en dessous du calque "Ruban".  Récupérez la sélection du ruban, en faisant un clic-droit sur le calque "Ruban", puis en choisissant "Alpha vers Sélection".  Choisissez la couleur qui correspond à celle du fond que vous utilisez pour le fond de vos posts (vous pouvez utiliser l'extension ColorZilla pour récupérer rapidement la couleur sous Firefox).

En vous assurant que votre calque "Fond pour GIF" est le calque actif, faites plusieurs fois Ctrl+, pour remplir la sélectoin de la couleur choisie, jusqu'à ce que toute la forme soit bien opaque.

Voici ce que ça donne quand je masque le calque Ruban :



Maintenant, sauvegardez votre travail en .xcf avant de l'exporter en GIF.

Voici maintenant le résultat, exporét.

PNG :

GIF :