Icone e favicon

17 settembre 2015

Nella lavorazione di un sito web o di un’applicazione mobile, non bisogna dimenticare la creazione delle icone desktop, ovvero quelle icone che permettono l’accesso diretto al suddetto sito o al software sui diversi supporti, come smartphone e tablet. Inoltre spesso i siti web ricorrono a una favicon da inserire nella barra di navigazione:non è altro che il logo del sito, ridotta a una dimensione di 16×16 pixel e inserita di fianco dell’URL, come illustrato in Figura 1. Inkscape, in qualità di software vettoriale, offre numerose opzioni per la creazione di questi elementi, in particolare per l’esportazione PNG.

Figura 1. Favicon (click per ingrandire)

Favicon

Le dimensioni delle icone desktop sono normalmente diverse: questo perché ci sono ormai davvero tanti device in circolazione, di conseguenza produrre un’icona per ognuno di essi sarebbe un lavoro ciclopico.

È inoltre importante sottolineare che il layout dell’icona andrebbe creato pensando a ciascuna delle dimensioni utili, partendo dalla più grande e più dettagliata, solitamente la versione Retina, fino alla più piccola, ovvero la favicon. Questo perché, se il design è molto dettagliato, nelle tipologie più ridotte potrebbe risultare indistinguibile. È quindi best practice eliminare eventuali testi e dettagli troppo elaborati man mano che si diminuisce la dimensione dell’icona.

Vediamo ora come creare le icone desktop partendo da un logo. Per prima cosa bisognerà disegnare il logo e, naturalmente, realizzarlo in vettoriale è la scelta migliore per ovviare a futuri problemi di scalabilità.

Creiamo un nuovo documento. Come possiamo vedere in Figura 2, abbiamo importato gli elementi vettoriali con cui costruire il design del logo.

Figura 2. Impostazione degli elementi di lavoro (click per ingrandire)

Impostazione degli elementi di lavoro

Apriamo il pannello Riempimento e Contorno, applichiamo quindi un contorno nero e un riempimento azzurro all’oggetto cerchio, come illustrato in Figura 3.

Figura 3. Traccia e riempimento (click per ingrandire)

Traccia e riempimento

Apriamo il pannello Livelli. Possiamo renderci conto che ogni elemento è posizionato su un livello a sé stante, come evidente in Figura 4.

Figura 4. Organizzazione dei livelli (click per ingrandire)

Organizzazione dei livelli

Spostiamo tutti gli elementi all’interno del cerchio e allineiamoli al centro. Per fare ciò selezioniamo la voce Allinea e Distribuisci del menu Oggetto, che aprirà il pannello omonimo. Selezioniamo tutti gli oggetti sul foglio e clicchiamo sull’icona di allineamento centrato, mostrata in Figura 5.

Figura 5. Allineare al centro gli oggetti (click per ingrandire)

Allineare al centro gli oggetti

Aggiungiamo ora un oggetto di testo utilizzando lo strumento adeguato, quindi apriamo il pannello Mostra e Modifica Font e scegliamo un carattere e una dimensione, come dimostrato in Figura 6.

Figura 6. Inserire e formattare un testo (click per ingrandire)

Inserire e formattare un testo

Aggiustiamo la posizione degli elementi e prepariamoci all’esportazione delle icone in formato PNG. Per esportare il logo in questo formato, dobbiamo selezionare la voce Esporta Bitmap del menu File, seguendo i passaggi di Figura 7.

Figura 7. Esportare bitmap (click per ingrandire)

Esportare bitmap

Nella finestra di dialogo che si apre a questo punto, dovremo inserire le dimensioni dell’icona che desideriamo esportare, ad esempio 144×144 pixel. Dopodiché impostiamo il nome del file e il percorso di salvataggio, quindi selezioniamo il tasto Esporta, evidenziato in Figura 8.

Figura 8. Impostazioni di esportazione (click per ingrandire)

Impostazioni di esportazione

Come possiamo notare, la finestra di dialogo di esportazione non si chiude automaticamente, bensì resta visibile, pronta per l’esportazione seguente, di un’icona con dimensioni differenti.

Se diamo uno sguardo al file appena esportato, potremo renderci conto del fatto che la PNG rispetta le dimensioni esportate, per un metodo molto comodo: al posto di disegnare diverse icone di altrettante dimensioni, Inkscape usa sempre lo stesso disegno di partenza e lo salva automaticamente alla larghezza e altezza desiderata, come evidente in Figura 9.

Figura 9. PNG esportata (click per ingrandire)

PNG esportata

Vediamo ora come creare una favicon. Esportiamo la nostra PNG con una dimensione di 16×16 pixel, come illustrato in Figura 10.

Figura 10. Preparazione favicon (click per ingrandire)

Preparazione favicon

A questo punto abbiamo la favicon in versione PNG, per caricarla sul nostro sito però l’icona deve essere in formato .ico. Per trasformarla basterà avvalersi di una delle tante piattaforme online che mettono a disposizione questa opzione e salvarla. Per questo esempio siamo ricorsi a Favicon.cc: il risultato è visibile in Figura 11.

Figura 11. Formato .ico (click per ingrandire)

Formato .ico

Tutte le lezioni

1 ... 18 19 20 ... 44

Se vuoi aggiornamenti su Icone e favicon inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Icone e favicon

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