Creare un logo Web 2.0

Ormai il cosiddetto “Web 2.0” è una realtà diffusa, e sempre di più sono i tutorial e i mock-up di logo “stile web 2.0” disponibili online… per questo ho deciso di scriverne uno dedicato a Gimp e renderlo disponibile.

Ecco un esempio di quel che andremo a creare:

… niente male, no? ;)

Prima di iniziare, un po' di font

Una caratteristica dei logo “Web 2.0” è un accurato lettering, per questo vi consiglio caldamente di fiondarvi su un sito che permetta il download di font truetype, come ad esempio DaFont e procurarvi un po’ di font.

Per l’installazione vi rimando all’articolo Aggiungere nuovi font per Gimp.

Cominciamo

Per cominciare ho creato una nuova immagine di 800x600 pixel, 96dpi. Ho selezionato lo strumento testo per creare la scritta di partenza per il mio logo. Una volta creata la scritta ho premuto, nel tab delle opzioni dello strumento testo, il pulsante Crea tracciato dal testo per ottenere un tracciato vettoriale del testo immesso:

Possiamo anche sbarazzarci del layer di testo creato, dato che utilizzeremo il tracciato per il lavoro seguente. E` quindi molto importante essere sicuri sia del logo che del nome, prima di continuare!

Separare i tracciati

Per continuare ho deciso di separare i tracciati delle due parti che compongono il nome della fantomatica società TripNu in Trip e Nu, che colorerò poi di colori diversi. Si parte dal tracciato originale, trasformandolo in selezione, poi con una selezione rettangolare negativa (tasto R e poi CTRL+Trascinamento) cancellando una parte della selezione:

A questo punto si creerà un nuovo tracciato a partire dalla selezione e si ripeterà l’operazione per l’altra parte del nome:

Questa è la base di partenza per tutto il lavoro seguente!

Preparare i gradienti

La caratteristica preponderante dei logo “Web 2.0” sono i gradienti, una tradizione introdotta da Apple con Mac OS X (e il famoso stile “Aqua”) che poi si è evoluta in vari modi.

Per la nostra scritta utilizzeremo due gradienti: uno verde (Trip) ed uno grigio (Nu).

Apriamo la linguetta dell’editor di gradienti e creiamo un nuovo gradiente. Facendo click con il tasto destro sulla barra in alto scegliamo il colore iniziale:

Facciamo la stessa cosa per il colore finale:

Come vedete per il colore finale siamo partiti da quello iniziale ed abbiamo aggiunto *10 Saturation* e tolto *-30 Value*.

Per il gradiente grigio ci limiteremo a duplicare quello appena creato e cambiare il livello di saturazione:

Siamo pronti per riempire le nostre scritte!

Riempire le scritte coi gradienti

Creiamo un nuovo livello trasparente e selezioniamolo. Passiamo nel tab dei tracciati e trasformiamo il tracciato Trip in selezione poi, usando lo strumento gradiente con il nostro gradiente verde, riempiamo la selezione con una sfumatura che va dal verde chiaro (in alto a sinistra) al verde scuro (in basso a destra).

Ripetiamo le operazioni con il gradiente grigio per Nu fino ad ottenere un risultato come questo:

Siamo pronti per cominciare a dare i tocchi di classe al nostro logo ;)

Il riflesso obbligatorio

Senza un riflesso luccicante, un logo non sarebbe affatto “Web 2.0”!

Creiamo un nuovo livello trasparente ed usiamo lo strumento Tracciato per creare un nuovo tracciato della forma che preferiamo: nel mio caso ho utilizzato una forma a onda.

Una volta trasformato il tracciato in selezione ho riempito quest’ultima di bianco. Impostando la trasparenza del livello al 50% il risultato è già interessante, ma noi andremo oltre!

Creeremo, infatti, una maschera di livello in cui useremo un gradiente dal bianco al nero per controllare il grado di trasparenza del livello “Riflesso”:

Il risultato è già migliorato di molto, ma aggiungeremo altri piccoli dettagli per avere un logo veramente irresistibile!

Per evitare di avere problemi successivamente applicheremo il livello maschera (click col destro sul livello → applica livello maschera) e ritaglieremo tutto ciò che sborda oltre la scritta: tornanto sul tab dei tracciati usiamo il tracciato completo per ottenere una selezione, dopodiché invertiamola (CTRL+i) e, con il livello del riflesso selezionato, cancelliamo (tasto CANC o DELETE).

Come vedete la differenza è notevole: questa modifica ci permetterà di vedere correttamente l’ombra della scritta.

Ombre e bordi

Per far risaltare al meglio la nostra scritta aggiungeremo un’ombra. Selezioniamo il livello su cui si trova Trip ed andiamo in Filtri → Luci e Ombre → Drop Shadow

Ripetiamo l’operazione anche per il livello Nu.

Per aggiungere il bordo, per prima cosa recuperiamo il colore scuro dei nostri gradienti (verde: #3fb224, grigio: #999999), poi creiamo un nuovo livello trasparente e, selezionato il tracciato di Trip premiamo sul pulsante Delinea Tracciato impostando un bordo di 3 pixel.

A questo punto io ho regolato la trasparenza del bordo, riducendola un po’ per ottenere un risultato più interessante:

Manca solo il tocco finale: la scritta BETA, che non deve mai mancare nel logo di un sito “Web 2.0”! :D