Icone web 2.0. Un tutorial per creare simpatici badge

Stampa E-mail

iconeIn passato mi è capitato di dover creare delle icone tipo badge, che poi non ho avuto occasione di utilizzare. Così ho deciso di scrivere questa piccola guida. Spero che piacciano. A lato è mostrato il risultato finale. Per i colori del tutorial ho scelto una scala di grigi, ma è semplicissimo personalizzarli.

N.B.: Le dimensioni usate nell'esempio sono molto grandi. Per l'uso pratico è consigliabile quanto meno dimezzarle

Con Fireworks MX

Questa è l'immgine che otterremo seguendo le istruzioni del tutorialIo ho usato Fireworks Mx, ma va bene un qualsiasi programma. Questa è l'immgine che otterremo seguendo le istruzioni del tutorial.

Base dell'iconaApriamo un file vuoto 400 per 400 pixel e disegnamo al centro una stella di colore nero (vector>star, nella barra laterale degli strumenti). Poi aumentiamo il numero delle punte (io ho messo 16) e rendiamo gli spigoli meno appuntiti (vedi figura).

Allineamento dell'iconaIn "proprieties" (in basso a sinistra) regoliamo le dimensioni a 300 per 300 px e allineiamo al centro (dalla finestra di dialogo window>align. Vedi figura)

Copiamo la forma e incolliamola. La nuova forma, allineata al centro, deve avere le dimensioni di 250 per 250 px, nessun bordo e deve essere colorata con un gradiente "radial", che va da #666666 (al centro) a #CCCCCC (all'esterno).

Scriviamo del testo al centro dell'icona.

Poi bisogna creare l'effetto di luce. Incolliamo di nuovo la prima forma che avevamo realizzato, coloriamola di bianco, riduciamo la trasparenza a 45 e centriamo.
Ora dobbiamo tagliarla digonalmente. Per far ciò dobbiamo prima disunirla cliccando Modify>ungroup (o digitando ctrl+shift+g) e poi (dopo aver ridotto di nuovo la trasparenza a 45, perchè probabilmente sarà tornata normale), con lo strumento "knife tool" (Y), tagliamola a partire da sinistra, come a tracciare le 9 e 10 su un orologio. Deselezioniamo, selezioniamo la parte in basso e cancelliamo. Selezioniamo la parte rimasta e chiudiamo il tracciato con la penna vettoriale (pen tool).
Con la penna, aggiungiamo un punto nel mezzo della linea appena tracciata. Poi, sempre con la penna, clicchiamo sullo stesso punto e tiriamo un un lato. Dovrebbero apparire le maniglie. Sagomiamo la curva in modo da ottenere l'effetto desiderato (immagine di esempio).

riflessi dell'iconaAdesso tocca ai riflessi più piccoli. Tracciamo un cerchio (di circa 70 px) con colore di riempimento "linear", da bianco 0% a bianco 50% e posizioniamolo nell'angolo in alto a sinistra. Copiamo il cerchio, incoliamo, rimpiccioliamo un pò, ruotiamo di 180° e infine posizioniamolo nell'angolo basso di destra. Infine creiamo un cerchietto bianco 50% e mettiamolo nella parte inferiore destra del cerchio linear.

Già questo risultato non è male, ma manca ancora l'ultimo tocco per dare profondità al badge.

elemento grafico iconaCon lo strumento "smart poligon" tracciamo un poligono con 12 lati, diviso in sezioni, e di dimensione simile a quella del badge. Procediamo in questo modo:

  • Tracciare il poligono con colore nero e senza bordi.
  • Trascinare la maniglia per ottenere i 12 lati.
  • Trascinare la stessa maniglia per dividere il poligono in sezioni.
  • Selezioniamo (con lo strumento "subselection tool")  6 sezioni alternate ed eliminiamo il colore (color: none)
  • Regoliamo la trasparenza a 33 e "tint" come blend mode.

Il poligono così costruito deve essere posizionato al terzo posto dei livelli creati (a partire dal primo che abbiamo realizzato) e deve avere una dimensione simile al badge. Non deve essere più grande. In pratica i suoi bordi devono poggiare sul bordo nero. Se non riuscite a crearlo potete usare il mio.

Per completare l'opera aggiungiamo un'ombra esterna alla base (effects>shadow and glow>drop shadow).

Con Photoshop

Il procedimento è sostanzialmente identico a quello descritto. L'unica differenza è che con photoshop non è possibile creare il poligno diviso in sezioni (potete scaricare quello che ho realizzato io). Inoltre con Photoshop (in italiano) l'effetto "tint" si ottiene con "Luce soffusa".

 

iconeL'esempio è in bianco e nero, ma non ci vuole molto a creare dei bellissimi badge colorati. Basta cambiare i colori del gradiente "radial" del secondo livello (ed eventualmente giocare sulle trasparenze degli altri elementi).

Discuti di questo articolo sul forum. (0 posts)

Ultimo aggiornamento ( lunedė 22 gennaio 2007 )

Home arrow Webdesign arrow Icone web 2.0. Un tutorial per creare simpatici badge

 I Feed RSS di miniDesign

In evidenza
Il file htaccess
Tutorial mappa Google
Ultime notizie
Le pių lette
Ricerca rapida