Glyphr Studio: creare font dal browser

20 marzo 2014

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 comprende le seguenti funzionalità:

  • Editing Tools: per creare tracciati complessi tramite le curve di Bezier. È possibile duplicare un tracciato, modificarlo o bloccarlo;
  • Linked Shapes: una volta definito un tracciato, è possibile riutilizzarlo su caratteri diversi. Quando viene eseguita una modifica su un tracciato linkato a diverse lettere, la modifica si applica automaticamente a tutte le lettere che utilizzano quel tracciato;
  • Test Drive: funzionalità utile per l’anteprima dei caratteri che si stanno disegnando.

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”, è possibile disegnare un font ex novo.

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, cliccare il link con il tasto destro e salvare il file .js sul desktop.

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 dal nostro desktop al box evidenziato nella Figura 5.

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: opzione che illustra nel pannello le funzionalità principali a disposizione dell’utente;
  • Attributes, Layers e Character Selection: opzioni specifiche alla modifica o creazione dei caratteri;
  • Salva: ultima icona in basso, sempre presente, ovviamente utile a salvare il progetto.

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 (Point Select): per selezionare e modificare i punti di un tracciato, tuttavia non può muovere o cambiare la dimensione di un oggetto;
  • Selezione oggetto (Shape Select): per selezionare, muovere e ridimensionare un oggetto;
  • Nuovo rettangolo e Nuova ellisse (New Rectangle/New Oval): per creare una nuova forma rettangolo o ellisse basta cliccare e trascinare;
  • Nuovo tracciato (New Path): il click singolo aggiunge un nuovo punto al tracciato senza mostrare i manici, mentre tenendo premuto il tasto del mouse li rende visibili. Per chiudere un tracciato bisognerà cliccare sul primo punto creato, oppure cliccare al di fuori dall’area di lavoro;
  • Strumento sposta (Pan Tool): muove lo sfondo;
  • Strumenti zoom (Zoom In, Zoom Out, On to One, Full Em): gli ultimi quattro strumenti servono a ingrandire o rimpicciolire la vista dell’area di lavoro.

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.

Se vuoi aggiornamenti su Glyphr Studio: creare font dal browser inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Glyphr Studio: creare font dal browser

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy