WebNioub

Interface tableau de bord type Automobile

Dans ce tutoriel vous allez :

• Porter quelques réflexions sur les méthodes à utiliser pour la création d’une interface
• Utiliser la vue panoramique d’un tableau de bord comme interface et fond du site
• Étendre les extrémités tout en conservant la cohérence du visuel
• Rajouter des éléments inexistants sur la photo d’origine
• Entrevoir la mise en place de l’ensemble en xhmtl et css

Quelques réflexions au préalable :

Pour ce tutoriel nous partons d’un site réel et accessible, mercedes-occasion.commercedes-royan.com. Le choix du visuel est tout naturellement celui d’une Mercedes Class S.

• Le but est clairement de créer une immersion visuelle dans l’univers de l’automobile de luxe, d’assoire le lecteur dans “ les sièges confortables du site ” et de l’inviter à consulter son contenu. Ce qui signifie que cet exemple n’échappera pas aux principe d’accessibilité. C’est pourquoi nous partirons de quelques postulats :

• La partie haute DOIT laisser un espace minimum de 500 pixels. Elle accueillera le contenu et se démarquera par sa sobriété de mise en page.

• La résolution d’écran d’un internaute nous est inconnue, néanmoins nous utiliserons une base sûre, c’est à dire 1024 pixels, partant du principe que cette dernière à l’avantage d’être majoritairement utilisée, et offre plus de possibilité dans les fonds perdus (les bords, là où l’idée d’un tableau bord prend tout son intérêt).

• Nous voulons donc assurer l’affichage d’un espace suffisant de contenu et laisser le reste au fond s’étendre en fonction de la résolution de l’usager. En fin de ce tutoriel, nous verrons donc comment centrer le site.

Voici l’image d’origine du tableau de bord :

Comme vous le voyez, elle est elle-même issue de 4 plans raccordés. Et cela se voit; trop !

• Dans votre nouveau document ( 1600px de largeur par 980px de hauteur )

• Importer le tableau de bord

• Sélectionnez tous vos calques et fusionnez les :

Vous devriez donc obtenir une seule image, pour estomper cette démarcation nous utiliserons l’outil “tampon” (ctrl+S) :

En appuyant sur la touche ALT, cliquez sur la zone qui sera par la suite copiée (donc en dehors de la démarcation). Ici nous prenons pour exemple la ligne foncée.		En relâchant la touche ALT, deux curseurs apparaissent, la croix désignant la zone servant de modèle au tampon, et le pinceau placé au dessus de la démarcation. Régler ce dernier à une taille ne dépassant que de peu la zone foncée. Et commencez à appliquer le tampon. Pour cette zone un seul clic devrait suffire à masquer la démarcation.		Reproduisez ce processus sur l’ensemble de la démarcation, en veillant à utiliser une taille de pinceau en fonction des zones. Pour l’exemple, les zones grises claires s’efface plus proprement avec une taille de pinceau assez élevée.

AVANT	APRÈS

Nous parlions de contraste entre la zone contenu et l’interface. Nous allons donc la mettre en pratique en modifiant légèrement le rendu de cette image, pour l’assombrir dans ses zones sombres et l’éclaircir dans ses zones clairs :

Sélectionnez l’image puis dans le menu “propriétés” ( Ctrl+F3), sélectionnez l’”éditeur des niveaux” : Veillez à ne pas confondre avec le filtre “Niveaux” (menu filtre/niveaux), au quel cas vous ne pourriez désactiver ou modifier les réglages effectués.	Jouez avec les trois curseurs et observez les répercussions sur l’image. En utilisant les réglages ci-dessous, vous devriez éclaircir les zones blanches et foncez les zones noires.

L’étape suivante est la mise en place du plan de travail :

Créez un nouveau dossier et renommez le “ limites“.

Dans ce dossier et dans le document, créez un rectangle de contour rouge sans aucun remplissage.

Dans le menu “propriétés” (CTRL+F3), définissez sa taille à 955 pixels de largeur et 550 pixels de hauteur

Ouvrez le menu “Aligner” (fenêtre/Aligner) :

Sélectionnez “Au document” puis centrez verticalement et horizontalement.

Ce rectangle représentera donc notre limite visuelle en 1024 px. Soit 955px en largeur et 550px en hauteur. Avec une résolution supérieure, le reste du site sera bien entendu visible. La limite ne concernant que les éléments qui doivent être absolument visibles en 1024 px.

Verrouillez le dossier “limites” :

Étendre les extrémités tout en conservant la cohérence du visuel

Les bords de l’image coupant net l’habitacle, il va falloir soit prolonger les dessins des portes et vitres, soit appliquer un dégradé en superposition afin d’adoucir la transition image/fond du site.

Nous allons utiliser les deux techniques, tout d’abord pour gagner en champs de vision, donc allonger l’image dans sa largeur et ensuite pour masquer les imperfections dans un dégradé au noir.

Dessinez un rectangle sélection, semblable à celui ci-dessous.	Faites pivoter la sélection (CTRL-T), pour l’aligner perpendiculairement à la structure de l’habitacle.	Redimensionnez le rectangle si besoin est, pour coller au plus près à la structure grise.

Faites un clic-droit sur la sélection, et choisissez “enregistrer la sélection“, nommez la “cadre“.
Sélectionnez votre image et faites un clic droit en dessus, choisissez “Restaurer la sélection“.

Ensuite faites un copier-coller, vous devriez obtenir une partie rectangulaire de la structure.		Avec l’outil transformation (CTRL-T), repositionnez l’image verticalement, à l’aide des repères si besoin.

	Sélectionnez la découpe rectangulaire, déplacez la légèrement en appuyant sur la touche ALT, ceci crée une copie tout en plaçant à l’endroit voulu. Répétez l’opération (CTR-Y) autant de fois que nécessaire pour obtenir une structure assez grande.
	Il suffit alors à l’aide de l’outil transformation (CTRL-T) d’incliner la structure ainsi créée, et de la superposer au dessus de notre image de fond.
	Dans le cas de notre site, la découpé créée s’étant jusqu’au bord du document.
	Utilisez l’outil plume afin de créer un rectangle superposant la partie haute de la nouvelle partie de l’habitacle. Appliquez ensuite un dégradé du blanc vers le transparent.

Répétez l’opération pour la partie droite de l’habitacle.

Continuons sur la continuité des portes. On utilisera la même technique précédemment décrite. Le rendu est quand à lui beaucoup moins propre, rassurons-nous, cette partie sera majoritairement masquée par le dégradé au noir.

Utilisez l’outil “plume” avant de dessiner une forme comme celle ci-dessous, sur le bord bas du document. Appliquez un dégradé de noir vers le transparent du bas vers le haut.

Vue avec les calques inférieurs visibles :

Rajouter des éléments inexistants sur la photo d’origine

Rajoutons deux autres dégradés fondus de noir, masquant respectivement les portes de gauche et de droite, ainsi que les différents éléments coupés par l’image (accoudoirs…).

Le tableau de bord :

Nous allons utiliser l’espace droit du tableau de bord, pour y insérer un élément graphique qui puisse recevoir la navigation du site, comme ci-dessous :

Il faut donc tout d’abord prolonger la zone encadrant l’écran GPS et simuler sa terminaison au bord droit du tableau de bord.

Nous utiliserons la même technique que pour les portes et montants du pare-brise :

Copiez une partie du tableau de bord. (il s’agit de prendre la partie supérieur gauche la plus rectiligne, en prévision de son étirement). Coller cette partie à droite de l’habitacle.

Afin de joindre les parties gauche et droite, dupliquez une découpe rectangulaire.

L’étape suivante consiste à créer une forme pour l’interface, à l’aide de l’outil “Plume“.

(pour la lisibilité de ce tutoriel, le tracé est volontairement rouge et àaune épaisseur de 2 pixels )

Dupliquez 5 fois cette forme et nommez les respectivement : acajou, acajou reflet, carbone, masque, reflet carbone.

Pour créer une texture acajou nous pourrions utiliser une image photographique ou bien paramétrer les propriétés de la forme Acajou comme ci-dessous:

Affectez une couleur en dégradé concentrique. Placez aléatoirement un certain nombre de points de couleur se rapprochant des tons ocres. Enfin utilisez une texture “Marée noire” à 29%

Pour finir paramétrez les filtres de la forme :

Ombre intérieure:
Luminosité et contraste :
Ombre portée :

Reflet :

Sélectionnez la forme « reflet » et paramétrez ses propriétés comme ci-dessous :

Dégradé « vagues »
Orientez le dégradé comme ci-contre

Pour la forme « carbone », paramétrez les propriétés comme ci-dessous :

Pour les formes « Reflet carbone » et « masque » :

Superposez les deux formes comme ci-dessus. La forme « reflet carbone » étant unie et blanche à 40% d’opacité. La forme « masque » quant à elle est unie et blanche, à 100% d’opacité.

Sélectionnez les deux formes en vous assurant que le masque est au dessus de la forme du reflet, dans la pile des calques. Groupez les en tant que “masque” : Modification/masque/grouper en tant que masque.

Libre à vous de rajouter des éléments (rétroviseur, téléphone… afin de perfectionner le réalisme du tableau de bord)

Entrevoir la mise en place de l’ensemble en xhtml et css

Ci dessous, les deux découpes principales du site :

Body : le fond de notre site

Global : la taille du site minimale qui devra être obligatoirement affichée sur la majorité des résolutions, soit 955px par 550px. C’est dans ce dernier que vous insérerez tous nouveaux calques (DIV) du site, menu, contenu…

Pensez à centrer ces mêmes découpes dans la page.

Dans votre page xhtml :

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/css/style.css" media="screen" />
</head>
<body>
  <div id="global">
    <!--contenu du site-->
  </div>
 </body>
</html>

Centrer le site avec les propriétés CSS suivantes :

html,
body {
width:100%;/*obligatoire*/
height:100%;/*obligatoire*/
}

#global {
width:955px;
height:550px;
position:absolute;
top:50%;
left:50%;
margin-top:-275px;/*marge égale à la moitié de la hauteur du conteneur "global"*/
margin-left:-478px;/*marge égale à la moitié de la largeur du conteneur "global"*/
}

body {
background:url(/images/interface/body.jpg) no-repeat center center;
}