L’habillage d’un site, c’est-à-dire le graphisme, n’est pas une fin en soi. Il sert à valoriser le contenu qui y est diffusé ainsi que l’image que vous souhaitez véhiculer. Il est donc primordial de lui accorder une attention toute particulière.

Celle-ci passera comme nous l’avons vu précédemment par un choix judicieux des couleurs dominantes, de leur agencement mais également par un ensemble de visuels que constituent les bannières d’en-tête, les menus de navigation, les liens hypertextes, les images et illustrations. Ces derniers serviront à faciliter le repérage de l’internaute en distinguant habilement les éléments de navigation, de ceux rédactionnels ou publicitaires. Donc inutile de saturer le visuel avec des motifs complexes et chamarrés, ni de multiplier les typos. L’efficacité est dans le minimalisme. Seul un site sobre et simple avec un « rubriquage » logique et clairement identifié saura encourager les visiteurs à poursuivre leur visite et à revenir.

Pour parfaire votre charte graphique, il vous faut un logiciel. Bien qu’il en existe un grand nombre, inutile de sauter de l’un à l’autre. Apprenez à en maîtriser un. Et, que ce soit Photoshop, Paint Shop Pro ou Flash, pour ne citer que ceux-ci, le Net regorge de tutoriels destinés à vous en inculquer les rudiments depuis la simple utilisation des outils jusqu’à la réalisation d’effets bien précis comme par exemple un logo en relief, une texture bois, etc. Quelques excellentes adresses de tutoriels réalisés par des passionnés vous sont proposées en fin de dossier.

Si ergonomique et harmonieux que soit votre site, il reste toutefois un dernier élément et non le moindre à prendre en considération : que les visiteurs puissent en profiter sans attendre indéfiniment le chargement des pages ! En optimisant vos images, c’est-à-dire en compressant leur poids et, ou, en réduisant le nombre de couleurs, vous rendrez vos pages beaucoup plus rapides à charger et donc beaucoup plus agréables à naviguer.

S’il existe un grand nombre de formats d’images : jpeg, gif, tiff, bmp, tga, png, wmf, drw, dxf, etc…. sur le Web, les images devront être compressées dans un format standard soit : GIF, JPG ou PNG. Tous trois étant compressés d’origine pour que les images se chargent plus rapidement.

Le format GIF
Le format GIF est compressé sans pertes de données. De plus, il permet d’intégrer de la transparence (pour les détourages) et de créer des animations (gifs animés). L’inconvénient est qu’il ne permet l’enregistrement que de 256 couleurs choisies parmi les 16 millions qui peuvent exister dans l’image d’origine. Il sera donc à exclure pour des photos couleurs aux subtiles nuances. Il sera en revanche parfaitement adapté aux images avec beaucoup d’aplats comme les logos, bannières, boutons et pour les photos en noir et blanc (elles ont généralement 256 niveaux de gris).

Le format JPG
Le format JPG affiche jusqu’à 16,7 millions de couleurs. Il est donc parfaitement adapté aux images de type photographie avec beaucoup de couleurs et dégradés. Par contre, il ne permet pas les aplats de couleur uniforme, ni la transparence, ni l’animation. Quant à la compression, elle est avec perte de données. La différence est souvent imperceptible à l’Å“il mais il faut faire des essais et choisir le niveau de qualité convenable.

Le format PNG
Ce tout nouveau format cumule les avantages des deux formats précédents sans leurs inconvénients. Il affiche 256 ou 16.7 millions de couleurs, est compressé sans perte de données et supporte la transparence. Seule chose, il ne permet pas la création d’images animées. De plus, comme il est relativement jeune, le format PNG n’est pas reconnu par les anciennes générations de navigateurs Web. Son utilisation demeure donc, pour l’instant, encore très anecdotique.

Enfin, un dernier petit conseil : évitez d’utiliser des illustrations de plus de 20ko sur vos pages et essayez de ne pas dépasser un poids total de 100ko d’éléments graphiques par page.

N’oubliez jamais que sur le Net, il suffit d’un clic pour passer à un autre site !

[Ateliers Graphique de Lycos]
[GraphiLand (tutoriels)]
[Falken Zone (tutoriels)]
[Piregwan (tutoriels)]
[Astuces Photoshop – Adobe]
[SourceHTML (tutoriels Photoshop)]
[Paint Shop Pro et moi]
[Paint Shop Pro]
[Formats d’images et gestion de la couleur sur le Web]
[Optimisation des images pour le Web]
[JPEG Wizard (angl.)]
[WebGraphics Optimizer (angl.)]