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 puis CTRL+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 puis M puis 4 fois la fleche de droite et 4 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 puis CTRL+MAJ+I

  • Sélectionnez le **calque ** "Fond de la Team" et capturez la couleur en faisait CTRL+A puis K 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

FAQ

Couleur de la team ?