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.pnghttp://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 ;) |
parfait merci MasterCloud
|
06h00 |
Powered by vBulletin® Version 3.8.11 - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Version française #21 par l'association vBulletin francophone
CNIL N°834125