Création graphique d’un bouton avec 2 états dans un logiciel de création (ici : Photoshop).

 

Découvrez SmartHome Europe !

022 creationbouton

 

Pour réaliser un bouton il faut créer au moins 2 états donc, 2 images :

– 1 image du bouton à l’état normal
– 1 image du bouton lorsqu’il est appuyé

C’est deux images s’appelleront respectivement : « xxx-norm.png » et « xxx-pressed.png ». Mettez le nom que vous voulez à la place de « xxx« .
Il est important de bien nommé vos images de cette manière. HSTouch Designer les reconnaitra automatiquement et elles seront directement associées

 

Passons aux choses sérieuses et ouvrons un nouveau fichier Photoshop.
Ici on va créer un bouton de 100×100 px et RVB 72dpi (résolution pour les écrans)

  • Ouvrez Photoshop
  • Fichier > Nouveau

000 creation fichier

 

  • Créer une nouvelle forme (ici un rond)

001 creation forme

 

  • Ajoutez un dégradé et un contour sur notre nouvelle forme.
    « Double Clic » sur le calque du cercle.

003 degrade forme

002 degrade forme


  • Création d’une nouvelle forme pour créer un effet de reflet sur le bouton

004 forme blanche


– Création d’un masque de fusion, pour donner l’effet de dégradé

005 mask fusion


Création du dégradé (à vous de juger pour trouver le meilleur effet)

006 degrade reflet


  • Nous allons maintenant supprimer les parties qui dépassent du bouton

– Sélectionner la forme de votre bouton en faisant un « CTRL + Clic » sur le calque concerné. (ici le calque appelé « rond »)

007 selection rond

 

– Puis inverser la sélection, afin de ne sélectionner que la partie extérieure.

Raccourcis « CTRL + MAJ + I »
ou Menu « Sélection » et « Intervertir« 

008 inverser selection


  • Enfin, faîte un « clic droit » sur le calque du reflet et cliquez sur « Convertir en objet dynamique »

009 obj dynamik

 

– Faites à nouveau un « clic droit » sur le calque du reflet et cliquer sur « Pixelliser le calque »

 

– Et supprimez l’excédent qui dépasse de votre bouton, pour enfin obtenir un joli reflet. Donnant ainsi un côté un peu plus sympa a votre bouton.

Voici le résultat :

011 sup selection

 

  • Ensuite importez  la forme de votre choix (ici une illustration d’ampoule) disponible ici

012 ajout forme


– Ajout d’une petite ombre portée:

014 ombre portee

013 ombre portee


  • Nous allons dupliquer le calque « rond » pour créer un autre bouton qui sera le bouton à l’état « appuyé ».

015 copies rond


– Créer ensuite sur ce nouveau calque une petite lueur interne qui nous donnera plus tard la sensation que le bouton est sélectionné

017 lueur interne

016 lueur interne


  • Il ne vous reste plus qu’à enregistrer vos deux images.

ATTENTION :
N’oubliez pas !
Il est important de bien nommé vos images à l’enregistrement.
Ces deux images s’appelleront respectivement : « xxx-norm.png » et « xxx-pressed.png »
Ainsi dans HSTouch, elles seront directement associées.

 

Veillez à enregistrer vos éléments graphiques dans le dossier SKIN. Celui-ci se trouve dans « Mes Documents > HSTouch > SKIN »
Ensuite choisissez  le dossier que vous voulez, ex : « Default ». Puis enregistrer vos images dans le dossier « boutons »

Lancer HSTouch Designer

hstouch designer


Vous pouvez à présent retrouver votre bouton dans le dossier « SKIN ». Vous remarquerez aussi que les 2 images ont directement été associées

021 elementshs

 

 

 


Partagez cet article !

A propos de l'auteur

Graphiste chez Domadoo, la domotique et les nouvelles technologies me passionnent également, ce qui me mène à faire des tests de temps en temps aussi.

Laisser une réponse