Forum Génération mobiles
Le Staff et tous les membres de Génération mobiles sont heureux de vous accueillir.

Toutefois, afin de pouvoir en profiter pleinement, il est fortement conseillé de vous inscrire ou de vous identifier

[TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Voir le sujet précédent Voir le sujet suivant Aller en bas

[TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Message par Primokorn le Mar 24 Sep 2013 - 9:34

Modifier correctement les fichiers .9.png

TOUTE COPIE PARTIELLE OU TOTALE EST INTERDITE SANS AUTORISATION

Description

Ces fichiers ont été un des points noirs que j'avais rencontré pour créer mon 1er thème. J'ai récemment trouvé un guide très bien construit qui expliqe comment les modifier alors, le voici sur Genmob. smile 

Les fichiers .9.png sont des fichiers .png classiques mais avec une bordure en plus de 1 pixel tout autour. Cette bordure est transparence (le format png permet la transparence) mais elle contient quelques pixels noirs à 100%. C'est utilisé pour l'étirement des images et le texte. Nous avons sans doute déjà remarqué que parfois, les menus Android changent de forme selon ce qu'ils contiennent. Une pop-up sera petite s'il n'y a pas beaucoup de texte mais peut être très grande s'il y en a beaucoup. C'est à ce niveau que les fichiers .9.png rentrent en jeu.

Dans le SDK Android, on trouve un outil pour aider à la création de ces fichiers .9.png. Il est situé dans le dossier /tools/draw9patch.bat.

draw9patch.bat

Exécutez ce fichier pour ouvrir l'outil où vous devez importer une image. Celui-ci sera utilisé pour convertir un fichier png classique en un .9.png que vous pourrez utiliser avec votre fichier apk décompilé. (Note : pour voir les fichiers .9.png vous devez impérativement décompiler votre apk sinon vous ne les verrez pas et vous aurez obligatoirement des soucis par la suite !).
Draw9patch va ajouter la bordure transparente et vous permettra de placer les pixels noirs tout en voyant les changements en temps réel.

Prenons cette image ci-dessous à titre d'exemple :
[Vous devez être inscrit et connecté pour voir cette image]
Alors, on la déplace dans l'application Draw9patch et on met les pixels noirs (#000000) autour d'elle pour avoir un résultat parfait. Voilà ce qu'on obtient :
[Vous devez être inscrit et connecté pour voir cette image]
Les bordures à droite et en bas sont utilisées pour le texte. Vous devez mettre une ligne noire où vous voulez que le texte soit écrit. Les bordures du haut et de la gauche sont utilisées pour les instructions d'étirement. L'image est étirée où j'ai placé les pixels noirs.



Voyons un autre cas avec cette image :
[Vous devez être inscrit et connecté pour voir cette image]
Cette fois, nous avons un dégradé de couleur. Donc si on étire seulement un pixel, le dégradé sera affreux. Je ne veux pas que les coins soient étirés en fait car le rendu ne sera pas terrible. Voilà comment j'ai procédé du coup :
[Vous devez être inscrit et connecté pour voir cette image]
Comme vous pouvez le voir, le rendu est bien, même après étirement de l'image.


Bon allez, un dernier exemple :
[Vous devez être inscrit et connecté pour voir cette image]
Cette fois, je ne veux pas que le texte en filigrane soit étiré. Je veux aussi qu'il soit centré dans l'image même si l'image change de forme.
En clair, je ne veux pas ceci :
[Vous devez être inscrit et connecté pour voir cette image]
Voilà donc comment il faut placer les points et bordures :
[Vous devez être inscrit et connecté pour voir cette image]
Et voilà, vous savez maintenant comment utiliser les fichiers .9.png. L'outil Draw9patch permet d'ajouter une bordure au fichier .png et de voir le résultat mais vous pouvez également le faire avec n'importe quel programme de retouche d'images comme Photoshop, Gimp, etc...

Autres infos

[Vous devez être inscrit et connecté pour voir ce lien]
avatar
Primokorn
Expert-Staff

Expert-Staff

Appareil principal : OnePlus 3T 64Go Gunmetal
ROMs : Delighted RR // blu_spark
Appareil secondaire : MicroG // MagiskSU
Messages : 10887

https://primokorn.wordpress.com

Revenir en haut Aller en bas

tutoriel .9.png, modifier, pixels noirs, 1px noir, png étirables

Message par Primokorn le Mar 24 Sep 2013 - 9:34

D'autres infos sur [Vous devez être inscrit et connecté pour voir ce lien]
avatar
Primokorn
Expert-Staff

Expert-Staff

Appareil principal : OnePlus 3T 64Go Gunmetal
ROMs : Delighted RR // blu_spark
Appareil secondaire : MicroG // MagiskSU
Messages : 10887

https://primokorn.wordpress.com

Revenir en haut Aller en bas

Re: [TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Message par bzhmobile le Mar 24 Sep 2013 - 11:02

:merci: , à tester Very Happy
avatar
bzhmobile
VIP

VIP

Appareil principal : HTC ONE M9
ROMs : Leedroid ;)
Appareil secondaire : HTC One Mini2, Stock
: : HTC One m8s s-off

Messages : 38051

Revenir en haut Aller en bas

Re: [TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Message par Invité le Ven 27 Sep 2013 - 18:54

:merci: Primo Wink

Invité
Invité


Revenir en haut Aller en bas

Re: [TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Message par Idaho le Mar 11 Mar 2014 - 12:38

Nickel,
merci à toi !!
avatar
Idaho
Amateur

Amateur

ROMs : Ma custom NC9
: : Viper3D

Messages : 76

Revenir en haut Aller en bas

Re: [TUTO] Comment modifier correctement les fichiers .9.png [24.09.2013]

Message par Primokorn le Mar 11 Mar 2014 - 16:19

Pas de quoi Wink
avatar
Primokorn
Expert-Staff

Expert-Staff

Appareil principal : OnePlus 3T 64Go Gunmetal
ROMs : Delighted RR // blu_spark
Appareil secondaire : MicroG // MagiskSU
Messages : 10887

https://primokorn.wordpress.com

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum