Créer une grille de mise en page

S’il vous arrive régulièrement de mettre en page des brochures, des affiches ou même des sites Web, vous êtes très probablement familier avec les grilles de mise en page.

Si vous ne l’êtes pas, vous allez vite le devenir. Les grilles de mise en page sont un atout majeur (voire essentiel) pour achever un travail de mise en page de manière parfaitement structurée et ordonnée.

Plusieurs types de grilles existent ; en passant par les simples grilles basées sur la règle d’or (ou la règle des tiers) jusqu’aux grilles modulaires complexes. Ces dernières sont difficiles à mettre en place, car un certain calcul mathématique s’impose. Heureusement, il existe de nombreux outils pour vous aider à y parvenir.

Dans cet article, je vous présenterai Gridelicious, un outil en ligne fait en Javascript qui vous permet de calculer simplement et facilement des chiffres bien pratiques, vous allez vite vous en apercevoir…

Gridelicious est, il faut le spécifier, une alternative gratuite et moins complète de Grid Calculator. Grid Calculator vous permet d’aller un peu plus loin dans vos calculs, et de le faire de manière plus fluide (un logiciel est toujours plus aisé et pratique qu’une application Web), mais comme ils demandent un sacré prix (45 $), les plus démunis d’entre nous se contenteront aisément de Gridelicious, qui a vu le jour justement grâce à quelqu’un qui s’est indigné contre le prix de Grid Calculator.

Pour l’exemple, nous utiliserons un format bien standard : Lettre US, et nous utiliserons InDesign, bien que le principe soit certainement applicable à plusieurs autres applications professionelles de mise en page. Ces directives vous permetteront de créer facilement une mise en page « modulable »; il est possible d’aller plus loin évidemment, mais c’est un bon début. Au fait, les noms des menus InDesign sont donnés en français, mais si vous avez une version anglaise et que vous trouvez pas, parlez-en dans les commentaires de cet article, on trouvera bien pour vous. Il peut s’avérer commode également de mettre ses unités de règles en points pour l’exercice (ou en mm selon ce que vous utilisez), ainsi que d’activer le magnétisme des grilles.

  1. Créez donc un nouveau document dans InDesign, de 8,5" x 11" (Lettre US, mais libre à vous amis français de mettre du A4 et d’entrer les valeurs en conséquence lorsque le moment sera venu). Mettre toutes les marges à 0 pour un peu de propreté durant l’exercice.
  2. Créez une boîte de texte, mettez-y du texte bidon (Lorem Ipsum). Paramétrez au passage la fonte, la taille et surtout l’interligne que vous désirez. Cette étape est important car l’interligne est la pierre angulaire de tout le calcul.
  3. Du côté de Gridelicious, choisissez d’abord Inches à Page Measurement Units.
  4. Entrez 8.5 et 11 à Width et Height (sous la section Page size).
  5. Disons que je choisis 14 pts comme interligne. On l’inscrit dans la case Desired Leading, juste dessous.
  6. Surprise, y’a des champs qui s’auto-remplissent avec des valeurs tout ce qu’il y a de bizarres, dont 2 plutôt importants :
    Correct Leading (13.895 pt) : Ceci est votre valeur d’interligne corrigée pour que le calcul fonctionne. C’est le chiffre-clé.
    Baselines
    (57) : Ceci est le nombre de lignes de bases dans le document, pour cet interligne corrigé.
  7. De retour dans InDesign, armé de vos chiffres, faites InDesign > Préférences > Grilles…
  8. Sous Grille de ligne de base, mettre :
    Début 0
    Relative àHaut de page
    Pas : 13.895 pt (Correct Leading)
  9. Sous Grille du document, à horizontalement et verticalement, mettre :
    Pas : 13.895 pt
    Subdivisions : 1
  10. Faire OK, puis afficher la grille si vous n’en voyez aucune : Affichage > Grille et repères > Afficher la grille du document.
    Wow, une belle grille toute bien ajustée! C’est pas tout, il faut aussi déterminer la hauteur d’f. La hauteur d’f va vous aider à aligner parfaitement vos images avec la typographie. Vraiment, c’est génial, et on va foutre des repères partout pour ça, ça vaut le coup!
  11. Si vous avez créé un style de paragraphe pour votre texte bidon, modifiez-le afin d’avoir la bonne interligne corrigée, c’est-à-dire 13.895 pt dans notre exemple. Si vous n’aviez pas créé de style, faites-le sur le champs.
  12. Dans l’onglet Retrait et espacement du style, choisissez Toutes les lignes à Aligner sur la grille. Ceci force la typographie à l’aligner parfaitement sur votre belle grille toute neuve.
  13. Placez une boîte de texte en partant du bord du haut de la page, dans lequel vous tapez un f minuscule (avec le style de paragraphe précédemment paramétré). Votre f minuscule devrait maintenant être parfaitement aligné sur la ligne du bas de la grille.
  14. Pour obtenir une mesure tout ce qu’il y a d’exact, transformez votre lettre f en vecteurs : Texte > Vectoriser (avec la boîte de texte sélectionnée). Voilà donc le f devenu une forme vectorielle.
  15. Créez un nouveau calque appelé Hauteur f, plus en zoomant sur la lettre, descendez précisément un guide pour l’aligner parfaitement sur le dessus de la lettre f.
  16. Avec le guide toujours sélectionné, faites Édition > Exécuter et répéter et entrez ces valeurs :
    Nombre de répétitions : 57 (la valeur Images de tout à l’heure)
    Décalage vertical13.895 pt (Correct Leading)
  17. Cliquez sur OK (vous pouvez voir un aperçu juste avant pour être sûr que les guides couvrent la surface du document).
    Grille et hauteur d'f
  18. Voilà, vous avez une joli grille facile à utiliser, vous pouvez maintenant ajuster vos marges et colonnes selon votre bon goût. En passant, il est préférable d’aligner la marge du haut avec l’un des repères d’hauteur d’f.
    Alignement de texte et d'images

C’est tout pour l’instant, libre à vous d’aller plus loin, ce n’était qu’une introduction aux grilles de mise en page! Je remercie au passage mon pote de chez 3e Avenue qui m’a fait découvrir Grid Calculator.

Pour les plus feignants d’entres vous, je fournis même le fichier InDesign CS3 ayant servi à faire l’exemple :

23 réflexions au sujet de « Créer une grille de mise en page »

  1. axzo

    Merci et bravo!!
    Tuto super bien fait, simple et clair.

    Je me permets juste une petite observation, je suis sous CS4, et lorsqu’on fait  » Édition > Exécuter et répéter  » il faut bien veiller à reporter l’unité de l’interlignage.
    La première fois je n’avais copié que les chiffres et par défaut InDesign l’a interprété en millimètres au lieu de points. Du coup ça ne fonctionnait pas.
    Mais une fois corrigé, plus de problème.

    Encore merci.

  2. Pierre

    Je démarre également avec la complexité d’indesign… Blog très interressant !
    Ma question : comment faire avec une ou plusieurs grilles d’images, présentées en planches de vignettes ? Et par rapport au nombre d’or, etc…
    Encore merci, Pierre (Berlin)

  3. Guy Labbé

    Bonjour Pierre, tu es d’où à Berlin?
    Que veux-tu dire par « grilles d’images présentées en planches de vignettes » ? C’est pour présenter ta grille à un client ou bien je saisis mal ce que tu veux dire?

  4. Jennifer

    Hm assez intéressant même si je n’ai jamais utilisé Grid Calculator, j’ai fait beaucoup d’œuvres cours dans la Decision Grid. Il est également très facile à utiliser et les logiciels utiles. Merci pour la compréhension =)write resume

  5. Jeanne

    Merci pour ce tuto ! j’ai maintenant une belle grille grâce à vous ! ensuite :) quelle est l’utilisation optimale d’une grille pour le texte et les images – quelles sont les meilleures idées/règles de répartitions image/texte … je souhaite faire un catalogue de quelques 20 pages avec indesign sur un format carré (17X17) avec différents niveaux de lecture … auriez vous des conseils ou bien des liens d’aussi grande qualité que le votre! MERCI pour votre aide!

  6. charles

    bonjour je debute sur indesign et j’ai vraiment besoin de savoir utiliser cet logiciel pour un projet de magazine gratuit pour aider les jeunes. je que je voudrait savoir c’est la mise en page de ladite magazine cote graphique ca vas. ce que je voudrais c’est savoir creer une maquette pour un magazine si vous pouvez m’aider ecrivez moi sur dajicaht@yahoo.com

  7. error fix

    Merci pour ce tuto ! j’ai maintenant une belle grille grâce à vous ! ensuite :) quelle est l’utilisation optimale d’une grille pour le texte et les images – quelles sont les meilleures idées/règles de répartitions image/texte … je souhaite faire un catalogue de quelques 20 pages avec indesign sur un format carré

  8. Jeremy @ agence marketing

    super je suis toujours en train de m’arracher les cheveux pour organiser ma grille dans InDesign.

    J’étais en train de faire la brochure corporative pour ma CIE et Alleluia voilà que je trouve ton blog.

    Merci Guy et alp!

  9. FX

    Hello,

    Merci pour ce tutoriel !
    Je suis entrain de réaliser une brochure pour ma société et je souhaite réaliser le document dans les règles de l’art.

    J’ai donc lu votre tuto avec une grande attention. J’ai réussi à adapter votre tuto au format de mon document. En effet celui-ci est un carré (format fermé) aux dimensions de 150mm * 150mm. Aucun soucis de ce côté là.

    Cependant, je bloque à un autre niveau. C’est pour les colonnes. En effet, sur le site : http://arlodesign.com/gridelicious, il est indiqué « Gutter Width » et « Row Space » … mais lorsque je vais dans Pages > Marges et colonnes, je n’ai pas la possibilité d’éditer ces éléments. Comment faire car mon document n’a que des grilles dans le sens horizontal… je voudrai également des grilles dans l’autre sens !

    De plus, je ne sais pas vraiment, quelle est la différence entre les grilles issues de « Grille de document » et les grilles paramétrables via « Marges et colonnes ». J’ai remarqué que les grilles de document mettaient des colonnes en dehors de mon document et franchement, je n’en vois pas trop l’utilité.

    Je souhaite en fait, faire en sorte d’avoir un espacement harmonieux dans tout le document (horizontal et vertical). Pour avoir quelque chose de ce type : http://css.4design.tl/files/2010/10/indesign-gabarit-page-web.png

    Merci pour vos réponses !

  10. FX

    C’est encore moi…

    Une dernière question… la largeur de la gouttière (dans « Page » > « Marges et colonnes ») doit-être égale à la valeur du « Correct Leading » ou à la valeur de « Gutters and Rowspace » ?

    A+

  11. admin Auteur de l’article

    Bonjour! Merci pour votre intérêt.

    Premièrement, les gouttières (gutter) sont paramétrables dans « Marges et colonnes » de InDesign, mais pas l’espace entre les rangées. Vous devez les créer vous-même avec des guides répétés dans la page maître (Master Page) du document. Je dirais que l’importance des rangées est moins grande mais vous pourriez essayer de les faire, ça vaut toujours mieux.

    La valeur de la gouttière correspond à Gutters and Rowspace. Correct Leading correspond uniquement à l’interlignage.

    N’hésitez pas si vous avez d’autres questions!

  12. FX

    Merci pour ces infos.

    En fait, je suis entrain de m’inspirer d’une brochure que j’ai trouvé sur le net, pour créer la mienne. Voici le lien : http://issuu.com/pansyhui/docs/bhangra_processbook/1

    Je souhaite avoir une brochure professionnelle, tant au niveau visuel, qu’au niveau technique (dans sa création). C’est pourquoi j’essaye de comprendre et d’utiliser le principe des grilles.

    Cependant, je dois bien avouer que j’ai un peu de mal à comprendre le fonctionnement et l’intérêt des grilles, car quand j’observe la structure de la brochure d’inspiration… j’ai l’impression que les grilles n’ont pas vraiment été utilisées.

    Je ne vois pas comment une seule et même grille peu s’adapter à toutes les mises en pages de pages. Faut-il créer une grille par gabarit et donc le principe de la grille est très réducteur dans le cadre d’une petite brochure (environ 20 pages avec des mises en pages différentes) ?

    De plus comment faire lorsque l’on a des « titres » et des « textes » qui n’ont pas le style et donc pas le même interlignage… faut-il se baser sur l’interlignage le plus important (c’est à dire les textes, car présents en plus grande quantité ?).

    En fait, je pense qu’il serait très intéressant d’avoir un exemple concret. C’est à dire avoir une page finalisée d’une brochure et la même page avec les grilles (etc…) activées pour bien assimiler le principe. J’essaye de trouver ça sur le net… mais c’est pas gagné.

    Merci encore pour toutes vos réponses.

    A+

  13. thomas james louis vuitton

    Hi great website! Does running a blog such as this take a lot of work? I’ve very little expertise in computer programming however I was hoping to start my own blog in the near future. Anyways, if you have any suggestions or techniques for new blog owners please share. I understand this is off topic but I just needed to ask. Thanks!
    thomas james louis vuitton http://mywritingresources.com/Special/index.asp?keyword=thomas-james-louis-vuitton&id=1714

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>