Share
Cosa starai creandoTi mostrerò come creare un font a colori. Creare font non è mai stato così veloce, divertente e facile come con Fontself, una potente estensione per Adobe Illustrator e Photoshop CC. In questo tutorial, imparerai come creare un font a colori.
Fontself ti permette di creare un font completamente funzionale con tutti i campanelli e fischietti che i font più professionali hanno (crenatura, legature, ecc.), E la cosa più eccitante è che ti aiuta a creare un carattere di colore! Puoi rendere sfrenata la tua immaginazione e aggiungere forme e colori che desideri (compresi gradienti e altri effetti) ai tuoi personaggi.
Oltre alla creazione di caratteri a colori, che possono essere utilizzati in Adobe Photoshop CC 2017/2018 e Adobe Illustrator CC 2018, è possibile utilizzare Fontself per creare caratteri vettoriali "non colorati" standard che possono essere utilizzati in qualsiasi altro software come le versioni precedenti di Adobe. Applicazioni CC, CS6, Microsoft Word e molti altri.
Non vedo l'ora di provarlo?
Migliaia di creativi di Adobe, Google, Apple, Microsoft e altre società note utilizzano già Fontself. La cosa interessante è che è un software indipendente al 100% creato da tre appassionati sviluppatori con l'obiettivo di offrirci uno strumento di creazione di font user-friendly. E l'hanno fatto!
Esaminiamo l'intero processo di creazione e utilizzo del nostro font di colore in Adobe Illustrator CC 2018 e Fontself Maker!
Quando creo un font da zero, di solito inizio descrivendo un'idea generale. Questa volta ho deciso di creare un font in uno stile colorato di line art.
Ho iniziato con un abbozzo di ogni lettera, cercando di renderli unici pur mantenendo lo stile generale. Userò questo schizzo come guida per i contorni che realizzeremo in Adobe Illustrator.
Si noti che Fontself Maker funziona con Adobe Illustrator CC 2015.3 e successivi ma per utilizzare i caratteri colore è necessario CC 2018, quindi non dimenticare di aggiornare se non lo hai ancora fatto!
Inizia creando un Nuovo documento della dimensione desiderata in Modalità colore RGB. Se selezioni altro Modalità colore, tutti i colori saranno convertiti in RGB anche se definiti in CMYK o se il documento nello spazio colore CMYK. Puoi saperne di più sullo spazio colore in Fontself dalla loro pagina di aiuto.
Iniziamo con la lettera A. Prendi il Strumento Poligono (lo puoi trovare nello stesso menu a discesa del Strumento rettangolo (M)) e fai clic in qualsiasi punto della tavola da disegno. Imposta il numero di lati a 3 e fai un triangolo.
Imposta la sua Riempire colore a Nessuna e la sua Ictus dal colore al viola scuro nel Colore pannello. Ora, nel Ictus pannello (Finestra> Corsa), impostare il Peso a 2,5 pt e berretto a Tappo rotondo.
Ora possiamo eliminare la parte inferiore della forma di cui non abbiamo bisogno. Prendi il Strumento di selezione diretta (A) e fai clic sul bordo inferiore del triangolo. Colpire il Elimina chiave (o Backspace se sei su un Mac) per eliminarlo.
Seleziona la forma con il Strumento di selezione (V) e colpisci accedere per aprire il Mossa finestra. Impostare il Orizzontale valore a 25 px e Verticale a 0 px, e fare clic copia per duplicare la forma e spostarla a destra.
Mantenendo entrambe le forme selezionate, prendi il Strumento di creazione forme (Shift-M), tenere premuto alt, e fai clic sul pezzo a destra per eliminarlo.
copia la prima forma e ridimensionala per formare un piccolo triangolo. Posizionalo in basso, creando la piuma di una freccia. Seleziona la forma, tieni premuto alt, e trascinalo verso l'alto per creare una copia. Aggiungi altre due copie e attaccale lungo il bordo sinistro del triangolo.
Gruppo (Control-G) gli elementi creati della piuma e doppio click il Rifletti strumento (O). Seleziona il Asse verticale e fare clic copia per capovolgere la forma sul lato opposto.
Prendi il Strumento ellisse (L), tenere premuto Cambio, e fare un 10 x 10 px cerchio con blu scuro Ictus e turchese Riempire colore.
Mancia: Utilizzare il Strumento Eyedropper (I) per selezionare il colore di riempimento o del tratto o qualsiasi impostazione di aspetto e applicarli ad altri oggetti. È possibile accedere alle opzioni del Strumento Eyedropper (I) di doppio clic nel Utensili pannello, quindi è possibile selezionare le impostazioni che si desidera selezionare e applicare.
copia il tratto selezionandolo e trascinando verso il lato mentre si tiene premuto alt. Utilizzare il Strumento penna (P) per aggiungere un punto di ancoraggio nel mezzo della linea. Quindi utilizzare il Elimina strumento Punto di ancoraggio (-) per eliminare il punto sopra il tratto.
Prendi il Strumento penna (P) o il Strumento Segmento di linea (\) e tenere premuto Cambio per fare una linea orizzontale attraverso la lettera. Questa sarà la barra della lettera A.
Copia (Control-C> Control-F) il tratto e trascinalo verso il basso. Rendilo più breve spostando i punti con il Strumento di selezione diretta (A).
Adesso usa il Strumento penna (P) per creare una linea a zigzag nella parte superiore della lettera, come mostrato nell'immagine qui sotto.
Aggiungi altri tratti su entrambi i lati della lettera, rendendolo più dettagliato.
Ora che i contorni della lettera A sono pronti, aggiungiamo un po 'di colore! Noi possiamo duplicato (Control-C> Control-B) la lettera e Nascondere la copia nel Livelli pannello facendo clic sull'icona dell'occhio minuscolo, nel caso in cui sia necessario utilizzare questi contorni in un secondo momento.
Seleziona la copia visibile e vai a Oggetto> Pittura dinamica> Crea.
Adesso prendi il Live Paint Bucket (K) e passa con il mouse sopra l'area che desideri riempire di colore. Quando vedi un contorno rosso, fai clic sull'area per riempirlo.
Continua a usare il Live Paint Bucket (K) e selezionando nuovi colori nel Colore pannello per riempire i triangoli nella parte superiore della lettera.
Ora andiamo a Oggetto> Pittura dinamica> Espandi per trasformare ogni sezione colorata in un oggetto separato.
Utilizzare il Strumento di selezione diretta (A) trascinare un paio di elementi, rendendo la composizione più dinamica.
E lì ce l'abbiamo! La nostra prima lettera è finita! Passiamo al prossimo e vediamo cos'altro possiamo usare per farlo sembrare unico.
Non sto usando nessuno snap o griglie speciali per questo font, perché voglio conservare un tocco artigianale senza renderlo geometricamente perfetto o pixel perfect. Tuttavia, per rendere il font coerente, dobbiamo mantenere tutte le lettere della stessa altezza (mentre la larghezza sarà diversa).
Accendi il Righelli (Control-R) e trascina un paio di guide orizzontali sulla tavola da disegno per segnare l'altezza della lettera A. Possiamo accedere al Guide menu da Visualizza> Guide.
Iniziamo con il gambo della lettera B. Usa il Strumento rettangolo (M) fare un rettangolo ristretto di circa 30 x 120 px (ricorda di mantenere l'altezza uguale all'altezza della tua prima lettera).
Seleziona il suo bordo inferiore con il Strumento di selezione diretta (A) ed eliminalo.
Aggiungi alcune linee orizzontali e allega un paio di 10 x 10 px cerchi turchesi sul fondo della forma. Noi possiamo copia questi cerchi dalla nostra lettera A.
Ora facciamo una linea retta orizzontale usando il Strumento penna (P) e vai a Effetto> Distorci e trasforma> Zig Zag. Impostare il Taglia a 10 px, Creste per segmento a 5, e Punti a Angolo.
Clic ok e vai a Oggetto> Espandi Aspetto per applicare l'effetto.
Posiziona lo zigzag creato nella parte superiore della lettera e ridimensionalo per adattarlo al rettangolo.
Creiamo un rettangolo di circa 45 x 55 px dimensioni e allinearlo ai bordi superiore e sinistro della lettera. Per fare ciò, seleziona lo stelo e il rettangolo creato e fai nuovamente clic sullo stelo per renderlo a Oggetto chiave (vedrai una selezione più spessa attorno ad esso).
Apri il Allineare pannello (Finestra> Allinea) e fare clic Orizzontale Allinea a sinistra e Verticale Allinea in alto.
Selezioniamo gli angoli superiore e inferiore destro del rettangolo con Strumento di selezione diretta (A) e arrotondali tirando il segno del cerchio del Angoli vivi più vicino al centro. Possiamo anche regolare il angoli raggio manualmente dal pannello di controllo in alto.
Mancia: Se non riesci a trovare il pannello di controllo superiore dopo l'aggiornamento ad Adobe Illustrator CC 2018, non preoccuparti! È ancora lì e puoi accenderlo Finestra> Area di lavoro> Essentials Classic.
Cancelliamo il lato sinistro della forma. Seleziona l'angolo in basso a sinistra con il Strumento di selezione diretta (A) e premere Elimina (Backspace su Mac).
Ripeti lo stesso per il punto in alto a sinistra, lasciando solo la forma ad arco.
Crea un arco più grande per la ciotola inferiore della lettera B.
Aggiungi un arco più piccolo all'interno della ciotola inferiore. Rendi la lettera più complessa aggiungendo tratti orizzontali e verticali. Completa i contorni posizionando due cerchi nella ciotola inferiore.
Diamo duplicato (Control-C> Control-B) la lettera e mantenere la copia invisibile nel caso in cui ne abbiamo bisogno in seguito.
Seleziona la copia visibile e Oggetto> Pittura dinamica> Crea. Utilizzare il Live Paint Bucket (K) e il Strumento Eyedropper (I) per scegliere e applicare i colori agli elementi della lettera B.
Finiamo la lettera. Vai a Oggetto> Pittura dinamica> Espandi e usa il Strumento di selezione diretta (A) trascinare alcune parti colorate fuori dal contorno.
Eccezionale! La seconda lettera è finita! Diamo un'occhiata ad altre tecniche che possiamo usare per altre lettere e simboli.
Prendi il Strumento ellisse (L) e inizia con la base della lettera creando un 115 x 115 px cerchio. copia il cerchio creato e Incolla davanti (Control-C> Control-F). Ridurre la dimensione della copia a 80 x 80 px.
Come puoi notare, la lettera è un po 'più bassa della linea guida superiore. Abbiamo lasciato uno spazio al di sopra del cerchio per aggiungere alcuni dettagli lì.
Prendi il Strumento penna (P), tenere Cambio, e fare una linea verticale attraverso i cerchi. Mantenendo la linea selezionata, doppio click il Ruota strumento (R) e impostare il Angolo a 12 gradi. Clic copia aggiungere una copia ruotata della linea.
Ora premi Control-D per ripetere l'ultima azione e continuare a premere finché non si ottengono 30 copie per riempire il cerchio.
Diamo gruppo (Control-G) i raggi creati e nascondere loro per ora.
Ora creiamo una silhouette della lettera C. Usa il Aggiungi strumento Punto di ancoraggio (+) per aggiungere due punti sul lato destro del cerchio più grande e due per quello più piccolo, come indicato nello screenshot qui sotto.
Ora possiamo usare il Strumento di selezione diretta (A) fare clic sul segmento di arco tra i punti creati e Elimina esso. Ripeti lo stesso per entrambi i cerchi.
Ora riveliamo i raggi nascosti e selezioniamo tutti gli elementi della C.
Prendi il Strumento di creazione forme (Shift-M) e fai clic sui rettangoli formati incrociando le linee. Non fare clic su tutti loro; lasciare uno spazio intatto nella parte inferiore della forma.
Ora possiamo selezionare i pezzi non necessari dei raggi al centro della C e cancellarli.
Rompiamo i pezzi dei raggi a sinistra della lettera C.
Utilizzare il Strumento penna (P) per aggiungere un nuovo punto di ancoraggio da qualche parte nel mezzo della linea e cancellare il punto in alto con il Elimina strumento Punto di ancoraggio (-). In questo modo stacciamo il pezzo dal bordo della lettera.
Continua ad alternare i raggi, rendendoli più brevi e staccando gli altri per aggiungere variazioni alla silhouette della lettera.
Aggiungi alcuni tratti più arcuati nella parte interna della lettera. Attacca i cerchi alle punte dei grandi archi.
Duplicare i contorni creati e usa il Pittura dal vivo e il Live Paint Bucket (K) aggiungere colori.
Oggetto> Pittura dinamica> Espandi la forma e trascina alcuni dei rettangoli colorati. Ottimo lavoro! La nostra terza lettera è finita!
Vai avanti e crea più lettere, numeri e segni di punteggiatura, tutto ciò che potrebbe essere necessario per il tuo font futuro. Non preoccuparti se non fai tutti i simboli desiderati contemporaneamente; puoi sempre riaprire il tuo file di font e aggiungerlo in seguito.
Adesso per la parte divertente! Dato che abbiamo preparato tutto, possiamo finalmente creare un font usando Fontself Maker!
Prima di tutto, apriamo il Livelli pannello e posizionare tutte le lettere in ordine alfabetico, da sinistra a destra. Fontself assegnerà automaticamente i caratteri corretti se li collochi nell'ordine corretto.
Possiamo rinominare la linea guida di fondo, impostandola come linea di base.
Ora assicuriamoci che tutte le nostre lettere siano allineate al fondo e poste sulla linea di base. Seleziona i tuoi personaggi e clicca Verticale Allinea in basso nel Allineare pannello, usando uno dei caratteri come a Oggetto chiave.
Vai a Finestra> Estensioni e corri Fontself Maker. Verrà caricata una finestra compatta dell'estensione e sarà possibile regolarne le dimensioni trascinandone gli angoli inferiori. Ha un'interfaccia drag-and-drop semplice e intuitiva con suggerimenti a comparsa e un assistente di chat online che può aiutarti con le tue domande.
Ora selezioniamo il nostro alfabeto e trascinalo nella finestra Fontself. Qui abbiamo diverse opzioni tra cui scegliere. Se hai già tutti i personaggi pronti, puoi usare il 'A-Z' area e lascia le tue lettere lì. Fontself li posizionerà automaticamente nell'ordine corretto, assegnando a ciascuna lettera un nome appropriato.
Altrimenti, se non hai ancora completato tutti i caratteri, posiziona il cursore del mouse su 'Qualsiasi personaggio (lotto)' campo e rilascia il tasto del mouse per caricare i tuoi personaggi.
Nel nostro caso, stiamo creando un carattere maiuscolo, quindi tutte le lettere saranno le stesse sia per i caratteri maiuscoli che minuscoli.
La cosa fantastica di Fontself è che rende le cose molto più semplici: una volta che abbiamo sistemato e allineato le nostre lettere, il programma le posizionerà nell'ordine corretto, utilizzando le informazioni del Livelli pannello. Assicurati di trascinare e rilasciare tutto insieme, inclusa la linea di base.
Se hai bisogno di un maggiore controllo sulle linee guida e desideri aggiungere un bloccante e un discensore, puoi farlo anche tu! Basta aggiungere altre due linee guida, rinominandoli "ascender" e "discender" nel Livelli pannello, quindi trascinalo in Fontself insieme al tuo alfabeto. Ecco!
Puoi saperne di più sull'uso delle guide in Fontself dalla pagina di aiuto.
Ora abbiamo inserito ogni lettera nel suo spazio. Da qui, possiamo digitare qualcosa nel Anteprima dal vivo finestra per verificare come appare e con cui giocare Letter Space, Line Space e Scala, se necessario.
Facendo clic sull'icona a forma di ingranaggio sulla destra è possibile modificare le dimensioni, l'allineamento e il colore di sfondo del carattere.
Possiamo anche espandere la finestra di anteprima delle lettere facendo clic sulla piccola icona delle frecce diagonali nell'angolo in alto a sinistra di ogni slot di anteprima (cerchiato nello screenshot qui sotto) o da doppio clic il glifo.
Qui abbiamo alcune più opzioni per ogni lettera. Possiamo trascinare le linee, cambiare la posizione dell'ascendente e del discensore e regolare altre impostazioni.
Una volta che siamo felici con le lettere, aggiungiamo altri simboli e segni di punteggiatura! Per fare ciò, basta selezionare gli elementi sulla tavola da disegno e fare clic su partita pulsante nel Casa finestra di Fontself. I tuoi simboli verranno aggiunti e inseriti nell'ordine corretto.
Ora diamo un'occhiata ad alcune impostazioni avanzate che sono vitali quando si crea qualsiasi font. Trova e fai clic su Avanzate pulsante nel Casa finestra di Fontself.
Da qui, possiamo regolare il Spaziatura, crenatura, e alcuni altri parametri che sono importanti per rendere il nostro font un aspetto equilibrato e coerente.
Iniziamo con Spaziatura.
In tipografia, spaziatura o puntamento è la quantità di spazio tra i caratteri, che influenza la densità e conferisce al carattere la relativa apertura o oppressione. In effetti, una buona spaziatura ti farà risparmiare un sacco di tempo durante la creazione di un font, quindi assicurati di iniziare regolandolo prima!
Esistono diversi modi per lavorare con la spaziatura in Fontself. Prima di tutto, fai clic su Spaziatura finestra e digitare alcune frasi lì per vedere come si comportano i personaggi all'interno di un testo. Ora, nell'area grigia a destra, puoi vedere un elenco di lettere e i loro valori. Qui puoi modificare la spaziatura inserendo valori precisi nella tabella.
Un altro modo per modificare la spaziatura è farlo manualmente facendo clic sul carattere stesso e trascinando le linee tratteggiate sui lati sinistro e destro di esso. Vedrete tutte le modifiche nel Spaziatura e nel Anteprima dal vivo area che ha già un testo di esempio con tutti i tuoi personaggi.
Ora che siamo soddisfatti della densità del testo e del suo aspetto generale, è ora di regolare le coppie di kern facendo clic sul pulsante crenatura pulsante.
crenatura è il processo di regolazione della spaziatura tra specifici coppie di caratteri per ottenere un risultato visivamente piacevole. Nei font proporzionali maiuscole, accade spesso che le lettere in alcune combinazioni comuni (come VA o AW) siano troppo distanti l'una dall'altra. In questo caso, abbiamo bisogno di trovare tali coppie e regolare la spaziatura tra loro manualmente, creando coppie di kern. E Fontself ha anche questa funzione! Per di più, ha già alcune coppie di kerning comuni nel Anteprima dal vivo finestra, in modo da poter vedere immediatamente il risultato.
Come con la spaziatura, ci sono diversi modi per regolare la crenatura. Prima di tutto, fai clic su Kerning Pad finestra e digitare alcune coppie di kern che si desidera modificare, ad esempio AVA. Ora, nell'area grigia a destra, puoi vedere il Coppie di Kerning finestra e digitare i valori lì manualmente.
Un altro modo per regolare la crenatura consiste nel fare clic sul carattere e trascinare la linea tratteggiata tra la coppia. La linea rossa appare per valori negativi, rendendo più piccolo lo spazio tra le lettere. La linea blu indica lo spazio crescente con un valore positivo che sposta le lettere più lontano l'una dall'altra. Semplice come quella.
La prossima cosa importante che potresti voler usare nel tuo font - e Fontself ha questa caratteristica - è l'uso di legature!
UN legatura è una combinazione di due o più lettere in un unico simbolo. Ad esempio, in combinazioni comuni come "tt", "fi" e "ff", potremmo voler cambiare alcuni elementi delle lettere, come le barre trasversali, per farle apparire meglio insieme. Inoltre, mentre lavoriamo con i font a colori, possiamo usare le legature in modi più creativi, come far apparire stravaganti alcune parole o nomi aggiungendo nuovi elementi, come particelle, fiori o sciami. In questo caso, l'intera composizione può essere usata come simbolo, cioè legatura.
Diciamo che vogliamo unire due lettere insieme in "TT" per creare un'unica barra per loro. Una volta estratta la nuova lettera, selezionala sulla tavola da disegno. Quindi apri la finestra Fontself e digita "TT" nell'area di testo in alto e fai clic su Crea legatura pulsante proprio accanto ad esso.
Dopo aver fatto clic sul pulsante, Fontself ti chiederà quale tipo di legatura desideri creare. Più tardi, puoi trovare entrambi Legature standard e Legature discrezionali nel OpenType pannello (Finestra> OpenType) di Adobe Illustrator e vedere come funzionano.
L'ultima ma non meno importante funzione che può rendere il tuo font più unico e giocoso alterna-le versioni alternative di alcuni (o tutti) personaggi che aggiungono varietà all'intero testo. Quelli possono essere versioni con altri colori, contorni o swash.
Ad esempio, qui puoi vedere che nella parola "COLORI" le lettere "O" sono leggermente diverse. Così è come lo facciamo noi. Una volta che hai preparato la versione alternativa della lettera, selezionala sulla tavola da disegno e aggiungila a Fontself. Il programma ti chiederà se vuoi Sostituire la lettera esistente "O" o crea un glifo alternativo. Basta fare clic sul Alternato pulsante, e lì ce l'hai!
Ora che abbiamo aggiunto tutti i personaggi a Fontself, regolato la spaziatura e la crenatura e impostato le legature e gli alternati, è il momento di nominare il nostro bambino!
Clicca il Informazioni sui font pulsante nel Casa finestra di Fontself e inserire tutte le informazioni necessarie. I suggerimenti degli sviluppatori ti guideranno durante tutto il processo. Non posso non menzionare il loro grande senso dell'umorismo in questa parte.
Finalmente, è il momento di provare il nostro primo font a colori! Oh, sono così eccitato!
Per cominciare, possiamo testarlo direttamente in Adobe Illustrator facendo clic su Installare pulsante nella parte superiore del Casa finestra di Fontself. Ora puoi selezionare il tuo carattere nel Personaggio pannello di Adobe Illustrator (Finestra> Carattere) e provalo digitando qualcosa!
Quando sei soddisfatto del risultato, vai avanti e fai clic su Esportare nella finestra di Fontself per generare un file OpenType con il tuo font e tutte le fantastiche funzionalità che abbiamo aggiunto usando l'estensione. Esportare il font consente anche di Salvare il tuo lavoro e ogni volta che devi modificarlo di nuovo, dovrai farlo Aperto in Fontself e lì ce l'hai!
Ottimo lavoro! Ora possiamo divertirci usando il nostro carattere di colore in Adobe Photoshop CC 2017/2018 e Adobe Illustrator CC 2018! Il processo di regolazione e installazione del font con l'aiuto di Fontself Maker è stato così facile e divertente che non ho nemmeno notato come ho finito tutti i passaggi che di solito mi fanno annoiare.
Spero che ti piaccia creare personaggi in Adobe Illustrator e trasformarli in un font a colori in Fontself tanto quanto me. Sentiti libero di provarlo e non dimenticare di condividere i tuoi risultati nei commenti qui sotto o nei social network con #fontself!
Se ti piace il carattere tipografico che abbiamo creato in questo tutorial e vuoi giocare con esso, sentiti libero di prendere il font Fiesta Color su Envato Elements! Nell'archivio si ottengono anche file vettoriali con tutti i personaggi per creare le proprie scritte o per provare come funziona in Fontself Maker. Godere!
Accentsconagua