La grille typographique sous Photoshop CC 2014 (ver. octobre2014)

photoshop_CC_2014

Cet article va vous expliquer une nouvelle méthode de travail pour la création d’une grille typographique sous Photoshop, grâce à une nouvelle fonctionnalité inhérente à la version CC 2014 (inexistante sur les versions antérieures).

Nous verrons la méthode habituellement utilisée, puis la nouvelle, accompagnée d’un tutoriel pour vous guider pas à pas dans la construction de votre grille.

Bien entendu cette méthodologie s’applique aussi bien aux projets print que web.

PETIT RAPPEL

Les fondations de la mise en page telles que nous les connaissons actuellement remontent aux premiers codex, ancêtres de nos livres modernes.

C'est sur cette base que se sont développées toutes les règles et habitudes de mise en page appliquées par les copistes, puis les typographes et les graphistes depuis des siècles.

Naturellement, de nombreux réflexes de conception propres aux livres et aux supports papier ont été importés vers la page Web.

Aussi au début d’un projet créatif, tout web-designer/graphiste qui doit réaliser une maquette fonctionnelle et/ou graphique, pour structurer cette dernière utilisera une grille typographique.

Par grille typographique on entend la division verticale et horizontale de la page :

  • Verticalement, il s’agit de fractionner la page en colonnes. Chaque colonne étant séparée de sa précédente par une gouttière afin d’en séparer visuellement les contenus.
  • Horizontalement, c’est un rythme vertical qui est mis en place, où la hauteur de ligne et le corps du texte courant sont en étroite relation.

img1

 Ses avantages :

  • Permet d’organiser, de structurer de manière efficace les divers éléments de la page ;
  • Assure une bonne lisibilité de la page ;
  • Donne une cohérence graphique ;
  • Simplifie et facilite le processus créatif et la prise de décision du designer/graphiste ;
  • Apporte un fil conducteur au projet.

 De plus, elles peuvent être mises en place dès l’étape de prototypage afin d’apporter les repères principaux de la page, qui seront par la suite repris et affinés lors des phases de design et d’intégration.

 MÉTHODE ACTUELLE

Il s’agit de passer par différents services en ligne afin de créer notre grille, puis de la télécharger au format .png, .jpeg ou en version motif.

De manière globale, ils se présentent sous forme de « calculatrices » : il suffit de saisir la largeur de votre page, une quantité de colonnes et la largeur de gouttière puis le calculateur donnera toutes les combinaisons possibles.

 Quelques sites utilisés (liste non exhaustive) :

img2

 NOUVELLE MÉTHODE

Voici comment créer une grille typographique facilement sous Photoshop CC 2014 (cette fonctionnalité est l’équivalent du plugin « guideguide » pour ceux qui connaissent en suivant chaque étape.

 Etape 1

Une fois un nouveau document de travail créé, on se dirige alors vers la barre de menu en haut de la fenêtre puis Affichage > Nouvelle disposition des repères (situé dans le menu du haut d’écran).

etape1

 Etape 2

Une fenêtre s’ouvre et vous propose :

1. De choisir un format prédéfini par l’application ou un format sauvegardé par vous-même ;

2. De créer des colonnes en saisissant le nombre voulu, la largeur et la taille des gouttières ;

3. De créer des rangées en saisissant le nombre voulu, la largeur et la taille des gouttières ;

4. D’ajouter des marges au document, de positionner les colonnes au centre de la page ou encore de remplacer les repères existants par les nouveaux.

 Une fois la valeur des repères saisie, validez et votre grille typographique est réalisée.

etape2

 Etape 3 (optionnelle)

Si vous souhaitez ajouter un repère à votre grille, allez dans la barre de menu puis Affichage > Nouveau repère

Vous pourrez choisir un repère vertical ou horizontal ainsi que sa position dans la page.

etape3

 Et si vous souhaitez enlever des repères, plusieurs options s’offrent à vous :

1. Via la barre de menu puis Affichage > Effacer les repères ce qui a pour effet de supprimer tous les repères de la page ;

2. En repartant de la première étape, si on souhaite remplacer les repères existants par de nouveaux ;

3. Ou via l’outil flèche noire de la barre d’outil, en se positionnant sur un repère et en le glissant en dehors de la fenêtre.

Pour conclure cet article, que l’on utilise un service en ligne ou que l’on se sert de la nouvelle fonctionnalité de Photoshop, il faut garder à l’esprit qu’il n’y a pas d’outil de grille absolu, chacun trouvera une méthode qui lui convient. Ce qui est primordial dans la démarche, c’est qu’il ne doit  y avoir que des grilles bien pensées pour le contenu et le design que l’on souhaite mettre en place.

3 commentaires

  1. Bonjour,
    comment dupliquer des repères d’un plan de travail à l’autre sur photoshop?
    Merci de votre aide.

  2. Bonjour Max,
    je connais 2 méthodes (sur Photoshop v.2017) :
    – la première, il s’agit de dupliquer le plan de travail existant, le contenu (à effacer) ainsi que les repères vont suivre ;
    – la seconde, consiste à refaire une nouvelle disposition des repères sur le nouveau plan de travail. Idéalement, une fois la grille validée, il faut enregistrer les paramètres dans la fenêtre de disposition des repères.

    Cordialement

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.