• Home
  • Contact
  • Édito
  • Bientôt
  • Glossaire
  • Cours PDF
  • Restez informé
  • Forum

explainMe

Le graphisme et la programmation de façon simple.

  • Articles
    Commentaires
  • Dossiers

    • La couleur
    • La typographie
    • Site complet en flash
  • Catégories

    • Astuces
    • Couleurs
    • Cours théoriques
    • Divers
    • Flash
    • Flash – AS2
    • Flash – AS3
    • Non classé
    • Réflexions
    • Typographie
  • Articles les plus lus

    • Site complet en flash : part 1 (12 936)
    • Site complet en flash : part 2 (9 232)
    • Site complet en flash : part 3 (6 924)
    • La couleur dans vos créations (6 758)
    • Site complet en flash : part 4 (6 689)
  • Mots-clefs

    colorimétrie HTML site complet masque sens CSS font cours Site AS2 équipe Flash tutoriel ton direct caractères spéciaux actionscript couleurs italic Typographie vie du blog caractère gras police webdesigner théorie CMJN symbolique sondage RVB Résolution Réflexion perception Divers Astuce Tableau associatif XML règles typographiques cercle chromatique forum AS3 Photoshop gamme de couleurs
La typographie dans Photoshop

La typographie dans Photoshop

Le 9 février 2009


La typographie
  • La typographie : premier contact
  • La typographie : Quelques règles
  • La typographie dans Photoshop

Introduction |

Ce chapitre a pour but de vous présenter quelles sont les différentes options offertes par Photoshop en matière de typographie.

Connaître les règles qui régissent l’utilisation des caractères est une chose, mais savoir comment effectuer tous les réglages qu’elles nécessitent, dans son logiciel de création préféré, en est une autre.

Les différents panneaux de contrôle |

Bien qu’étant un logiciel de retouche d’images et de création bitmap, Photoshop est doté d’outils assez puissants concernant la gestion des caractères.

Comme dans la plupart des logiciels de création, les options sont répartis sur 2 palettes :

  • La palette Caractère
  • La palette Paragraphe

La palette caractère gère toutes les options liées aux caractères, que ce soit de façon individuelle ou non (mots, phrases, textes).

La palette paragraphe quand à elle gère tout ce qui a trait aux « zones de textes », ainsi que l’utilisation ou non des paramètres de césure et certaines marges applicables aux paragraphes.

les palettes Caractère et Paragraphe de Photoshop

La barre d’options :

En plus des 2 palettes que nous venons de présenter, Ps vous offre la possibilité d’accéder aux réglages les plus communs grâce à la barre d’options (situé en haut de l’interface par défaut).

De plus elle offre l’accès à certains réglages qui ne sont pas dans les palettes Caractère et Paragraphe…

La barre d'options de Photoshop pour l'outil texte

Créer un texte dans Photoshop :

Pour créer un texte dans Ps, vous avez 2 solutions. Soit vous cliquez une fois sur la scène et vous rédigez votre texte, soit vous dessinez une zone de texte rectangulaire en maintenant le bouton gauche de la souris enfoncé.

La méthode utilisée détermine le type de texte et vous autorise, selon le cas l’utilisation de certaines propriétés, notamment au niveau des paragraphes.

Et oui ! Difficile d’imposer une justification à un texte qui n’est pas dans une zone de texte !

Créer un texte dans Photoshop

La palette Caractère |

Examinons un peu toutes les options offertes par Photoshop en termes de typographie…

Le choix de la police se fait à l’aide de la liste déroulante.

Petite astuce : Ps vous affiche une prévisualisation de la police dans la liste déroulante. Vous pouvez régler la taille d’affichage de cette prévisualisation dans les propriétés du logiciel [menu Édition -> Préférences -> textes]

Photoshop : choix typographie

Le choix de la font se fait via la seconde liste déroulante sur la droite. Les choix offerts ici dépendent essentiellement de la police de caractères. En effet, certaines polices vous proposent un nombre assez conséquent de fonts, tel que certaines versions de l’Helvetica par exemple qui vous proposeront du Medium, Bolder,…  Malheureusement il n’est pas rare qu’une police gratuite ne comporte qu’une seule font.

Le « minimum syndicale »  se compose généralement du quatuor : Normal, Italic, Bold, Bold Italic.

Photoshop : choix font typo

La taille de la police se règle soit en sélectionnant une valeur dans la liste, soit en saisissant un nombre dans la case (si par exemple vous souhaitez une valeur supérieur à la valeur maxi présente dans la liste).

Photoshop : choix corps typo

L’interlignage peut servir lorsque vous utilisez des polices particulières comme certaines polices manuscrites avec des jambages particulièrement développés.

Photoshop : l'interlignage

Le crénage représente l’espace entre deux caractères dans un couple bien définit. Par défaut une police de qualité contient des informations concernant ce crénage, aussi le réglage métrique (par défaut) est-il suffisant.
Cependant certaines polices ne possèdent pas d’informations sur le crénage, aussi le réglage optique peut-il améliorer les choses. Enfin si vous souhaitez donner un effet particulier ou bien que vous utilisez plusieurs polices dans un même mot, vous pouvez augmenter ou réduire le crénage selon vos goûts.

Les principales paires de caractères concernées par ces réglages sont les suivantes :

LA, P., To, Tr, Ta, Tu, Te, Ty, Wa, WA, We, Wo, Ya et Yo.

Photoshop : le crénage

L’interlettrage se règle exactement comme l’interlignage, en fonction des besoins. Par exemple il peut être visuellement intéressent d’augmenter ou de réduire l’interlettrage pour certains titres afin de faciliter la lecture ou bien de créer un effet. Cependant je vous conseille de ne pas trop exagérer le réglage de l’interlettrage d’un texte car cela peut vite nuire au confort de lecture. Ce qui est supportable pour un titre l’est beaucoup moins pour un texte.

Photoshop : l'interlettrage

La largeur et la hauteur des caractères peuvent également êtres modifiées, si jamais vous souhaitez « élargir » les caractères d’un texte. Attention cependant car il s’agit ici de littéralement déformer les caractères. A manier avec précaution donc.

Photoshop : hauteur et largeur des typos

Bien entendu Ps vous offre la possibilité de préciser la couleur des textes ou de certains caractères d’un texte, tout dépend de votre sélection au moment d’appliquer la couleur.

Photoshop : couleur typo

Enfin un petit réglage permet de peaufiner le décalage vertical d’une portion de texte.

Photoshop : décalage vertical du texte

La palette Caractère possède une « ligne » regroupant tout un tas de fonctionnalités assez utiles.

Cependant il convient de manier ces options avec prudence et en connaissance de cause. En effet à l’instar de la déformation des caractères, l’activation de certaines options de cette « ligne » peut vous induire en erreur si vous n’y prenez pas garde.

Je m’explique :

Cet avertissement vaut surtout pour les options Faux gras et Faux italic car comme leurs noms l’indiquent parfaitement, il s’agit de truquer le rendu de la police en forçant le gras ou l’italic. Et bien que ces options peuvent parfois s’avérer utiles lors de l’utilisation de certaines polices (certaines polices ne sont fournies que dans une seule font : normal ou regular : surtout les polices gratuites), il arrive régulièrement qu’après avoir effectué tout un tas de réglages, l’on désir changer de police. Et c’est précisément là que l’erreur se produit car Ps ne réinitialise pas tous vos réglages lorsque vous changez de police (et heureusement d’ailleurs). Donc vous risquez de vous retrouver avec une police en Faux gras ou en Faux italic (et peut-être même les deux d’ailleurs), alors que ces réglages correspondent à une autre police, alors que la nouvelle possède une font Bold italic bien plus « propre ».

Photoshop : faux gras et faux italic

Nous voici donc en bas de la palette Caractère. Cependant il reste 2 options encore, mais celles-ci, bien qu’étant situées dans la palette caractère, tiennent plus des paragraphes à mon sens.

Il s’agit de la langue (qui sera utilisée par le correcteur orthographique de Ps et pour les règles de césure) et de la méthode de lissage des caractères.

Je ne vais pas m’éterniser sur le choix de la langue, c’est une évidence pour tout le monde je pense…

En revanche les paramètres de lissage méritent une petite illustration.

Photoshop : les méthodes de lissage du texte

Les zooms ont volontairement été accentués au niveau de la pixellisation pour mieux vous permettre de vous rendre compte des différences.

La palette Paragraphe |

Beaucoup moins fournie que sa grande sœur, la palette Paragraphe gère principalement le type de justification que vous souhaitez appliquer à un « bloc » de texte. Je parle bien de « bloc » car vous aurez fait le rapprochement par vous-même, mais on ne peut appliquer de justification à un texte qui ne dépend pas d’un « bloc ».

La justification se règle donc en choisissant le type souhaité. La justification peut s’appliquer de 2 manières différentes :

  • Soit vous sélectionnez tout votre texte (ou juste vous vous placez sur le calque contenant le bloc de texte), ce qui appliquera la justification à l’ensemble du texte.
  • Soit vous sélectionnez une partie du texte, ce qui n’appliquera la justification qu’à la sélection.  Pratique pour composer un texte dans un seul bloc.

Pour une définition des différents types de justifications existants, je vous renvoie au chapitre 2 sur la typographie. Ils sont tous supportés par Photoshop.


Les marges permettent d’ajouter des marges à droite et à gauche du paragraphe, ainsi le texte est « écarté » du bord du cadre. Vous pouvez également préciser le décalage à apporter à la première ligne d’un paragraphe. Ainsi la première ligne débutera plus loin que les autres, comme on peut le trouver dans certains livres.

Photoshop : retraits de paragraphe

La césure peut être soit activée soit désactivée en cochant la case à cet effet.

Mais c’est quoi la césure ?

La césure c’est en fait un ensemble de règles qui stipulent ce que l’on doit faire des mots qui dépassent de la justification.
Lorsque vous saisissez un texte dans un bloc, il arrive qu’un mot soit trop long en fin de phrase. Le premier réflexe serait de passer le mot à la ligne suivante pour remédier rapidement au problème. Mais dans un souci d’esthétisme vis-à-vis des justifications il existe des règles (propres à chaque langue) qui précisent comment les mots doivent êtres « coupés » selon le cas. Ainsi on évite de ne laisser que 2 caractères en début ou fin de coupure. On évite également de faire trop de coupures sur des lignes adjacentes.

Certains logiciels (notamment ceux d’édition comme Indesign ou Quark Xpress) permettent de modifier ces règles au cas par cas si besoin. Photoshop n’étant pas un logiciel d’édition (mais de manipulation d’images rappelez-vous), il ne permet pas de tels réglages.

Pour quelques options de plus |

Si les palettes Caractère et Paragraphe sont déjà bien remplies, il reste tout de même encore quelques options que nous n’avons pas vu et qui sont bien utiles pour certaines mais « cachées ». Voici donc deux petites illustrations pour tenter de vous les présenter.

Photoshop : options supplémentaires de la palette Caractère

Options supplémentaires de la palette Caractère.

Photoshop : options supplémentaires de la palette Paragraphe

Options supplémentaires de la palette Paragraphe.

Écrire dans tous les sens |

En fait le titre de cette section est un peu exagéré (quoique).

Dans Photoshop, il est possible de déformer vos textes grâce à la palette « déformation de texte » accessible depuis la barre d’options. Je ne vais pas détailler ici les différentes options de ce panneau, je vous laisse le soin de tester les différentes variations possibles… Sachez toutefois que ces effets sont relativement peu utilisés dans le monde professionnel (enfin je crois ?!) car ils conduisent généralement à des effets un peu « kitch » ressemblant à s’y méprendre aux vieux effets de titres de Word (si vous vous rappelez, les textes en 3D avec de bons gros effets de couleurs).

En revanche il reste une possibilité, héritée d’Illustrator (depuis la version CS il me semble), qui autorise à écrire un texte sur un tracé effectué à la plume. Et ça rend parfois bien des services.

Pour réaliser cette prouesse technique de haut-vol, rien de plus simple ( ;)) :

  1. Créer le tracé que le texte devra suivre.
  2. Sélectionner l’outil Texte horizontal  Texte vertical (selon vos besoins).
  3. Cliquez sur le tracé (voyez comme le curseur change d’aspect).
  4. Saisissez votre texte.
  5. Réglez l’affichage du texte à l’aide de l’outil de sélection direct [A], et c’est terminé !

Photoshop : texte le long d'un tracé

Cette méthode marche aussi sur les formes dessinées à l’aide des outils permettant de réaliser des formes vectorielles (outils Rectangle, Ellipse,… [U]).

Les erreurs à éviter |

Malgré toute la bonne volonté du monde, et tous les réglages offerts par Photoshop, il reste encore des pièges dans lesquels vous pouvez tomber.

Damned !

Attention aux transformations manuelles :

Lorsque l’on est pressé, il est facile de redimensionner un texte avec l’outil Transformation manuelle [Ctrl + T]. Cependant méfiez vous. Premièrement c’est une façon de faire quelque peu « barbare », mais surtout Photoshop ne recalculera pas la taille de votre texte en fonction de sa nouvelle taille « transformée ». C’est-à-dire que si votre texte a 8 pt comme taille à l’origine et vous l’agrandissez artificiellement pour le grossir à 2 fois sa taille (par exemple), il aura toujours la taille de 8pt pour Photoshop ! Ce qui fausse donc toutes les données et votre appréciation des choses si jamais vous revenez sur le fichier plus tard.

Attention à l’angle de votre texte :

Parfois on aimerait écrire sur une ligne à 30 degrés mais sans passer par les outils tracé et autres joyeusetés. Donc on rédige notre petit texte, puis on fait une petite transformation manuelle (encore elle ;-) ) de 30 degrés. Oui mais voilà, le texte est plutôt vilain suite à cette manipulation. On a l’étrange impression que les lettres ne se trouvent pas sur la même ligne.

Pour pallier à ce désagrément, pixellisez votre texte avant de lui faire subir une rotation via la transformation manuelle (excepté pour les rotations de 90° qui passent très bien).

La justification c’est bien mais…

Lorsque l’on spécifie qu’un texte doit être justifié dans un bloc, on a parfois la surprise de voir l’interlettrage complètement bouleversé avec certains espaces entre les mots beaucoup plus large que la normale. Créant ainsi des « trous » dans le paragraphe qui porte un coup à l’esthétisme de l’ensemble de la composition.

Pour pallier à ça il va vous falloir tâtonner (pas le choix, tous les textes sont différents) en faisant plusieurs essaies de réglages au niveau de l’interlettrage pour obtenir un ensemble cohérent.

Je aï les césures !

Attention il s’agit d’une appréciation totalement personnelle.


Les règles de césures font partie intégrante de la langue français (et d’ailleurs chaque langue à ses propres réglages en la matière). Pour ma part j’ai profondément horreur de devoir revenir à la ligne pour terminer la lecture d’un mot. C’est peut-être ridicule, mais c’est comme ça (je n’ai pas choisie en même temps). Heureusement la palette paragraphe de Photoshop possède une petite case nommée « césure » que l’on peut décochée. Ce qui a pour effet de supprimer totalement la césure pour le bloc sélectionné.

Méfiez-vous cependant, car la non-application des règles de césure engendre très facilement l’erreur précédente des « trous » dans un texte justifié…

Conclusions |

Voilà, à présent vous savez comment créer et régler vos textes dans Photoshop.

J’espère que ce cours vous aura été utile et que vous serez plus à l’aise à l’avenir pour ce qui est de la gestion des textes dans Photoshop.

Dans le prochain cours nous verrons comment régler ses typographies dans Illustrator.

«La typographie : Quelques règles
Wikio

Catégorie(s) : Typographie

Article lu 2 422 fois

BofPeut faire mieuxPas malIntéressantTrès intéressant [5,00 / 5 - 4 vote(s)]

Loading ... Loading ...

Articles en rapport

  • La typographie : Quelques règles
  • Site complet en flash : part 7
  • Photoshop : transmission de masque
  • Et maintenant, la suite (sondage) !
  • La typographie : premier contact
Haut de page

6 commentaires sur “La typographie dans Photoshop”

  1. Pod dit :
    11 février 2009 à 10:05

    Super « cours » ! ^^ Par contre, sur la première image, interlignage et interlettrage ne sont-ils pas inversés ?

    Répondre
  2. admin dit :
    11 février 2009 à 12:32

    Exact, je corrige ça ce soir.

    Répondre
    • admin dit :
      11 février 2009 à 21:01

      Voilà c’est rectifié et j’en ai profité pour ajouter une partie supplémentaire que j’avais omise sur les options supplémentaires des palettes Caractère et Paragraphe.

  3. Pod dit :
    12 février 2009 à 9:04

    Super boulot ce site, bonne chance pour la suite

    Répondre
  4. Tom INATOR dit :
    27 février 2009 à 20:45

    Très bon tutoriel, merci beaucoup de ces explications.

    PS: Moi aussi je Haïe les césure !

    Répondre
    • admin dit :
      27 février 2009 à 20:48

      « PS: Moi aussi je Haïe les césure ! »

      LOL Bienvenue au club ! J’en profite pour inviter tous ceux qui se sentent rebutés par les césures à se faire connaître. Combattons ensemble contre cette tyrannie… ;)

      Et merci pour ton compliment.

Laisser une réponse

Cliquer ici pour annuler la réponse.

Haut de page

Derniers articles

  • Bonnes fêtes de fin d’année à tous !
    le 23 décembre 2009
  • Site complet en flash : part 7
    le 18 décembre 2009
  • Photoshop : transmission de masque
    le 4 novembre 2009
  • Et maintenant, la suite (sondage) !
    le 26 octobre 2009
  • Changement d’hébergeur
    le 21 octobre 2009

Derniers commentaires

  • bonjour et bravo... vraiment un trés bon...
    par Podi le 21 janvier 2010 | 0:05
  • Bonjour, Il faudrait voir ton code mais ...
    par admin le 15 janvier 2010 | 13:39
  • bonjour et bravo pour ce tuto superbemen...
    par gorrevod le 15 janvier 2010 | 12:08
  • Merci toi aussi !...
    par Epoc le 14 janvier 2010 | 19:51
  • Bonjour. Merci pour le compliment tout d...
    par admin le 11 janvier 2010 | 20:33

Crédits

Copyright ©2010 | explainMe
Contact | boris@explain-me.com
Design | infoTRASH
Propulsé par | WordPress

Inscription
Connexion


PageRank Actuel

pix-cration d'or  Zero awards 2009 : explainMe : Meilleur site d'enseignement