La transparence

Appliquer la couleur de transparence est l'étape finale de la création d'une skin. Elle permet de rendre transparente l'une des 256 couleurs de la palette composant votre skin. Cette couleur rendue transparente prendra alors celle de l'arrière-plan du chipset. Cette étape est nécessaire et réclamée afin de valider une quelconque skin. C'est pourquoi il est très important de l'appliquer correctement.

Les étapes de l'application de la couleur de transparence sont les suivantes :

fond-unique
Appliquer un fond de couleur unique
(Appliquer un fond de couleur unique)
arrow Oyasumi
Application de la couleur de transparence
(Application de la transparence)

Les trois tutoriels qui vont suivre sont extraits du site Sushi Atomik (davantage de tutoriels avec différents logiciels y sont disponibles sur ce site).

 

(Cliquez sur l'un des logiciels ci-dessous pour afficher son tutoriel)
Photofiltre Photoshop GIMP

Photofiltre

◊ Vous allez apprendre ici, étape par étape, à appliquer la couleur de transparence à l'aide du logiciel PhotoPhiltre.

Avant d'entrer dans le vif du sujet, il vous faut tout d'abord le télécharger : PhotoFiltre et l'installer.


◊ Une fois installé,
lancez l'application et vous obtiendrez la fenêtre suivante :
(Assurez-vous d'avoir mis auparavant une couleur uniforme en fond de votre chipset, exceptée le blanc ou une couleur qui est déjà sur la skin)

PF01_r1_c1 PF01_r1_c2
PF01_r2_c1 PF01_r2_c2

◊ A présent, cliquez sur : "Fichier"-->"Ouvrir…" (Raccourci clavier : CTRL + O) et selectionnez votre skin :

PF02_r1_c1 PF02_r1_c2
PF02_r2_c1 PF02_r2_c2

◊ Identifiez et cliquez sur l'icône correspondant à la couleur de transparence sur la barre d'outils suivante :

PF03

◊ Une fenêtre de demande de confirmation s'ouvre et cliquez sur "Oui" :

PF04


◊ La fenêtre de la couleur de transparence à présent ouverte,
   • Vérifiez que la "Couleur" correspond bien à la couleur de fond de votre skin.
   • Réglez la "Tolérance" à zéro.

PF05


◊ Ensuite, cliquez sur "Ok" pour valider.
Vous pouvez cliquer sur "Aperçu" afin de voir si les réglages sont opérationnels :

PF06_r1_c1 PF06_r1_c2
PF06_r2_c1 PF06_r2_c2

Vous obtiendrez un quadrillage gris/blanc derrière votre skin vous signifiant l'application de la couleur de transparence.

Vérifiez ainsi (en zoomant votre skin) si des pixels "résiduels" ne sont pas sur votre skin (dû à une mauvaise application de la couleur de fond dans tous les espaces libres de la skin) ou si des pixels sur votre skin n'ont pas disparu (dû à l'utilisation de la même couleur pour certains pixels de la skin et pour le fond).


◊ Une fois ces vérifications faites, il ne vous reste plus qu'à enregistrer votre skin :
"Fichier"-->"Enregistrer sous…" (assurez-vous d'enregistrer votre skin au format *.png),
et de nommer votre skin comme vous le souhaitez.

Photoshop

Le résultat obtenu après application de la couleur de transparence sur une image (et donc ici une skin) avec Photoshop est bien meilleur que celui de PhotoFiltre.

C'est pourquoi j'ai fait ce tutorial pour les personnes ayant la chance ou les moyens de s'être procurées une version récente de ce magnifique logiciel.

Photoshop est disponible sur le site officiel de Adobe : http://www.adobe.com/

Bon commençons :) !

◊ Ouvrez votre fichier : "Fichier"-->"Ouvrir…" (Raccourci clavier : CTRL + O) et selectionnez votre skin :
(Assurez-vous d'avoir mis auparavant une couleur uniforme en fond de votre chipset, exceptée le blanc ou une couleur qui est déjà sur la skin)

PS01_r1_c1 PS01_r1_c2
PS01_r2_c1 PS01_r2_c2

◊ Ensuite, cliquez sur : "Fichier"-->"Enregistrer pour le Web…", la fenêtre suivante s'ouvre :

PS02_r1_c1 PS02_r1_c2
PS02_r2_c1 PS02_r2_c2

◊ Selectionnez la pipette et cliquez sur la couleur de fond de votre skin :

PS03_r1_c1 PS03_r1_c2
PS03_r2_c1 PS03_r2_c2

◊ Sur la table des couleurs, identifiez et cliquez sur l'icône permettant d'associer la transparence à la couleur selectionnée (avec la pipette précédemment) :

PS04


◊ Pour les paramètres,
selectionnez le format *.png et choisissez 256 couleurs. (Pour le reste des paramètres, je vous conseille ceux qui sont sur l'image ci-dessous)

PS05

Vous obtiendrez un quadrillage gris/blanc derrière votre skin vous signifiant l'application de la couleur de transparence.

Vérifiez ainsi (en zoomant votre skin) si des pixels "résiduels" ne sont pas sur votre skin (dû à une mauvaise application de la couleur de fond dans tous les espaces libres de la skin) ou si des pixels sur votre skin n'ont pas disparu (dû à l'utilisation de la même couleur pour certains pixels de la skin et pour le fond).


◊ Une fois ces vérifications faites,
il ne vous reste plus qu'à cliquer sur : "Enregistrer" (Assurez-vous d'enregistrer votre skin au format *.png) et de nommer votre skin comme vous le souhaitez.


Pour vous donnez un exemple de comparaison,
voici une image illustrant la différence de résultat obtenue avec Photoshop (skin du haut) et PhotoFiltre (skin du bas) :

comparaison-1 Vous pouvez par exemple remarquer qu'après application de la couleur de transparence, au niveau des cheveux les couleurs ne sont plus celles d'origine avec PhotoFiltre alors que Photoshop les conserve.
comparaison-2 Sur le bas de la veste, des couleurs ont disparu avec PhotoFiltre alors que Photoshop les conserve.

Au final,
on peut conclure que Photoshop permet d'obtenir un meilleur résultat que PhotoFiltre mais que ce logiciel n'est malheureusement pas à la portée de toute les bourses (et non on ne peut pas payer en po :roll: …) contrairement à PhotoFiltre qui lui est gratuit.

N.B. : Lorsque vous testerez votre skin I.G. (In Game = En Jeu), si votre personnage meurt (lors d'un duel par exemple), ce dernier ne deviendra pas transparent comme à l'habitude. Mais ne vous inquiètez pas, cela n'influe en rien sur son éventuelle acceptation et donc sa pose sur le serveur.

GIMP

The GIMP est disponible pour Windows : GIMP

Attention à bien sélectionner le setup en fonction de la version de votre OS !
(Pour les précédentes versions de Windows : GIMP
Et ne pas omettre d'installer avant le GTK+ 2 Runtime Environment en fonction de la version de votre OS)


◊ Après l'avoir installé,
lancez GIMP et ouvrez votre fichier, vous obtiendrez la fenêtre suivante :
(Assurez-vous d'avoir mis auparavant une couleur uniforme en fond de votre chipset, exceptée le blanc ou une couleur qui est déjà sur la skin)

GIMP01_r1_c1 GIMP01_r1_c2
GIMP01_r2_c1 GIMP01_r2_c2

◊ Il faut à présent aplatir l'image. Pour cela, cliquez sur "Image-->Aplatir l'image" :

GIMP02_r1_c1 GIMP02_r1_c2
GIMP02_r2_c1 GIMP02_r2_c2

◊ Ensuite il faut appliquer un calque de transparence en ajoutant un canal alpha.
Cliquez sur "Calque-->Transparence-->Ajouter un canal alpha" :

GIMP03_r1_c1 GIMP03_r1_c2
GIMP03_r2_c1 GIMP03_r2_c2

Vous ne verrez rien d'appliquer concrètement mais ne vous inquiètez pas, le calque a bien été pris en compte ;) !


◊ Maintenant il faut sélectionner la couleur de fond pour que la transparence se fasse.
Cliquez sur "Sélection-->Par couleur" :

GIMP04_r1_c1 GIMP04_r1_c2
GIMP04_r2_c1 GIMP04_r2_c2

◊ Puis cliquez sur la couleur de fond de votre chipset.
Des pointillés devraient à présent entourer la skin comme ceci :

GIMP05_r1_c1 GIMP05_r1_c2
GIMP05_r2_c1 GIMP05_r2_c2

◊ Les pointillés signifiant que le fond est sélectionné, il faut donc effacer ce dernier afin d'appliquer la couleur de transparence. Pour cela, cliquez sur "Édition-->Effacer" :

GIMP06_r1_c1 GIMP06_r1_c2
GIMP06_r2_c1 GIMP06_r2_c2

◊ Vous apercevez désormais un quadrillage en fond représentatif de la couleur de transparence, il faut à présent passer en mode indexé afin que cette transparence soit prise en compte à l'enregistrement. Cliquez sur "Image-->Mode-->Indexée…" :

GIMP07_r1_c1 GIMP07_r1_c2
GIMP07_r2_c1 GIMP07_r2_c2

◊ La fenêtre suivante s'ouvre :

GIMP08_r1_c1 GIMP08_r1_c2
GIMP08_r2_c1 GIMP08_r2_c2

Mettez bien le nombre maximal de couleur à "256". Le tramage n'est pas utile pour une skin.


◊ Il ne vous reste plus qu'à enregistrer votre fichier ("Fichier-->Enregistrer sous…"),
nommez correctement votre chipset, sélectionnez l'emplacement et le bon type (*.PNG),
et enfin validez les options suivantes :

GIMP09_r1_c1 GIMP09_r1_c2
GIMP09_r2_c1 GIMP09_r2_c2

 

Précédent - Haut de page - Suivant >
Retour