Le design graphique, c'est organiser des mots, des images et des couleurs pour qu'un message passe d'un coup d'œil : sur une bonne affiche de concert, tu sais qui joue, où et quand avant d'avoir fini de la regarder.
Le logiciel se choisit selon ce que tu fabriques : le logo de ton club, qui doit rester net sur un badge comme sur une banderole, se dessine en vecteurs, alors qu'une photo se retouche en pixels. Et pour en faire ton métier, un diplôme national y prépare en trois ans après le bac : le DN MADE mention graphisme.
Pixels ou vecteurs
Une image matricielle, qu'on appelle aussi bitmap, est une grille de petits carrés de couleur : les pixels. Une photo en est toujours une, et les fichiers JPEG ou PNG en contiennent. Trop agrandie, elle laisse voir ses carrés : c'est la pixellisation.
Une image vectorielle ne stocke pas de pixels mais des formes, décrites par des points et des courbes : « un cercle de 2 cm de rayon, rempli de bleu ». Le logiciel la redessine à chaque taille, donc elle reste nette du timbre à l'affiche géante.
Règle : ce qui doit changer de taille, comme un logo ou un pictogramme, se fait en vecteurs. Ce qui sort d'un appareil photo reste en pixels.
Piège classique : ouvrir un logo en JPEG dans un logiciel vectoriel ne le rend pas vectoriel. Il reste en pixels et pixellisera dès que tu l'agrandiras. Il faut le redessiner en formes, ou demander le fichier d'origine en vecteurs (SVG, PDF ou AI, le format d'Illustrator).
Écran ou papier : couleurs et résolution
Un écran fabrique ses couleurs avec de la lumière rouge, verte et bleue : c'est le mode RVB, et plus il ajoute de lumière, plus il s'approche du blanc. Une imprimante fait l'inverse avec quatre encres, cyan, magenta, jaune et noir : c'est le mode CMJN, et chaque encre ajoutée assombrit le papier. Les deux ne couvrent pas les mêmes couleurs.
Piège classique : un vert fluo qui éclate à l'écran n'existe pas avec quatre encres, et il sort terne de l'imprimante. Avant l'envoi, convertis ton affiche en CMJN avec le profil de couleurs que l'imprimeur t'indique, et vérifie le rendu. Pour un site, reste en RVB.
Pour le papier, la résolution compte aussi : c'est le nombre de pixels par pouce (ppp), un pouce valant 2,54 cm. L'imprimeur te dit celle qu'il attend, par exemple 300 ppp.
Formule : pour imprimer une longueur $L$ en cm à la résolution $r$ en ppp, il faut
$$\text{pixels} = \frac{L}{2{,}54} \times r$$
car $\dfrac{L}{2{,}54}$ convertit les centimètres en pouces, et chaque pouce demande $r$ pixels. Dans l'autre sens, à la résolution $r$, une image de $n$ pixels couvre au plus $\dfrac{n}{r} \times 2{,}54$ cm.
Les logiciels par famille
Les logiciels d'une même famille partagent la même logique, comme les calques (des couches transparentes empilées) : passer de l'un à l'autre ne t'oblige pas à repartir de zéro.
| Tu fabriques | Famille | Exemples |
|---|---|---|
| Retouche, photomontage | Pixels | Photoshop, GIMP |
| Logo, illustration | Vecteurs | Illustrator, Inkscape |
| Magazine, livret | Mise en page | InDesign, Scribus |
| Écrans d'une appli ou d'un site | Interface | Figma, Penpot |
La mise en page, ou PAO (publication assistée par ordinateur), assemble textes et images sur plusieurs pages. Un outil d'interface dessine les écrans d'une appli.
Photoshop, Illustrator et InDesign, de l'éditeur Adobe, se louent par abonnement. GIMP, Inkscape, Scribus et Penpot sont des logiciels libres, dont le code est ouvert, et gratuits. Affinity, gratuit pour les particuliers, réunit retouche, vecteurs et mise en page dans une seule application, et Figma a une offre gratuite limitée. Pour apprendre, un outil gratuit de la bonne famille suffit.
Les tendances, et ce qui reste
Une tendance est un style qui se répand un temps, comme les dégradés ou les typographies géantes, puis s'efface. Personne ne la décrète, et une liste des « tendances de l'année » vieillit vite. Pour les repérer, observe ce qui revient autour de toi.
Les règles de lecture, elles, ne passent pas. La hiérarchie d'abord : le lecteur doit savoir quoi lire en premier, puis en deuxième. Tu la crées avec la taille, la graisse (l'épaisseur des lettres), la couleur et la place.
Le contraste ensuite : un texte se lit s'il se détache de son fond. Sur le web, pour que les personnes qui voient mal puissent lire, le référentiel français d'accessibilité, le RGAA, fixe des seuils de rapport de contraste. Ce rapport va de $1:1$, texte et fond identiques, à $21:1$, noir sur blanc.
Règle : d'après le critère 3.2 du RGAA (version 4.1.2), un texte de moins de 24 px, ou de moins de 18,5 px s'il est en gras, demande un rapport d'au moins $4{,}5:1$ avec son fond. À partir de ces tailles, $3:1$ suffit. Des vérificateurs de contraste en ligne le calculent pour toi.
Conseil : avant de garder un effet à la mode, recule et regarde ton visuel en plissant les yeux. Si l'information principale ressort encore la première, l'effet sert ton message. Sinon, retire-le.
Se former en France
Au lycée, la série technologique STD2A (sciences et technologies du design et des arts appliqués) prépare à ces études. Elle n'est pas obligatoire : le DN MADE s'adresse aussi aux bacheliers généraux et professionnels.
Le DN MADE (diplôme national des métiers d'art et du design) dure trois ans et donne le grade de licence, le même qu'une licence universitaire, d'après son décret du 18 mai 2018. Il se prépare en lycée public ou privé sous contrat, ou dans certaines écoles techniques privées, et existe en plusieurs mentions, dont graphisme et numérique. Ce grade te permet ensuite de candidater en master.
Piège classique : de vieux guides parlent encore d'une année de mise à niveau en arts appliqués suivie d'un BTS de design. Ce parcours a laissé la place au DN MADE à la rentrée 2018 : c'est lui qu'il faut chercher.
Dans les écoles supérieures d'art, le DNA (diplôme national d'art) se prépare en trois ans, en option art, communication ou design, puis le DNSEP (diplôme national supérieur d'expression plastique) ajoute deux ans. D'après l'arrêté du 16 juillet 2013, on y entre avec le bac, après une épreuve de pratique artistique, une épreuve écrite et un entretien.
Quelle que soit la voie, garde tes travaux, même les projets inventés pour t'entraîner : ce dossier, ton « book », montre ce que tu sais faire mieux qu'une liste de logiciels.
Exercices corrigés
Du calcul direct au cas réel. Cherche chacun avant d'ouvrir la correction.
Exercice 1 : Tu veux imprimer une photo de 10 cm de large sur 15 cm de haut, et l'imprimeur demande 300 ppp. Combien de pixels lui faut-il en largeur et en hauteur, à l'unité près ? Un pouce vaut 2,54 cm.
Correction :
On convertit chaque côté en pouces, puis on multiplie par 300 : $\dfrac{10}{2{,}54} \times 300 \approx 1\,181$ pixels en largeur et $\dfrac{15}{2{,}54} \times 300 \approx 1\,772$ pixels en hauteur.
Il faut donc une photo d'environ $1\,181 \times 1\,772$ pixels.
Exercice 2 : Pour l'affiche du gala, on te donne le logo du lycée : un PNG de $600 \times 600$ pixels. Sur l'affiche, imprimée à 300 ppp, il doit mesurer 20 cm de large. Jusqu'à quelle largeur peut-on l'imprimer à 300 ppp ? Quelle résolution aurait-il à 20 cm ? Que fais-tu ?
Correction :
Largeur maximale : $\dfrac{600}{300} \times 2{,}54 = 5{,}08$ cm, bien loin des 20 cm voulus.
À 20 cm, soit $\dfrac{20}{2{,}54} \approx 7{,}87$ pouces, la résolution tombe à $\dfrac{600}{7{,}87} \approx 76$ ppp, environ quatre fois moins que demandé : le logo sortira flou.
Agrandir le PNG n'ajoute aucun détail : le logiciel invente des pixels intermédiaires. Demande au lycée le fichier d'origine en vecteurs, ou redessine le logo en vecteurs.
Exercice 3 : Sur le site de ton association, un gris sur fond blanc donne un rapport de contraste de $4{,}48:1$. D'après le critère 3.2 du RGAA, ce gris convient-il pour : a) le texte courant, en 16 px sans gras ; b) un titre de 32 px sans gras ; c) un bouton écrit en 16 px gras ?
Correction :
a) Non. Sous 24 px sans gras, il faut au moins $4{,}5:1$, et $4{,}48 < 4{,}5$. Arrondir $4{,}48$ à $4{,}5$, c'est le piège : un seuil « au moins » ne s'arrondit pas.
b) Oui. À partir de 24 px, $3:1$ suffit, et $4{,}48 > 3$.
c) Non. En gras, la limite descend à 18,5 px, mais 16 px reste en dessous : il faut encore $4{,}5:1$.
Un gris un peu plus foncé passerait dans les trois cas.
À retenir
À retenir :
- Pixels pour les photos, vecteurs pour tout ce qui change de taille.
- RVB pour l'écran, CMJN pour l'impression.
- Pixels nécessaires : $\dfrac{L}{2{,}54} \times r$, avec $L$ en cm et $r$ en ppp.
- Une tendance passe, la hiérarchie et le contraste restent. Sur le web, le RGAA demande au moins $4{,}5:1$ pour un texte de moins de 24 px.
- Après le bac : DN MADE mention graphisme (trois ans, grade de licence) ou école supérieure d'art (DNA, puis DNSEP).
Sources
- Décret n° 2018-367 du 18 mai 2018 relatif au diplôme national des métiers d'art et du design : texte sur Légifrance.
- Arrêté du 16 juillet 2013 portant organisation de l'enseignement supérieur d'arts plastiques : texte sur Légifrance.
- Référentiel général d'amélioration de l'accessibilité (RGAA), version 4.1.2, critère 3.2 : texte sur accessibilite.numerique.gouv.fr.