Realizzazione di una Landing Page con Fireworks
Qualche tempo fa ho conosciuto dei ragazzi che stavano lavorando su un progetto per la realizzazione di una applicazione per Iphone, così mi hanno invitato a progettare una landing page.
Quindi, in questo tutorial vi mostrerò come l’ho creata utilizzando Fireworks.
Naturalmente si può fare la stessa cosa con Photoshop, i comandi cambieranno un po’, ma il processo è praticamente lo stesso.
Fase 1
La prima cosa da fare è capire come organizzare il concetto tematico ed il layout del sito.
Nel mio caso i ragazzi mi avevano già detto esattamente quello che volevano.
Fase 2
Con lo strumento Rettangolo (U) creiamo un nuovo rettangolo dandogli come colore #191D22, poi sul pannello filtri, fare clic sull’icona di aggiunta (+) e selezionare Aggiungi disturbo, inserendo 1 per la quantità.
Fase 3
Con lo strumento Rettangolo (U) crea un altro rettangolo di altezza 200px e lungo quanto tutto il documento, diamogli a quest’ultimo il colore #1c202a.
Fase 4
Dal pannello dei filtri vai su Ombra e luce –> Ombra interna.
Utilizzare 0 (zero) per la distanza, il 40% per l’opacità, 1 per la morbidezza e 270° per l’angolo.
Fase 5
Fare di nuovo clic sull’icona Aggiungi e selezionare Ombra e luce –> Ombra esterna. Utilizzare 0 per la distanza, il 65% di opacità, 4 per la morbidezza.
L’angolo non fa alcuna differenza, poichè la distanza è 0.
Fase 6
Ora aggiungiamo un pò di disturbo in modo che il rettangolo non avrà quel colore piatto.
Fase 7
Qui ho messo l’immagine dell’iPhone proprio al centro dell’immagine con lo schermo rivolto in su.
Fase 8
Duplicate l’immagine e andate su Elabora –> Trasformazione –> Rifletti in verticale.
Quindi modificare l’opacità al 50% e andare in Elabora –> Maschera –> Rivela tutto, poi con lo strumento Sfumatura (G), selezionare il preset bianco e nero ed applicarlo sulla maschera di livello, con il bianco sarà visibile e ciò che è nero sarà trasparente per creare così il famoso effetto da pavimento bagnato.
Fase 9
Aggiungere un nuovo rettangolo e riempirlo con un gradiente utilizzando bianco per entrambi i colori, di cui a uno gli diamo come opacità 100% (1) e l’altro 0% (2) poi utilizzare lo strumento Sfumatura (G) per applicare il gradiente con un angolo di 90º.
Fase 10
Creare l’effetto della luce è molto facile.
Con lo strumento Ellisse (U) crea un’ellisse, quindi utilizza il bianco per il colore e modifica il bordo impostandolo su morbidezza e 100 per il valore (1). Dopo di che basta cambiare il metodo di fusione in Sovrapponi (2).
Fase 11
Ora duplicate l’ellisse per rendere la luce più forte.
Aggiungere anche diversi ellissi per rendere l’effetto luce più realistico. Un’altra cosa che è molto importante è quello di giocare con le opacità. utilizza 50-60% per i nuovi ellissi.
Fase 12
Per lo slogan, ho usato Arial a 35px perché è il font di base utilizzato dagli iPhone, e un gradiente da un grigio chiaro al bianco.
Inoltre ho aggiunto un ombra utilizzando 1px per la distanza, il 90% per l’opacità, 1 per la sfocatura e il 90° per l’angolo.
Fase 13
Con lo strumento rettangolo arrotondato (U) creare un rettangolo, riempirlo con il grigio e modificare l’opacità al 80% (1).
Con lo strumento Rettangolo (U) creare un altro rettangolo, ma sotto quello grigio e renderlo più piccolo (2).
Sempre con lo strumento rettangolo arrotondato (U) creare un altro elemento (3), quindi selezionare i 2 rettangoli arrotondati e andare su Elabora –> Combina tracciato –> Ritaglio interno.
Selezionare tutti gli elementi e raggrupparli, dopo di che aggiungere un disturbo come nelle prime fasi.
Fase 14
con lo strumento Linea (N) crea una linea, poi vai a Modifica –> Maschera –> Rivela tutto, selezionate lo strumento gradiente e il preset bianco nero con ovale per il tipo e la vernice sopra la maschera di livello.
In questo modo i bordi spariranno.
Fase 15
Con lo strumento Ellisse (U), aggiungere un ellisse in bianco e modificare la morbidezza utilizzando 60 come paramentro.
Poi, con la maschera, nascondere la parte di sotto della linea.
Poi crea un rettangolo con l’area che si desidera visualizzare e andare in Modifica –> Taglia.
Quindi selezionare l’ellisse e andare a Modifica –> Maschera –> Incolla come maschera.
Fase 16
Ripetere la stessa procedura per mascherare l’id della carta.
Fase 17
Ora aggiungiamo il cordino e anche in questo caso ripetiamo lo stesso processo di mascherarlo. Aggiungere anche un pò di ombra per la scheda e cordino.
Fase 18
Mettere alcune icone sulla colonna di sinistra ed è arrivato così il momento di aggiungere il contenuto.
Fase 19
Allineare le guide in modo che possiamo avere un riferimento visivo per creare le colonne e posizionare il contenuto. Questo sarà molto importante quando si andrà poi a realizzarlo con i CSS.
in Conclusione
Il layout è fatto ed abbiamo tutta la home page creata. Il processo di progettazione è stato abbastanza semplice, anche gli strumenti ed i filtri che abbiamo usato. La stessa cosa potrebbe essere fatta in Photoshop, però, con Fireworks abbiamo possibilità vettoriali eccellenti e filtri avanzati che rendono tutto il processo molto più facile. Anche il modo con cui possiamo giocare con gradienti è semplicemente imbattibile.
Bene questa è l’ultimo tutorial per questo mese, vi auguro Buone Vacanze e spero a chi ne fosse interessato di risentirci a settembre.
