Fireworks: creare set di icone con i simboli e gli stili
In questo tutorial vedremo come creare diversi set di icone, partendo da un’immagine di base, sfruttando alcune semplici funzionalità di Fireworks. Alla fine del tutorial potrete scaricare un piccolo set di icone e il file sorgente… iniziamo!
L’immagine di partenza è un’icona minimale composta da un cerchio e un tracciato.
Siccome il cerchio sarà la base di tutti i nostri set e verrà ripetuto per ogni icona, per prima cosa creiamo un simbolo (elabora > simbolo > converti in simbolo) Modificando il simbolo andremo ad agire su tutte le istanze presenti nello stage.
Da questa prima immagine creiamo le altre icone su questo stile: pochi tratti per definire i soggetti ed ecco un primo set di icone.
Partendo da questo possiamo definire, grazie agli “stili”, un secondo set con effetto "metallico".
Dal menu "finestra" apriamo "stili". Questa palette permette di applicare con un click alcuni stili predefiniti (sostanzialmente sfumature, tracciati e filtri combinati tra loro e modificabili) all’oggetto selezionato.
Entriamo nel simbolo (doppio click su un’istanza), selezioniamo il cerchio e clicchiamo sul secondo stile della tendina "cromato scuro". Per ottenere il risultato in figura andiamo a modificare la brillantezza dell’oggetto con "proprietà > filtro > tonalità saturazione".
Ovviamente avremmo potuto modificare il gradiente, ma in questo modo il colore è più controllabile e si modifica più velocemente.
Ora diamo un effetto incavato al tracciato dell’icona “home”, come se il disegno fosse inciso nel metallo: rendiamo il tratto più spesso di un pixel e applichiamo "filtro > ombra interna". E a questo punto, selezionando il tracciato, creiamo un nuovo stile (stili > nuovo stile) in modo da applicare queste stesse caratteristiche a tutte le altre icone.
Pochi minuti di lavoro ed ecco il risultato!
È molto semplice modificare lo stile di tutte le icone, vediamo, per esempio, come ottenere in pochi passaggi uno stile molto diverso da questo: effetto grunge!
Entriamo nuovamente nel simbolo. L’immagine successiva mostra i primi passaggi:
Applichiamo una texture da “proprietà > riempimento > motivo > altro”... carichiamo una nostra texture e la scaliamo sull’oggetto. Associamo poi un tratto al quale diamo l’effetto “olio” e una texture “stucco” dal pannello “tproprietà > tratto > opzioni tratto”.
Nella figura successiva sono mostrati gli step finali.
Utilizzando il pannello “tracciato” e seguiamo le indicazioni mostrate in figura per ottenere una forma vettoriale con i bordi frastagliati. Tutte le istanze del nostro simbolo sono state nuovamente modificate.
Non ci resta quindi che modificare le icone sopra la base. Un’idea realizzabile in 30 secondi può essere questa:
Ed ecco quindi come in pochissimo tempo e con pochi elementi abbiamo realizzato tre set di icone con stili completamente differenti:
Naturalmente questo lavoro serve solo da spunto per mostrare come con pochi strumenti e un po di creatività possiamo raggiungere risultati efficaci in breve tempo.
Scaricate il file del tutorial. Contenente un piccolo set di icone da modificare a vostro piacimento prendedo spunto dalle idee mostrate nel tutorial o da utilizzare per il vostro sito.
