Créer un Skin, premiers pas

Un article de XMIX.

Version du 7 mars 2008 à 13:00 Loic (Discuter | contribs) (→Hellow world, un premier skin) ← Différence précédente		Version du 7 mars 2008 à 13:02 Loic (Discuter | contribs) (→Hellow world, un premier skin) Différence suivante →
Ligne 51:		Ligne 51:
	| Définir un gradient || [[Image:05_skinbox_editor_gradient02.PNG|center]]		| Définir un gradient || [[Image:05_skinbox_editor_gradient02.PNG|center]]
	|-		|-
-	| Ajouter un cadre || [[Image:06_skinbox_editor_cadre02.PNG|center]]	+	| Ajouter un cadre || [[Image:06_skinbox_editor_cadre03.PNG|center]]
	|-		|-
	| Cela donne || [[Image:07_skin_editor_skinmodif01.PNG|center]]		| Cela donne || [[Image:07_skin_editor_skinmodif01.PNG|center]]

---

Version du 7 mars 2008 à 13:02

← Revenir

Ce tutoriel est un guide pour la création de Skin. Aprés avoir présenté les grands principes, un petit exemple sera étudié pas à pas.

Page en cours de création

Principe

Avec XMIX, la création de skin est extrêmement simple grâce à son éditeur intégré. Quelques minutes suffisent pour créer un skin de base. Intéressé ? avant de se lancer voyons d'abord les grands principes.

La représentation graphique de chaque composant visuel de l'interface XMIX peut être redéfinie.

Il s'agit avant tout d'imaginer l'interface que vous souhaitez réaliser, au moins dans ses grandes lignes (forme, zones transparentes, bordure). Il est quasimment possible de tout faire, en effet le fond d'une fenetre peut être définit avec une image, ce qui laisse une liberté totale. De plus, des fonctions prédéfinie permettent de dessiner des bordures, des coins arrondis et autre.

Une fois que nous savons dans les grandes lignes ce que nous voulons faire, il va s'agir de:

• Créer le fond de chaque fenêtre.

Deux possibilités, soit utiliser une couleur unie ou un dégradé, soit utiliser une image. Créer une image pour le fond et les boutons (grâce à une recherche sur le web, une capture écran des logiciels qui ont un bon look ou bien grâce à des logiciels

• Associer des images aux composants (boutons, slidebar et autres) des fenetres
• Ajuster la positions des composants
• Finitions esthétiques

Remarque: il peut être pratique de partir d'un skin existant qui ressemble à notre futur skin

Avant de se lancer, les éléments pourront vous être utiles (non nécessaire pour ce tuto) :

• Un logiciel d'édition d'images : Gimp, Photoshop, paint, ...
• Quelques d'icônes et images (à moins que vous n'envisagiez de tout dessiner). Pour cela, visitez la Collection d'images pour les Skins.

Voila pour la théorie, maintenant un peu de pratique.

Hellow world, un premier skin

Objectif : faire notre premier skin

Actions	Aperçu
Nous allons partir du skin "SmallShip"
Lancer l'éditeur (Control+E)
Choisir une fenêtre redimenssionable
Définir un gradient
Ajouter un cadre
Cela donne
Changeons la taille de la fenetre
Ajoutons l'écran
Positionnons l'écran
Cela donne

Bravo !

Boite à outils

Une collection d'images et de modèles standards est en cours de création afin de faciliter la création des skins:

• Collection d'images pour les Skins

Sur le forum des contributions, vous trouverez plusieurs Skins qui pourront servir de base afin de réaliser vos propre skin.