ArcheoGamers Forums

Support Officiel AtomicFE => Les Layouts/Skin => Discussion démarrée par: blondin le Mai 11, 2009, 14:56:35



Titre: [Tuto] Détourage "assorti"
Posté par: blondin le Mai 11, 2009, 14:56:35
Voici un tuto en images pour obtenir de belles images sur vos layouts, et éviter l'effet d'escalier.
Tout d'abord, il faut remercier JPdonald pour avoir donner en premier cette technique.


On a un fond (le background) et quelques images qu'on voudrait animer (custom0/3/4, image1/2...)

(http://www.atomicfe.com/archeogamers/upload/fond.png)

(http://www.atomicfe.com/archeogamers/upload/Super%20Nintendo%20Entertainment%20System.png)

(http://www.atomicfe.com/archeogamers/upload/Nintendo%20Entertainment%20System2.png)

Ici les images sont des png avec le fond transparent. Je ferais un autre tuto pour partir d'un jpg sur fond blanc (la plupart des images qu'on rencontre sur le net) pour arriver à un png à fond transparent et contour lisse comme ici.

Donc, si on détoure les images normalement, comme dans le fil "banque d'image", elles pourront être utilisées avec n'importe quel fond, mais auront un effet escalier vraiment pas terrible :

(http://www.atomicfe.com/archeogamers/upload/bad.png)

Ce qu'on veut, c'est ça :

(http://www.atomicfe.com/archeogamers/upload/good.png)

Plus d'effet d'escalier, contour parfaitement lisse : bref, des images assorties à votre fond.


Comment faire ? C'est simple :
D'abord, munissez-vous de Gimp, et ouvrez votre image (zoomez si elle est plutôt petite)

(http://www.atomicfe.com/archeogamers/upload/ScreenShot001.png)

Choisissez l'outil de sélection par couleur.

(http://www.atomicfe.com/archeogamers/upload/ScreenShot003.png)

Veillez bien à ce que "lissage" et "adoucir les bords" soient décochés, et que "sélectionne les régions transparentes" soit coché.

Pour le seuil, choisissez un nombre faible. Pour ma part je choisis entre 20 et 30. Vous pouvez mettre plus comme vous pouvez mettre moins (jusqu'à 0, si vous voulez).

Pour bien comprendre, plus le seuil (c'est une tolérance) sera élevé, plus les pixels semi transparents proches de la transparence totale seront englobés dans votre sélection.
Inversement, si vous choisissez 0, toutes les nuances de  semi-transparence jusqu'à l'opacité totale seront prises en compte.
On serait tenté de choisir zéro pour une image la plus assortie possible. Problème et vous comprendrez plus tard : les contours semi transparents seront trop larges, et une fois votre image assortie au fond, ces contours seront trop visibles lors des animations.
Donc je vous conseille de choisir un seuil d'au moins 20.

Sélectionnez donc le fond transparent (cliquez sur un endroit éloigné des bords de l'image pour éviter de choper un fond qui serait en fait semi-transparent).

(http://www.atomicfe.com/archeogamers/upload/ScreenShot004.png)

Sélectionnez ensuite l'outil de remplissage (le fameux pot de peinture).
Choisissez la couleur utilisée par le layouteditor pour la transparence :
En l'occurrence, le rose flashy (RVB : 255,0,255).

(http://www.atomicfe.com/archeogamers/upload/ScreenShot005.png)

N'oubliez pas de cliquer sur l'option "remplir toute la sélection".

Et remplissez.

(http://www.atomicfe.com/archeogamers/upload/ScreenShot006.png)

Maintenant, sélectionnez tout : soit CTRL+A, soit Menu Sélection > Tout.

(http://www.atomicfe.com/archeogamers/upload/ScreenShot007.png)

Copiez, et collez sur votre fond :

(http://www.atomicfe.com/archeogamers/upload/ScreenShot008.png)

Déplacer l'image où vous souhaitez qu'elle soit sur le layout, et ancrez-la (en cliquant sur le fond, lorsqu'une petite ancre apparaît sur le curseur).

Puis, prenez l'outil de sélection rectangulaire, et sélectionnez l'image que vous venez d'ancrer, en vous arrêtant bien pile-poil aux bords roses (vous pouvez zoomer et dézoomer pour faire ça correctement, Zoom = Ctrl + molette) :

(http://www.atomicfe.com/archeogamers/upload/ScreenShot009.png)

Regardez bien les coordonnées de l'image (sa position surtout, la dimension restera là quand vous enregistrerez l'image) :

(http://www.atomicfe.com/archeogamers/upload/ScreenShot010.png)

Et retenez-les, car vous devrez mettre ces chiffres-là dans le layout editor pour que l'image corresponde parfaitement au fond. C'est moins importants pour les fonds quasi unis comme celui-ci, mais pour les fonds multicolors, c'est primordial.

Maintenant vous pouvez copier, et coller "en tant que nouvelle image" : Shift+Ctrl+V ou Menu Edition > Coller comme > Nouvelle image.

(http://www.atomicfe.com/archeogamers/upload/ScreenShot011.png)

Enregistrez, et ça y est ! Votre image est parfaitement assortie à votre fond. N'oubliez pas que cette image n'est pas passe-partout, vous ne pourrez l'utiliser qu'avec le fond pour lequel vous l'avez assorti.


A suivre, pour l'autre image qui se trouve en partie en dehors...


Titre: [Tuto imagé] Détourage "assorti"
Posté par: youki le Mai 11, 2009, 15:22:42
Epinglé!  :-*


Titre: [Tuto imagé] Détourage "assorti"
Posté par: blondin le Mai 11, 2009, 15:45:14
Pour les images, elles sont hébergées chez imageshack. Jamais eu de problème de suppression, mais si jamais, peut-être il faudrait les uploader sur ton serveur ? Je sais pas comment faire.


Titre: [Tuto imagé] Détourage "assorti"
Posté par: youki le Mai 11, 2009, 16:07:42
Je t'envoie un lien pour que tu puisse heberger les images ici.