Comment créer des polices personnalisées : 7 étapes et 3 études de cas

Avouons-le; il y a des polices de caractères que nous, les concepteurs, adorons détester. En fait, le mot "haine" n'est peut-être pas assez fort. Fléau? Malédiction? Peste? Excrément? J'ai entendu chacun utilisé pour insulter les lettres, les chiffres et les symboles inanimés que nous utilisons pour communiquer des idées, et je comprends tout à fait. J'ai vu (et commis) des crimes de type si grave que même le bulletin de bureau le plus extravagant serait embarrassé.

Et si je vous disais que les polices de caractères les plus vilipendées de notre génération pourraient en fait être les meilleures amies d'un créateur de marque ? Et si je vous montrais comment transformer des formes de lettres ternes en logotypes succulents que les clients adoreront (et pour lesquels ils paieront cher) ? Seriez-vous prêt à changer radicalement votre façon de voir la typographie et à vous ouvrir à un univers d'options créatives en expansion infinie ? Prêt à créer votre propre police ?

Si c'est le cas, continuez à lire, car je suis sur le point de vous présenter un processus simple que vous pouvez utiliser pour transformer immédiatement n'importe quelle police de caractères afin de mieux créer une police. Et, pour montrer à quel point le processus est efficace, je vais démontrer chaque étape en utilisant trois polices de caractères qui sont passionnément méprisées par les designers du monde entier.

Tout d'abord, Jokerman , une collection loufoque de personnages ressemblant à des clowns que l'on trouve généralement sur les bannières d'anniversaire et les cartes de visite "fantaisistes".

Ensuite, nous avons Papyrus , minutieusement copié des murs de la tombe du roi Tut et le choix préféré des menus des cafés, des artistes sérieux et James Cameron.

Enfin, un hors-la-loi typographique cool et inébranlablement décontracté qui n'a pas besoin d'être présenté - le seul, le seul, Comic Sans .

De ce regroupement improbable, je vais vous apprendre à voir des trésors là où d'autres crient "poubelle !" et créez des logotypes personnalisés du plus haut calibre.

Un processus simple et fiable

Partons en voyage d'une police de caractères hideuse à un logotype époustouflant et apprenons à créer une police. Nous commencerons par quelque chose de mauvais, terminerons par quelque chose de bien et suivrons les mêmes sept étapes à chaque fois. Quelles sont les sept étapes ? Je discuterai un peu des détails, mais d'abord, quelques notes sur les outils dont vous aurez besoin pour ce genre de travail.

Configuration recommandée

Les concepteurs visuels ont accès à une pléthore d'outils de conception nouveaux et abordables. Les appareils à écran tactile et les stylets avancés comme le crayon Apple facilitent plus que jamais la capture d'idées et le passage à un flux de travail numérique. Expérimentez librement et conservez ce qui fonctionne pour vous. Cela dit, je préfère une approche éprouvée avec des outils fiables d'Adobe et Wacom :

• Photoshop - Utilisé pour manipuler les polices de caractères et créer des croquis de raffinement en couches.
• Illustrator - Utilisé pour tracer les croquis de raffinement finaux et ajouter rapidement des éléments de style tels que des couleurs, des dégradés, des textures, des motifs, etc.
• Tablette Wacom — Utilisée pour le dessin numérique dans Photoshop.

Jokerman - Du grossier au chic

Jokerman est le Jim Carrey des polices de caractères : jamais subtil, fort sous tous les angles, mais étrangement attrayant pour les masses. C'est ridicule et exagéré et exactement le type de police pour lequel ce tutoriel a été conçu. Les polices de caractères loufoques comme Jokerman regorgent d'éléments de conception curieux mais manquent de la retenue requise pour un logotype de bon goût. En tant que concepteurs, nous devons faire preuve de discernement, ce qui signifie souvent renoncer à des détails au profit d'une communication plus claire.

C'est un processus simple en sept étapes qui nous emmène d'une police de caractères indésirable à un logotype haut de gamme. Il y a un dessin simple à faire, mais si vous pouvez écrire votre nom et tracer une image, vous avez toutes les compétences dont vous aurez besoin pour apprendre à créer votre propre police. Commençons.

1. Revoir la police de caractères

Dans Photoshop, choisissez une police de caractères (dans ce cas, Jokerman), tapez le nom de l'entreprise dont vous avez besoin pour votre logotype et examinez rapidement chaque lettre pour avoir une idée des possibilités de conception telles que l'échelle, la proportion, le poids des lettres, etc.

2. Idée

À l'aide de votre tablette Wacom, faites un croquis libre de votre logotype. Pas besoin d'être précis ici. Esquissez simplement quelque chose de rapide et facile pour servir de squelette à votre conception.

3. Déformer la police de caractères

À l'aide de la police de caractères que vous avez sélectionnée, mettez à l'échelle, étirez, inclinez et écrasez chaque lettre par-dessus votre croquis d'idéation. Pas besoin de rendre les choses parfaites à cette étape. Vous l'affinerez plus tard, alors continuez.

4. Croquis de correction

Maintenant, faites un croquis rapide par-dessus vos lettres déformées. C'est là que vous commencez à améliorer les défauts de la police d'origine et à ajouter vos propres détails de conception.

5. Croquis de raffinement

Il s'agit de la dernière phase d'esquisse et de raffinement dans Photoshop. Nettoyez tout ce qui ne fonctionne pas et remplissez vos lettres afin d'avoir une meilleure idée de la forme et de la relation des espaces entre les lettres.

6. Trace vectorielle

Déposez votre croquis de raffinement dans Illustrator, sortez l'outil stylo et cliquez avec précaution sur votre chemin vers de belles courbes de Bézier.

7. Touches finales

Une fois que vous avez terminé le traçage vectoriel, ajoutez un impact visuel avec des détails réfléchis comme les couleurs, les ombres, les rehauts, les contours, etc.

Papyrus - Une transformation subtile

Confession : J'aime Papyrus, et peu m'importe qui sait. Sérieusement, toutes les polices de caractères que nous, les concepteurs, aimons dénigrer ne sont pas si mauvaises. Surutilisé ? Peut-être. Kitsch ? D'accord, ouais. Mais ce n'est pas parce qu'une police de caractères donne à quelqu'un l'impression que son document de conception mature a de la dignité qu'il est mauvais. Et c'est ce que je ressens pour Papyrus. C'est comme la chemise habillée que j'ai achetée chez Old Navy : elle me va bien et me rend présentable pour les occasions spéciales.

Cela dit, ma chemise habillée n'a pas de bords effilochés intentionnellement. Voyons donc si nous pouvons conserver les belles parties des lettres de Papyrus tout en rendant l'aspect général un peu plus contemporain.

1. Revoir la police de caractères

Encore une fois, nous commençons dans Photoshop. Sélectionnez votre police de caractères (Papyrus) et entrez le nom du logotype. Jetez un œil à chaque lettre, en notant les détails de conception potentiels.

2. Idée

Sortez votre tablette Wacom et esquissez rapidement quelques idées de composition. Ne réfléchissez pas trop à cette étape. C'est comme griffonner votre nom dans un cahier.

3. Déformer la police de caractères

Tout comme nous l'avons fait pour Jokerman, mettez à l'échelle, étirez, inclinez et écrasez chaque lettre au-dessus du croquis d'idéation que vous avez créé. Ça va être salissant, mais ne vous inquiétez pas !

4. Croquis de correction

De toutes les étapes, celle-ci peut sembler la plus décourageante, mais ne la stressez pas.

Vous ne construisez pas à partir de zéro. Vous utilisez la structure de la police d'origine tout en ajoutant vos propres améliorations au fur et à mesure.

Ce croquis peut être super horrible et moche. La beauté des calques dans Photoshop réside dans la possibilité d'effectuer plusieurs passes, chacune se rapprochant de vos véritables intentions de conception.

5. Croquis de raffinement

C'est notre dernière étape dans Photoshop. Soyez honnête avec vous-même à propos des parties de votre conception qui ne fonctionnent pas. Cela aide également à colorer vos lettres afin que vous puissiez voir à quoi elles ressemblent les unes à côté des autres et découvrir toute irrégularité de forme.

6. Trace vectorielle

Placez l'esquisse de raffinement dans Illustrator et commencez votre tracé vectoriel avec l'outil plume.

7. Touches finales

Une fois votre tracé vectoriel terminé, donnez vie à votre logo en ajoutant des détails tels que des couleurs, des ombres, des rehauts et des contours.

Comic Sans - Comme repasser une chemise froissée

Je refuse de ridiculiser Comic Sans. Bien sûr, il apparaît à des moments inappropriés, semblant un peu échevelé comme s'il venait de se réveiller d'une sieste. Mais, il a rencontré un cahier des charges et pourrait bien être la police de caractères la plus connue au monde.

D'un point de vue purement esthétique, il n'y a pas grand chose à aimer dans Comic Sans. C'est trapu, frumpy, et les petits plis et boutons dans les lettres sont assez distrayants. Pourtant, il a quelques bizarreries intéressantes qui pourraient bien fonctionner pour un logotype, et sa perception générale comme la pire police de tous les temps en fait le défi parfait pour notre technique de raffinement en sept étapes.

Cette fois, je me concentrerai moins sur la mécanique et vous donnerai un peu plus d'informations sur mon processus de pensée créative à chaque étape.

1. Revoir la police de caractères

Pour cette étape, considérez-vous comme le parent d'un adolescent maladroit. Il est indéniable qu'il est un goofball à l'air dégingandé, mais vous pouvez voir au-delà de tout cela jusqu'au jour où il sera un jeune homme solide et bien équilibré.

2. Idée

L'idéation est le moment de libérer votre côté artistique qui prend des risques. Vous pouvez vous modifier impitoyablement plus tard, mais pour l'instant, prenez des risques.

Lorsque je passais en revue Comic Sans, j'ai remarqué une sorte d'espièglerie rebondissante que j'ai essayé d'incorporer dans mes croquis d'idéation.

3. Déformer la police de caractères

Peut-être êtes-vous comme moi… un peu obsédé par l'organisation des calques et l'utilisation de techniques d'édition non destructives dans Photoshop. Ne soyez pas comme ça pour cette étape !

Tapez votre mot, pixellisez la police et déformez ces lettres.

4. Croquis de correction

Comme je l'ai dit, les petites irrégularités de Comic Sans sont exaspérantes, alors pour cette étape, je me suis concentré sur le redressement des lignes et le lissage des courbes.

5. Croquis de raffinement

Pendant très longtemps, je suis passé directement de l'étape Correction Sketch dans Photoshop à Vector Trace dans Illustrator. Mais, une fois que j'ai vu mes lettres vectorielles remplies pour la première fois, elles avaient toujours l'air un peu bizarres.

Cette étape de raffinement est un excellent moyen de vous assurer que vos lettres sont bien espacées. Après tout, les formes formées entre les lettres sont tout aussi importantes que les lettres elles-mêmes.

6. Trace vectorielle

Il peut être facile d'éteindre votre cerveau lorsque vous utilisez l'outil stylo. Vous commencez à pointer, cliquer et faire glisser des poignées et vous arrêtez de chercher des moyens d'améliorer votre conception.

Ne fais pas ça ! Lorsque vous dessinez à la main, vous prenez constamment des décisions et des corrections en une fraction de seconde. Vous devez utiliser l'outil Plume de la même manière.

7. Touches finales

J'étais satisfait de la façon dont la trace vectorielle s'est avérée, j'ai donc opté pour une simple ombre de bloc et quelques lignes d'accentuation intérieures.

Idéalement, vos formes de lettres pourront se tenir debout sans aucun embellissement. Les touches de finition sont destinées à faire ressortir votre design, mais vous devez vous garder d'ajouter trop d'effets spéciaux.

L'opportunité des choses indésirables

Nous, les concepteurs, sommes avisés de rester branchés sur les tendances, les outils et les modes de pensée existant dans notre profession. Nous apprenons et grandissons en tant que communauté, et si une grande partie de notre domaine voit mal quelque chose, nous devrions chercher à comprendre pourquoi.

Cependant, nous devons également résister à l'envie de rejeter purement et simplement les pratiques de conception, en particulier au gré de l'opinion populaire. Lorsque nous nous heurtons à quelque chose qui est considéré comme mauvais, comme l'utilisation de Jokerman, il est bon d'apprendre pourquoi d'autres concepteurs se sentent de cette façon, mais c'est à courte vue de jeter une ressource potentiellement précieuse dans le tas d'ordures.

Au lieu de cela, conservez autant que vous le pouvez dans votre esprit. Prenez des notes mentales, faites des observations, catégorisez les choses que vous aimez et n'aimez pas, et stockez une sélection variée d'opinions d'autres designers.

On ne sait jamais, un jour vous pourriez faire l'impensable et risquer de ridiculiser la communauté du design en utilisant Comic sans comme base du magnifique nouveau logotype de votre client.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques