Tutorial: realizzare facilmente icone stile web 2.0 | GIMP o Photoshop

In questo articolo vedremo come realizzare delle semplici ma molto d’effetto icone stile web 2.0. La difficoltà di realizzazione è molto bassa e per questo, l’articolo è rivolto anche a persone che non hanno mai aperto un software di fotoritocco. La scelta del software è ricaduta su GIMP, essendo open source e gratuito, però nulla vieta di utilizare Photoshop, dato che tutte le funzionalità che utizzeremo sono presenti.

Siamo quindi pronti per realizzare le nostre icone. Partiamo!

• Passo 1: Apriamo il nostro GIMP e da File–>Nuovo creiamo un nuovo documento 256px X 256px con sfondo trasparente:

• Passo 2: Creiamo un nuovo livello da Livello–>Nuovo livello e chiamiamolo “Base_icona”:

• Passo 3: Selezioniamo lo strumento selezione rettangolare e settiamo i parametri come da figura (i bordi saranno leggermente arrotondati). Creiamo una selezione sul livello “Base_icona”, tenendo premuto il tasto ALT in modo tale da farla perfettamente quadrata:

• Passo 4: A questo punto dobbiamo riempirla; selezioniamo lo strumento sfumatura ed i seguenti colori #d4145a (primo piano) e #a71c4d (sfondo). Nel riempire la selezione partiamo dal’angolo in basso a destra fino all’angolo in alto a sinistra in modo tale da applicare la sfumatura diagonalmente (classica espressione del web 2.0 ):

• Passo 5: Prossimo passo è quello di creare un bordo. Selezioniamo il livello Base_icona (tramite lo strumento Fuzzy)e riduciamo la selezione di 1px utilizzando lo strumento Seleziona–>riduci:

• Passo 6: Quindi creiamo un nuovo livello “bordo”; selezioniamo come colore in primo piano il bianco ed utilizziamo lo strumento Modifica–>Delinea Selezione per creare una traccia di 2px. Settiamo l’opacità a 60%:

• Passo 7: Passo successivo è creare il riflesso rotondo. Inseriamo un nuovo livello “Riflesso”; selezioniamo lo strumento Selezione elittica con l’opzione “espandi dal centro”; quindi posizioniamo il cursore nell’angolo in basso a destra e tracciamo il nostro segmento circolare come da figura:

• Passo 8: Selezioniamo l’inverso della selezione corrente (con Seleziona–>inverti) e riempiamo con il bianco. Settiamo opacità a 30%:

• Passo 9: Per cancellare la parte del riflesso che va oltre l’icona, selezioniamo l’intero livello “Base_icona” , settiamo l’inverso, selezioniamo il livello “Riflesso” e premiamo il tasto Canc sulla nostra tastiera. Tutto quello che risulta fuori il livello “Base_icona”, viene cancellato dal livello “Riflesso“:

• Passo 10: Passo successivo è creare i raggi del sole stile Sol Levante Giapponese. Creiamo un nuovo livello “Sole”; selezioniamo quindi lo strumento tracciati (con l’opzione “poligonale” selezionata) e cerchiamo di disegnare i tracciati come da figura sotto, senza stare troppo attenti alla precisione, infatti tutto quello che cadrà fuori dall’icona verrà cancellato come al passo 9 (potete aumetare lo zoom di visualizzazione per aiutarvi):

• Passo 11: Quando siamo soddisfatti, selezioniamo la finestra dei tracciati e creiamo la selezione come da figura. Poi riempiamola di bianco e settiamo l’opacità a 5%-10%:

• Passo 12: Cancelliamo i tracciati come in figura:

• Passo 13: Cancelliamo la parte dei raggi solari che finiscono fuori l’icona come nel passo 9.
• Passo 14: Dobbiamo creare un’ombra sotto l’icona. Per farlo selezioniamo il livello “Base_icona“; Settiamo una sfumatura a 15px; Creiamo un nuovo livello “Ombra” sotto al livello “Base_icona” e riempiamolo con un grigio scuro (#333333). Avremo un’ombra perfettamente centrata sotto il livello base.

A questo punto l’icona di base è pronta. Il risultato dovrebbe essere il seguente (ho inserito uno sfondo bianco provvisorio solo per farvi vedere l’ombra creata al passo 14):

Siamo quindi pronti a riempire la base con le varie iconcine. Il modo migliore per disegnarle è scaricare da internet un immagine (ad esempio il logo di un omino stile messenger); aprilo con GIMP, selezionare i contorni con lo strumento Fuzzy e riempire la selezione con il bianco. Una volta pronta possiamo inserirla nell’icona base creata prima. L’unica cosa da fare in aggiunta è creare l’ombra in questo modo:

• Passo 15: Importare l’icona in un nuovo livello (es. “Omino”).
• Passo 16: Selezionare l’icona con lo strumento Fuzzy e sfumarla con lo strumento Seleziona–>sfumata con un valore pari a 10px:

• Passo 17: Creare un nuovo livello “omino_ombra” sotto al livello “Omino”
• Passo 18: Riempire con un grigio scuro (es. #333333)
• Passo 19: Posizionate il livello “Riflesso” sopra a tutti gli altri livelli ed il gioco è fatto

Il risultato finale dovrebbe essere:

Ovviamente potete provare tutte le varianti che volete.. Cambiare i colori, creare le varie icone seguendo i passi da 15 a 19. Una variante che mi è venuta in mente è, ad esempio, sostituire il sol levante con le classiche stripes web 2.0 (le potete creare facilmente utilizzando il sito web Stripegenerator). Quale vi piace di più??

In ogni caso potete scaricare gratuitamente:

• Il file progetto GIMP in modo tale da avere il risultato finale come guida » Download
• Le 3 icone finite della preview » Download

Spero di essere stato chiaro. In ogni caso esprimente i vostri dubbi nei commenti che li chiarirò

Leggi anche i seguenti articoli:

• Tutorial: Creare un’icona stile msn per avatar di default | GIMP o Photoshop
• Tutorial HDR | Fase 3 – Postproduzione Qtpfsgui + GIMP
• T-Shirt Personalizzate: realizzate la vostra maglietta fai-da-te con pochi euro
• Creare foto HDR da un unico file JPG – RAW | GIMP – Photoshop
• Parafunky: è quì la festa?

Tags: Gimp, icone, Photoshop, web 2.0