Pubblicato il 29/11/21 - aggiornato il  | Nessun commento :

Come usare le icone Material Design di Google nella grafica e nel web

Cercare e scaricare le icone material design di Google in PNG e SVG, colorarle con GIMP e pubblicarle sul web scegliendo dimensioni, colore e stile

Google anni fa ha introdotto le icone Material Design come linguaggio adatto ai dispositivi mobili senza però tralasciare la qualità dei grandi schermi dei computer, visto che si tratta di immagini vettoriali che quindi non perdono definizione quando se ne aumentano le dimensioni. In questo post mostrerò come trovare, scaricare e personalizzare le immagini Material Design di Google, come usarle per foto e video o come pubblicarle nel web.

Le icone Material Design di Google sono nello stesso portale di Google Fonts. Si apre nel browser la scheda delle Icons per poi sfogliarle o cercarle, singolarmente o a gruppi. Tali icone sono disponibili in 5 stili e scaricabili liberamente in più dimensioni e densità. I 5 stili sono: Outlined, Filled, Rounded, Sharp e Two Tones.

C'è anche una divisione per Categorie che permette all'utente una ricerca più mirata, alternativa o in supporto a quella per parole chiave. Si seleziona l'icona cliccandoci sopra per visualizzarne i dettagli nella colonna di destra.

Le Categorie delle Icone Material Design sono: All, Action, Alert, Audio & Video, Communication, Content, Device, Editor, File, Hardware, Home, Image, Maps, Navigation, Notification, Places, Search, Social, Toggle.

Ho pubblicato sul mio Canale Youtube una guida che illustra come scaricare e usare le icone Material Design.



Si clicca sulla icona che intendiamo scaricare per visualizzare una colonna sulla destra con tutte le opzioni di utilizzo.

Per ogni icona ci sono 5 stili differenti. Con Outlined si visualizzano delle icone più delineate, con Filled sono invece piene di colore. Le icone dello stile Rounded sono più arrotondate mentre quelle Sharp hanno dei tratti più leggeri. Infine le icone Two Tones, oltre al nero, hanno anche una seconda tonalità di grigio.

icone material design

Dopo aver selezionato una icona con un click, si impostano le preferenze di download sulla destra.

Si lascia la scheda Web, aperta di default, le altre sono Android, iOS e Flutter. Più in basso si sceglie la Densità (1px o 2px) e la Dimensione (da 18dp a 48dp). Ancora più in basso si può leggere il nome della icona. Si lascia il colore nero al posto del bianco e per il momento non si prende in considerazione il Code Point della icona.

Infine in basso della colonna ci sono i pulsanti per scaricare l'icona nei formati SVG o PNG. Tralascio di trattare le immagini vettoriali SVG. Cliccando su PNG si scarica uno ZIP con l'icona in quel formato dentro una cartella.

COME COLORARE LE ICONE CON GIMP

Le icone di colore nero possono poi essere colorate con GIMP. Si fa andare il programma e si trascina il file PNG della icona nel suo layout. Prima si dovrà cliccare con il destro del mouse sul file ZIP e andare su Estrai tutto -> Estrai per visualizzare il contenuto dello ZIP. L'immagine su GIMP sarà in una modalità in Bianco e Nero.

Si digita la scorciatoia da tastiera Ctrl + Shift + J per adattare con lo zoom l'icona al layout.

icona in GIMP

Nel menù si va su Immagine -> Modalità e si mette la spunta a RGB in modo da aggiungere anche gli altri canali.

Si seleziona lo strumento Fuzzy e si clicca sull'area nera della icona. Se non si selezionasse interamente, si sceglie Aggiungi alla selezione in Opzioni Strumento per poi selezionare le altre aree della immagine.

selezione icona con fuzzy

Si clicca sul colore in Primo Piano per aprire la tavolozza e scegliere quello con cui colorare l'icona.

Si seleziona lo strumento del Secchiello e si clicca in un punto qualsiasi della selezione sulla icona.

colorare e esportare icona

L'icona prenderà il colore che è in Primo Piano. Non resta quindi che salvarla. Si clicca su File -> Esporta come.

Verrà aperta una finestra in cui lasciare l'estensione del nome come PNG (Es: icona.png). Si sceglie la cartella di destinazione quindi si va su Esporta e nuovamente su Esporta nella finestra successiva.

COME USARE LE ICONE MATERIAL DESIGN NEL WEB

Per pubblicare nel web le icone Material Design di Google non occorre scaricarle ma basta copiarne il nome dopo averle selezionate. Si prende come esempio di base il codice CSS e HTML seguente:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
< style>
.material-icons {
  color:#f00
  font-size: 120px;
opacity: 1.0
}
< /style>
< i alt="paid" class="material-icons">paid</i>

che, se incollato in una pagina web, produce questo risultato:

codice del material design per il web

I parametri colorati di rosso possono essere personalizzati e riguardano il colore della icona (#f00), la sua dimensione (120px) e la sua opacità. Con 1.0 si ha completa opacità mentre con 0.5 si ha semitrasparenza. 

Il nome della icona si sostituisce a quelli colorati di viola, uno dei quali serve per il Testo Alternativo.



Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy