Comment créer ses propres icônes pour sa domotique?4 minute(s) de lecture

Il semble que depuis fin juillet, en plus d’être “iconophages”, certains d’entre vous réclament un tutoriel afin de savoir comment faire. Dans ce tuto, vous allez pouvoir suivre pas à pas la démarche. J’ai essayé d’être le pcllus didactique possible car c’est ce dont j’ai besoin en électricité ou en programmation et pense donc qu’à l’inverse ce sera le cas pour certain d’entre vous.

Pour les plus fainéant d’entre vous (si ! si ! j’en vois au fond de la salle qui en ont déjà marre et sont partis se chercher une bière), le fichier est dispo tout prêt a la fin du tuto en psd. Ce psd est fait sous photoshop cs5 et le fichier est en 1024. Les possesseurs d’Impérihome y trouveront donc leur compte.

Photoshop fonctionne par systèmes de calque et pour simplifier, celui qui est au dessus prend le pas sur le dessous

C’est parti!

  • Commencez par créer un calque de 1024×1024

PrtScr capture_01

  • le remplir de noir ardoise disons 242424

PrtScr capture_02

  • Prendre un rectangle de sélection (raccourci M) auquel on applique un contour de 50px (nous sommes en 1024, il faudrait prendre 5 en 128 a peu près)

PrtScr capture_03

  • Selection/intervetir (maj+ctrl+i) et améliorez le contour avec un contraste de 100%

PrtScr capture_04

  • vous vous retrouvez avec les angles sélectionnés que vous supprimez. et désélectionnez le tout (ctrl+D)
    Nous voila avec notre fond. On se le laisse de coté pour plus tard et on le renomme avant pour s’y retrouver. Pas comme moi :p.

PrtScr capture_05

  • Clic droit et dupliquer le calque “fond”. clique droit sur celui ci et option de fusion/incrustation de couleur et choisir le rouge. Laissons le aussi de coté le temps de l’étape suivante.

PrtScr capture_06

  • Nouveau calque (ctrl+maj+N) votre règle doit être affichée et à partir de celle de gauche glissez déposez une ligne bleu au milieu de l’icone. Ecrire votre texte en bas avec une police de 200. Celle ci est bignoodletitling facilement trouvable (police=font en anglais). N’oubliez pas de l’écrire en selectionnant la justification milieu. Vous avez dès lors une idée de la hauteur du texte.

PrtScr capture_07

  • Revenez à notre notre calque rouge et avec l’outil M, mais avec un contour à 0 cette fois ci. Sélectionnez et descendez jusqu’à laisser la même marge au dessus du texte que ce que nous avons en dessous et supprimez le contenu (supp).

PrtScr capture_08

  • Sur le même principe que le calque rouge, créez un blanc que l’on supprimera aussi au niveau du rouge. Lui appliquer une opacité de 25% (que j’ai oublié de photographier). clique droit, option de fusion et faire comme la photo ci dessous.

PrtScr capture_11

  • Sélectionnez le fond, et appliquer la méthode ci dessous

PrtScr capture_12a

  • Appliquez une fois de plus les réglages ci dessous.

PrtScr capture_12b

  • Nous arrivons a la forme ovoïde très iOs. J’ai choisi de lui garder sa forme iOs mais rien ne vous empêche de pencher comme les icônes que je vous fais habituellement.
    • (1) Sélectionnez votre fond.
    • (2) Choisissez l’outil cercle et à partir de la ligne bleue, laissez appuyé sur la touche alt afin de garder une symétrie parfaite pour tirer sur votre oeuf qui
    • (3) dépassera de la zone de travail. Normal!
    • (4) créez un calque

PrtScr capture_13

  • (1) clique droit et masque d’écrêtage. cette fonctionalité est géniale. elle permet à l’image du dessus de s’incruster sur celle du dessous. Vous pouvez du coup remplir de blanc (2) et (3) sans avoir à jouer de la gomme. Génial non ?
  • Enfin, laissez une opacité a 25% environ.

PrtScr capture_14

  • Courage on arrive a la fin. vous avez presque fini l’écrin, passons a votre bijou: l’image. Importez là (fichier ouvrir) et elle va  se retrouver dans un onglet a côté.
  • Suivez les instructions:

PrtScr capture_15

  • Insérez-la comme ci dessous. Elle s’écrêtera automatiquement faites un test avec un image plus grande. Vous verrez c’est excellent. C’est comme cela par exemple que j’ai crée ma terrasse ou ma piscine sans avoir à jouer de la gomme.

PrtScr capture_16

Les finitions et conseils:

Reprennez le calque rouge d’origine que l’on insère dans un groupe que vous créez et appelez-le “fonds de texte”.
Dupliquez et déclinez ce rouge dans le nombre de couleurs voulues. Double cliquez sur l’incrustation couleur pour changer la mienne. Renommez la bien en la dupliquant puis, clique droit/propriété, mettez lui la bonne couleur. Pas essentiel mais cela permet de vite la voir.
Pour les textes trop grands, je garde la même taille de police mais réduit à 100 au lieu de 110 d’espacement. Je préfère si cela n’est pas assez, raccourcir le nom.

Servez vous de l’œil à côté du masque pour le faire apparaître ou pas. N’oubliez pas, je le rappelle, que celui dessus avec l’oeil sera visible devant celui de dessous.

Sauvegardez toujours vos psd.

Gardez une uniformité entre vos icones si possible. Une maison pour la présence, sera la meme si possible que celle de l’alarme et surtout… A-MU-SEZ VOUS.

C’est de la création comme lorsque vous coloriez petit.

Et le PSD me direz-vous?  Pour le récupérer il vous suffit de cliquer sur l’icône ci-dessous!

illustration_article

7 Comments

  1. […] Il semble que depuis fin juillet, en plus d'être "iconophages", certains d'entre vous réclament un tutoriel afin de savoir comment faire. Dans ce tuto, vous allez pouvoir suivre pas a pas la démarche. J'ai essayé d'être le plus didactique possible car c'est ce dont j'ai besoin en électricité ou en programmation et pense donc qu'à l'inverse ce sera le cas pour certain d'entre vous. Pour les plus fainéant d'entre vous (si ! si ! j'en vois au fond de la salle qui en ont déjà marre et sont partis se chercher une bière), le fichier est dispo tout prêt a la fin du tuto en psd. Ce psd est fait sous photoshop cs5 et le fichier est en 1024. Les possesseurs d'Impérihome y trouveront donc leur compte.  […]

    vendredi 3 octobre 2014
    Reply
  2. Vincent said:

    Je ne suis pas sûr que Photoshop aime les cLAques…mais une chose est sur il fonctionne avec les cALques.
    Merci pour ce très bon tuto !

    vendredi 3 octobre 2014
    Reply
    • Hervé Hervé said:

      :-)))) Merci Vincent c’est corrigé!

      samedi 4 octobre 2014
      Reply
  3. […] Il semble que depuis fin juillet, en plus d'être "iconophages", certains d'entre vous réclament un tutoriel afin de savoir comment faire. Dans ce tuto, vous allez pouvoir suivre pas a pas la démarche. J'ai essayé d'être le plus didactique possible car c'est ce dont j'ai besoin en électricité ou en programmation et pense donc qu'à l'inverse ce sera le cas pour certain d'entre vous.Pour les plus fainéant d'entre vous (si ! si ! j'en vois au fond de la salle qui en ont déjà marre et sont partis se chercher une bière), le fichier est dispo tout prêt a la fin du tuto en psd. Ce psd est fait sous photoshop cs5 et le fichier est en 1024. Les possesseurs d'Impérihome y trouveront donc leur compte.  […]

    mardi 7 octobre 2014
    Reply
  4. […] Il semble que depuis fin juillet, en plus d'être "iconophages", certains d'entre vous réclament un tutoriel afin de savoir comment faire. Dans ce tuto, vous allez pouvoir suivre pas a pas la démarche.  […]

    mardi 7 octobre 2014
    Reply
    • Stéphane said:

      Bonjour, excellent tuto, cependant une question, ou trouver les images utilisées dans les différents icônes proposés dans la bibliothèque ? car malgré mes recherches avec google impossible de les trouver. Un site en particulier ?
      Merci d’avance.

      mardi 10 mars 2015
      Reply
  5. Eric said:

    Bonjour,

    Je n’arrive pas obtenir la transparence du PNG (malgré un “enregistrer pour le web” avec la coche “Transparence”). Ça marche sur le portail eedomus mais pas sur l’appli Android.

    Une idée ?

    dimanche 3 mai 2015
    Reply

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Prouvez que vous êtes humain: * Time limit is exhausted. Please reload CAPTCHA.