Je vais vous expliquer dans cet article le processus que j’ai utilisé pour dessiner sous Gimp un webdesign utilisant une large image de header.
Ce webdesign est un travail personnel réalisé à titre d’exercice.

Introduction

Pour donner de l’impact au design d’un site web, certains designer choisissent d’exploiter l’espace disponible dans l’en-tête et même parfois la périphérie du site. Ce procédé graphique utilise une image de fond affichée grâce à la propriété CSS « backgound ».

Si cette solution élargie l’espace de liberté du graphiste pour s’exprimer, elle a l’inconvénient d’augmenter significativement le poids de la page..

Utiliser une large image de fond n’est donc pas un choix anodin. Cela est judicieux si votre objectif est de mettre l’ambiance graphique du site en avant. Je pense par exemple aux sites de marque et de publicité, aux sites ou vous souhaitez mettre en avant votre créativité ou encore aux sites qui ont besoin de dévoiler un univers dans lequel une population cible sera censée se reconnaitre et s’identifier.

Par contre, si la vitesse de chargement des pages est une préoccupation stratégique ou si la valeur ajoutée de votre site se situe essentiellement dans son contenu texte, mieux vaut éviter cette technique. En effet une image lourde ralentira le chargement de vos pages et un design très présent fera inévitablement de l’ombre au contenu texte. C’est le cas pour les sites magazines ou les sites qui proposent un service (vente en ligne, moteur de recherche, annuaire, portail …).

Process

Conception

Besoins et objectifs

Le besoin du client est de promouvoir via un site web la parution d’un roman d’aventure. Le client souhaite que le design du site soit fidèle à l’atmosphère du livre.

Le roman raconte l’aventure d’un cadre supérieur, lessivé par les exigences de son milieu professionnel, qui décide de tout quitter (job, maison, amis …) pour partir réfléchir au sens de sa vie lors d’une retraite d’un an au milieu des paysages de l’ouest Américain.

Définir le sujet, l’ambiance, le style

Étant donné que le cadre de l’histoire se passe essentiellement dans la nature, je vais plonger l’utilisateur (et potentiel lecteur) au coeur de cet univers en utilisant une grande image de header qui représentera un paysage sauvage ouest Américain.

Le livre raconte une fiction, qui fera fortement appel à l’imagination du lecteur. Je choisis donc de représenter le paysage de façon abstraite en lui donnant un style peint. Ainsi, le paysage laissera plus de place à l’interprétation et à l’imaginaire.

Comme l’histoire du livre raconte une expérience de réflexion intérieure en solitaire à travers la nature, je choisis de situer la scène au crépuscule, la tombée de la nuit étant dans l’inconscient collectif un moment apaisant (ou angoissant pour certains) propice à cette reflexion intérieure. Cette atmosphère crépusculaire renforcera aussi l’impression de solitude.

La composition

Pour plonger le lecteur au coeur du paysage, je vais centrer le site sur le point focal du paysage. Pour obtenir quelque chose d’équilibré je choisirai un paysage dont les lignes de fuites convergent vers le centre de l’image sur la ligne d’horizon.

S’inspirer de quelques références

Pour réaliser ce paysage je vais m’inspirer de deux réalisations qui répondent bien au concept que je souhaite mettre en place. Ces deux design ont fait l’objet d’un tutoriel et les techniques que j’utiliserai ici sont largement inspirées de celles utilisées dans ces tutoriels.

Il s’agit du design du blog de l’agence web Viget Inspire : www.viget.com

… et d’une copie d’écran issu d’un tutoriel du site http://designreviver.com

Réalisation

Choisir ses outils

Pour réaliser ce design, j’utiliserai le logiciel de retouche d’image Gimp, quelques brosses, des textures, des photos et quelques uns des modes de fusion disponibles dans Gimp.

Se lancer et expérimenter

Pour commencer, je choisis dans une banque d’image des photos de paysage qui répondent à mes besoins. La scène se passant dans l’ouest Américain, mon paysage doit être cohérent avec les caractéristiques géologiques et floristiques de cette région.

J’ai choisis ces trois photographies :

Image 1 : sur cette image, je garderai les montagnes

Image 2 : sur cette image, je garderai les arbres

Image 3 : sur cette image, je garderai l’homme et le ponton

La composition finale devrait ressembler à cela :

Pour la partie terrestre, je détoure mes paysages pour ne garder que les rochers et la végétation. Pour cela j’utilise une technique de détourage que j’ai expliqué dans un article intitulé « Gimp : détourage complexe. Ces images détourées vont me servir d’une part pour créer les silhouettes du paysage terrestre mais aussi pour donner un peu de profondeur aux silhouettes en utilisant l’image comme d’une texture.

Les images détourées donneront ceci :

Pour le ciel crépusculaire, je fais plusieurs dégradés (bleu foncé – bleu moyen, rouge – orangé) sur des calques distinct et je dose le rendu en réglant l’opacité.

Pour donner un aspect peint à la composition, j’utilise chaque élément détouré comme une silhouette dans laquelle je peins avec différentes brush.

J’utilise parfois l’image détourée pour renforcer la texture en la plaçant sur un calque en mode « Multiplier », « Superposer » ou « Lumière douce ». En jouant sur le pourcentage d’opacité du calque je dose l’effet obtenu. Pour ne pas déborder dans les zones transparentes lorsque je peins les silhouettes, je coche la case « Verrouillé » dans la fenêtre des calques

Par soucis de cohérence, j’ai reflété le ciel et les montagnes dans le lac. J’ai dû effacer les nuages du lac de la photo d’origine car ils ne correspondaient pas à ceux présents dans mon ciel dessiné. J’ai donc refait la texture d’une partie du lac avec une brush et l’outil pinceau.

Pour retoucher mes couleurs, j’utilise fréquemment dans le menu : Couleurs > Teinte – Saturation, où je peux faire varier la saturation, la luminosité et les teintes. Pour redonner un peu de « peps » aux couleurs du ciel, je duplique le calque du ciel et je passe le calque dupliqué en mode « Superposer ».

Enfin pour détourer le personnage sur le ponton, j’ai utilisé ma tablette graphique car j’avais besoin de plus de précision. Une fois détouré, le personnage a été placé sur un calque en mode « Multiplier ».

Après quelques retouches minimes et le placement des ombres du ponton voici le résultat de ce qui sera le header du futur site :

A partir de ce header, je compose le design la page d’accueil (voir l’image en grand)

Conclusion

Chacun à sa façon de travailler mais je pense qu’il est important, avant de foncer tête baissée sur son logiciel d’infographie, de passer un peu de temps à imaginer ce que l’on souhaite réaliser. C’est l’étape initiale de conception. Cette phase de conception donne une cohérence à votre création et des jalons pour orienter votre démarche vers un objectif. Je le répète souvent mais le webdesign n’appartient pas au domaine de l’art plastique dans lequel on exprime un ressenti personnel mais appartient au domaine de l’art appliqué ou la création est censée remplir des objectifs définis au préalable pour répondre à un besoin précis.

Même si vous pensez et planifiez votre création, il est rare que le résultat final (rendu visuel) soit la réplique exacte de ce que vous aviez imaginé au départ. Ce n’est pas très grave, le principal étant que le concept initial soit respecté et qu’il réponde aux objectifs que vous vous étiez fixés. En effet, l’acte créatif comporte toujours une part de hasard que l’on ne contrôle pas et qui nait des différentes expérimentations effectuées lors du process créatif.

Lorsque vous créez un design avec une forte connotation graphique, fixez vous un cap mais laissez votre imagination expérimenter des choses et le hasard vous offrir parfois d’heureuses surprises.