Una scritta in stile "web 2.0" con Adobe Fireworks.

Breve introduzione.

In questo breve tutorial si vedrà come realizzare un effetto in stile "web 2.0". Con "web 2.0" in questo caso ci riferiamo prettamente alla grafica, cercando di riprodurre un effetto "luccicante", meglio conosciuto come effetto gloss.
È stata adottata l'espressione "una scritta in stile web 2.0" dal momento che molti siti attuali di stampo più "sociale" e facenti parte di quel mondo che molti etichettano con "web 2.0" adottano questa particolare tecnica (più diffusa per i menù di navigazione o per i pulsanti).

Gli strumenti di lavoro.

Si lavorerà con Adobe Fireworks.

Il lavoro.

Qui sotto viene inserito il lavoro finale che è possibile modificare e utilizzare per qualunque scopo. Il file allegato è in formato PNG di Fireworks. E' quindi necessario tale strumento per poter effettuare le opportune modifiche.

Ecco qui sotto un'anteprima del lavoro finale.

Iniziamo!

Per prima cosa, dopo aver avviato Fireworks, creiamo una nuova area di lavoro cliccando su File -> Nuovo. Come dimensioni impostiamo dei valori a scelta. Per lavorare comodamente si potrebbe impostare un'area di lavoro di almeno 800px X 800px e solo in seguito cambiarne le dimensioni a seconda delle esigenze. Come risoluzione impostiamo 72 pixel per pollice (partiamo infatti dal presupposto che l'immagine dovremo poi inserirla all'interno di un sito web visualizzabile sui monitor più diffusi in commercio).
In seguito scriviamo con lo strumento Testo la scritta: web2.0 ed impostiamo come font il "Futura Extra Black BT" o comunque scegliamo un font abbastanza spesso ma senza grazie, come ad esempio l'Arial Black, il Gill Sans bold, ecc.
Dopo aver scelto il font più adatto selezioniamo la scritta e andiamo ad impostare lo riempimento. Con lo strumento Puntatore clicchiamo sul testo in modo da selezionarlo, come mostrato in figura 1 qui sotto.

Figura 1

Ora dobbiamo calibrare in modo molto preciso lo riempimento: dipende infatti molto da esso l'esito dell'effetto finale. Fireworks ci viene certamente in aiuto con le possibilità che offre in merito agli effetti di riempimento. Anche la scelta dei colori è fondamentale per fornire l'effetto giusto.
Per impostare lo riempimento (sempre col testo selezionato) cliccare su "Colore riempimento" nel pannello di proprietà del testo, in seguito cliccare su "Opzioni di riempimento". Come tipologia di riempimento impostare "Gradiente" e "Ellisse", come illustrato nella figura 3 qui sotto. Per i colori impostare i seguenti valori esadecimali:

• prima sfumatura: impostarla dal colore #99CC00 al colore #769D00;
  
• seconda sfumatura: impostarla dal colore #8ABA00 al colore #E2FF8C.
  

Figura 2

Figura 3

Nella figura 4 qui sotto viene indicato come impostare le distanze per le varie sfumature e vengono indicate visivamente le grandezze che si devono impostare per l'ellisse.

Figura 4

Otterremo l'effetto come illustrato nella figura 5 qui sotto.

Figura 5

A questo punto non ci resta che impostare i bordi e l'ombra ai caratteri. Per il bordo, come illustrato nelle figure 6 e 7 qui sotto, selezionare il testo e cliccare sullo strumento "Colore contorno testo" nella finsetra delle proprietà ed impostare i seguenti effetti:

• matita
• colore bianco
• morbido 1 px
• dimensioni punta 5

Figura 6

Figura 7

Per quanto riguarda l'ombra seguire le impostazioni illustrate nella figura 8 qui sotto: cliccare su Filtri -> Ombra esterna ed assegnare i seguenti valori nella finestra di dialogo:

• colore: nero
• distanza: 2
• opacità: 49%
• morbidezza: 4
• angolo: 315°

Figura 8