Entre le GIF et le JPEG... mon cœur balance

L’ensemble des navigateurs Internet sur marché affiche deux types de format d’image :
Le GIF et le JPEG.

Tout deux, sont des formats de compressions d’images qui vont permettre à un élément graphique quel qu’il soit (une photo, un logo, un fond de couleur avec un motif ect…) d’être le plus léger possible en terme de poids de fichiers.

En effet, même si Internet affiche les sites de plus en vite, la contrainte du poids d’une page et de ses éléments graphiques est primordiale. Car plus une page est légère, plus elle s’affichera vite.
Par conséquent, lorsque vous travaillez sur Photoshop pour le web, vous devez exporter vos éléments graphiques dans l’un ou l’autre formats.

A cet effet, depuis maintenant plusieurs versions, Photoshop par exemple, intègre une fonction « enregistrez pour le web ».

Cette fonction active une fenêtre dans laquelle vous allez pouvoir choisir la qualité et le format de votre exportation.

En règle général, la compression en JPEG convient mieux à une photo car il gère le million de couleurs et le GIF est plus adapté aux logos dessinés ou au aplats de couleurs car il gère une palette 256 couleurs ainsi que la transparence pour des éléments graphiques détourés.

La fenêtre « enregistrez pour le web » vous propose de prévisualiser votre image dans les différentes compressions et vous propose également de simulé le poids du fichier compressé et le temps qu’il mettra à s’afficher sur Internet en fonction de votre connexions.

La page blanche du web designer

Comme tout créatif, quelque soit sont support de prédilection, le webdesigner commence par la page blanche.

A la différence du support papier, le support d’un site Internet c’est l’écran de votre ordinateur.

La chance de l’imprimerie c’est de communique avec des supports bien défini et fixe tel que le A4, le A3, le "4par3" pour l’affichage ect…

Pour l’Internet il en est tout autre. Le webdesigner, lorsqu’il se retrouve devant sa page blanche, ne sais pas sur quelle taille de fenêtre, le site va être consulté.

Aujourd’hui la plupart des gens procèdent un au moins un écran 17’, d’autres des écrans plus petits et d’autres des écrans plus grands.

Lié à ce paramètre, et beaucoup plus important, la résolution (en pixel) de l’écran qui affichera le site Internet.

En règle générale, les 17’ pouces sont calibrés soit en 800x600 pixels soit en 1024x768 pixels soit à des résolutions plus élevé notamment sur les portables. Sans parler des écrans 20’ ou autres 16/9ème.

Du coup, notre pauvre webdesigner va devoir faire des choix pour réaliser une création qui soit consultable confortablement par le plus grand nombre d'internautes.

C'est ainsi, qu'a l’heure d’aujourd’hui, un webdesigner peut se baser sur une fenêtre de 760x420 pixels, ce qui correspond à l’espace maximal visible lorsqu’un utilisateur ouvre sur un écran calibré en 800X600 son navigateur Internet que ce soit sur Mac ou PC.

La création sera adaptée par la suite selon si on veut travailler sur un design de site qui prend en permanence la totalité de l’espace de la fenêtre du navigateur ou si on désir plutôt un design fixé dans une taille bien déterminée que ce soit en hauteur ou largeur afin de ce rapprocher beaucoup plus de l’édition papier fixe.

Par conséquent, mon premier réflexe, lorsque j’ouvre ma « page blanche », c’est de créer sous Photoshop un document de 760x420 pixels, qui correspondra à une surface visible suffisante pour que le plus grand nombre d'internautes puisse visualiser la partie principale de la page sans utiliser ni ascenseur vertical ni ascenseur horizontal.

Comme vous l’aurez surement compris, le webdesigner travail avec pour unité, le pixel et non le centimètre comme dans l’imprimerie.
Et ne cherchez pas à faire des correspondances entre pixels et centimètres. Vous perdriez votre temps puisque suivant la taille physique de l’écran, la correspondance pixel/centimètre varie.

Donc dans Photoshop, si vous vous lancé dans une création destiné à Internet, n’utilisez que le pixel en tant qu’unité.

Autre notion important dans le webdesign et qui varie de l’imprimerie, c’est la résolution de votre « page blanche ».

Inutile de travailler comme les imprimeurs en 300 DPI (Dots Per Inchs), ce qu’on appelle la Haute Définition car un écran n’affiche que 72 DPI au maximum. Du coup votre échelle serait fausse par rapport à la taille réelle d’un écran. En 72 DPI, on parle alors de Basse Définition.

Dernier aspect propre au Webdesign, c’est la colorimétrie.

En effet, un imprimeur, en fonction de la machine qui va imprimer son document, a le choix entre le CMJN, le RVB, les Niveaux de Gris ou les Couleurs Lab. Mais en règle général un imprimeur travail en CMJN (Cyan Magenta Jaune Noir)

En webdesign, seul le Mode colorimétrique RVB (Rouge Vert Bleu) est valable puisque un écran ne peut afficher que du RVB.

Par conséquent, lorsque vous devez ouvrir un nouveau document en tant que webdesigner vous devez vous assurez que :

- vous êtes en mode colorimétrique RVB,
- la résolution de votre document est en 72 DPI,
- l’unité est bien le pixel

Puis vous ouvrez un document en 760x420 pixels.

Vous voilà prêt à « webdesigner »...

Les outils du web designer

Le premier sujet que je vais aborder dans ce blog, c’est l’aspect infographique de la création de sites Internet, plus communément estampillé « Webdesign ». En effet on parle maintenant assez couramment d’un webdesigner quelqu’un qui gère l’aspect infographique d’un site Internet.

Au fil des années, le webdesign est devenu un métier à part entière avec ses contraintes, ses codes et ses règles afin que chaque internaute puisse visualiser le site Internet proposé sensiblement de la même façon quelque soit l’écran sur lequel il le consulte et le navigateur qu’il utilise.

Comme tout créatif, le webdesigner démarre d’une page blanche. Et pour ouvrir cette page blanche, nous avons besoin d’un logiciel d’infographie.

Le monde professionnel de l’infographie est dominé par un logiciel : Photoshop, qui lui-même s’intègre dans une site logiciel qui porte le nom aujourd’hui de « Creative Suite ».

Mais, rassurez-vous, il tout a fait concevable d’aborder le webdesign sur d'autres logiciel. On citera notament Fireworks de Macromedia (inclut dans la suite logiciel Studio 8) ou, pour ceux qui n'on pas les moyens de s'offrir des licences parfois trop coûteuse ou qui sont désireux de travailler sur des logiciels gratuits en Open Source, Gimp ou GraphicConverter.

J'iFrabrique quoi?

Bonjour et bienvenue dans ma iFabrique...

Ce nouveau blog a pour objectif de vous ouvrir les coulisses du web tel que je les connais et de vous raconter, au fil des notes comment se fabrique un site Internet tant au niveau du design que de la programmation proprement dite. Et ce, jusqu’au stade final tel qu’il apparaît dans votre navigateur Internet que ce soit Internet Explorer, Firefox, Netscape ou encore Safari sous Mac.

Pourquoi « J'iFabrique » ? Tout d’abord parce que je suis un adepte du Mac et que tout ce qui est nouveau sous Mac commence par un « i »… iMac, iLife, iPod, etc…Mais aussi « i » pour « Internet » et « interactif ».