07 Création d'une icone plugin - rjullien/Jeedom-Plugins-Extra GitHub Wiki
Voici un tutoriel pour créer une icône pour votre plugin au standard de la Team.
On utilisera :
- Le logiciel paint.net
- L'icone template
- Un pack d'icône de référence (pensez à cloner le dépot template pour y avoir accès facilement)
Installation paint.net
Installer le logiciel paint.net en utilisant le lien ci-dessus et en choisissant les options par défaut.
Préparation icône
- Choisissez une icône correspondante à votre plugin dans le pack donné ci-dessus ou une icone/image glanner sur le web.
Si vous avez choisit une icone de pack
- Ouvrez la dans paint.net
- Faites :
CTRL+R
et saisissez 310 en taille hauteur et largeur
- Faites :
CTRL+MAJ+Z
et saisissez 0.80 en zoom
- On obtient ca :
- Copiez le resultat :
CTRL+A
puisCTRL+C
- Ouvrez l'icône template :
- Sélectionnez le calque "Icone Blanche" et faites
CTRL+V
- Sélectionnez le calque "Icone Noire" et faites
CTRL+V
- Déplacer l'icone légèrement en faisant :
CTRL+A
puisM
puis4 fois la fleche de droite
et4 fois le fleche du bas
-
Point important pour créer cet effet d'ombre le calque "Icone Noire" à une opacité a 60 (voir ses propriétés par clic-droit)
-
Sélectionnez le calque "Icone Blanche" et faites
CTRL+A
puisCTRL+MAJ+I
- Sélectionnez le **calque ** "Fond de la Team" et capturez la couleur en faisait
CTRL+A
puisK
et cliquez sur l'image, la couleur est capturée en haut a droite :
- Sélectionnez le **calque ** "Titre plugin", faites
CTRL+A
puis 'T'. - En haut a droite de la menu de paint.net choisissez la police ARIAL BLACK et une taille de 28
- Cliquez n'importe où dans l'image et tapez le nom de votre plugin, vous ne voyez rien c'est normal.
- Une petite icône de selection est pourtant visible à la fin de votre texte :
- Cliquez-maintenez la et déplacer le texte en bas centré et a ras le bord bas -1 pixel:
-
Sauvegardez votre projet en l'appelant xxx_icon.pdn (xxx remplacé par le nom de votre plugin et choissiez format pdn qui garde les calques)
-
Sauvegardez ensuite votre icone en l'appelant xxx_icon.png (xxx remplacé par le nom de votre plugin et choissiez format png). Il vous sera demandé "d'aplatir" l'image, repondez oui.
Si vous avez choisit une image
Difficle de faire un tuto, le plus simple étant de faire en sorte d'avoir une image :
- Qui fait 310x310
- Qui occupe 80% de cette taille
- Qui est détouré pour avoir cette effet flat
- Qui est monochome noir
Ensuite suivez le tuto du paragraphe précedent
Où met-on cette icône ?
L'icône crée sera placer aux emplacement suivant de votre plugin :
- /docs/images/xxx_icon.png
- /plugin_info/xxx_icon.png
Le projet de l'icône, afin de pouvoir la modifier sera placer :
- /docs/images/xxx_icon.pdn