Archivi tag: inkscape

Set di icone monocromatiche? Praticamente un font…

inkscape-icon

Purtroppo è da parecchio che non sto più tanto dietro allo sviluppo web, e quindi alcune “novità” tendono ad arrivarmi tardi (leggero eufemismo). La tendenza di usare icone monocromatiche su applicazioni web non è cosa recente, e la somiglianza tra la lettera di un font e un’icona monocromatica è stata notata da tempo, tanto che almeno dal 2010 c’è chi ha avuto l’idea di realizzare “font di icone” per utilizzarle come “icone vettoriali” sul web.
A me questa cosa è arrivata soltanto cinque o sei mesi fa quando mi è stato mostrato Font-Awesome. Mea culpa.

Set di font come se piovesse

Non è mai facile stabilire se sia nato prima l’uovo o la gallina, di certo c’è che le icone sono sempre più monocromatiche, e di set di font con icone di ogni genere ce ne sono ormai una marea. Purtroppo regala’ è morto, e l’utilizzo della maggior parte di questi pacchetti impone il pagamento di licenze o l’inserimento degli autori nei credits/ringraziamenti, a meno di non utilizzare quei set rilasciati con licenza Creative commons che sono originali come l’acqua calda.

Font custom, Inkscape e Icomoon

Tra gli strumenti per realizzare immagini vettoriali uno dei più usati è Inkscape (gratuito e open-source), ma non tutti sanno che in Inkscape è presente anche un editor di font con cui è possibile “raggruppare” dei glifi assegnando a ciascuno un “carattere”, realizzando di fatto un font.
Qui una bella guida sul tema, mentre qui si può trovare un progetto Github con risorse utili per crearsi i propri font.
inkscape-font-editor

Ricapitolando: con Inkscape – partendo da immagini vettoriali – si può arrivare a creare un “font svg” convertibile poi in TrueType (ttf) tramite strumenti esterni. E se non si ha voglia di fare tutti questi passaggi? Come è logico aspettarsi ci sono delle alternative.
Una strada è quella di installarsi un editor di font come FontForge, importarsi i propri glifi svg (opportunamente modificati), e crearsi il font a mano.
Strada più semplice è quella di rivolgersi a un servizio online. Ne ho provati alcuni (tra cui Fontastic), e alla fine l’unico che mi ha sempre importato gli svg e esportato i font correttamente senza distorsioni o ridimensionamenti strani è stato IcoMoon.
icomoon
IcoMoon è di una semplicità disarmante: si selezionano delle icone prese da librerie gratuite/a pagamento messe a disposizione dal sito o tra quelle importate da noi stessi e le si esportano in un pacchetto contenente il font in vari formati più tutte le risorse utili, con possibilità di configurarne anche i codici/nomi delle classi css e adattarne le dimensioni.

“Icone vettoriali” in Titanium

Veniamo alle origini di quest’articolo, visto che come dicevo all’inizio lo sviluppo web purtroppo l’ho abbandonato da un po’ di tempo.
Nel mondo dello sviluppo mobile un problema piuttosto sentito è quello della preparazione di icone e immagini alle varie risoluzioni per una buona resa su tutti i dispositivi che si ha intenzione di gestire. Il problema è ancora più marcato nello sviluppo multipiattaforma perché android e ios (per dirne due) seguono convenzioni dei nomi che non c’entrano niente l’una con l’altra, oltre a girare su dispositivi che gestiscono risoluzioni diverse.
Da un’esigenza nasce (quasi) sempre una soluzione, e in Titanium una parziale soluzione l’ha proposta uno degli sviluppatori di riferimento per questa piattaforma – Fokke Zandbergen – che ha dato alla luce TiCons.
Con TiCons si possono generare le icone dell’app e gli splash screens per tutti i dispositivi, ma la gestione delle immagini usate “all’interno” dell’app resta responsabilità nostra. Per far questo bisogna solitamente ingegnarsi con ImageMagick, che permette di fare velocemente elaborazioni anche complesse a grosse quantità di immagini tramite scripts. Questa cosa però è noiosa e così spesso si finisce per usare immagini con risoluzioni non adatte.

In una delle applicazioni di esempio corporate-directory si vede come sia possibile utilizzare “icone vettoriali” al posto di quelle raster semplicemente aggiungendo il nostro “font contenente le icone” all’interno della directory app/assets/fonts, impostando la proprietà font.fontFamily uguale al nome del font che abbiamo aggiunto e settando la proprietà testuale (es: “text” per le Label o “value” per i TextField) uguale al codice del carattere che rappresenta la nostra icona… più difficile a dirsi che a farsi, basta guardare l’esempio.

Un "esempio riepilogativo" con tutti i pezzi

Un “esempio riepilogativo” con tutti i pezzi

Gli effetti positivi di questa soluzione sono evidenti:

  • miglior renderizzazione delle immagini
  • minor dimensione delle applicazioni
  • possibilità di modificare dimensioni e colori delle icone velocemente e anche a runtime
  • nessun problema in caso di installazione su dispositivi non previsti inizialmente
  • possibilità di cambiare tutto il set di icone anche a runtime semplicemente modificando il nome del font in una classe tss
  • probabilmente ce ne saranno altri che non mi vengono

Un limite è che questa cosa si può fare solo su quel tipo di componenti dove il font (e quindi il font-family) è modificabile, questo significa che per i Tab e forse anche altrove purtroppo bisogna continuare a usare delle immagini raster.

Imparata questa tecnica mi è venuta voglia di usarla dappertutto… non appena sbatterò il muso da qualche parte aggiornerò quest’articolo, per il momento mi godo tutti i punti di cui sopra.

Segnali di pericolo personalizzati con Inkscape

Qualche giorno fa a casa ci siamo trovati di fronte a un dilemma: “Che fare quando i passanti si avventurano nella vigna per prendere un grappolo?”.

Il “furto” di frutta e ortaggi è un problema che esiste da sempre, e finché il maltolto ha quantità irrisorie si è sempre preferito far finta di nulla. Il problema è che quando l’uva comincia ad essere (almeno apparentemente) matura inizia il periodo in cui si danno più trattamenti con prodotti fitosanitari, che hanno generalmente intervalli di carenza di almeno qualche giorno, e questi andrebbero rispettati prima di raccogliere il frutto pena potenziali rischi per la salute.
Forse è assurdo preoccuparsi della salute di ladri e affini, e infatti conosco coltivatori e viticoltori in particolare che non si porgono minimamente il problema e non si farebbero scrupoli a denunciare chi entra nel loro vigneto. È anche vero però che un vigneto vicino alla strada può far gola a molti, e prendere una porzione di un grappolo non è poi la fine del mondo.

pericolo-ladri

Segnali di pericolo, difficili da trovare e costosi

La soluzione – consigliata anche in alcuni libri – è di installare dei segnali di pericolo in punti ben visibili, i quali indicando il rischio per la salute scoraggino anche la raccolta non autorizzata.
Mi sono messo quindi a cercare immagini adatte di segnali di questo tipo sul web con l’intenzione di stamparli e plastificarli (acquistare segnali appositi è “un po’” eccessivo oltre che costoso), ma non sono riuscito a trovare niente con una risoluzione decente. Ho deciso così di fermene uno da me, ma invece del solito Gimp ho preferito darmi alla grafica vettoriale così da iniziare a usare un po’ anche Inkscape.

Inkscape e grafica vettoriale

La grafica vettoriale si distingue dalla più comune grafica raster perché le immagini, invece di essere composte da una griglia di puntini colorati (come nelle foto), sono descritte come una composizione di primitive geometriche (linee, poligoni, …). La caratteristica principale di queste immagini è che non “sgranano” ridimensionandole, sono ottime quindi laddove fanno comodo icone di diverse risoluzioni o quando bisogna stampare su superfici di dimensioni diverse.
Se il Gimp è il re dei software gratuiti di manipolazione di immagini raster, l’omologo per la grafica vettoriale è Inkscape. Entrambi funzionano su Windows, Mac e Linux, ed entrambi possono essere usati anche per elaborazioni molto complesse perché hanno poco da invidiare ai più noti strumenti a pagamento.

Punto di arrivo per me, potrebbe essere punto di partenza per qualcun’altro

Per mettere insieme un segnale di pericolo non serve padroneggiare Inkscape, in quanto dei rettangoli e delle scritte sono più che sufficienti. Si trovano poi immagini svg (il formato standard usato da Inkscape) che possono essere utilizzate per arricchire il segnale, eventualmente previa modifica.
Il formato svg è un xml, ovvero un file di testo, perciò è molto compatto e può anche essere aperto con un comune blocco note e manipolato a mano (ad esempio per modificare una scritta).
Attenzione prodotti fitosanitari
Quindi in sintesi: alcuni rettangoli (con eventuali spigoli arrotondati) riempiti di giallo e rosso, un paio di belle scritte “Pericolo” e “Vigneto trattato con prodotti fitosanitari, vietato l’accesso alle persone non autorizzate”, il tutto stampato e plastificato. Il principio di prudenza è rispettato e magari la prossima vendemmia ci sarà anche qualche kg di uva in più.

L’originale in svg: Attenzione-prodotti-fitosanitari.svg
Un svg con segnale di pericolo: Warning.svg (da Wikimedia Commons)
Un teschio… sono stato tentato ma alla fine ho optato per il punto esclamativo: Skull.svg (da Wikimedia Commons)

Partendo dai tre file sopra si dovrebbe riuscire a comporre i più comuni segnali di allerta e pericolo. Niente di legalmente risolutivo ma magari possono tornare utili a qualcuno per soluzioni caserecce.