Mentre progettare un font che funzioni efficacemente in varie dimensioni con letter kerning accuratamente elaborato è un'abilità che può richiedere anni per affinare, questo rapido e divertente progetto ti mostrerà come puoi creare i tuoi font di scrittura a mano usando Inkscape e fontastic.me, dando tu il tuo carattere unico. Lo scopo principale di fontastic.me è produrre font di icone per siti Web, ma è possibile creare un font di lettere che è possibile utilizzare per produrre intestazioni o piccole quantità di testo.
Se non si ha familiarità con questi, Inkscape è un'applicazione per il disegno di linee vettoriali gratuita e open source disponibile per Windows, OS X e Linux. Fontastic.me è un sito Web che offre una varietà di font di icone, ma consente anche di caricare la propria grafica SVG e convertirli in un font gratuitamente.
Ai fini di questo tutorial, tracciamo una foto di alcune lettere scritte, ma puoi facilmente adattare questa tecnica e disegnare le tue lettere direttamente in Inkscape. Questo potrebbe funzionare particolarmente bene per chi usa le tavolette grafiche.
Importa una foto del tuo font scritto
Avrai bisogno di una foto di alcune lettere disegnate se vuoi seguire e se non vuoi crearne di nuove, puoi scaricare e utilizzare a-doodle-z.jpg che contiene le lettere maiuscole A-Z.
Se vuoi crearne di tuoi, usa un inchiostro a colori scuri e carta bianca per un forte contrasto e fotografa le lettere completate in buona luce. Inoltre, cerca di evitare spazi chiusi in lettere, ad esempio "O", in quanto ciò renderà la vita più complicata durante la preparazione delle lettere tracciate.
Per importare la foto, vai su File> Importa e poi vai alla foto e fai clic sul pulsante Apri. Nella finestra di dialogo successiva, è consigliabile utilizzare l'opzione Incorpora.
Se il file di immagine è molto grande, è possibile ridurlo utilizzando le opzioni nel sottomenu Visualizza> Zoom e quindi ridimensionarlo facendo clic una volta su di esso per visualizzare le maniglie di freccia in ogni angolo. Fai clic e trascina una maniglia tenendo premuto il tasto Ctrl o Comando e manterrà le sue proporzioni originali.
Quindi tracciamo l'immagine per creare lettere di linee vettoriali.
02 di 05Traccia la foto per creare lettere di linea vettoriale
È una buona idea rivedere il processo di tracciamento della grafica bitmap prima di iniziare.
Fare clic sulla foto per assicurarsi che sia selezionata e quindi andare su Percorso> Traccia bitmap per aprire la finestra di dialogo Traccia bitmap. Qui, abbiamo lasciato tutte le impostazioni al loro valore predefinito e ha prodotto un risultato buono e pulito. Potrebbe essere necessario regolare le impostazioni di traccia, ma potresti trovare più facile riprendere la tua foto con una migliore illuminazione per produrre un'immagine con un contrasto più forte.
Nella schermata, puoi vedere le lettere tracciate che abbiamo trascinato lontano dalla foto originale. Una volta completata la traccia, le lettere saranno posizionate direttamente sulla foto, quindi potrebbero non essere molto evidenti. Prima di proseguire, puoi chiudere la finestra di dialogo Trace Bitmap e fare clic sulla foto per selezionarla e fare clic sul tasto Canc sulla tastiera per rimuoverla dal documento.
03 di 05Dividi la traccia in singole lettere
A questo punto, tutte le lettere sono unite insieme, quindi vai su Path> Break Apart per dividerle in singole lettere. Nota che se hai lettere composte da più di un elemento, queste saranno anche divise in elementi separati. Nel caso del nostro esempio, questo vale per ogni lettera, quindi ha senso raggruppare ogni lettera insieme in questa fase.
Per fare ciò, basta fare clic e trascinare un perimetro di selezione attorno a una lettera e quindi andare su Oggetto> Gruppo o premere Ctrl + G o Comando + G a seconda della tastiera.
Ovviamente, è sufficiente farlo con lettere che contengono più di un elemento. Prima di creare i file delle lettere, ridimensioneremo il documento in una dimensione adeguata.
04 di 05Imposta la dimensione del documento
Dovrai impostare il documento su una dimensione adatta, quindi vai su File> Proprietà del documento e, nella finestra di dialogo, imposta Larghezza e Altezza come necessario. Abbiamo impostato il nostro a 500px per 500px, sebbene idealmente avresti impostato la larghezza in modo diverso per ogni lettera in modo che le lettere finali si adattassero più ordinatamente.
Successivamente, creeremo le lettere SVG che verranno caricate su fontastic.me.
05 del 05Crea singoli file SVG per ogni lettera
Fontastic.me richiede che ogni lettera sia un file SVG separato, quindi è necessario produrli prima di procedere.
Trascina tutte le lettere in modo che siano al di fuori dei bordi della pagina. Fontastic.me ignora tutti gli elementi che si trovano al di fuori dell'area della pagina, quindi puoi lasciare queste lettere parcheggiate qui senza problemi.
Ora trascina la prima lettera nella pagina e usa le maniglie di trascinamento all'angolo per ridimensionarla se necessario.
Quindi vai su File> Salva con nome e assegna al file un nome significativo. Abbiamo chiamato la mia a.svg - assicurati che il file abbia il suffisso .svg.
Ora puoi spostare o eliminare la prima lettera e posizionare la seconda lettera sulla pagina e andare nuovamente su File> Salva come. Devi farlo per ogni lettera. Se sei paziente, puoi regolare la larghezza della pagina mentre vai per abbinare meglio ogni lettera.
Infine, potresti voler prendere in considerazione la produzione di punteggiatura, anche se vorresti sicuramente un personaggio spaziale. Per uno spazio, basta salvare una pagina vuota. Inoltre, se si desidera lettere maiuscole e minuscole, è necessario salvare anche tutte queste.
Ora puoi visitare fontastic.me e creare il tuo font. Puoi imparare un po 'su questo processo in un articolo di accompagnamento che spiega come usare fontastic.me per creare il tuo font.
