Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Décembre 14, 2018, 05:51:26
Accueil | Aide | Rechercher | Identifiez-vous | Inscrivez-vous

+  ArcheoGamers Forums
|-+  Support Officiel AtomicFE
| |-+  Les Layouts/Skin
| | |-+  [Tuto] Détourage "assorti"
0 Membres et 1 Invité sur ce fil de discussion. « sujet précédent | | sujet suivant »
Pages: [1] Imprimer
Auteur Fil de discussion: [Tuto] Détourage "assorti"  (Lu 6467 fois)
blondin
archéologue expert
****
Messages: 256



« 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...)







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 :



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



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)



Choisissez l'outil de sélection par couleur.



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).



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).



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

Et remplissez.



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



Copiez, et collez sur votre fond :



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) :



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



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.



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...
« Dernière édition: Mai 11, 2009, 23:52:26 par blondin » Journalisée
youki
Chef d'équipe.
Indiana Jones
*****
Messages: 7390



« Répondre #1 le: Mai 11, 2009, 15:22:42 »

Epinglé!  Bisou
Journalisée

blondin
archéologue expert
****
Messages: 256



« Répondre #2 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.
Journalisée
youki
Chef d'équipe.
Indiana Jones
*****
Messages: 7390



« Répondre #3 le: Mai 11, 2009, 16:07:42 »

Je t'envoie un lien pour que tu puisse heberger les images ici.
Journalisée

Pages: [1] Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


Connexion avec identifiant, mot de passe et durée de la session

Hit-Parade Propulsé par MySQL Propulsé par PHP Powered by SMF 1.1.4.9 | SMF © 2006, Simple Machines LLC XHTML 1.0 Transitionnel valide ! CSS valide ! Classement de sites - Inscrivez le vôtre!