Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Glyphr Studio: creare font dal browser

Guida all'uso di Glyphr Studio, una web-app HTML 5 per creare comodamente font personalizzati dai browser compatibili.
Guida all'uso di Glyphr Studio, una web-app HTML 5 per creare comodamente font personalizzati dai browser compatibili.
Link copiato negli appunti

Realizzare dei caratteri tipografici personalizzati è importante, soprattutto quando si ha a che fare con loghi o logotipi che devono rimandare l'identità di un progetto. Creato per chi ha un debole per la creazione di font, Glyphr Studio è un software web-based gratuito, utilizzabile online e privo di alcuna installazione e registrazione. L'unico requisito è il possesso di un browser compatibile con HTML 5, tra cui Chrome, Safari e Firefox.

Figura 1. Pagina di benvenuto (click per ingrandire)

Pagina di benvenuto

Pensato per semplificare il design dei font, fornisce tutti gli strumenti che servono per modificare un set di caratteri già esistente o per crearne uno ex novo. La versione Beta 3

  • Editing Tools
  • Linked Shapes
  • Test Drive

Glyphr Studio è gestito da un singolo file HTML 5: leggero, condivisibile e semplice. Funziona al suo meglio su browser Chrome, ma non disdegna altre soluzioni, così come accennato in apertura.

Introduzione al software

Per cominciare a usare Glyphr Studio, basta visitare il sito ufficiale e scegliere tra le due modalità a disposizione: creare un font ex novo (Figura 2) o partire dal progetto fornito come esempio. Nel primo caso basterà selezionare il link al programma, che porterà direttamente alla schermata di accesso.

Figura 2. Accesso al programma (click per ingrandire)

Accesso al programma

Dopo aver assegnato un nome al progetto, selezionando il pulsante "Start a new font from scratch

Figura 3. Font ex novo (click per ingrandire)

Font ex novo

La seconda opzione, invece, mette a disposizione un progetto già iniziato, scelta consigliabile per cominciare a familiarizzare con il programma. Gli step per avviare questa modalità sono: scegliere l'opzione Example project

Figura 4. Modalità d'esempio (click per ingrandire)

Modalità d'esempio

Una volta scaricato il file, bisognerà ripetere l'operazione di accesso diretto al programma selezionando il link Glyphr Studio Beta, come già visto in Figura 2. Questa volta, però, invece di nominare il progetto e farlo partire ex novo, trascineremo il file .js

Figura 5. Importare il file JS (click per ingrandire)

Importare il file JS

Panoramica dell'interfaccia utente

Lo spazio di lavoro di Glypher Studio si divide verticalmente in tre parti: da sinistra verso destra, gli strumenti di navigazione del progetto (Navigation Bar), il pannello per la modifica delle impostazioni (Panel) e l'area contenuti (Main Content Area) in cui elaborare i tracciati e i caratteri tipografici.

Figura 6. Panoramica dell'interfaccia (click per ingrandire)

Panoramica dell'interfaccia

Gli strumenti di navigazione, mostrati in Figura 7, comprendono dall'alto verso il basso:

  • Navigate
  • Attributes Layers Character Selection
  • Salva
Figura 7. Strumenti di navigazione (click per ingrandire)

Strumenti di navigazione

All'interno dell'area contenuti sono disponibili alcuni strumenti per il disegno. Gli Edit Canvas Tool si trovano nella parte alta a sinistra e sono 10, così come mostrato in Figura 8:

  • Freccia di selezione
  • Selezione oggetto
  • Nuovo rettangolo Nuova ellisse
  • Nuovo tracciato
  • Strumento sposta
  • Strumenti zoom
Figura 8. Strumenti di lavoro (click per ingrandire)

Strumenti di lavoro

Comprese le aree di base dell'interfaccia, nella prossima pagina si illustrerà come realizzare delle lettere personalizzate.

Creazione del font

Iniziamo ad esplorare le potenzialità di Glyphr Studio intervenendo su un carattere tipografico già disegnato. Il nostro obiettivo sarà di modificare il tracciato rotondo della lettera “a”, allungandola verso l'alto. Selezioniamo perciò la lettera “a” dall'elenco dei caratteri, che si presenta nel pannello (colonna centrale) come illustrato in Figura 9.

Figura 9. Carattere da modificare (click per ingrandire)

Carattere da modificare

La selezione di un carattere tipografico ci porterà nel pannello degli attributi contestuali a quella specifica lettera. Ci vengono qui fornite informazioni proprie del carattere, ad esempio quanti tracciati sono serviti per comporlo. Allo stesso tempo, sono messe a disposizione delle Azioni Add new shape Add linked shape

Figura 10. Aggiunta nuova forma (click per ingrandire)

Aggiunta nuova forma
Figura 11. Collegamento forma (click per ingrandire)

Collegamento forma

Torniamo al nostro obiettivo principale, ovvero allungare il tondo della lettera “a”.
Selezionando la terza icona dalla colonna degli strumenti di navigazione (Layers

Figura 12. Livelli del tracciato della lettera (click per ingrandire)

Livelli del tracciato della lettera

Selezioniamo la seconda icona dalla colonna degli strumenti di navigazione (Layers): nel pannello Attributes Edit This Linked Shape

Figura 13. Modifica forme tracciato collegate (click per ingrandire)

Modifica forme tracciato collegate

A disposizione vi è anche una lista con l'anteprima di tutte le forme collegate a questa lettera. Ricordandoci di come il nostro obiettivo sia di intervenire sulle forme tonde della lettera “a”, clicchiamo per prima cosa l'opzione Outside Oval

Figura 14. Selezione della forma da modificare (click per ingrandire)

Selezione della forma da modificare

Nella schermata seguente, ovvero la “scheda” propria della forma tracciato dell'ellisse esterna, dobbiamo attivare la possibilità di intervenire sui manici dei punti di ancoraggio

Figura 15. Punti di ancoraggio (click per ingrandire)

Punti di ancoraggio

Mentre eseguiamo questa modifica ci si accorgerà come, cambiando il tracciato, cambiano anche tutte le lettere a cui questa forma è applicata. Questa funzionalità è molto utile, perché vi permetterà di modificare omogeneamente tutti i caratteri di un font che hanno le stesse peculiarità.

Figura 16. Anteprima dei caratteri linkati (click per ingrandire)

Anteprima dei caratteri linkati

Funzionalità di salvataggio

Selezionando l'icona di salvataggio, il programma scaricherà sul desktop un file .txt con il vostro lavoro.

Figura 17. Salvataggio del progetto (click per ingrandire)

Salvataggio del progetto

Per trasformare questo file in un vero font bisogna tornare alla pagina principale del sito Glyphr Studio e selezionare l'opzione TTX

Figura 18. Opzione TTX di conversione (click per ingrandire)

Opzione TTX di conversione

A questo punto verremo indirizzati alla pagina per l'installazione guidata di TTX/FontTools convertendolo in XML Open Type

Figura 19. TXT/FontTools (click per ingrandire)

TXT/FontTools

Dopo aver seguito la procedura di installazione di Python pagina del sito

L'unica pecca riscontrata nella web-app è la negata possibilità di importare un file immagine. Chi progetta caratteri tipografici spesso li disegna a mano e li modifica in Photoshop

Ti consigliamo anche