Images :

Recadrage, détourage et transparence


Le but du jeu pour ce chapitre est de récupérer le nain et d'en faire une skin utilisable dans Adept.
Pour celà, il va falloir la travailler un petit peu


















Cette image mesure 300x300 pixels et est un peu "fade".

Commençons doucement en augmentant son contraste et en baissant sa luminosité.
Allez dans le menu "Image" > "Réglages" > "Contraste/luminosité"
Jouez avec les curseurs...

On cherche à rendre les couleurs plus intenses afin que la difference entre le fond et le nain soit plus accentuée (ça va nous faciliter le détourage).

Voila, c'est mieux (cf juste en dessous).



Maintenant on va la recadrer sans la redimensionner,
c'est à dire qu'on va enlever ce qui ne nous interresse pas (les bandes roses, un bout de socle et le haut).

Pour cela il suffit d'utiliser l'outil de selection rectangle
(en haut à gauche dans la palette des outils).

Cliquez un peu au dessus et à gauche de la tête (si vous êtes gaucher, euh...), puis, en laissant le doigt sur le bouton, dessinez un rectangle qui contient le nain.

Si c'est pas bon, vous pouvez annuler en cliquant en dehors du rectangle OU vous pouvez aussi le déplacer avec les fleches du clavier.

Pas la peine de serrer au plus juste, on élague un peu pour améliorer la maniabilité de notre image.










Ensuite, allez dans le menu "Image" puis cliquez sur "Recadrer".
Tout ce qui n'est pas dans le rectangle est viré.











Passons aux choses sérieuses


Le détourage consiste à selectionner tout ce qui entoure notre nain pour l'éffacer (ou le travailler).
Il éxiste plusieurs techniques pour le faire, plus ou moins simples, avec différents outils (il y en a même un spécialement pour ça maintenant).
Là je vais employer 2 outils basiques : la baguette magique et le lasso.
On pourrait aussi prendre la gomme et effacer tout bêtement mais bon ça serait long...

Commencez par faire un zoom sur votre image.

Puis sélectionnez la baguette magique et réglez-la comme ci-contre.

Cliquez sur le fond violet sombre et hop il est sélectionné !
Magique hein ?

Vous voulez connaitre le secret ?
Lorsque vous avez cliqué dans le fond, la couleur de l'endroit où vous étiez a servi de référence au logiciel qui a cherché les couleurs les plus proches avec une marge de 15% (Tolérance).
C'est à dire tous les violets un peu plus clairs et un peu plus foncés situés à côté de votre clic (pixels contigus).
Si vous voulez sélectionner plusieurs endroits de l'image il suffit de laisser la touche Maj enfoncée et de cliquer ailleurs. Votre première sélection et la nouvelle se fusionneront.
Vous pouvez le faire autant de fois que vous voulez, annuler avec ctrl Z, changer les critères (tolérance, etc).






Bon maintenant il va falloir s'occuper des bottes...
Avec la baguette magique ?
A votre avis ?
Si vous avez lut au-dessus et si vous regardez l'image vous pouvez trouver pourquoi la baguette n'a aucune utilité ici...



Alors ? Pourquoi ?
(Moi chiante ? naaaaannnn...)


La réponse est : les bottes sont dans les mêmes couleurs que le socle, donc si on utilise la baguette les deux seront sélectionnés.

On va donc utiliser un autre outil : le lasso
(juste à gauche de la baguette magique).

Le lasso est comme l'outil de selection rectangle sauf que là on peut faire ce qu'on veut comme forme. C'est comme un crayon.
Le seul impératif est de fermer votre sélection sinon le point de départ et le point de relache seront reliés par une belle ligne droite.

ET dans notre cas de bien garder la touche MAJ enfoncée pour fusionner avec la selection de la baguette.
(Oui, vous êtes bon pour la refaire, gniark ! )

Dessinez le contour de la cape qui pend (en commençant un peu à l'interieur de votre premiere selection) et des bottes.

Puis englobez ensuite les cailloux et le sol en faisant un grand tour par la droite en dehors de l'image pour revenir a côté de votre point de départ dans votre selection à la baguette.

Relachez.





Vous devriez obtenir celà.

Tout comme la baguette, vous pouvez annuler avec ctrl Z.

Ou le faire par petits bouts en laissant la touche maj enfoncée.














Et maintenant on efface ce qui est selectionné.
Touche "retour arrière"
Pas mal hein ?

Sauf qu'en fait j'ai feinté un peu là.
J'ai "flouté" les bords pour que ça soit plus doux.

Menu Selection > Modifier > Contracter (1 pixel)
Menu Selection > Intervertir (la zone non selectionnée devient celle selectionnée)
Menu Filtre > Atténuation > Flou gaussien (1)






Maintenant on va recadrer encore l'image pour qu'elle soit la plus petite possible et la mettre à la bonne taille
(Si vous avez fait la manip précédente, intervertissez encore la selection pour reprendre la main sur le nain).

Menu Image > Recadrer
Et hop !
Notre nain touche les bords.
Mais il est trop grand (si si c'est possible un nain trop grand)

Menu Image > Taille de l'image
Une skin doit mesurer 64 x 64 pixels.
Pour se simplifier la vie, on change juste la mesure la plus longue (ici la hauteur 189) et on met 64 à la place.
Si "Conserver les proportions" est coché la largeur suivra automatiquement.


















Il ne nous reste plus qu'a enregistrer dans le bon format.
Qui est ?
Y'en a qui savent ?
Non ? Oui ?

Bon, je vous livre 2 copies d'écran.
Regardez-les bien. On se retrouve après.






















A première vue, on va prendre le .gif, il est léger et ça parait pas mal.
C'est vrai que comme ça, en tout petit et sur un fond gris blanc ça passe bien.


Mais si on zoom sur les bottes voila ce qu'on obtient :




























Pas top top hein ?

Ya de beaux pixels qui, croyez-moi sur parole, seront très laids ensuite dans la carte (en fin moi je trouve ça laid...)

le gif
Vous voyez le contour blanc du plus bel effet ?





le png
(Sous cette daube de IE, la transparence du png ne passe pas...)





Donc on fait un Menu Fichier > Enregistrer une copie optimisée en .png 24 bits.
Vala C'est fini !
Et oui déjà

Il ne vous reste plus qu'a envoyer votre oeuvre à Dieu.





A noter que pour ©Smiles War il faut prendre le .png 8 bits qui a les mêmes défauts que le gif ici, mais c'est le type d'images traitées par la librairie PHP qui génère la carte.