Forums CustomXP - Guide pour faire un Skin pour TT

Intro' : Qu'est-ce que « True Transparency » ? Eh bien, TT (Je vais l’appeler TT durant le tutorial, histoire de pas me saouler à taper :P) est un logiciel conçu par Lefreut permettant de modifier « l'habillage » de votre fenetre sous Windows XP et Vista ! Il gere la transparence et les skins (le plus important !) Maintenant, je vais vous apprendre à faire votre skin ! ;) (La classe hein ?)

Commençons par étudier « l'architecture » d'un skin !
On peut y trouver des fichiers images (en format png) et deux fichiers INI (que l'on trouve dans les dossiers Maximized et Normal)
Voici la liste des images : bottom.png, bottom-left.png, bottom-right.png, top.png, top-left.png, top-right.png, left.png, right.png, close-button.png, min-button.png, max-button.png. On peut aussi retrouver les images help-button.png ainsi que close2-button.png (ils sont « optionnels »)
Et oui, vous l'avez devinez, pour faire un skin, il va falloir bouffer de l'image ! :D

Commençons par les boutons !
On va étudier le fichier « INI » pour voir les possibilités que l';on a !
Dans notre cas, on prendra le boutton « close-button », la manipulation étant pareil pour les autres ;)

[ CLOSE-BUTTON ] <-- On dit au logiciel que l'on parle du bouton « close »
PosX= <-- Position du bouton ! Plus la valeur est grande, plus on s'éloigne du côté qui est précisé dans « Position= »
PosY= <-- Position du bouton ! De haut en bas cette fois ;)
Position= <-- Left ou Right.. Je suppose que vous avez compris.. ;)
3State= <-- YES ou NO YES : Normal, Survolé et Cliqué et NO : Normal et Survolé (En faites, avec « NO » le Survolé et le cliqué ne font plus qu'un, donc nous ne mettrons plus que Normal, Survolé, Normal Inactif, Survolé Inactif
http://www.picdo.net/Fichiers/6baec0...d/Exemple1.png

C'est relativement simple, hein ? :P Donc, si vous avez bien compris, si le « 3State » est égal à « NO » on ne doit pas mettre les images 3 et 6 ;) Ce qui donnerait :
http://www.picdo.net/Fichiers/affa14...1/Exemple2.png

Si c'est pas cool ça ! Il suffit donc de mettre à la suite les images qui formeront votre bouton ! Et la manipulation est semblable aussi bien pour close-button que pour max-button et min-button !
Maintenant, on va s'occuper du « top.png » ainsi que de ses compères « top-right.png » et « top-left.png » héhé !
Et bien.. Vous n'allez pas me croire.. mais c'est quasiment pareil ! Yahou ! Sortez le champagne !
Voyons le INI :
[ TOP ]
BorderSize= <-- Taille de la bordure
Position= <-- Left, Right ou Stretched.. Mais.. Kessecé ? T'inquietes pas, je vais t'expliquer ;)
Left ou Right : D'où arrive l';image.. Enfin.. Dur dur d'expliquer.. Je vais le dire, en image !
Soit mon top.png :
http://www.picdo.net/Fichiers/d9eafd...53a379/top.png
Bueurk ! C'est moche ! Mais ça va très bien nous expliquer ;)
http://www.picdo.net/Fichiers/2f3e43...xempleLeft.png http://www.picdo.net/Fichiers/8d3f52...empleRight.png
http://www.picdo.net/Fichiers/e53e5a...eStretched.png
Et tout ça, avec le même top.png ! Yahou ! ;)

On passe au « top-left.png » et « top-right.png » !
Et bien, c'est simple, c';est composé de deux images ! Toujours pareil, au dessus l’actif et en dessous l'inactif ! C'est cool hein ?!
Mais rappellez vous bien qu'il faut que le top coordonne avec les deux parties ! Sinon ça fera une « séparation » toute moche !

http://www.picdo.net/Fichiers/2695ba...4/top-left.png http://www.picdo.net/Fichiers/3fcf4c...2879ee/top.png http://www.picdo.net/Fichiers/c9d85d.../top-right.png
Dans cette exemple, on voit très bien que le top se continue très bien ;)

Et.. Hop ! Le « Left.png » et « Right.png » !
C'est quoi ? C'est les contours qui se trouvent à gauche et à droite de la fenetre ;)
L'INI :

[ RIGHT ] ou [ LEFT ]
Position= <-- Top ou Bottom ou Stretched.. Je pense que vous avez compris ! Pour le « Top » l'image viens d'en haut et pour le « Bottom » l'image vient d'en bas ;)

Le « Bottom.png », « bottom-left.png » et « bottom-right.png ».. On en fait quoi de ces trucs ?
Et bien, c'est EXACTEMENT pareil que le Top ;) Sauf que ça se trouve en dessous (au bas) de la fenetre et que le bottom-left/-right.png sont les raccords entre bottom.png, left.png et right.png ! C'est simple, hein ? :D
Le titre et l'icône..
Maintenant, on ne va parler que d’INI ! :D
On commence par l'icône :
[ ICON ]
Size= <-- Taille de l'icône.. En général, 16 ;)
PosX= <-- Vous avez compris je suppose ? C'est pareil que pour les boutons ;)
PosY= <-- Comme au dessus !
Position= <-- Je me repete ?!
Et le texte.. ;)

[ CAPTION ]
FontName= <-- Police utilisée.. Tahoma, Verdana, Comic Sans MS, etc
FontSize= <-- Taille de la police ! Faite attention à ne pas mettre trop grand ou trop petit
HorizontalAlignment= <-- Left, Right ou Center.. Tu as compris ? C'est un peu le « align
VerticalAlignment= <--Top ou Bottom
PosX= <-- Je l'ai expliqué au dessus !
PosY= <-- Pareil :P
Color= <-- Haa ! Là, c'est la couleur ! Le plus interessant, non ? :D Il faut écrire sous ce format : valeur de r,valeur de g, valeur de b, valeur d’Alpha ! Mais.. C'est compliqué ton truc ! Bon, on va faire simple ! :P On récupere une couleur dans Photoshop/Gimp.. #d73ec7 ! La valeur de r : 215, de g : 62 et de b : 199 ! Ce qui nous donne donc 215,62,199 ! Et ouais ! Ensuite, la valeur Alpha, c'est la valeur d'opacité ! Pour faire simple, si c';est 255, on le vera, si c'est 0, on ne vera rien ! Si c'est 100, on le vera qu'un peu ;)
GlowColor= <-- Exactement pareil qu'au dessus, mais pour la lueur autour du texte ;) Si vous n'en voulez pas, mettez « 0 » à la valeur Alpha !

Bon.. Eh bien, j'ai fini ce tutorial, j'espère qu'il aura été utile ! Si vous avez un probleme, demandez sur le forum !

PS : Si vous trouvez des photeu.. ;)
PS² : Pour les intérréssés, j'ai fait un ".doc" :)
PS³ : Si Lefreut trouve des choses à redire, qu'il édite directement ;)