Article(s) de février 2009 :

Gimp: créer un paysage peint

Introduction

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.

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.

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.

Utiliser les sprites

La performance d’affichage des pages web dépend de différents facteurs. La technique des sprites peut vous aider, grâce à une astucieuse utilisation des CSS, à améliorer la vitesse de chargement de vos pages.

Les sprites, c’est quoi ?

L’utilisation des sprites pour le web est une technique permettant d’afficher plusieurs vues d’une seule et même image à l’aide des feuilles de style CSS.

Cette technique est issue des anciens jeux vidéos qui utilisaient des petits personnages pixelisés appelés « sprites » qui étaient tous dessinés sur une seule image pour des raisons de performances.

Il s’agit donc d’utiliser une image sur laquelle est réunie soit plusieurs instances de l’état d’un objet, par exemple un menu, un bouton soit un ensemble d’autres images comme des icônes par exemple.

La technique des sprites permet, grâce aux CSS, de ne montrer qu’une partie (une vue) de l’image globale. Selon le cas, en modifiant les paramètres de positionnement dans la feuille de style CSS, il est possible de déplacer la vue sur l’image globale sans montrer le reste de l’image. Nous utiliserons donc une seule image pour simuler l’affichage de plusieurs images (en réalité différentes vues de l’image globale) sur les pages web d’un site internet.

Quels intérêts d’utiliser les sprites ?

Si vous travaillez dans le secteur internet, vous savez que lors du chargement d’une page web, il y a autant de requêtes http effectuées sur le serveur qu’il y a d’images dans la page. En utilisant qu’une seule image globale, vous réduisez à une requête http le chargement des images (puisqu’en réalité on ne charge qu’une image).

De plus, l’image globale est bien souvent moins lourde que la somme des poids des images individuelles. Cela permet de gagner en performance sur la vitesse d’affichage de la page et en consommation de bande passante dans certains cas.

Donc tout l’intérêt des sprites est de gagner en performance de chargement des pages. Du point de vue du graphiste, il y a un autre avantage : avoir moins de découpes à faire pour l’étape d’intégration.

Comment mettre en place les sprites ?

Comme un exemple, vaut mieux qu’un long discours, nous allons réaliser un bouton image avec effet rollover utilisant la technique des sprites.

Notre bouton aura trois états : un état « initial » lorsque le bouton n’est pas activé ou survolé, un état « survolé » lorsque l’utilisateur passe sa souris sur le bouton et un état « enfoncé » lorsque l’utilisateur clique sur le bouton.

La première chose à faire est de dessiner dans un logiciel de traitement d’images les trois états du bouton puis de les réunir sur une seule image.

Ensuite, il va falloir implémenter le code XHTML/CSS.

Voici le code XHTML qui affiche le bouton :

<a id="container" href="#" title="Exemple de bouton sprite"></a>

Remarque : Le code utilisé dans cet exemple est simple pour vous transmettre la technique mais c’est un très mauvais exemple à suivre sur le plan sémantique et accessibilité. Voir la conclusion.

Il ne nous reste plus qu’à définir le fichier CSS qui va nous permettre notamment grâce à la propriété « background » de positionner notre vue sur l’état du bouton qui convient en fonction de l’action de l’utilisateur.

Le calcul du positionnement de la vue est la partie la plus fastidieuse. Vous pouvez déterminer « à la main » les coordonnées du positionnement en mesurant la position des états du bouton sur l’image globale. Mais si vous ne voulez pas vous embêter à faire ces mesures, vous pouvez utiliser un générateur de sprites pour faire le travail à votre place.

Il y a quelques bogues avec les navigateurs Opéra et Safari à prendre en compte lors de la création de Sprites CSS :

Opéra, pour les versions inférieur ou égale à 9.0, ne reconnait pas une position de fond supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place en cas de dépassement. Ceci dit 2024px, ça vous laisse pas mal de marge.

Safari a un problème avec la répétition des images de fond. Cela peut être résolu en spécifiant une valeur d’espacement vertical plus large.

Je vous conseille d’utiliser par exemple le générateur de sprites en ligne de « Project Fondue ». Ce générateur prend en compte les bugs des navigateurs Opéra et Safari. Utilisez le comme suit :

1. Réunissez toutes vos images dans un fichier .zip, le nom donné aux images sera repris dans la feuille CSS générée.

2. Uploadez votre fichier .zip via le formulaire du générateur de sprites.

3. Définissez vos paramètres. Dans mon exemple, j’ai gardé le paramétrage par défaut proposé sur la page du générateur. Pour plus de détails sur le paramétrage, lisez l’aide en ligne.

4. Validez le formulaire.

Le générateur de sprites construit alors une image globale :

… et le code CSS correspondant :

.sprite-enfonce { background-position: 0 -30px; }
.sprite-initial { background-position: 0 -108px; }
.sprite-survole { background-position: 0 -186px; }

#container li {
background: url(monImageGlobale.png) no-repeat top left;
}

Le code implémenté pour mon bouton donnera :

a#container {
background:url(MonImageSprite.png) no-repeat 0px -108px; /* initial */
width: 180px;
height: 40px;
display: block;
}
a#container:hover { background-position: 0 -186px; } /* survolé */
a#container:active { background-position: 0 -30px; } /* enfoncé */

Résultat :

Conclusion

Comme nous l’avons vue dans cet article, l’utilisation des sprites permet de gagner en performance au niveau de la vitesse d’affichage des pages web en réduisant le nombre de requêtes http effectuées sur le serveur. Quelques secondes de gagnées sur le chargement de vos pages peut vous rapporter gros car c’est du temps d’attente en moins pour les internautes et donc moins de perte potentielle d’audience.

Pour les graphistes, travailler avec un intégrateur qui utilise les sprites permet de regrouper plusieurs images dans un seul fichier png et d’éviter de fastidieuses découpes.

Cependant, l’utilisation des sprites peut causer quelques inconvénients si ils sont utilisés de manière inappropriée.

Par exemple, laissez suffisamment d’espace entre vos motifs sur l’image globale pour permettre aux utilisateurs de grossir le texte des pages web sans risquer de démasquer les autres motifs. Trouvez un bon compromis entre l’espacement des motifs et la taille de l’image globale car plus votre image globale sera grande, plus il faudra de mémoire à l’agent utilisateur pour la décompresser.

Les sprites peuvent également causer des problèmes de sémantique et d’accessibilité. Mon exemple de bouton est un mauvais exemple sur le plan sémantique car j’utilise une balise html « A » pour afficher un bouton au lieu d’une balise « INPUT » ou « BUTTON ». De plus ma balise « A » ne comporte pas d’intitulé texte. J’ai donc détourné la balise « A » à des fins esthétiques au détriment de la sémantique et de l’accessibilité. Bien que graphiste, je pense qu’il ne faut jamais céder à ce type de compromis.

Il est donc fortement conseillé d’utiliser les sprites pour les images de décorations uniquement (fond d’illustration, icônes …) et pas sur des images de contenu ou des images qui aident à la compréhension du contenu. En effet, si pour une raison ou pour une autre, les CSS sont désactivées, ou si une personne handicapée utilise un navigateur texte, vous perdez l’affichage de vos images. Si il s’agit uniquement d’images de décorations, leur disparition est génante sur le plan graphique mais la page conserve une accessibilité aux informations.

Pour conclure, utilisez les images sprites pour gagner en performance mais ne les utilisez pas dans un contexte où elles réduisent la sémantique et l’accessibilité.

Sources :

– Sprites CSS : Meurs, découpe d’images, meurs ! – Traduction française, sur le site Pompage.net d’un article de Dave Shea parue sur A List Apart.
– Des sprites jusqu’à plus soif – Eric Daspet
– CSS Sprites: What They Are, Why They’re Cool, and How To Use Them – Chris Coyer
– Exactly How to Use CSS Sprites – Nettuts

Générateurs de sprites :

– Application Java ou PHP à télécharger : SmartSprites
– Générateur de sprites en ligne : Project Fondue
– Générateur de sprites en ligne : CSSSprites