Cum se creează fonturi personalizate: 7 pași și 3 studii de caz

Hai sa recunoastem; există fonturi pe care noi, designerii, le place să le urâm. De fapt, cuvântul „ura” ar putea să nu fie suficient de puternic. Flagel? Blestem? Ciuma? Excremente? Am auzit că fiecare insultă literele, cifrele și simbolurile neînsuflețite pe care le folosim pentru a comunica ideile și am înțeles perfect. Am văzut (și am comis) crime de tip atât de grave încât până și cel mai ciudat buletin de birou ar fi stânjenit.

Dar dacă ți-aș spune că cele mai insultate fonturi ale generației noastre ar putea fi de fapt cel mai bun prieten al unui designer de marcă? Ce se întâmplă dacă ți-aș arăta cum să transformi litere slabe în logotipuri delicioase pe care clienții le vor iubi (și vor plăti bani buni pentru)? Ați fi dispus să schimbați radical felul în care priviți textul și să vă deschideți către un univers infinit de opțiuni creative? Sunteți gata să vă creați propriul font?

Dacă da, continuă să citești, pentru că sunt pe cale să introduc un proces simplu pe care îl poți folosi pentru a transforma imediat orice tip de literă pentru a crea mai bine un font. Și, pentru a arăta cât de eficient este procesul, voi demonstra fiecare pas folosind trei fonturi care sunt disprețuite cu pasiune de designeri de pretutindeni.

În primul rând, Jokerman , o colecție ciudată de personaje asemănătoare clovnilor care se găsesc de obicei pe bannere de ziua de naștere și pe cărți de vizită „fantezitoare”.

În continuare, avem Papyrus , copiat cu grijă de pe zidurile mormântului regelui Tut și alegerea preferată de meniuri de cafenea, artiști serioși și James Cameron.

În cele din urmă, un haiduc tipografic rece și de neclintit, care nu are nevoie de o prezentare — singurul, singurul, Comic Sans .

Din această grupare puțin probabilă, te voi învăța să vezi comori în care alții strigă „gunoi!” și creați logotipuri personalizate de cel mai înalt calibru.

Un proces simplu și de încredere

Să mergem într-o călătorie de la tipare hidoasă la logotip uimitor și să învățăm cum să facem un font. Vom începe cu ceva rău, vom termina cu ceva bun și vom urma aceiași șapte pași de fiecare dată. Care sunt cei șapte pași? Voi discuta detaliile în curând, dar mai întâi, câteva note despre instrumentele de care veți avea nevoie pentru acest tip de muncă.

Configurare recomandată

Designerii vizuali au acces la o multitudine de instrumente de design noi și accesibile. Dispozitivele cu ecran tactil și stilourile avansate, cum ar fi creionul Apple, fac captarea ideilor și trecerea la un flux de lucru digital mai ușoară ca niciodată. Experimentează liber și ține-te de ceea ce funcționează pentru tine. Acestea fiind spuse, prefer o abordare încercată și adevărată cu instrumente de încredere de la Adobe și Wacom:

• Photoshop — Folosit pentru a manipula fonturi și pentru a crea schițe rafinate în straturi.
• Illustrator — Folosit pentru a urmări schițele finale de rafinament și pentru a adăuga rapid elemente de stil precum culori, degrade, texturi, modele etc.
• Tabletă Wacom — Folosită pentru desenul digital în Photoshop.

Jokerman - De la Crass la Classy

Jokerman este Jim Carrey al tiparelor: niciodată subtil, tare din orice unghi, dar ciudat de atrăgător pentru masele. Este ridicol și exagerat și exact tipul de caractere pentru care a fost făcut acest tutorial. Fonturile nebunești precum Jokerman sunt pline de elemente de design curioase, dar nu au reținerea necesară pentru un logo cu bun gust. În calitate de designeri, trebuie să ne exercităm o bună judecată, iar asta înseamnă adesea să renunțăm la detalii de dragul unei comunicări mai clare.

Este un proces simplu în șapte pași, care ne duce de la tipare nedorită la logotip de ultimă generație. Este vorba despre un desen simplu, dar dacă poți să-ți scrii numele și să urmărești o imagine, ai toată abilitățile de care ai nevoie pentru a învăța cum să-ți faci propriul font. Sa incepem.

1. Examinați fontul

În Photoshop, alegeți un tip de literă (în acest caz, Jokerman), introduceți numele companiei de care aveți nevoie pentru logotipul dvs. și examinați rapid fiecare literă pentru a obține o idee despre posibilitățile de design, cum ar fi scara, proporția, greutatea literei etc.

2. Ideea

Folosind tableta Wacom, faceți o schiță liberă a logotipului dvs. Nu trebuie să fii exact aici. Doar schițați ceva rapid și ușor pentru a servi drept schelet pentru designul dvs.

3. Distorsionați caracterul

Folosind caracterul selectat, scalați, întindeți, înclinați și strângeți fiecare literă peste partea de sus a schiței de idee. Nu este nevoie să faceți lucrurile perfecte la acest pas. Îl vei rafina mai târziu, așa că continuă.

4. Schiță de corecție

Acum, faceți o schiță rapidă deasupra literelor dvs. distorsionate. Aici începeți să îmbunătățiți deficiențele fontului original și să adăugați propriile detalii de design.

5. Schiță de rafinament

Aceasta este ultima fază de schiță și rafinare în Photoshop. Curățați orice nu funcționează și completați-vă literele, astfel încât să vă puteți face o idee mai bună despre formă și despre relația spațiilor dintre litere.

6. Urmă vectorială

Puneți schița dvs. rafinată în Illustrator, scoateți instrumentul stilou și faceți clic cu atenție spre curbele Bezier frumoase.

7. Finisaje

Odată ce ați terminat trasarea vectorială, adăugați impact vizual cu detalii atent, cum ar fi culori, umbre, evidențieri, contururi etc.

Papirus - O transformare subtilă

Mărturisire: Îmi place Papyrusul și nu-mi pasă cine știe. Serios, nu toate tipurile de caractere pe care noi designerii le face plăcere să le atacăm sunt de fapt atât de proaste. Folosit excesiv? Pot fi. Kitschy? OK, da. Dar doar pentru că o fontă face pe cineva să simtă că documentul ei de design amator are demnitate, nu înseamnă că este rău. Și așa simt eu despre Papyrus. Este ca și cămașa de rochie pe care am cumpărat-o de la Old Navy: se potrivește bine și mă face prezentabil pentru ocazii speciale.

Acestea fiind spuse, cămașa mea nu are margini uzate intenționat. Deci, să vedem dacă putem păstra părțile frumoase ale formelor de litere ale lui Papyrus, în timp ce facem aspectul general și simțim puțin mai contemporan.

1. Examinați fontul

Din nou, începem cu Photoshop. Selectați tipul dvs. de tip (Papyrus) și introduceți numele logotipului. Aruncă o privire la fiecare scrisoare, notând eventualele detalii de design.

2. Ideea

Desprindeți tableta Wacom și schițați rapid câteva idei de compoziție. Nu vă gândiți prea mult la acest pas. E ca și cum ți-ai mâzgăli numele într-un caiet.

3. Distorsionați caracterul

La fel cum am făcut pentru Jokerman, scalați, întindeți, înclinați și striviți fiecare literă peste partea de sus a schiței de ideație pe care ați creat-o. O să devină dezordonat, dar nu-ți face griji!

4. Schiță de corecție

Dintre toți pașii, acesta poate fi cel mai descurajantă, dar nu stresați.

Nu construiești de la zero. Folosiți structura caracterului original în timp ce adăugați propriile îmbunătățiri pe măsură ce mergeți.

Această schiță poate fi super îngrozitoare și urâtă. Frumusețea straturilor din Photoshop este abilitatea de a efectua mai multe treceri, fiecare apropiindu-se de adevăratele tale intenții de design.

5. Schiță de rafinament

Acesta este ultimul nostru pas în Photoshop. Fii sincer cu tine cu privire la părțile din designul tău care nu funcționează. De asemenea, vă ajută să vă colorați literele, astfel încât să puteți vedea cum arată ele una lângă alta și să descoperi orice nereguli de formă.

6. Urmă vectorială

Plasați schița rafinată în Illustrator și începeți trasarea vectorială cu instrumentul stilou.

7. Finisaje

Cu trasarea vectorială completă, aduceți-vă logotipul la viață adăugând detalii precum culori, umbre, evidențieri și contururi.

Comic Sans — Ca și cum ar fi călcat o cămașă încrețită

Refuz să ridic în derâdere Comic Sans. Sigur, apare la momente nepotrivite, arătând puțin dezordonat, de parcă tocmai s-ar fi trezit dintr-un pui de somn. Dar, a îndeplinit un brief de design și poate fi doar cel mai cunoscut tip de literă din lume.

Din punct de vedere pur estetic, Comic Sans nu are ce să-ți placă. Este zguduit, zdruncinat, iar micile îndoituri și butoane din litere sunt destul de distrase. Totuși, are câteva particularități interesante care ar putea funcționa bine pentru un logo, iar percepția sa generală ca fiind cea mai proastă fontă din toate timpurile îl face provocarea perfectă pentru tehnica noastră de rafinare în șapte pași.

De data aceasta, mă voi concentra mai puțin pe mecanică și mă voi oferi puțin mai multă perspectivă asupra procesului meu de gândire creativă la fiecare pas.

1. Examinați fontul

Pentru acest pas, gândește-te la tine ca la părintele unui băiat adolescent stângaci. Nu se poate nega că el are un aspect mofturos, dar poți vedea dincolo de toate acestea până la o zi în care va fi un tânăr cu curele și bine rotunjit.

2. Ideea

Ideea este momentul să-ți eliberezi latura artistică care asumă riscuri. Vă puteți edita fără milă mai târziu, dar deocamdată, riscați.

Când făceam o recenzie la Comic Sans, am observat un fel de jucăuș pe care am încercat să îl încorporez în schițele mele de ideație.

3. Distorsionați caracterul

Poate că ești ca mine... oarecum obsesiv în legătură cu organizarea straturilor și utilizarea tehnicilor de editare nedistructive în Photoshop. Nu fi așa pentru acest pas!

Tastați cuvântul dvs., rasterizați fontul și distorsionați la naiba acele litere.

4. Schiță de corecție

După cum am spus, micile nereguli ale Comic Sans sunt înnebunitoare, așa că pentru acest pas, m-am concentrat pe îndreptarea liniilor și netezirea curbelor.

5. Schiță de rafinament

Pentru cel mai mult timp, am trecut direct de la pasul Schiță de corecție din Photoshop la Urmă vectorială în Illustrator. Dar, odată ce am văzut scrisorile mele vectoriale completate pentru prima dată, arătau întotdeauna puțin ciudat.

Acest pas de rafinare este o modalitate excelentă de a vă asigura că literele sunt bine distanțate. La urma urmei, formele formate între litere sunt la fel de importante ca și literele în sine.

6. Urmă vectorială

Poate fi ușor să-ți închizi creierul atunci când folosești instrumentul stilou. Începeți să indicați, să faceți clic și să trageți mânerele și nu mai căutați modalități de a vă îmbunătăți designul.

Nu face asta! Când schițați manual, luați în mod constant decizii și corecții în fracțiuni de secundă. Ar trebui să utilizați instrumentul stilou într-un mod similar.

7. Finisaje

Am fost mulțumit de felul în care a rezultat următorul vector, așa că am optat pentru o umbră simplă de bloc și câteva linii de accent interioare.

În mod ideal, literele tale vor putea să stea singure, fără nicio înfrumusețare. Finishing Touchs sunt menite să vă facă designul pop, dar ar trebui să vă protejați de adăugarea prea multor efecte speciale.

Oportunitatea lucrurilor nedorite

Noi, designerii, suntem înțelepți să rămânem conectați la tendințele, instrumentele și modurile de gândire existente în profesia noastră. Învățăm și creștem ca comunitate și, dacă o mare parte din domeniul nostru vede ceva prost, ar trebui să căutăm să înțelegem de ce.

Cu toate acestea, ar trebui să rezistăm și impulsului de a respinge în mod categoric practicile de design, mai ales la capriciul opiniei populare. Când ne confruntăm cu ceva care este privit ca fiind rău, cum ar fi folosirea lui Jokerman, este bine să aflăm de ce alți designeri se simt așa, dar este miop să arunce o resursă potențial valoroasă la gunoi.

În schimb, păstrați în minte cât de mult puteți în dosar. Luați notițe mentale, faceți observații, clasificați lucrurile care vă plac și nu vă plac și stocați o selecție diversă de opinii de la alți designeri.

Nu știi niciodată, într-o zi s-ar putea să faci ridicolul comunității de design de neconceput și risc, folosind Comic sans ca fundație pentru noul logotip frumos al clientului tău.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator