Créer un Skin, premiers pas

Un article de XMIX.

(Différences entre les versions)
Jump to: navigation, search
Version du 3 mars 2008 à 22:48
Loic (Discuter | contribs)
(Principe)
← Différence précédente
Version du 3 mars 2008 à 23:00
Loic (Discuter | contribs)
(Principe)
Différence suivante →
Ligne 9: Ligne 9:
Avec XMIX, la création de skin est extremement 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. Avec XMIX, la création de skin est extremement 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.
-Il s'agit avant tout d'imaginer l'interface que vous souhaitez réaliser (en long, en large, bord arrondis, zones transparentes, ...). A partir de , il va s'agir de: +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 à peut-pres ce que nous voulons faire, il va s'agir de:
#créer le fond de chaque fenêtre #créer le fond de chaque fenêtre
#associer des images aux composants (boutons, slidebar et autres) des fenetres #associer des images aux composants (boutons, slidebar et autres) des fenetres

Version du 3 mars 2008 à 23:00

Revenir

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

Page en cours de création

Sommaire

Principe

Avec XMIX, la création de skin est extremement 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.

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 à peut-pres ce que nous voulons faire, il va s'agir de:

  1. créer le fond de chaque fenêtre
  2. associer des images aux composants (boutons, slidebar et autres) des fenetres
  3. ajuster la positions des composants


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

Pré-requis

  • Un logiciel d'édition d'images : Gimp, Photoshop, paint, ...
  • Quelques d'icônes et images (à moins que vous n'envisagiez de tout dessiner)

Créer le fond des fenêtres

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

Définir les bordures, couleur de transparences et autres paramètres.

Créer les icones des composants

Il s'agit maintenant d'associer des images aux différents composants de l'interface

Finitions

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:

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