fbpx
Richiedi un preventivo
Il Blog di SEO Cube

Rimani informato sulle ultime novità che ti aiuteranno a realizzare un eccellente sito web lato SEO!

05 Agosto 2013

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.

Richiedi un preventivo
X

Vuoi rendere più performante il tuo sito? Cerchi il supporto giusto per posizionare meglio le tue pagine su Google? Hai bisogno di una consulenza SEO?

Entra in contatto con noi e richiedi un preventivo gratuito: studieremo insieme la strategia più adatta alle tue esigenze e alle caratteristiche del tuo sito.

Compila il modulo se vuoi essere ricontattato dal nostro staff aziendale o utilizza gli altri canali per conoscere tutte le soluzioni che proponiamo per il tuo business, per avere informazioni più precise e per iniziare una collaborazione con SEO Cube.

I nostri recapiti
Via dell'Epomeo, 463 - 80126 Napoli - Tel. 081 588 11 68 / Fax 081 194 66 412

    Dati personali
    Inserire il Nome
    Inserire il Cognome
    Inserire il Numero di telefono
    Inserire un indirizzo email corretto
    Tipo di richiesta
    Messaggio