domenica 12 febbraio 2012

4 La scimmia dei "fonts" scorre potente dentro di me!


Ebbene si. Lo confesso. Sono una persona ciclica che attraversa fasi che ogni tanto tendono a ripetersi; fasi che spesso e volentieri, mentre si ripetono, altresì deviano su traiettorie sghembe che mi fanno scoprire universi paralleli decisamente interessanti... ;)

Ultimamente, per esempio, sono prepotentemente entrato nella fase della "grafica vettoriale" e negli ultimi due giorni questa nuova monomania s'è traslata sul piano dei caratteri tipografici... :P Perchè, in fin dei conti, un "font" è composto da tanti piccoli glifi vettoriali facenti funzione di lettere e simboli... Quindi  il filo logico del mio percorso è e rimane lineare e ragionevole, dopo tutto... O no? :P

Tornando a noi, in merito alla questione "fonts", giusto ieri ho cercato di trovare una risposta chiara e precisa ad un annoso dilemma che mi tormentava da anni.

Della serie: "E' possibile ottenere un carattere tipografico digitale a partire da un campione della propria grafia? E se la cosa è fattibile, mi costa un occhio della testa oppure anche questa volta me la cavo senza mettere mano al portafoglio? Altrimenti, posso mettere in atto qualche stratagemma alternativo per ottenere lo stesso risultato?". :D

La risposta alle prime due domande è "SI", ma con riserve... Nel senso che, si, esistono dei siti Internet che consentono all'utente di operare la conversione "grafia amanuense" / "grafia digitale" tramite una procedura automatizzata, ma alla fine del processo dovete pagare per poter scaricare il ".TTF" ottenuto a partire dalla vostra calligrafia... :(

Per quel che concerne le soluzioni alternative, il Marte (dopo l'esperienza negativa con i suddetti siti, che l'hanno sedotto ed abbandonato sul più bello... ;) ), proprio in questi giorni sta lentamente costruendo un "font" basato proprio sulla sua orribile grafia... Zampe di gallina digitali, in pratica. :P Il processo creativo si basa totalmente su risorse gratuite e tra breve vi verrà illustrato per filo e per segno, se avrete il piacere di seguirmi. :)

Un unico avviso: l'intero processo, essendo totalmente "amanuense", per certi versi è di una noia mortale (senza considerare la lunghezza estenuante del tutto... :P ). Questi due fattori potrebbero scoraggiarvi ancora prima di iniziare (ed in effetti non avete tutti i torti... In fin dei conti quello maniacale e probabilmente pure matto sono io, mica voi! :D ).

Il Marte al lavoro...

Ad ogni modo, se siete ancora qui, i casi sono due: o siete interessati al discorso oppure volete semplicemente farvi quattro risate ascoltando il resoconto delle scemenze che vado facendo nel tempo libero... In entrambi i casi, vi stimo!!! :D

Ma andiamo senz'altro ad incominciare elencando i materiali ed i programmi indispensabili per intraprendere questa ambiziosa missione! :D

Nell'ordine, vi serve:

  • Una stampante.
  • Un paio di fogli "A4" di carta bianca.
  • Un pennarello nero tipo "Tratto Pen" (o comunque uno strumento che tracci dei segni non troppo sottili. Le penne a sfera, per intenderci, non sono assolutamente indicate...).
  • Uno "scanner".
  • Un "computer" (MAGO! Nessuno l'avrebbe mai detto!!! :P ).
  • Un programma grafico per gestire la grafica "bitmap" (io sto usando "Gimp", che è "freeware" :) ).
  • "InkScape". Un editor vettoriale che abbiamo già avuto modo di vedere, in questa sede. Gratuito pure lui. :)

FASE 1.
LA CREAZIONE DEL FONT SULLA CARTA.

Questa prima fase inizia con un ladrocinio... :P Una piccola ruberia che ci faciliterà la vita durante tutta la fase creativa. No. Niente paura. Tranquilli. Nulla di veramente illegale... ;) In buona sostanza, ci tornerà comodo un "template" stampabile entro il quale scrivere da bravi amanuensi tutti i vari caratteri che andranno a comporre il nostro "font". Ora, visto che la quasi totalità dei servizi a pagamento che abbiamo citato in precedenza mettono a disposizione questo tipo di documento gratuitamente, noi ne approfittiamo per farci i nostri porci comodi e ce lo scarichiamo in allegria... :P

Per esempio "YourFonts" propone una vasta gamma di "templates" stampabili. Personalmente, io ho scaricato e stampato le due pagine downloadabili sotto forma di immagini. La scelta è decisamente vasta. :P

Compiuto questo enorme furto ( :P ), stampate le pagine sui vostri fogli "A4".

A questo punto, con il vostro fido "Tratto Pen", compilate le varie caselle. Cercate di centrare la scrittura aiutandovi con i piccoli segni indicatori posti ai lati delle celle [il trattino superiore indica la massima altezza dei caratteri maiuscoli. Il segno più in basso il limite inferiore dei caratteri dotati di elementi "discendenti" (la "p", la "q"...). I due segni mediani sono un'ottima guida per allineare correttamente i caratteri minuscoli... ;) ].

Dopo questa immane fatica "scribacchina", vi ritroverete per le mani una roba del genere... ;)

Zampe di gallina...

FASE 2.
SCANSIONE ED ELABORAZIONE BITMAP.

Scaldate il vostro "scanner" e dategli in pasto i "templates" che avete pazienemente compilato. :) Ricavatene delle scansioni grandi e dettagliate (300 "DPI" o più).

A questo punto, predisponete una cartella di lavoro (chiamatela tipo "FontWorkInProgress"... :P ) e salvateci dentro le immagini digitalizzate dei vostri "templates".

Ora inizia il bello e le cose si fanno serie... :D

Lanciate il vostro programma di grafica preferito e zoommate sul primo carattere (la "A" maiuscola, se non siete coreani o extracomunitari... :P ). Con uno strumento di "selezione rettangolare", selezionate l'intero quadrato contenente la lettera, comprendendo nell'area anche qualche porzione dei quattro margini neri della casella... Con la selezione attiva, ritagliate l'immagine in modo da preservare il carattere selezionato entro una cornice bianca che lo inquadra, eliminando tutto il resto. Con lo strumento "gomma", ripulite accuratamente i bordi dell'immagine e cancellate anche eventuali pelucchi/granelli di polvere estranei all'immagine, avendo cura di non alterare i segni grafici che compongono materialmente il carattere. Salvate l'immagine con "Save as..." / "Salva come..." (NON SOVRASCRIVETE IL TEMPLATE ORIGINALE! ;) ) nella vostra cartella di lavoro. A questo punto, sfruttando la funzione "storia", gli "undo" o semplicemente ricaricando l'immagine originale, ripristinate l'integrità del "template" e ritagliate/salvate la seconda lettera. Poi la terza. La quarta... E così via, fino a popolare la vostra cartella di lavoro con tanti piccoli ritagli "bitmap" dei vostri caratteri...

Immagini tipo questa, per dire. Capito? :P

FASE 3.
IMPORTAZIONE E TRASFORMAZIONE IN "FONT SVG".

Se siete sopravvissuti alla fase precedente, possiamo continuare. :P

Aprite "InkScape" ed editate le "proprietà" del documento entro il quale svilupperemo il nostro "font". Cliccate su "FILE > PROPRIETA' DEL DOCUMENTO..." e, nella finestra che si aprirà, impostate le dimensioni della pagina, settandola come un quadrato di 1000 "pixels" per 1000...

Le proprietà del documento.

...Quindi chiudete la finestra e nell'interfaccia principale del programma, aprite il pannello per gestire i livelli dell'immagine (menù "LIVELLO > LIVELLI..."); ci tornerà utile in seguito.

Dovreste vedere più o meno una cosa del genere...

Ordunque. Iniziamo a lavorare su un carattere, per fare pratica! :) Dal menù "FILE", scegliete la voce "IMPORTA..." e caricate l'immagine "raster" del vostro primo carattere; la "A" maiuscola... :P Scegliete "EMBED" come modalità di inclusione nel documento e confermate l'operazione. Una piccola "A" dovrebbe essere comparsa sullo schermo... Problema: dobbiamo ingrandirla e centrarla rispetto alla pagina.

Per far questo, prima di tutto sinceratevi che la vostra "A" sia selezionata (se la vedete circondata da una linea tratteggiata con tante frecce nere attorno, è effettivamente così, altrimenti potete usate il primo strumento della barra di sinistra per cliccarci sopra e selezionarla... ;) ). Ora, guardate in alto, sulla barra delle icone. Sulla destra vedrete un piccolo lucchetto aperto. Chiudetelo con un "click" del "mouse". Ai lati del lucchetto, trovate due "box di testo" editabili. Entro questi "box" potete attualmente leggere le dimensioni in "pixel" dell'elemento selezionato. Cambiatene uno dei due in "1000" e l'altro si adatterà di conseguenza (perchè avete chiuso il lucchetto! Se lo lasciavate aperto deformavate... :P ). Benissimo. La nostra "A" è diventata grande tanto quanto la pagina, vero?! ;) Solo che non è poi così centrata rispetto alla "silhouette"del documento... :P

Niente paura! Selezionate "OGGETTO" ed "ALLINEA E DISTRIBUISCI...". Nella "tab" che si aprirà, selezionate l'allineamento relativo alla "PAGINA" e quindi cliccate i due pulsanti "CENTRA SULL'ASSE VERTICALE" e "CENTRA SULL'ASSE ORIZZONTALE". L'elemento selezionato (la nostra "A", nelle fattispecie. Sempre se non l'avete deselezionata nel mentre... :P ) dovrebbe essersi allineata centralmente rispetto alle dimensioni del documento. Ohhh! Benissimo... Chiudete pure la "tab" degli allineamenti che per adesso non vi serve più.

La "A" importata, ingrandita e correttamente centrata!!! :)

Perfetto. Ora dobbiamo trasformare la nostra immagine "raster" in un tracciato vettoriale. Per farlo, utilizziamo la funzione "TRACCIATO > VETTORIZZA BITMAP...". Nella finestra che si aprirà, impostate "SCANSIONE MULTIPLA: GRIGI", "SCANSIONI: 2" (ci servono solo il bianco ed il nero... ;) ) e lasciate spuntata solamente la casella "SCANSIONE PILA" sottostante. Facoltativo: potete giocare con le voci della "tab" "OPZIONI" di questa finestra; personalmente, quando "vettorizzo" caratteri tipografici, io lascio attiva solo la voce "SMUSSA ANGOLI", ma è una questione di gusti... ;)

Fatto questo, pigiate aggiorna per visualizzare un'anteprima del processo e confermate il tutto pigiando "OK".

"OK" per avviare il processo!

Buttate un occhio alla vostra "A"... E' cambiata, vero? ;)

Chiudete la finestra di "vettorializzazione".

Ora dobbiamo fare un pochino di pulizia, perchè di fatto abbiamo un'immagine vettoriale sovrapposta ad una "bitmap" riscalata...

Nella "tab" laterale dei livelli, pigiate il "+" per aggiungerne uno nuovo sopra l'attuale. Quindi, con lo strumento di selezione, cliccate sulla vostra nuova "A" vettoriale, che attualmente dovrebbe essere deselezionata. In seguito al "click" verrà circondata dalla canonica linea tratteggiata con le frecce laterali ed angolari... :D

Menù "LIVELLO > SPOSTA SELEZIONE AL LIVELLO SUPERIORE". A questo punto dovreste ritrovarvi con due livelli così strutturati. Il superiore contenente la "A" vettoriale. Il sottostante con la vecchia "A" bitmap al suo interno... Cliccate sulle icone a forma di occhio accanto ai livelli per sincerarvene. E' così, vero? :P

I due livelli suddetti...

Ora, la vecchia "A" rasterizzata non ci serve più e possiamo tranquillamente fare un pochino di pulizia. Selezionate il livello che la contiene (non sbagliatevi, mi raccomando! Usate la suddetta "visibilità dei livelli" per controllare quello che state facendo... :P ) e pigiate il "-" posto nell'angolo inferiore destro della "tab" per eliminarlo. Così facendo, vi rimarrà per le mani solamente la versione vettoriale del vostro carattere.

Ora, trasformiamo effettivamente questo tracciato vettoriale in un glifo inserito entro un "font SVG".

Dal menù "TESTO", scegliete la voce "EDITOR FONT SVG...".

Nella tab laterale che si aprirà, pigiate il tasto "NUOVO". Entro la colonna "CARATTERE", sarà comparsa la voce "FONT 1". Selezionatela e quindi cliccate sulla "tab" "GLIFI".

Vedete il tastino "AGGIUNGI GLIFO"? Perfetto. Premetelo. La voce "Glifo 1" sarà comparsa nell'elenco dei glifi, che fino ad un attimo prima era completamente vuoto...

Selezionate con un "click" questa nuova voce e quindi cliccate una seconda volta la selezione all'altezza della colonna "STRINGA CORRISPONDENTE". Si aprirà una "label" vuota con un cursore lampeggiante in attesa di "input". Scrivete una "A" maiuscola (senza le virgolette, chiaramente, e premete "INVIO" sulla tastiera del vostro "computer"). In questo modo avete creato un'associazione tra un glifo vettoriale (ancora vuoto...) ed un carattere "ASCII".

Ora dobbiamo assegnare una forma grafica vera e propria al glifo testè impostato.

Selezionate il secondo strumento nella colonna di sinistra ("MODIFICA TRACCIATI DAI NODI") e utilizzatelo per fare "click" su uno dei tratti neri che compongono il vostro carattere vettoriale. Il contorno della figura si popolerà di tante piccole maniglie quadrate, confermando la selezione del tracciato. A questo punto, spostatevi nuovamente entro la "tab" dell'editor dei "fonts SVG" e selezionate nuovamente il "GLIFO 1" che abbiamo precedentemente definito ed assegnato a rappresentare la nostra "A" maiuscola...

Con il tracciato ed il glifo entrambi selezionati, pigiate il tasto "PRENDI FORMA DALLA SELEZIONE...".

GIOITE!!!

Avete correttamente definito il primo carattere del vostro "font" calligrafico!!! :D

Per sincerarvene, scorrete un po' la finestra dell'editor dei "fonts SVG" ed inserite una bella "A" maiuscola nel campo "ANTEPRIMA TESTO:". Subito sopra il carattere corrispondente farà bella mostra di sè! :D

Eccolo! E' il primo!!! :D

Chiudete tranquillamente la "tab" dell'editor dei "fonts" e, utilizzando lo strumento "SELEZIONA E TRASFORMA OGGETTI" (il solito... Il primo della colonna di sinistra. :P ) selezionate la vostra "A" vettoriale e cancellatela dalla pagina premendo "CANC" sulla tastiera del vostro "computer". (Niente paura! Tutti i glifi precedentemente definiti non vanno perduti eliminando le immagini vettoriali usate per generarli!!! :D ).

Ta-dah!

In pratica siete quasi tornati al punto di partenza... QUASI, perchè in realtà avete già un carattere definito e dovete "solamente" ripetere l'intero procedimento per tutti i caratteri che ancora mancano all'appello... :P

Nel mentre, fate una cosa saggia. Salvate, che tra un attimo andiamo a vedere che cosa ci possiamo fare materialmente con 'sti "fonts SVG", che così, su due piedi, sembrano inutili che più inutili non si può! ;)

FASE 4.
CONVERSIONE E FINALIZZAZIONE DEL LAVORO.

Orbene. Vi siete sfiniti l'anima e, seguendo per filo e per segno questa guida, avete infine terminato di editare il vostro "font SVG" ("Certo Marte. Credici...". ;) ), "vettorializzando" tutti i glifi più comuni (e pure di più... :P ).

«Benissimo. Ed ora che cosa ce ne facciamo di questo file "SVG"? Così com'è non lo possiamo riutilizzare praticamente con nulla...».

Infatti avete ragione. Così com'è il vostro "font" è praticamente fuffa e tutto questo immane lavoro apparentemente sembra un'inutile perdita di tempo, vero? ;) Fidatevi. Non è così. Infatti "on-line" esistono dei pratici sistemi automatizzati di conversione dei "fonts"; sistemi in grado di gestire una quantità industriale di formati differenti, "SVG" compreso!!! Bel colpo, vero?! :P Detto questo, puntate il vostro browser sull'"homepage" di "Online Font Converter" oppure su quella di "Free Font Converter". Date in pasto al sito il "file SVG" sul quale avete sudato le cosiddette "7 camicie" e riconvertitelo in un più tradizionale ".TTF" buono per qualsiasi esigenza; ".TTF" che potrà poi essere ulteriormente rivisto e corretto (soprattutto negli aspetti metrici...) utilizzando un editor compatibile con questo formato! :D

ENJOY!!! :)

Cos'è questo QRCode?
Come l'hai realizzato?


4 commenti:

Minkia Mouse ha detto...

Figo!

Marte ha detto...

Infatti!

L'intera tiritera è un po' lunghetta ma io, dopo averci preso un po' il ritmo modello Chaplin in "Tempi Moderni" ( :P ) riesco a definire una quarantina di caratteri al giorno (poi mi vanno gli occhi assieme ed inizio a sclerare... ;) ).

Ad ogni modo, per comporre un "font" abbastanza completo mi andrà via ancora qualche giornata di lavoro. ;)

Minkia Mouse ha detto...

Marte, mi dimentico sempre di attivare le risposte ai commenti via mail. Così finisce che ricommento dopo "mesi".

Comunque, bella storia e soprattutto bello inkscape! io c'ho fatto un po' di disegni e di fumetti a tempo perso! Non sono proprio belli, ma è proprio un gran programma!

Marte ha detto...

Sono contento che ti piaccia.

Ancora non è ottimizzatissimo (nel senso che se lavori su immagini molto complesse o esageri con gli effetti, il computer tende a morire quando usi lo "zoom"... ;) ) ma nel complesso è un gran bel pezzo di "freeware"! :)

Ritorna in alto! Related Posts Plugin for WordPress, Blogger...