Share
Ce veți creaVă voi arăta cum să creați un font de culoare. Crearea fonturilor nu a fost niciodată atât de rapidă, distractivă și ușoară ca în Fontself, o extensie puternică pentru Adobe Illustrator și Photoshop CC. În acest tutorial, veți învăța cum să faceți un font de culoare.
Fontself vă permite să creați un font complet funcțional, cu toate clopotele și fluierele pe care fonturile profesionale le au (kerning, ligaturi etc.) și cel mai interesant lucru este că vă ajută să creați font color! Puteți face ca imaginația să devină sălbatică și să adăugați oricăror forme și culori pe care le doriți (inclusiv gradiente și alte efecte) personajelor voastre.
În afară de crearea fonturilor de culori care pot fi utilizate în Adobe Photoshop CC 2017/2018 și Adobe Illustrator CC 2018, puteți utiliza Fontself pentru a crea fonturi vectoriale standard "non-color" care pot fi utilizate în orice alt software, cum ar fi versiunile mai vechi ale Adobe Aplicațiile CC, CS6, Microsoft Word și multe altele.
Nu pot să aștept să-l încerc?
Mii de creatori de la Adobe, Google, Apple, Microsoft și alte companii bine cunoscute utilizează deja Fontself. Ceea ce este, de asemenea, cool despre faptul că este 100% indie software-ul, care a fost creat de trei dezvoltatori pasionați, cu scopul de a ne aduce un instrument prietenos de creare a fonturilor. Și au reușit!
Să trecem prin întregul proces de creare și folosire a propriului nostru font de culori în Adobe Illustrator CC 2018 și Fontself Maker!
Când creez un font de la zero, încep, de obicei, să descriu o idee generală. De data aceasta am decis să creez un font într-un stil plin de culoare.
Am început cu o schiță grosieră a fiecărei scrisori, încercând să le fac unic, dar păstrând stilul general. Voi folosi această schiță ca un ghid pentru contururile pe care le vom realiza în Adobe Illustrator.
Rețineți că Fontself Maker funcționează cu Adobe Illustrator CC 2015.3 și mai nou, dar pentru a utiliza fonturile de culoare, veți avea nevoie de CC 2018, așa că nu uitați să actualizați dacă nu ați făcut-o încă!
Începeți prin a crea un Document nou de mărimea dorită în RGB Color Mode. Dacă selectați altul Modul color, toate culorile vor fi transformate în RGB chiar dacă sunt definite în CMYK sau dacă documentul este în spațiul de culoare CMYK. Puteți afla mai multe despre spațiul de culoare din Fontself din pagina lor de ajutor.
Să începem cu litera A. Luați Instrumentul pentru poligoane (îl puteți găsi în același meniu drop-down ca și Instrumentul dreptunghiular (M)) și faceți un singur clic oriunde pe Artboard. Setați numărul feţe la 3 și faceți un triunghi.
Setați-o Completati culoarea la Nici unul si este Accident vascular cerebral culoare la purpuriu închis în Culoare panou. Acum, în Accident vascular cerebral panou (Fereastra> Accident vascular cerebral), Seteaza Greutate la 2,5 pt și Capac la Round Cap.
Acum putem șterge partea de jos a formei de care nu avem nevoie. Luați Instrumentul de selecție directă (A) și faceți clic pe marginea de jos a triunghiului. Loveste Șterge cheie (sau backspace dacă sunteți pe un Mac) să îl ștergeți.
Selectați forma cu Instrument de selecție (V) și lovit introduce pentru a deschide Mișcare fereastră. Seteaza Orizontală valoare pentru 25 px și Vertical la 0 px, și faceți clic pe Copie să duplicați forma și să o mutați spre dreapta.
Păstrați ambele forme, selectați Shape Builder Tool (Shift-M), țineți-vă jos Alt, și faceți clic pe piesa din dreapta pentru ao șterge.
Copie prima formă și redimensionați-o pentru a face un triunghi mic. Plasați-o în partea de jos, creând penei unei săgeți. Selectați forma, țineți apăsată tasta Alt, și trageți-o pentru a crea o copie. Adăugați încă două copii și atașați-le de-a lungul marginii din stânga a triunghiului.
Grup (Control-G) elementele create de pene și dublu click Reflect Tool (O). Selectează Axa verticala și faceți clic pe Copie pentru a întoarce forma spre partea opusă.
Luați Instrument de elipsă (L), țineți-vă jos Schimb, și fă un a 10 x 10 px cerc cu albastru închis Accident vascular cerebral și turcoaz Completati culoare.
Bacsis: Folosește Instrumentul pentru picioare (I) pentru a alege culoarea de umplere sau cursa sau orice setări de aspect și a le aplica altor obiecte. Puteți accesa opțiunile din Instrumentul pentru picioare (I) de dublu-clic aceasta în Unelte , apoi puteți bifa setările pe care doriți să le selectați și să le aplicați.
Copie cursa selectând-o și tragând în lateral în timp ce țineți apăsat Alt. Folosește Instrument Pen (P) pentru a adăuga un punct de ancorare în mijlocul liniei. Apoi utilizați Ștergeți instrumentul pentru punctul de ancorare (-) pentru a șterge punctul din partea de sus a cursei.
Luați Instrument Pen (P) sau Instrumentul pentru segmentul de linie (\) și țineți Schimb pentru a face o linie orizontală peste literă. Aceasta va fi bara literei A.
Copiați (Control-C> Control-F) lovitura și trageți-o în jos. Faceți-o mai scurtă deplasând punctele cu Instrumentul de selecție directă (A).
Acum folosiți Instrument Pen (P) pentru a crea o linie zig-zag în partea superioară a literei, așa cum se arată în imaginea de mai jos.
Adăugați mai multe lovituri pe ambele părți ale literei, făcându-le să pară mai detaliate.
Acum că contururile literei A sunt gata, să adăugăm o culoare! Noi putem duplicat (Control-C> Control-B) scrisoarea și Ascunde copia în straturi făcând clic pe pictograma minusculă a ochilor, doar în cazul în care trebuie să folosim aceste contururi mai târziu.
Selectați copia vizibilă și mergeți la Obiect> Vopsea viu> Make.
Acum apucați Cupă Live Paint (K) și treceți peste zona pe care doriți să o umpleți cu culoare. Odată ce vedeți un contur roșu, faceți clic pe zona pentru al umple.
Continuați să utilizați Cupă Live Paint (K) și selectarea de noi culori în Culoare panou pentru a umple triunghiurile din partea de sus a literei.
Acum hai să mergem Obiect> Vopsea live> Extindeți pentru a transforma fiecare secțiune colorată într-un obiect separat.
Folosește Instrumentul de selecție directă (A) pentru a trage câteva elemente, făcând compoziția mai dinamică.
Și acolo avem! Prima noastră scrisoare este terminată! Să trecem la următorul și să vedem ce altceva putem folosi pentru a face să pară unic.
Nu folosesc grilaje speciale sau speciale pentru acest font, pentru că vreau să păstrez un pic de atingere manuală fără a fi perfect perfect geometric sau pixel. Cu toate acestea, pentru a face fontul consecvent, trebuie să păstrăm toate literele de aceeași înălțime (în timp ce lățimea va fi diferită).
Porniți Rigle (Control-R) și trageți o pereche de ghidaje orizontale pe Artboard pentru a marca înălțimea literei A. Putem accesa Ghiduri din meniu Vizualizați> Ghiduri.
Să începem cu stemul literei B. Utilizați litera Instrumentul dreptunghiular (M) pentru a face un dreptunghi îngust de aproximativ 30 x 120 px (nu uitați să păstrați înălțimea egală cu înălțimea primei litere).
Selectați marginea inferioară cu Instrumentul de selecție directă (A) și ștergeți-l.
Adăugați câteva linii orizontale și atașați câteva 10 x 10 px cercuri turcoaz la partea de jos a formei. Noi putem copie aceste cercuri din scrisoarea noastră A.
Acum, să facem o linie orizontală dreaptă utilizând Instrument Pen (P) și du-te la Efect> Distort & Transform> Zig Zag. Seteaza mărimea la 10 px, Ridge pe segment la 5, și puncte la Colţ.
Clic O.K și du-te la Obiect> Extindeți aspectul pentru a aplica efectul.
Plasați zigzagul creat în interiorul părții superioare a literei și redimensionați-l pentru al face să se potrivească dreptunghiului.
Să creăm un dreptunghi de aproximativ 45 x 55 px și aliniați-o cu marginile de sus și de stânga ale literei. Pentru a face acest lucru, selectați tulpina și dreptunghiul creat și faceți clic pe tulpină din nou pentru ao face Obiect cheie (veți vedea o selecție mai groasă în jurul acestuia).
Deschide Alinia panou (Fereastra> Aliniere) și faceți clic pe Aliniere orizontală stânga și Vertical Align Top.
Să selectăm colțurile de sus și de jos ale dreptunghiului cu Instrumentul de selecție directă (A) și le face rotunjite trăgând marcatorul cerc al Live Corners mai aproape de centru. De asemenea, putem ajusta cornere raza manuală de la panoul de control din partea de sus.
Bacsis: Dacă nu puteți găsi panoul de control superior după actualizarea la Adobe Illustrator CC 2018, nu vă faceți griji! Este încă acolo și puteți să îl porniți Fereastră> Spațiu de lucru> Essentials Classic.
Să ștergem marginea din stânga a formei. Selectați colțul din stânga jos cu Instrumentul de selecție directă (A) și apăsați Șterge (backspace pe Mac).
Repetați același lucru pentru punctul din stânga sus, lăsând doar forma arcuită.
Faceți un arc mai mare pentru castronul inferior al literei B..
Adăugați un arc mai mic în interiorul bolului inferior. Faceți litera mai complicată prin adăugarea de curse orizontale și verticale. Finalizați contururile plasând două cercuri în interiorul vasului inferior.
hai duplicat (Control-C> Control-B) scrisoarea și păstrați-o invizibilă în cazul în care avem nevoie mai târziu.
Selectați copia vizibilă și Obiect> Vopsea viu> Make. Folosește Cupă Live Paint (K) si Instrumentul pentru picioare (I) pentru a alege și a aplica culori elementelor literei B.
Să terminăm scrisoarea. Mergi la Obiect> Vopsea live> Extindeți și utilizați Instrumentul de selecție directă (A) pentru a glisa unele părți colorate din contur.
Minunat! A doua scrisoare este terminată! Să vedem câteva tehnici pe care le putem folosi pentru alte litere și simboluri.
Luați Instrument de elipsă (L) și începeți cu baza literei făcând a 115 x 115 px cerc. Copie cercul creat și Lipiți în față (Control-C> Control-F). Reduceți mărimea copiei la 80 x 80 px.
După cum puteți observa, scrisoarea este puțin mai mică decât orientarea de sus. Am lăsat un spațiu deasupra cercului pentru a adăuga câteva detalii acolo.
Luați Instrument Pen (P), deține Schimb, și faceți o linie verticală în cercuri. Păstrarea liniei selectate, dublu click Rotiți instrumentul (R) și setați Unghi la 12 grade. Clic Copie pentru a adăuga o copie rotativă a liniei.
Acum apăsați Control-D pentru a repeta ultima acțiune și continuați să apăsați până când obțineți 30 de copii pentru a umple cercul.
hai grup (Control-G) razele create și ascunde pentru moment.
Acum, să creăm o siluetă a literei C. Utilizați Adăugați un instrument de ancorare (+) pentru a adăuga două puncte în partea dreaptă a cercului mai mare și două pentru cel mai mic, așa cum este marcat în imaginea de mai jos.
Acum putem folosi Instrumentul de selecție directă (A) să faceți clic pe segmentul de arc dintre punctele create și șterge aceasta. Repetați același lucru pentru ambele cercuri.
Acum să dezvăluim razele ascunse și să selectăm toate elementele C.
Luați Shape Builder Tool (Shift-M) și faceți clic pe dreptunghiurile formate prin traversarea liniilor. Nu faceți clic pe toate; lăsați un spațiu neatins la fundul formei.
Acum putem selecta piesele care nu sunt necesare din raze în centrul C și le ștergem.
Să rupem bucățile de raze din stânga literei C..
Folosește Instrument Pen (P) pentru a adăuga un nou punct de ancorare undeva în mijlocul liniei și pentru a șterge punctul de sus cu Ștergeți instrumentul pentru punctul de ancorare (-). În acest fel, detașăm piesa de marginea literei.
Continuați să alterați razele, făcând unele dintre acestea mai scurte și detașând altele pentru a adăuga variații la silueta literei.
Adăugați mai multe curse arcuite în partea interioară a literei. Atașați cercurile la vârfurile arcurilor mari.
Duplicat contururile create și utilizarea Live Paint si Cupă Live Paint (K) pentru a adăuga culori.
Obiect> Vopsea live> Extindeți forma și trageți niște dreptunghiuri colorate. Buna treaba! A treia scrisoare este terminată!
Continuați și creați mai multe litere, cifre și punctuație, tot ce vă poate fi necesar pentru fonturile viitoare. Nu vă faceți griji dacă nu faceți toate simbolurile dorite odată; puteți să redeschideți întotdeauna fișierul de fonturi și să le adăugați mai târziu.
Acum, pentru distracție! Din moment ce avem totul pregătit, putem crea în final un font folosind Fontself Maker!
Mai întâi de toate, hai să deschidem straturi și plasați toate literele în ordine alfabetică, de la stânga la dreapta. Fontself va atribui automat caracterele corespunzătoare dacă le plasați în ordinea corectă.
Putem redenumi direcția de jos, stabilind-o ca linie de referință.
Acum, asigurați-vă că toate literele noastre sunt aliniate la partea de jos și plasate pe linia de bază. Selectați caracterele și faceți clic pe Aliniere verticală inferioară în Alinia panou, folosind unul dintre caractere ca un Obiect cheie.
Mergi la Fereastră> Extensii și fugi Fontself Maker. Se va încărca o fereastră compactă a extensiei și puteți ajusta dimensiunea acesteia trăgând colțurile inferioare. Ea are o interfață simplă și ușor de utilizat, cu drag-and-drop interfață cu sugestii pop-up și un asistent online de chat care vă poate ajuta cu întrebările dvs..
Acum, să selectăm alfabetul nostru și să îl tragem în fereastra Fonturi. Aici avem mai multe opțiuni de alegere. Dacă aveți deja deja toate caracterele gata, puteți folosi 'A-Z' zona și lipiți scrisorile dvs. acolo. Fontself le va plasa automat în ordine corectă, dând fiecărei litere un nume adecvat.
În caz contrar, dacă nu aveți încă toate caracterele terminate, plasați cursorul mouse-ului peste "Orice caracter (lot)" câmp și eliberați tasta mouse-ului pentru a încărca caracterele.
În cazul nostru, facem un font mare, astfel încât toate literele vor fi aceleași pentru majuscule și majuscule.
Ceea ce este minunat despre Fontself este că face lucrurile mult mai ușoare: odată ce am aranjat și aliniat scrisorile noastre, programul le va plasa în ordinea corectă, folosind informațiile de la straturi panou. Doar asigurați-vă că trageți și căutați totul împreună, inclusiv linia de bază.
Dacă aveți nevoie de mai mult control asupra liniilor directoare și doriți să adăugați un ascender și descender, puteți face și el! Doar adăugați alte două linii directoare, le redenumiți "ascender" și "descender" în straturi panou, apoi glisați și plasați-le în Fontself împreună cu alfabetul. Voila!
Puteți afla mai multe despre utilizarea ghidurilor în Fontself din pagina de ajutor.
Acum avem fiecare scrisoare plasată în propriul slot. De aici, putem scrie ceva în Previzualizare live pentru a vedea cum arată și se joacă cu Scrisoare spațială, Spațiu liniar și Scară, dacă e nevoie.
Dacă faceți clic pe pictograma minusculă din partea dreaptă, puteți modifica dimensiunea fontului, alinierea și culoarea de fundal.
De asemenea, putem extinde fereastra de previzualizare a literei făcând clic pe pictograma cu săgeți diagonale mici din colțul din stânga sus al fiecărui slot de previzualizare (înconjurat în imaginea de mai jos) sau prin dublu-clic gigantul.
Aici avem mai multe opțiuni pentru fiecare literă. Putem trage linii, schimbând poziția ascender și descender și ajustarea altor setări.
Odată ce suntem mulțumiți de scrisori, să adăugăm și alte simboluri și semne de punctuație! Pentru a face acest lucru, trebuie doar să selectați elementele de pe Artboard și să faceți clic pe Lot buton în Acasă fereastră de Fontself. Simbolurile dvs. vor fi adăugate și plasate în ordinea corectă.
Acum, să aruncăm o privire asupra unor setări avansate care sunt vitale atunci când creați un font. Găsiți și faceți clic pe Avansat buton în Acasă fereastră de Fontself.
De aici, putem regla Spațiere, kerning, și alți parametri care sunt importanți pentru a face ca fontul să pară echilibrat și consistent.
Sa incepem cu Spațiere.
În tipografie, spaţierea sau urmărire este cantitatea de spațiu dintre caractere, care afectează densitatea și conferă fontului o deschidere sau o strângere relativă. De fapt, o distanțare bună vă va economisi o grămadă de timp atunci când creați un font, așa că asigurați-vă că începeți prin ajustarea acestuia!
Există mai multe moduri de a lucra cu spațierea în Fonturi. Mai întâi, faceți clic pe Spacing Pad fereastră și tastați câteva fraze acolo pentru a vedea cum se comportă caracterele într-un text. Acum, în zona gri din dreapta, puteți vedea o listă de litere și valorile acestora. Aici puteți edita distanțele prin introducerea unor valori precise în tabel.
Un alt mod de a edita spațierea este să o faci manual făcând clic pe caracterul însuși și trăgând liniile întrerupte pe partea stângă și pe partea dreaptă a acestuia. Veți vedea toate ajustările în Spacing Pad și în Previzualizare live zonă care are deja un exemplu de text cu toate personajele.
Acum, că suntem mulțumiți de densitatea textului și de aspectul său general, este timpul să reglați perechile de kerning făcând clic pe kerning buton.
kerning este procesul de ajustare a spațiului dintre anumite caracter perechi pentru a obține un rezultat plăcut vizual. În fonturile proporționale cu toate capacele, se întâmplă adesea că literele din unele combinații comune (cum ar fi VA sau AW) arata prea departe unele de altele. În acest caz, trebuie să găsim astfel de perechi și să ajustăm manual distanța între ele, creând kerning perechi. Și Fontself are această funcție prea! Mai mult, are deja câteva perechi comune de kerning în Previzualizare live fereastră, astfel încât să puteți vedea imediat rezultatul.
La fel ca în cazul spațiilor, există mai multe moduri de a ajusta kerning-ul. Mai întâi, faceți clic pe Kerning Pad fereastră și introduceți câteva perechi de kerning pe care doriți să le modificați, de exemplu AVA. Acum, în zona gri din dreapta, puteți vedea Kerning perechi fereastră și introduceți manual valorile.
Un alt mod de a ajusta kerning-ul este să faceți clic pe caracter și să trageți linia întreruptă între pereche. Linia roșie apare pentru valori negative, ceea ce face ca spațiul dintre litere să fie mai mic. Linia albastră indică spațiul în creștere cu o valoare pozitivă care mișcă literele mai departe una de cealaltă. Simplu ca asta.
Următorul lucru important pe care ați putea dori să îl utilizați în fontul dvs. - și Fontself are această caracteristică - este utilizarea lui ligaturi!
A ligatură este o combinație de două sau mai multe litere într-un singur simbol. De exemplu, în combinații comune, cum ar fi "tt", "fi" și "ff", am putea schimba unele elemente ale literelor, cum ar fi traversele, pentru a le face să pară mai bine împreună. În plus, în timp ce lucrăm cu fonturile de culori, putem folosi ligaturi în moduri mai creative, cum ar fi să facem niște cuvinte sau nume uimitoare prin adăugarea unor elemente noi, cum ar fi particule, flori sau butași. În acest caz, întreaga compoziție poate fi utilizată ca un simbol, adică ligatura.
Să presupunem că vrem să îmbinăm două litere împreună în "TT" pentru a le face un singur bar. După ce trageți noua literă, selectați-o pe Artboard. Apoi deschideți fereastra Fonturi și introduceți "TT" în zona de text din partea de sus și faceți clic pe Creați Ligature butonul de lângă el.
După ce ați dat clic pe buton, Fontself vă va întreba ce fel de ligatură doriți să creați. Mai târziu, puteți găsi ambele Ligaturi standard și Ligaturi discreționare în OpenType panou (Fereastră> OpenType) din Adobe Illustrator și să vedeți cum funcționează acestea.
Funcția ultimă, dar nu cea mai mică, care poate face ca fontul dvs. să fie unic și mai jucat supleanţi-versiunile alternative ale unor caractere (sau toate) care adaugă varietate întregului text. Acestea pot fi versiuni cu alte culori, contururi sau lemne.
De exemplu, aici puteți vedea că în cuvântul "CULORI", literele "O" sunt puțin diferite. Așa facem noi. Odată ce aveți versiunea alternativă a scrisorii pregătite, selectați-o pe Artboard și adăugați-o în Fontself. Programul vă va întreba dacă doriți A inlocui litera existentă "O" sau să creeze un glif alternativ. Doar faceți clic pe Alterna buton, și acolo aveți!
Acum, că am adăugat toate personajele în Fontself, am ajustat distanța și kerning-ul și am setat ligaturile și supleanții, este timpul să-i numim copilul!
Apasă pe Font Infos buton în Acasă fereastra Fontself și completați toate informațiile necesare. Sugestiile dezvoltatorilor vă vor îndruma pe tot parcursul procesului. Nu pot decât să menționez simțul umorului în această parte.
În cele din urmă, este timpul să încercați primul nostru font de culori! Oh, sunt atât de încântat!
Pentru început, o putem testa în Adobe Illustrator făcând clic pe Instalare în partea de sus a ecranului Acasă fereastră de Fontself. Acum puteți să vă selectați fontul în Caracter panoului Adobe Illustrator (Fereastră> Caracter) și încercați-l tastând ceva!
Odată ce sunteți mulțumit de rezultat, continuați și faceți clic pe Export în fereastra Fonturi, pentru a genera un fișier OpenType cu fontul și toate caracteristicile reale pe care le-am adăugat la acesta utilizând extensia. Exportul fontului vă permite, de asemenea Salvați munca ta și ori de câte ori ai nevoie să o editezi din nou, trebuie doar să o faci Deschis în Fontself și acolo aveți!
Buna treaba! Acum ne putem distra folosind fontul nostru de culori în Adobe Photoshop CC 2017/2018 și Adobe Illustrator CC 2018! Procesul de ajustare și instalare a fontului cu ajutorul Fontself Maker a fost atât de distractiv și de ușor încât nu am observat nici măcar cum am terminat toți pașii care de obicei mă fac să mă plictisesc.
Sper că vă place să creați caractere în Adobe Illustrator și să le transformați într-un font de culoare în Fontself la fel de mult ca mine. Simțiți-vă liber să-l încercați și nu uitați să vă partajați rezultatele în comentariile de mai jos sau în rețelele sociale cu #fontself!
Dacă vă place textul pe care l-am creat în acest tutorial și doriți să vă jucați cu el, nu ezitați să luați Fiesta Color Font la Envato Elements! În arhivă veți obține, de asemenea, fișiere vectoriale cu toate caracterele pentru a vă crea propriile litere sau pentru a încerca modul în care funcționează în Fontself Maker. se bucura!
Accentsconagua