Tuto n°1 : Infos de base pour faire un layout

02.06.2015

Bonjour à tous !

Ce post n'est pas exactement un tutoriel. Il s'agit plutôt de regrouper quelques explications pour ceux qui auraient envie de faire leur propre layout comme des grands. :)

*

A. La composition du layout

Il est en 3 parties :

le fond ou le milieu, qui sera affiché sous le texte que l'on rajoutera dans le layout
le haut, qui sert de bannière principale
le bas, qui sert de bannière de fin

Il n'y a aucune démarcation entre le haut, le fond et le bas. Vous pouvez choisir de réaliser les 3 éléments séparément, ou de tout réaliser sur un document puis de recadrer les 3 parties en dernier. Au final, soyez seulement sûr que les 3 éléments aient la même largeur & que le bas de la bannière du haut collera parfaitement au haut de la bannière du fond, etc.

Il est bon de savoir aussi que l'élément qui servira de fond se répète "à l'infini" selon la quantité de textes dans le layout. Une couleur unie évite les problèmes de filage. Vous pouvez sinon choisir un pattern, c'est-à-dire un motif prévu pour se répéter. Si vous choisissez un fond original, vérifiez que le tout rende bien si l'élément se répète. Evitez néanmoins les fonds trop chargés ou trop flashy : le texte doit pouvoir rester lisible.

EXEMPLE :

Tuto n°1 : Infos de base pour faire un layout

On voit 3 parties : le Haut, le Milieu et le Bas.

Chaque partie a la même largeur pour que la juxtaposition les unes aux autres soit parfaite. C'est aussi la raison pour laquelle la couleur unie du Milieu et son cadre (couleur et épaisseur) est la même que sur le Haut et le Bas.

Le Milieu de couleur unie peut aussi se répéter à l'infini car le haut et le bas de l'élément Milieu sont identiques (une couleur et un cadre simple).

*

B. La création du layout

Il s'agit d'une création graphique. Par conséquent, vous pourrez le réaliser via un logiciel de graphisme.

Il existe une multitude de logiciels de graphisme, certains gratuits, d'autres payants, certains plutôt pas mal et d'autres pas terrible. Tout dépend de ce que l'on veut faire et de notre débrouillardise. Il y a moyen d'avoir des rendus très sympas avec des logiciels gratuits.

Les logiciels gratuits les plus connus sont :

Photofiltre 7 (lien de téléchargement ici)
Gimp (lien de téléchargement ici)

Le logiciel payant le plus connu est Photoshop.

Pour vous donner une idée, j'ai très longtemps graphé avec P7 et mes rendus étaient loin d'être dégueu' sans être parfait non plus. Le design du blog, qui est tiré du design que j'avais fait pour Key-neko, a été réalisé entièrement avec Photofiltre, ainsi que cette bannière, celle-ci ou encore ces avatars ( 1 / 2 / 3 ). Il y a donc véritablement moyen d'obtenir de beaux rendus.

Je ne connais pas assez Gimp pour en dire autant, mais certains ont des rendus proches de ce qu'un graphiste intermédiaire plutôt bon pourrait avoir avec Photoshop. Autant dire qu'il y a de quoi faire aussi.

Quant à Photoshop, c'est la crème. Tout les layouts ici sont réalisés avec. Il n'y a presque aucunes limites : seulement celles de l'imagination et de nos connaissances du logiciel. :)

*

C. L'encodage du layout

<tbody>

<tr>
<td>MON TEXTE
</td></tr>

</tbody>

</table>

Voici le code de base d'un layout. Il permet de poser les 3 éléments (Haut, Milieu et Bas) et de déterminer l'emplacement du texte au Milieu. Les éléments à modifier sont, de haut en bas :

L'url de l'élément du milieu, c'est-à-dire le fond (donc lien direct de l'image, en veillant à ce qu'il n'y ait pas d'espace entre les " et l'url)
La largeur de l'image du fond en pixel (a fortiori, la largeur du Haut et du Bas également)
L'url de l'élément du haut
L'url de l'élément du bas

Il s'agit là du squelette de base. D'autres portions de codes peuvent être rajoutées pour déterminer, par exemple, un écart entre le rebord du layout et le texte, et ainsi permettre un espacement. A vous de rajouter ce que vous souhaitez. Certains tutos sur le net sont très biens fait pour rajouter des éléments de bases dans un code.

Pour vous permettre de comprendre un peu, en encodage, il y a une balise qui ouvre et une qui ferme. La balise <table> comprend tout les éléments jusqu'à </table>. En bref, et avec mes très modestes connaissances :

la balise <table> nous fait comprendre qu'il s'agit d'un tableau. De fait, tout élément entre ces deux balises fera parti du tableau.
la balise <tbody> permet de construire l'intérieur du tableau.
les balises <tr> définissent une ligne du tableau ; elles peuvent comprendre plusieurs balises <td>.
les balises <td> définissent les cellules de chaque ligne. Une balise <td></td> représente une cellule.

*

C'est tout ce que j'ai en tête pour le moment. C'est à vous de jouer maintenant. Bon courage ! ;)