Fireworks: come disegnare un portfolio?

Oggi proveremo a mettere in pratica le nozioni su Fireworks che abbiamo appreso negli scorsi tutorial: disegneremo il layout di un mini-sito di una sola pagina, stile portfolio creativo.

Creiamo un nuovo documento di 1680 x 2000px con sfondo trasparente.
Per prima cosa posizioniamo due guide verticali a 360px a destra e sinistra, in modo da delimitare al centro un’area di 960px.
Se trascinando le guide teniamo premuto il tasto Shift, Fireworks ci mostrerà con esattezza di quanti pixel ci stiamo spostando dalle guide più vicine o dal bordo dell’area di lavoro.

Header

Posizioniamo una guida orizzontale a 100px, e disegniamo un rettangolo di 1680 x 100px tra la guida e il bordo superiore dell’area di lavoro.
Applichiamo a questo rettangolo un riempimento uniforme color verde petrolio (#6CA19E), e la texture Linea diagonale 1 al 18%.

Duplichiamo il rettangolo ed applichiamogli un gradiente lineare dal bianco al nero, con metodo di fusione Moltiplica ed opacità 15%, in modo da illuminare leggermente l’header.

Posizioniamo altre due guide verticali a destra e sinistra, a 20px di distanza dalle prime, per lasciare il giusto margine tra il testo e il contenitore di 960px.

Sul lato destro scriviamo le voci delle sezioni del nostro portfolio, utilizzando il font Century Gothic a 25px di colore verde chiaro (#CDE9CA).


Sul lato sinistro sinistro scriviamo il nostro nome, o il titolo che vogliamo dare al mini-sito.
Utilizziamo un font calligrafico abbastanza spesso, io ho utilizzato il Japan a 60px sempre di colore verde chiaro.

Bordo seghettato

Ora dobbiamo creare un bordo seghettato. È un elemento che, abbinato ad un giusto utilizzo delle texture, può dare un tocco di originalità in più al nostro layout.
Vediamo come realizzarlo facilmente con Fireworks.

Disegniamo un quadrato, selezioniamolo con la freccia bianca, clicchiamo su uno dei due nodi superiori e premiamo il tasto canc in modo da ottenere un triangolo.
Duplichiamo il triangolo, selezioniamolo con la freccia nera e clicchiamo su Elabora – Trasformazione – Ruota in orizzontale.


Uniamo i due triangoli e clicchiamo su Elabora – Combina tracciati – Insieme.
Ridimensioniamo il triangolo appena ottenuto impostando la larghezza a 20px e l’altezza a 10px.

Adesso dobbiamo duplicare questo triangolo fino ad ottenere una linea che percorre tutta la larghezza dell’area di lavoro.

Trasciniamo il triangolo sul bordo sinistro del foglio, copiamolo e incolliamo il triangolo copiato accanto all’originale.
Selezioniamo i due triangoli con la freccia nera e uniamo i tracciati (Elabora – Combina tracciati – Insieme)

Copiamo il tracciato appena ottenuto, formato da due triangoli, incolliamolo e ripetiamo la stessa operazione in modo da ottenere un tracciato composto da quattro triangoli.
Continuiamo fino ad ottenere un tracciato di 1680px.


In realtà è più semplice a farsi che a dirsi.

Applichiamo al nostro tracciato un riempimento di un verde petrolio un po’ più chiaro di quello utilizzato per l’header (#78B3A4), e posizioniamolo sopra la guida orizzontale a 100px.
Dopo di che facciamone una copia, togliamole la visibilità e mettiamola in un posto sicuro per poterla utilizzare più avanti.

About

Posizioniamo una guida orizzontale a 400px dalla prima guida, e tra le due guide disegniamo un rettangolo di 1680px x 400px con riempimento uniforme di colore #78B3A4.
Selezioniamo con la freccia nera il rettangolo e la linea seghettata ed uniamoli in unico tracciato cliccando su Elabora – Combina tracciati – Insieme.
Applichiamo una texture damascata al 15%.


Riprendiamo per un attimo il bordo seghettato che avevamo messo da parte e facciamone una copia che posizioneremo sotto il livello del rettangolo.
Applichiamo a questa copia del tracciato un riempimento uniforme grigio scuro (#333333), il filtro Sfocatura – Sfocatura Gaussiana con raggio 3, il metodo di fusione Moltiplica e l’opacità al 20%.
Infine con i tasti freccia la spostiamo di qualche pixel verso destra, in modo da dare appena un po’ di profondità.


Ora dobbiamo creare un punto luce per valorizzare il testo che andremo ad inserire.
Disegniamo un cerchio bianco di 220px di larghezza e altezza, applichiamo il filtro Sfocatura – Sfocatura Gaussiana con raggio di 50px e impostiamo l’opacità al 40%.


Posizioniamo una guida verticale a 480px dalla seconda guida sulla destra, in modo da delimitare sulla parte destra del rettangolo un’area di 480px all’interno della quale andremo ad inserire una nostra brevissima presentazione.


Ho utilizzato il font Japan a 100px di colore beige (#EBE5CC) per “web designer” e “developer”, per “front-end” ho diminuito la dimensione a 90px, e per “I am a” ed “and” ho utilizzato il font I’m fashionista a 40px di colore verde chiaro.

Skills

Per lo sfondo della sezione Skills creiamo una texture di carta.

Posizioniamo una guida orizzontale a 450px dall’ultima guida, e disegniamo un rettangolo di 1680px x 450px.
Applichiamo un riempimento uniforme beige chiaro (#E5DDCB) e la texture Carta vetrata al 30%.

Blocchiamo questo livello, selezioniamo il pennello Aerografo con texture, impostiamo la punta del pennello a 100 e il colore del tratto #CDBB99, e scegliamo la texture Pergamena.

Tracciamo un po’ di pennellate disordinate cercando di ricoprire tutta l’area del rettangolo.
Selezioniamo dunque le pennellate con la freccia nera ed impostiamo come metodo di fusione Scolora al 50%.

Disegniamo un rettangolo grigio scuro di 1680px x 10px, posizioniamolo sotto il rettangolo verde, applichiamogli il filtro Sfocatura – Sfocatura gaussiana con raggio 4, il metodo di fusione Moltiplica e l’opacità al 20%, e con i tasti freccia spostiamolo giù di qualche pixel in modo da creare una leggera ombra.

Con il font I’m fashionista a 50px di colore verde petrolio (#6CA09E) scriviamo il titolo della sezione, in questo caso my skills.
Dopo di che, utilizzando un marrone dorato (#AE987B), inseriamo le nostre skills dividendole per aree di competenza in tre colonne.

Foto

Importiamo una foto e ridimensioniamola adeguatamente.


Disegniamo un rettangolo, posizioniamolo sotto al livello della foto e diamogli la forma di una polaroid.
Come categoria di riempimento selezioniamo Motivo – Altro e scegliamo dal nostro computer una texture di carta meglio se leggermente stropicciata, per creare un effetto realistico.
Assegniamo alla foto il metodo di fusione Moltiplica.


Possiamo scrivere una frase simpatica sulla polaroid, per dare un tocco simpatico e stravagante alla pagina.

Per finire creiamo una leggera ombra.
Con lo strumento Penna disegniamo un tracciato come quello che vedi qui sotto, non è necessario essere precisi.

Spostiamo il tracciato sotto il livello della polaroid, assegniamogli il filtro Sfocatura – Sfocatura gaussiana con raggio 4, il metodo di fusione Moltiplica e l’opacità al 30%.
Eventualmente riposizioniamo l’ombra con i tasti freccia.

Tenendo premuto il tasto Shift selezioniamo la foto, la polaroid, la scritta e l’ombra, premiamo il tasto Q e ruotiamo leggermente gli oggetti.

Portfolio

Posizioniamo una guida orizzontale a 450px dall’ultima guida, e disegniamo un rettangolo di 1680px x 450px con riempimento uniforme #78B3A4.

Ripeschiamo il bordo seghettato che avevamo messo da parte e trasciniamolo sotto il rettangolo.
Selezioniamolo con la freccia nera e clicchiamo su Elabora – Trasformazione – Rifletti in verticale.
Selezioniamo il bordo e il rettangolo ed uniamoli in un unico tracciato.
Applichiamo a quest’oggetto la stessa texture damascata al 15% utilizzata per lo sfondo della sezione About.

Copiamo l’ombra inferiore e l’ombra superiore del rettangolo della sezione About e posizioniamole sotto il rettangolo della sezione Portfolio.
Naturalmente l’ombra seghettata dovrà essere riflessa in verticale.


Disegniamo un rettangolo di 230px x 165px, applichiamogli un riempimento beige (#EBE5CD), e una traccia di 8px con il pennello Pastello colorato – Base.


Duplichiamo questo rettangolo in modo da avere una fila di tre rettangoli.
Questi rettangoli conterranno le immagini dei lavori da mostrare nel portfolio, che scorreranno in uno slider.
A destra e sinistra della fila lasciamo un margine di circa 50px in cui inseriremo i pulsanti dello slider.

Disegniamo un triangolo di 28px di larghezza e 40px di altezza.
Applichiamogli il filtro Rilievo – Rilievo sollevato con i parametri che vedi qui sotto:


Spuntando la casellina Mostra oggetto il triangolo mostrerà il riempimento dell’oggetto che si trova sullo sfondo.

Duplichiamo il pulsante, ruotiamolo e trasciniamolo sul lato destro dello slider.

Importiamo l’immagine di un lavoro che vogliamo mostrare e ridimensioniamola.
Dato che i contenitori sono piuttosto piccoli, ci conviene scegliere un dettaglio da mettere in evidenza.
Posizioniamo l’immagine sopra il rettangolo.


Selezioniamola con la freccia nera e tagliamola (Ctrl+X).
Clicchiamo con il tasto destro all’interno del rettangolo e selezioniamo Modifica – Incolla dentro.

Nel pannello dei livelli notiamo che accanto al livello del rettangolo è comparsa una catenella uguale a quella delle maschere di Photoshop.
Cliccandoci sopra rilasciamo la maschera e possiamo riposizionare l’immagine all’interno del rettangolo.


Con il font I’m fashionista a 50px di colore verde chiaro scriviamo il titolo della sezione portfolio, “My works”.

Contatti

Disegniamo un rettangolo che va dall’ultima guida orizzontale fino in fondo alla pagina.
Applichiamo un riempimento uniforme beige (#E5DDCB) e la texture Carta vetrata al 30%.
Copiamo il livello bitmap contenente le pennellate tracciate nella sezione Skills, trasciniamolo e adattiamolo alle dimensioni di questo rettangolo.

Disegniamo un rettangolo arrotondato di 194px x 44px, applichiamogli lo stesso riempimento e la stessa texture del rettangolo dello sfondo, impostiamo il metodo di fusione Moltiplica, l’opacità al 40% e il filtro Ombra e luce – Ombra interna con i valori che vedi qui sotto:


Duplichiamo questo rettangolo e disegnamone un’altro di 480px x 200px.


Ora dobbiamo disegnare un pulsante per il nostro modulo contatti.
Disegniamo un rettangolo arrotondato di 108px x 44px con riempimento color verde petrolio.
Duplichiamolo due volte e posizioniamo i due livelli duplicati sotto l’originale.
Al primo oggetto duplicato applichiamo un riempimento grigio scuro ed il filtro Sfocatura – Sfocatura gaussiana con raggio 1 ed opacità 50%. Con i tasti freccia lo spostiamo di un pixel in basso ed un pixel a destra.
Al secondo oggetto copiato applichiamo gli stessi parametri del primo ma con riempimento bianco, e lo spostiamo di un pixel in alto ed un pixel a sinistra.
Al rettangolo originale applichiamo la texture damascata.
Con il font Japan a 45px di colore beige scriviamo “Invia”.


Sul lato sinistro dell’area contatti possiamo inserire dei pulsanti social.
Ho trovato delle icone stile vintage che stanno molto bene con questo layout. Per arricchirle possiamo disegnare dei rettangoli in cui scrivere i vari indirizzi.
Facciamo click destro sul rettangolo “Il tuo nome” e selezioniamo Modifica – Copia, poi clicchiamo col tasto destro sui due rettangoli social e selezioniamo Modifica – Incolla attributi, in questo modo possiamo copiare facilmente gli stili da un elemento all’altro.
Eliminiamo l’ombra interna dai due rettangoli social cliccando sulla spunta accanto alla voce Ombra interna nel pannello delle proprietà.

Ecco il lavoro finito:

Puoi scaricare il sorgente del layout qui:

Download Come ti sei trovato a progettare un intero layout con Fireworks?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
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:

8 commenti

  1. DAMIANO
  2. Margalus

Trackback e pingback

  1. Yiw portfolio
    [...] spieghiamo nel dettaglio come disegnare un “one page portfolio” con Fireworks.   Qui trovi il tutorial più la risorsa …

Lascia un Commento

Current day month ye@r *