ImperiHome – Personnalisation de votre interface avec Photoshop

J’ai découvert il y a peu l’application domotique Androïd « ImperiHome » et son interface. Je la prend vraiment comme une aubaine lorsque l’on souhaite une interface à son image, sobre ou colorée, compacte ou détaillée. ImperiHome est l’application idéale pour se faire plaisir et jouer de son imagination.

En plus d’être modulable il se trouve qu’elle est très fonctionnelle, compatible avec beaucoup de solution domotique, de l’Eedomus en passant par la zibase ou même l’IPX 800 V3, elle nous offre une vue en liste et une vue en Dashboard. Prise en charge des tagNFC, reconnaissance vocale allant même jusqu’a l’integration de la Smartwatch 2 de Sony.

ImperiHome vous offre deux versions de son application. La version Gratuite et la version Pro :

Version Standard Version Pro
Version Standard Version Pro
Prix Gratuit 4,90 Euros
Nombre de connecteurs actifs simultanément 3 Illimité
Vue Liste
Vue Dashboard
Nombre de pages en vue Dashboard 2 Illimité
Formats de page disponibles 2 Tous
Reconnaissance vocale
Tags NFC
Personnalisation
Graphiques
Raccourcis Android
Intégration Sony Smartwatch 2
Import/Export de configuration
Intégration
Get it on Google Play Get it on Google Play

 

Rentrons maintenant dans le coeur du sujet : le design.

Introduction

Pour commencer je vais préciser que je travaille avec photoshop CC 2014, mais pas d’inquiétude, depuis quelque temps photoshop CS2 est en téléchargement légal (voici le lien : PHOTOSHOP CS2, pour les personnes qui n’ont pas de compte Adobe, il suffira juste de vous enregistrer et vous aurez accès à cette page.)

Une fois l’application installée, je vous encourage à prendre un papier et un crayon, faire la liste de vos modules, de vos applications importantes, de ce que vous aimez faire sur votre tablette (voir les actualités par exemple ou aller sur l’appli G+ ou Facebook) et indiquez bien le nombre de pièces concernées et présentes sur l’appli. Personnellement je vous conseille de créer une page d’accueil comme celle que j’avais posté précédemment sur Google+ et que je vous mets juste en dessous.

Exemple de première page ImperiHome

 

Elle servira de point de depart à toute votre installation. Dans mon exemple j’ai mis la reconnaissance vocale qui m’évite de rentrer dans toute l’application si je sais d’avance ce que je veux. J’ai mis le module café car c’est certainement le module qui fonctionne le plus chez moi. La partie Mail donne accès à l’appli mail de ma tablette. La partie en bas à droite avec Facebook et Twitter me renvoi vers une seconde page où se trouve tous mes icônes réseaux sociaux. Le « bouton » pièces m’amène lui vers une page qui les regroupe toutes.

Pour ce tuto je vais donc vous montrer le pas à pas et les différentes possibilités de créer sa propre interface graphique.

Tablette : Les captures d’écrans

Avant toute chose et en fonction du résultat de votre liste,  je vous conseille de créer les pages (vierges) directement sur l’application, autant de pages que vous le souhaitez. Par la suite une fois la partie Edition finit vous obtiendrez un « patron » de votre future interface. De là rien de bien difficile il suffit de repasser en mode dashboard en validant l’édition et de faire une capture d’écran vide de chaque disposition de page différentes que vous aurez utiliser. Nous nous en serviront tout simplement de patron pour les tailles des éléments afin de ne pas avoir de problème de proportion ou autre.

Screenshot_2014-06-29-19-55-21

 

PHOTOSHOP : Création et réalisation du design

Une fois avoir fait parvenir les images de vos captures d’écran, nous passons à la partie Création et mise en page sur Photoshop.

1ier Etape : Fichier/ouvrir. Et séléctionnez l’image de votre capture d’écran.

TUTO_0026_Calque 9

 


 

Jusque là rien de bien difficile et vous allez voir la suite ne l’est pas plus.

2ieme étape : mise en place des éléments décoratifs. N’oubliez surtout pas que seul le visuel dans les cadres sera affiché. N’hesitez pas à jouer avec ça pour déstructurer votre graphisme.

Pour ma part et pour l’exemple j’ai tout simplement créé un petit dégradé bleu qui partira du bas ET du haut pour cadrer l’appli. Pour se faire, je choisi la couleur bleu puis cliques sur l’outil dégradé.

outil-dégradé

Une fois sélectionné, je me rend dans la partie haute du logiciel et je paramètre : bleu vers transparence.

outil-dégradé2

Je dessine donc sur un calque vierge que j’ai créé en cliquant sur le petit icone en bas à droite  :

nouveau-calque

Voici ce que j’obtiens :

 

 

 

TUTO_0025_Calque 10

 

 


 

3ieme étape : Je fais exactement le même procédé mais dans la partie supérieure du visuel et sur un nouveau calque.

TUTO_0024_Calque 11

 


 

4ieme Etape : je vais mettre un visuel représentant un salon. Pour ce faire, rien de plus simple. Ouvrez le dossier où l’on peut trouver l’image et faite un cliquer-glisser vers la page de travail Photoshop. Photoshop créera un nouveau calque avec votre image et vous proposera de la redimensionner. Essayez à l’aveugle de vous placer au plus proche des limites de la fenêtre où le visuel sera présent.

TUTO_0023_Calque 12


 

 

Etape 5 : Je souhaiterai me servir de la photo comme titre de page afin de m’informer de l’endroit où je me trouve dans l’application. Ici : Salon

Pour se faire je décide de mettre en couleur blanche un dégradé dans la partie inférieure de la photo afin de pouvoir adoucir la photo et y apposer un titre. Bien sur je fais cela sur un nouveau calque que je créé comme pour le dégradé bleu.

TUTO_0022_Calque 13

 


 

Etape 6 :  Je vais rajouter le titre « Salon » en blanc, donc je laisse la couleur blanche. Je clique sur l’outil Texte :

Outil-texte

et je clique sur l’endroit ou j’aimerai apposer le titre, pas de panique si il est plus ou moins décalé, une fois fini vous pourrez le bouger.

 

 

 

TUTO_0021_Calque 14


 

 

Etape 7 : Afin de faire ressortir le site je décide de mettre un petit dégradé au titre. Pour cela rien de bien compliqué, double cliquez sur le calque qui contient le texte, une fenêtre s’ouvrira coché la partie : « ombre porté » vous pouvez si vous le souhaitez changer les paramétres. Une fois que le résultat vous convient cliquez sur « OK » et le tour est joué.

TUTO_0020_Calque 15


 

Etape 8 : Nous pouvons remarquer que le dégradé bleu passe en dessous du visuel « salon ». Pour une cohérence graphique il faudrait le faire passer en dessous. Pour ce faire, cliqueez sur le calque qui contient la photo et maintenez appuyer la touche TAB et cliquez sur le calque du dégradé blanc ainsi que celui du texte.

TUTO_0019_Calque 16


 

Etape 9 : Une fois fait , cliquez sur un des trois calque sélectionnés, peu importe lequel et maintenez le clic tout en glissant le tous vers le bas. Vous verrez apparaître une barre noire dès que vous mettrez le curseur entre deux calques. Cette délimitation noire vous indique où seront placer les calques une fois le clic relâché. Moi je décide de le mettre sous le claque du dégradé haut.

TUTO_0018_Calque 17


 

Etape 10 : Maintenant nous en avons fini avec le visuel du salon, nous allons donc regrouper tous les claques concernés dans un dossier afin de ne plus les bouger individuellement et de les contrôler ensemble. Une fois remis en place les 3 calques seront toujours sélectionnés. Ne cliquez nulle part et appuyez sur : CTRL + G. Les calques disparaîtront pour laisser place à un dossier. Renommez le : SALON.

TUTO_0017_Calque 18

 


 

Etape 11 : Cliquez sur l’oeil qui se trouve à gauche du calque pour cacher le visuel du salon et apposez des visuels et des textes à chaque case en fonction de ce que vous voulez contrôler dans cette partie.

TUTO_0016_Calque 20

Pour l’exemple voici ce que j’ai mis :

Un texte accueil qui me ramènera vers l’accueil de l’appli.

Un icone pour chaque module que je veux gérer : Télé (le logo est celui d’imperiHome), volets,  café

Un icone « virtuel » vers une autre page qui contient une page d’actualité : News

TUTO_0015_Calque 21


 

Etape 12 : Je sélectionne chaque calque comme précédemment, en maintenant la touche TAB appuyée.

TUTO_0014_Calque 22


 

Etape 13 : Faites un dossier : « Titres et icônes » en appuyant sur CTRL + G

TUTO_0013_Calque 23


 

Etape 14 : Pour pouvoir avoir accès à notre capture d’écran, donc à notre base de mise en page je vais devoir cacher temporairement tous nos visuels. Sélectionnez tous les éléments sauf la capture d’écran.

TUTO_0012_Calque 24


 

Etape 15 : Faites un dossier Global en cliquant sur CTRL + G. Vous aurez donc un dossier et un calque contenant la capture d’écran.

TUTO_0011_Calque 25


 

Etape 16 : Renommez le pour ne pas vous y perdre.

TUTO_0010_Calque 26

 


 

Etape 16 : Nous rentrons maintenant dans le vif du sujet. Pour commencer on va cacher le groupe principal en cliquant sur l’œil. On va zoomer sur la partie Salon, donc le cadre supérieur gauche. et nous allons y apposer des repères. Comme vous voyez sur la capture d’écran ci-dessous, sur la partie gauche de ma fenêtre de travail et sur la partie supérieur j’ai une règle que je peux faire apparaître et disparaître en cliquant sur CTRL + R.

Une fois la règle sur votre panneau de travail, cliquez dessus avec votre curseur, et tout en maintenant le clic, faite glisser votre souris vers la partie du visuel. Vous verrez apparaître le repère bleu. Le but est de coller ce repère sur la marque de délimitation de l’image. intérieur ou extérieur peut importe, le plus important serai de s’y tenir pour ne pas avoir quelque pixel de décalage et une image disproportionnée.

Entourez donc votre cadre afin d’avoir tout les repères pour couper le visuel à la taille exacte.

TUTO_0008_Calque 28


 

Etape 17 : Maintenant faites apparaître votre visuel en cliquant sur le groupe général.

TUTO_0007_Calque 29


 

Etape 18 : le groupe n’est pas considéré comme une image mais comme un ensemble de calque. On ne pourra pas par conséquent sélectionner une partie pour l’utiliser. Pour se faire, on va juste sélectionner le calque du groupe et le dupliquer en cliquant sur CRTL + J. Vous verrez apparaître votre groupe avec le nom que vous lui avez donné suivi de « copie »

TUTO_0006_Calque 30


 

Etape 19 : Maintenant nous allons sélectionner le groupe copier, pour le transformer en image nous allons tout simplement appuyer sur les touches : CTRL + E.

Vous verrez le dossier se transformer en une image.

Une fois l’image créée et visible dans le calque concerné nous allons procéder à la sélection de l’image qui nous servira à l’illustration du titre « Salon ». Vous vous souvenez des repères que nous avons mis c’est maintenant qu’ils vont nous être le plus utiles. Cliquez sur l’outil « sélection »

Outil-selection

 

Maintenant vous allez caler l’outil à l’un des angles de votre repère et, tout en maintenant le clic enfoncé, vous allez vous dirigez vers l’angle opposé. Pas de panique si vous vous êtes trompé vous pourrez toujours aller dans le menu : Sélection / Transformer la sélection.

Vous verrez l’Intérêt des repères c’est qu’ils sont magnétisés donc normalement votre sélection épousera parfaitement le rectangle.

Une fois la sélection effectué, assurez vous d’être toujours sur le calque de l’image aplatie précédemment. Puis un raccourci que tout le monde connait : CTRL+C afin de copier cette partie d’image.

Je vous voit venir d’ici, les cadres ont des angles arrondis. Pas de panique, les angles seront rognés.

TUTO_0005_Calque 31


Etape 20 :  L’image est maintenant enregistrée dans le presse papier. Nous allons faire une manipulation très simple, nous allons tout simplement l’isolée. Pour cela dans le menu : Fichier/ nouveau ou CTRL+N

Une fenêtre apparaîtra avec des données, celles ci correspondent tout simplement à l’image conservée dans le presse papier.

Donc faites : OK

TUTO_0004_Calque 32


 

Etape 21 : Vous aurez donc une page vierge, blanche. C’est le moment de faire votre fameux CTRL+V

TUTO_0003_Calque 33

L’image finale apparaît enfin, propre, recadrée.

TUTO_0002_Calque 34

Maintenant nous allons l’enregistrer. Comme il s’agit d’une image qui servira à une application, il n’est pas utile de l’enregistrer en Haute Définition. Moi je recommande un  format PNG24. Pourquoi? si vous faites des images avec une transparence (je mettrai un exemple un peu plus bas), pour garder cette transparence vous devrez obligatoirement l’enregistrer en PNG. De plus l’image sera suffisamment compressé pour ne pas être trop lourde. Donc pour l’enregistrement dans le menu : Fichier/Enregistrer pour le web. Une fois la fenêtre ouverte cliquez sur 4 vignettes au dessus de l’image afin d’avoir un choix de compression. Vérifier également que le type de fichier soit bien un PNG24, Sélectionnez la deuxième image. Donc celle d’en haut à droite, la moins compressée. Pour finir cliquez sur Enregistrer…

TUTO_0001_Calque 35

Donnez lui un nom cohérent afin de vous repérer (Je vous invite à numéroter les cases afin de vous y retrouver)

TUTO_0000_Calque 36

 


 

Etape 22 : Il ne vous reste plus qu’a faire la même choses pour les autres boutons… N’oubliez pas que dans ImperiHome vous pouvez faire disparaître tout logo, toute écriture, donc n’hésitez pas à laisser parler votre imagination et à créer vous même votre propre interface.

Je vais prendre l’exemple du logo « news » qui comme je l’ai expliqué précédemment me ramène sur une prévisualisation d’une page d’actualité web directement sur l’appli.

Comme les étapes précédentes, j’entoure mon futur visuel de repères que je cale à l’extérieur du cadre pour garder la proportion. Puis CTRL+C (toujours sur le calque général où nous avons écrasé l’image.) puis CTRL+N pour ouvrir une nouvelle page.

TUTO_0000_Calque 37

Une fois la page ouverte nous collons le visuel avec un très connu CTRL+V

TUTO_0000_Calque 38

Nous enlevons le calque blanc qui se trouve en dessous de notre image déposée afin de voir apparaître la transparence.

TUTO_0000_Calque 39

 

Puis nous enregistrons pour le web avec le raccourci : CTRL+TAB+ALT+S (Photoshop aime bien que l’on se serve de tous nos doigts pour les raccourci clavier).

N’oubliez pas de vous assurez que vous avez bien sélectionné l’image numéro 2 avec la transparence.

TUTO_0000_Calque 40

 

Puis validez votre enregistrement , mais n’oubliez pas de nommer intelligemment vos calques afin de pouvoir le plus facilement possible les mettre sur l’interface.

TUTO_0000_Calque 41

 

Voici comment je m’y prend pour les nommer. (7 et 8 étant les même. Ainsi que 3 et 4, car je vous rappelle que le logo de la télé est présent dans les logos ImperiHome)

Screenshot_2014-06-29-19-55-21

 


Etape 23 : Une fois tous les visuels enregistrés comme indiqué, nous allons donc les mettre en place sur ImperiHome. (le mieux serai de créer un dossier indépendant) vous remarquerez aussi que j’ai inclu les icônes car pour le volet j’aimerai un retour d’état donc je ne changerai pas le fond, mais uniquement le logo.

TUTO_0000_Calque 42

 


Tablette : Installation des visuels dans ImperiHome

Etape 24 : Passons maintenant sur ImperiHome et sur l’image de présentation de la page « Salon ». Rappelons-nous que nous avions placé le visuel dans la partie la plus grande. Donc nous allons laisser notre doigt appuyer quelques secondes sur cette même case.

Screenshot_2014-06-29-19-55-21


 

Etape 25 : Comme nous ne souhaitons pas d’interaction mais juste une illustration nous allons sélectionner : Texte Simple.

Screenshot_2014-07-15-23-00-07

Nous laissons la partie du texte vide afin de n’avoir rien d’inscrit sur notre image. Appuyez sur « OK » tout simplement.

Screenshot_2014-07-15-23-00-16


 

Etape 26 : Nous ne voyons aucun changement, c’est normal, nous avons juste informer de l’état de notre rectangle (ici aucune action)

Maintenant nous allons appuyer longuement toujours au même endroit. puis cliquer sur « configuration ».

Screenshot_2014-07-15-23-00-30

maintenant nous allons changer le fond en cliquant sur « Modifier l’arrière-plan »

Screenshot_2014-07-15-23-00-35

Un panneau s’affiche nous demandant de préciser le changement de fond. Nous cliquons donc sur « image perso »

Screenshot_2014-07-15-23-00-44

Et nous nous rendons dans notre dossier préalablement copier sur notre tablette. Ici le changement concerne le visuel « salon » donc nous allons le sélectionner.

Screenshot_2014-07-15-23-00-57

 

Et voilà nous obtenons me premier aperçu de notre travail.

Screenshot_2014-07-15-23-41-26

 

Etape 29 : Maintenant attaquons nous a la partie : Télévision qui est liée à un module ON/OFF.

Comme précédemment nous allons laisser les doigts appuyer sur le rectangle puis cliquez sur « configuration ». Une fois la fenêtre ouverte, cliquez sur Appareil et sélectionner le module qui vous intéresse. ici Télévision.

Screenshot_2014-07-15-23-52-50

Maintenant « cliquez » longuement sur le visuel que vous obtenez et nous allons maintenant changer l’arrière plan. Appuyez sur Configuration.

Screenshot_2014-07-15-23-53-14

Maintenant « image perso… »

Screenshot_2014-07-15-23-53-23

 

Comme précédemment choisissait l’image qui correspond à notre visuel puis OK.

Screenshot_2014-07-15-23-53-39

 

Tous semble parfait sauf le logo que nous allons modifier de la même manière sauf qu’au lieu de cliquer sur « modifier l’arrière plan » vous cliquez sur : Changer l’icône.

Screenshot_2014-07-16-00-03-48

 

Une fois sur la fenêtre des icônes choisissez votre icône (pour moi ce sera la télévision)

Screenshot_2014-07-15-23-53-55

Et voilà le tour est joué…. Maintenant faites de même pour les icônes « modules ».

Screenshot_2014-07-15-23-55-48

Etape 30 : Maintenant place a la mise en place des raccourcis vers les pages du dashbord. On garde la même logique à un point prêt, lorsque l’on clique long la première fois sur le rectangle, nous sélectionnons : « Aller sur une autre page »

Screenshot_2014-07-15-23-55-06

Bien sur nous indiquons vers où nous diriger

Screenshot_2014-07-15-23-55-41

 

Nous obtenons une flèche et le nom de la page vers laquelle nous serons redirigé si nous cliquons dessus.

 

 

Screenshot_2014-07-15-23-55-48

Maintenant nous allons changer le fond comme nous l’avons fait précédemment. Clique long sur le rectangle, modifier l’arrière plan. Puis une fois la fenêtre ouverte : « image perso… »

Screenshot_2014-07-15-23-55-57

Et aussitôt nous allons changer le logo en reprenant celui que nous avions prit précédemment (si vous ne souhaitez pas de logo, je vous invite à créer un visuel transparent sur photoshop, de l’enregistrer en PNG afin de garder toute transparence et de le sélectionner dans cette étape)


Screenshot_2014-07-15-23-56-59

Et voilà maintenant vous savez personnaliser parfaitement votre interface ImperiHome. Je vous invite à faire de même pour tout les autres module et les autres pages. Bien entendu ici il ne s’agit que d’un exemple que j’ai utilisé pour illustrer mon Article.

Screenshot_2014-07-15-23-57-22

Conclusion

ImperiHome est très intéressant d’une part lorsque l’on souhaite mettre sur une interface différentes solutions domotique et comme je viens de le démontrer la liberté qu’on nous laisse à faire évoluer notre interface domotique avec facilité. La seule limite reste votre imagination…
Il est agréable de pouvoir changer après quelques mois ou années d’utilisation une interface mais de garder sa solution domotique, on évite ainsi une routine, ImperiHome est pour ceci l’interface idéale.

DOMOTIQUE INFO soutient

Banner ImperiHome

Author: AnnE

Passionnée depuis une éternité (ou presque) par les nouvelles technologies, et l'automatisation, j'ai très tôt cherché à dévier de leurs utilités principales les moteurs de volets et autre mécanisme commandable par télécommande IR. Ayant dans mes proches une personne qui a fait mettre il y a plusieurs dizaines d'années une installation domotique qui valaient à l’époque presque le prix de sa maison, j'ai toujours suivit ça, les yeux pleins d'étoiles, comme la solution que je n'aurai jamais mais qui me faisait rêver. C’était sans compter sur le développement croissant d'internet et de la téléphonie mobile. Maintenant la domotique n'est plus un rêve, elle devient de plus en plus accessible à monsieur et madame tout le monde. Depuis j'ai pu rendre réalité mon rêve avec une Zibase et des modules comme Di-o, Fibaro, Chacon, X10, Blyss le tout supervisé par notre chère et tendre S.A.R.A.H. En espèrent vous faire partager ma passion, ma vision de la maison de demain, et l'avenir de la domotique...

Share This Post On

14 Comments

  1. Super article AnnE, on reconnaît bien la touche féminine.. l’appli est tout de suite plus agréable et un peu plus art deco, tout en restant indispensable…
    Merci

  2. Moi qui pensais que Imperihome était déjà WAF alors là j’en prend un coup ;) Très belle article Anne ;)

  3. Impressionnant, félicitations !!

  4. Contente si ça vous plait. N’hésitez pas à venir me voir si vous avez d’autre question….

  5. Anne,
    bravo et merci pour ce partage. Du très beau boulot.
    C’est propre, c’est pro.
    En même temps, pour toi, ça ne doit pas être difficile !
    Je t’aurais bien mis 20/20, mais j’enlève un point parce qu’il manque un screenshot.
    Donc un bon 19/20, mais ce n’est pas si mal.
    Je pense que mon Imperihome va changer de tête prochainement.

  6. Comme quoi on en apprend tous les jours!
    Bravo pour cet article! Je sais maintenant ce que je dois faire pour faire accepter une tablette au mur à ma femme!
    Merci!

  7. Bravo Anne pour ce super Tuto qui en dit long sur les possibilités d’exploiter notre meilleure application domotique sur Android. Et merci à Thibault et Hugo pour Imperihome :)

  8. J’avais déjà bien apprécié ton article sur le Home Center Lite, mais celui-ci est tout aussi bien. Merci pour tes articles.

  9. Ah oui Fred……….. Ben j’comprend pas ce qu’il s’est passé là….. J’vais la remettre de suite…. Merci :)

  10. @AnnE
    merci, maintenant tout est clair, je comprends mieux!
    1 point de plus… 20/20 ! ;)

  11. On dit pas WAF à la vue de se tuto, on dit … WOUUAAAAHH.

    Bravo AnnE.

  12. @AnnE,
    ça y est, après 3 mois de cogitation intense, mon neurone s’est enfin décidé.
    Je vais donc commencer à bidouiller imperihome.
    Comme on a reparlé dernièrement de ce tuto et de photoshop CS2 gratuit, je viens de reprendre cet article, et c’est cool, download en cours.
    Déjà que je m’amusais bien avec mon petit soft gratuit sur Mac, mais que je trouve vraiment trop limité, là ça va être vraiment mieux… enfin le temps que je maitrise…ce n’est pas gagné!
    Sinon il me faudra trouver quelqu’un pour me donner des cours (gratuits). ;o)

  13. Pareil que Fredo …avec 7 jours de plus.
    Je vais enfin me mettre à Imperihome en suivant ce super tuto d’Anne. Pas sûr d’arriver à aussi bien

  14. Bon la mauvaise nouvelle c’est que Photoshop CS2 n’est pas compatible avec les nouveaux MAC, donc c’est mort ! :o(
    AnnE, tu disais « pas d’inquiétude » dans le tuto, mais là je suis hyper inquiet !!! MDR
    Donc il faut que tu précises que c’est valable uniquement sur Windaube.
    Je fais quoi maintenant ???

Laisser un commentaire