Ta devise, tes six pictos et ta charte : l'identité visuelle complète
Ton logo existe ; il lui faut des mots et des compagnons. Cette séance apprend le texte (titres, paragraphes, texte sur une courbe, caractères spéciaux), les styles qui gardent une typographie cohérente, la série de pictos tous identiques, et la livraison d'un logo en SVG. À la fin : un post « ma devise » et la page « Charte » de ton portfolio.
Ta marque, suite. Les deux polices de ta fiche d'identité entrent en scène : une pour les titres, une pour le texte. Les textes à taper sont dans textes-a-taper.txt de l'atelier 2 (page Ateliers). Tu préfères parler de Datashop ? Dessine les pictos des quatre canaux de vente de l'entreprise (site web, magasin, téléphone, marketplace) plutôt que ceux de ton métier.
Un nom suivi d'un astérisque (*) vient de l'aide officielle d'Affinity et n'a pas encore été relevé à l'écran : si l'info-bulle de ton Affinity dit autre chose, c'est elle qui a raison — et dis-le à ton formateur.
Le texte
Texte artistique ou zone de texte, police, corps, retraits, caractères masqués (25 min)Affinity a deux façons d'écrire, à choisir selon le texte :
| Outil | Geste | Pour | Comportement |
|---|---|---|---|
| Outil Texte artistique (T) | Un clic, puis on tape | Un titre, une devise, un mot dans un logo | Agrandir la boîte agrandit les lettres |
| Outil Texte cadre (dans la palette du Texte artistique ; Outil Zone de texte dans le studio Mise en page) | On glisse pour tracer un cadre | Un paragraphe, une légende | Le texte revient à la ligne dans le cadre, sans changer de taille |
La barre contextuelle du texte
Dès qu'un texte est sélectionné, la barre contextuelle montre l'essentiel : la famille de police (Arial par défaut), le style (Regular, Bold…) et le corps (la taille, en points). C'est l'équivalent du panneau Contrôle d'InDesign.
Caractère et paragraphe
Pour aller plus loin : les panneaux Caractère (interlettrage, interlignage, casse) et Paragraphe (alignement, retraits, interlignage, espace avant et après, dans sa section Espacement ; le premier champ est Retrait à gauche). Ils sont dans Fenêtre › Texte, et en onglets dans le studio Mise en page (l'onglet du paragraphe y est abrégé Par). Les sections repliées du panneau Paragraphe vont plus loin : puces, lettrines, et Décorations, où l'aide d'Affinity place un fond coloré derrière un paragraphe (Fond de paragraphe*), l'équivalent de l'« ombrage » d'InDesign.
Les caractères masqués
Un texte contient des caractères invisibles : espaces, retours à la ligne (¶), tabulations (→), espaces insécables. Les afficher (Texte › Afficher les caractères spéciaux, ou le bouton ¶ de la barre contextuelle du texte) explique un retour à la ligne bizarre ou un double espace. On les masque avant d'exporter : ils ne s'impriment jamais.
🔍 Pourquoi c'est important. Utiliser du texte artistique pour un paragraphe est l'erreur la plus fréquente : on agrandit le cadre et les lettres grossissent. Choisir le bon outil dès le départ évite de tout retaper.
Écrire sur une forme, et les caractères spéciaux
Une signature circulaire autour du logo ; ©, ®, l'espace insécable (15 min)Le texte sur une courbe
Pour écrire ton nom autour de ton monogramme, comme un tampon : dessine un cercle, prends l'Outil Texte artistique et clique sur le contour du cercle : le texte suit la courbe. Des poignées marquent son début et sa fin ; on les fait glisser pour placer le texte (la forme devient un tracé de texte : poignée verte au début, orange à la fin). Pour écrire à l'intérieur du cercle plutôt qu'à l'extérieur, on fait passer le texte de l'autre côté du tracé.
Les caractères spéciaux
Certains caractères ne sont pas sur le clavier :
| Caractère | Usage |
|---|---|
| © ® ™ | Droit d'auteur, marque déposée, marque |
| — – | Le tiret cadratin (dialogue, incise) et le demi-cadratin (de 9 h – 12 h) |
| • | La puce |
| espace insécable | Empêche une coupure entre deux mots : « 10 h », « M. Durand », et en français avant : ; ! ? |
Le panneau Navigateur de glyphes (Fenêtre › Texte › Navigateur de glyphes) montre tous les caractères de la police : un double-clic insère le caractère à l'endroit du curseur. Texte › Insérer ▸ propose aussi les plus courants (Symboles, Guillemets, Tirets et traits d'union, Espaces et tabulations).
🔍 Pourquoi c'est important. « (c) » à la place de ©, un deux-points qui part seul à la ligne suivante, un tiret trop court : ces détails trahissent un amateur. Un recruteur en design les voit tout de suite.
Les styles : une typographie qui ne varie pas
Styles de texte, un style d'après un autre, coller un style (20 min)Un style de texte enregistre une mise en forme sous un nom : « Titre », « Texte courant », « Légende ». On l'applique d'un clic, et le jour où l'on change le style, tous les textes qui le portent changent ensemble. C'est le panneau Styles de texte (Fenêtre › Texte › Styles de texte ; onglet abrégé StT dans le studio Mise en page).
- Il y a des styles de paragraphe (tout le paragraphe : police, corps, alignement, retraits) et de caractère (seulement quelques mots : un mot en gras, une couleur).
- Un style peut être basé sur un autre (champ Basé sur de l'Éditeur de style de texte, ouvert par clic droit sur le style › Modifier) : « Légende » basé sur « Texte courant » reprend sa police, et ne change que le corps. Changer la police de « Texte courant » change aussi celle de « Légende ».
Copier l'apparence d'un objet : la « pipette » d'Affinity
Dans InDesign, la pipette copie la mise en forme d'un objet sur un autre. Dans Affinity : copie l'objet modèle (Ctrl+C), sélectionne l'objet à changer, puis Edition › Coller › Style : il prend les couleurs, le trait et les effets du modèle. Le même sous-menu propose Créer un style. Pour une seule couleur, l'Outil Sélecteur de couleur (I) suffit.
🔍 Pourquoi c'est important. Un portfolio de huit pages où les titres ont trois tailles différentes paraît bâclé. Avec des styles, la cohérence est automatique, et changer de police de titre prend dix secondes au lieu d'une heure.
Six pictos en série
Dupliquer en répétant le décalage, aligner sur un objet clé (25 min)Une série de pictos tient en trois règles : la même grille (ici, des cases de 200 × 200 px), le même trait (épaisseur, extrémités), le même style (tout en contour, ou tout en aplat).
Dupliquer de manière spécifique
Pour poser six cases régulières : dessine la première, duplique-la (Ctrl+J) et déplace la copie de 200 px (panneau Transformer, champ X). Duplique de nouveau : Affinity répète le dernier décalage (duplication intelligente*, dans l'aide ; Ctrl+J correspond à Edition › Dupliquer) : la troisième case se place toute seule à 200 px de la deuxième. Quatre Ctrl+J plus tard, la rangée est faite.
Aligner sur un objet clé
Dans InDesign, on aligne sur un « objet clé » qui ne bouge pas. Dans Affinity, la liste Aligner sur du bouton Alignement propose Sélection initiale (le premier objet sélectionné reste fixe) et Dernière sélection (le dernier). Sélectionne le picto de référence en premier, puis les autres : ils s'alignent sur lui.
Dessine chaque picto avec les formes de base et les opérations booléennes de la séance 3, trait de 8 px, extrémités arrondies. Puis copie l'apparence du premier sur les autres : Edition › Coller › Style.
🔍 Pourquoi c'est important. Les pictos d'un site ou d'un CV sont lus en un coup d'œil : un seul qui dépasse ou qui est plus épais attire le regard au mauvais endroit. La régularité est ce qui fait une famille.
Calques et fusion, dans le studio Vecteur
Repérer chaque objet, le passer sur un autre calque, le mode Produit (15 min)Dans le studio Vecteur, chaque objet a sa ligne dans le panneau Calques : un rectangle, un texte, un groupe (qu'on déplie par sa flèche). Cliquer sur une ligne sélectionne l'objet, même caché sous un autre ; l'œil le masque, le cadenas le verrouille.
Ranger en calques
Pour une identité, trois calques suffisent : construction (la grille, verrouillée, masquée à l'export), logo, textes. Pour passer un objet sur un autre calque, on fait glisser sa ligne dans le panneau Calques, au-dessus du nom du calque d'arrivée.
Le mode de fusion le plus courant
Le Mode de fusion existe aussi pour les objets vectoriels. Le plus utilisé reste Produit : un tampon ou une forme colorée en Produit laisse voir la texture du dessous, comme une encre.
🔍 Pourquoi c'est important. Le .af que tu rends est lu par ton formateur comme par un futur employeur : des calques nommés et rangés montrent que tu sais organiser un fichier que d'autres reprendront.
Enregistrer et livrer ton identité
Le .af, l'export SVG avec le texte en courbes, le PDF et le PNG (20 min)Le fichier de travail reste le .af. Affinity ne sait pas enregistrer au format .ai d'Illustrator : pour un client sous Adobe, on livre un PDF ou un SVG, qu'Illustrator ouvre très bien, ou un EPS pour les vieux logiciels d'imprimerie.
Exporter le logo en SVG
Fichier › Exporter, format SVG. Les réglages relevés à l'écran :
| Réglage | Valeur conseillée | Pourquoi |
|---|---|---|
| Exporter le texte comme courbes | activé | Le texte devient des formes : il s'affichera dans ta police même chez qui ne l'a pas |
| Définir la viewbox | activé | Le SVG garde ses dimensions et se met à l'échelle proprement |
| Nombre de décimales | 3 (par défaut) | La précision des coordonnées : plus, c'est plus lourd sans être plus net |
| Qualité | 85 (par défaut) | Ne concerne que les parties en pixels (il ne doit pas y en avoir dans un logo) |
| Ajouter des sauts de ligne, Inclure le fond perdu | au choix / désactivé | Un fichier lisible par un humain ; pas de fond perdu pour un logo d'écran |
Garde une version modifiable. Une fois vectorisé, le texte ne se corrige plus au clavier. Exporte avec l'option ci-dessus, ou convertis le texte en courbes dans une copie du plan de travail (Vecteur › Convertir en courbes, Ctrl+Entrée, que le menu écrit « Ctrl+Return » ; pas dans le menu Calque), jamais dans ton seul original.
Exporter plusieurs plans de travail d'un coup
Pour sortir le logo, la planche et le post ensemble, active le studio Tranche dans le Gestionnaire de Studio : le panneau Tranches crée une tranche par plan de travail, à son nom, et le bouton Exporter les tranches les sort toutes, chacune dans son format.
🔍 Pourquoi c'est important. Un logo envoyé avec son texte en police « vivante » s'affiche chez le client dans une police de remplacement, souvent Arial ou Times. C'est l'erreur de livraison la plus courante : le contrôle « texte vectorisé » de l'atelier 2 est là pour ça.
★ Ce que tu publies ce soir. Un post Instagram carré (1080 × 1080 px, PNG) : ton logo, ta devise, un picto, aux couleurs et aux polices de ta charte. Et la page « Charte » de ton portfolio : la palette en #hex, les deux polices, les six pictos. Avec la planche du logo, c'est l'atelier 2.
Quiz de fin de séance
Six questions pour vérifier que c'est acquisCes six questions reprennent toute la séance, au niveau de la certification Tosa. Réponds sans revenir en arrière : seul ton premier essai compte.
Moins de 4 sur 6 ? Reprends le module 5 : un logo livré en SVG avec du texte non vectorisé s'affiche dans une autre police chez le client. C'est un contrôle automatique de l'atelier 2.