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

• le remplir de noir ardoise disons 242424

• 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)

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

• 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.

• 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.

• 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.

• 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).

• 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.

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

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

• 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

• (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.

• 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:

• 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.

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!