Précédent   Forums CustomXP > Interface > Skins & Themes
Skins & Themes
Msstyle, Boot screen Logon screen & skins divers... ce forum est dedie a tous ces aspects de la customization

Réponse
#1
Vieux 15/10/2008, 17h59
Guide pour faire un Skin pour TT
MasterCloud
All Killer No Filler
Avatar de MasterCloud
Premium
Date d'inscription : avril 2006
Messages : 642
Envoyer un message via MSN à MasterCloud
MasterCloud est déconnecté
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


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 :


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 :

Bueurk ! C'est moche ! Mais ça va très bien nous expliquer ;)


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 !


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




Software is like sex... It's better when it's free. (Linus Torvalds)
Réponse avec citation Haut de page
#2
Vieux 15/10/2008, 19h17
*Betty BoOp*
JoKeR
Avatar de *Betty BoOp*
Premium
Date d'inscription : janvier 2008
Messages : 578
*Betty BoOp* est déconnecté
parfait merci MasterCloud

Réponse avec citation Haut de page
Réponse
Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s))
 
Outils de la discussion Rechercher
Rechercher:

Recherche avancée
Modes d'affichage



Navigation rapide
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages
Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non

Règles du forum

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