Fireworks: come creare un set di web-elements?

In questo articolo vedremo come Fireworks ci consente di ottenere tracciati complessi in maniera semplice e veloce senza ricorrere all’utilizzo del pennino di Bezier, il quale richiede una certa manualità e una discreta dose di pazienza, di cui non molti dispongono.

Poniamo il caso che ci sia stato commissionato un set di elementi grafici che saranno inseriti nel sito di una nuova marca di caffè.
Ci è stato richiesto di realizzarne due varianti, una per l’aroma classico ed una per quello light.

Innanzitutto scegliamo una palette di due colori che possano essere accostati ed invertiti mantenendo uno spiccato effetto chiaro/scuro.
In questo caso possiamo optare per un marrone (#957551) ed un beige (#eadbb3).

Apriamo Fireworks e creiamo un nuovo documento.

Balloon

Disegniamo un rettangolo arrotondato, applichiamogli un riempimento marrone e trasciniamo le maniglie gialle per regolare il raggio degli angoli.

Disegniamo un quadrato a cui applichiamo lo stesso riempimento marrone.
Selezioniamolo con lo strumento Sottoselezione (freccia bianca), clicchiamo su uno dei quattro nodi del tracciato e premiamo il tasto canc, in questo modo otterremo un triangolo.

Possiamo modificare la forma del tracciato trascinandone i nodi con la freccia bianca.
Posizioniamo il triangolo nel punto desiderato, selezioniamo entrambe le forme e clicchiamo su Elabora – Combina tracciati – Insieme.

Copiamo il tracciato appena ottenuto e incolliamolo sul posto due volte.
Ruotiamo il primo balloon di 90 gradi, applichiamogli un riempimento trasparente e una traccia nera, ed intersechiamolo con il secondo balloon come nell’esempio qui sotto:

Clicchiamo su Elabora – Combina tracciati – Intersezione.
Al tracciato appena ottenuto applichiamo un gradiente lineare che va dal bianco al nero, impostiamo come metodo di fusione Scolora ed abbassiamo l’opacità al 50%.

Dato che dovremo applicare questo effetto anche ad altri elementi, ci conviene salvarlo come stile: mantenendo selezionato il tracciato andiamo nel pannello degli stili, clicchiamo su Nuovo stile e gli assegniamo il nome Gloss.

Selezioniamo il balloon e applichiamogli il filtro Ombra e luce – Luce interna:

Copiamo e incolliamo di nuovo il balloon.
Selezioniamo l’oggetto che si trova più in basso ed applichiamogli un riempimento nero, eliminiamo il filtro Luce interna e gli applichiamo il filtro Sfocatura – Sfocatura gaussiana con valore 3. Abbassiamo l’opacità al 20% e posizioniamo l’ombra aiutandoci con i tasti freccia.

Salviamo questo stile con il nome Ombra.

Per il testo utilizziamo il font Brannboll Fet di colore beige.

Selezioniamo tutti gli oggetti (tenendo premuto il tasto Shift mentre clicchiamo), copiamoli ed incolliamoli in una nuova cartella.
Invertiamo i colori del balloon e della scritta ed abbassiamo l’opacità dell’ombra al 15%.

Sticker

Tracciamo un cerchio ed applichiamogli un gradiente lineare che va da un marrone più chiaro ad un marrone di un paio di tonalità più scuro.
Disegniamo un rettangolo con riempimento trasparente e traccia nera ed intersechiamolo con il cerchio.

Copiamo ed incolliamo sul posto entrambe le forme.
Selezioniamo la prima coppia di oggetti e clicchiamo su Elabora – Combina tracciati – Ritaglio interno, dopo di che selezioniamo la seconda coppia di oggetti e clicchiamo su Elabora – Combina tracciati – Intersezione.

Selezioniamo il tracciato appena ottenuto, ruotiamolo di 90 gradi ed applichiamogli un gradiente lineare a 5 colori alternando il marrone e il beige:

Infine applichiamogli una leggera ombra esterna.

Copiamo il cerchio, applichiamogli lo stile Ombra e posizioniamolo in fondo allo sticker.

Copiamo lo sticker in una nuova cartella e invertiamone i colori.

Tag

Disegniamo un rettangolo arrotondato con riempimento marrone.
Tenendo premuto il tasto Alt trasciniamo le due maniglie gialle superiori verso l’interno fino a sovrapporle, e trasciniamo quelle inferiori leggermente verso l’esterno, in modo da ridurre un po’ il raggio degli angoli.

Disegniamo un piccolo cerchio per realizzare il foro del cartellino.
Selezioniamo entrambe le forme e clicchiamo su Elabora – Combina tracciati – Ritaglio interno.

Copiamo ed incolliamo sul posto il tracciato.
Disegniamo un ellisse con riempimento trasparente e traccia nera, e intersechiamolo con tracciato duplicato.

Clicchiamo su Elabora – Combina tracciati – Intersezione, applichiamo al tracciato ottenuto lo stile Gloss ed abbassiamo l’opacità al 30%.

Disegniamo un ellisse stretto e lungo, applichiamogli lo stile Ombra, posizioniamolo sotto il cartellino e con i tasti freccia spostiamolo qualche pixel più in là del bordo sinistro.
Copiamo l’oggetto e sistemiamolo sul lato destro.

Copiamo il tag e invertiamone i colori. Ricordiamo di abbassare l’opacità delle ombre al 20%.

Pulsante

Disegniamo un rettangolo arrotondato con riempimento marrone.
Copiamolo ed incolliamolo sul posto due volte. Applichiamo al primo rettangolo riempimento trasparente e traccia nera ed intersechiamolo con il secondo rettangolo.

Clicchiamo su Elabora – Combina tracciati – Intersezione, ed applichiamo al tracciato ottenuto lo stile Gloss.
Assegniamo al rettangolo una leggera ombra esterna, ed una luce interna con i seguenti valori:

Copiamo il pulsante e invertiamone i colori.

Ribbon

Disegniamo le seguenti forme:

Uniamo il quadrato e i due triangoli sulla sinistra e clicchiamo su Elabora – Combina tracciati – Insieme.
Ripetiamo la stessa operazione per le tre forme sulla destra.
Avviciniamo tutti gli oggetti e posizioniamoli in modo da formare un nastro:

Copiamo e incolliamo due volte il rettangolo centrale, e creiamo un effetto gloss con lo stesso metodo che abbiamo utilizzato con il pulsante.
Facciamo la stessa cosa per le due punte laterali.
Infine applichiamo una leggera ombra esterna ai vari oggetti che compongono il ribbon.

E tu come realizzi i piccoli elementi grafici, utilizzi il pennino di Bezier o preferisci sperimentare metodi alternativi?

Tag: ,

L'autore

Web designer per passione lavora come free-lance con lo pseudonimo Pupixel, nato dalla fusione di "pixel" e "puparrozzini", che è il nome affettuoso con cui chiama i suoi gatti. Nella realizzazione di un sito da molta importanza all'espetto estetico, che deve essere accattivante e curato nei minimi dettagli, pur restando nei canoni dell'usabilità e del buon senso. Oltre al suo lavoro ama alla follia tutti gli animali, in particolar modo i gatti.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

18 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo