Questo tutorial è finalizzato alla realizzazione di un Web Portfolio con uno sfondo “WaterColored” usando dei set di pennelli per PhotoShop ad-hoc, una bella collezione di icone e delle tecniche basilari per la realizzazione di buoni layout.
Il contesto è chiaro: l’home-page del portfolio on-line di un web/graphic designer… per cui tenteremo di costruire un qualcosa di semplice, fresco ma allo stesso tempo espressivo e comunicativo.

Risultato Finale e PSD Document

Nell’immagine riportata in basso è possibile apprezzare il risultato finale (per vedere l’anteprima ingrandita basta cliccare sulla figura). Se ritieni che il risultato sia valido non perdere tempo. Continua a leggere!

Passo 1 – PSD document

Apri un nuovo documento PhotoShop di dimensioni 1280×900 pixel. I settaggi specifici per il tipo di documento sono evidenziati dall’immagine in basso.
Prima di cominciare è bene assicurarsi che il container complessivo sia centrato e che non superi i 1000px di larghezza. In questo caso si setta una main width di 995px.

Background

Passo 1 – Watercolored Background

Crea un nuovo livello (Ctrl+Shift+n) appena sopra quello generale di sfondo per poi selezionare l’intero documento con lo Strumento Selezione e riempi la stessa con una tinta unita bianco (#ffffff). In seguito inserisci un gradient overlay da #e8e9ec a #ffffff con l’opzione Sovrapposizione Sfumatura del menù Opzioni di fusione.

Ora c’è da preparare gli strumenti necessari per realizzare lo sfondo, per cui bisogna effettuare il download dei seguenti set di pennelli: High Resolution Watercolour Photoshop Brushes, High Resolution Watercolour Photoshop Brushes Set Two. Una volta caricati i pennelli in PhotoShop scegline uno abbastanza tondeggiante (se necessario ridimensionalo) e inizia a disegnare delle macchie in alto a sinistra per preparare il background del logo (colore di base del brush #c1dfe5).
Io ho ripetuto questa operazione più volte e su diversi livelli per ottenere un risultato migliore, per cui divertiti a rendere più efficace possibile questa “macchia” che farà da sostegno al logo testuale.
Per un effetto ancora più “grunge” puoi inserire degli schizzi di colore giallo (#e8f1a7) utilizzando 122Room Splatter Watercolor Brushes. Inoltre, per rendere il tutto più realistico, aggiungi un leggero Smusso ed Effetto Rilievo (Profondità 100%, Dimensione 0px e Attenuazione 6px) al livello splatter dal menù Opzioni di fusione.
In basso è possibile apprezzare il risultato raggiunto passo per passo.

Passo 2 – Halftone

Nella parte in alto a destra del layout si può inserire un background con “mezzitoni” utilizzando pennelli da questi package Halftones Brushes for PhotoShop.
Usando sempre lo strumento pennello (colore #bad7df) aggiungi un livello di halftone per donare vivacità allo sfondo. Questa volta però setta l’opacità del livello al 25%. Puoi mixare più livelli se lo ritieni opportuno, ma non esagerare: rischieresti di “appesantire” la composizione.

The Header

Step 3 – Logo

A questo punto usa lo Strumento Rettangolo Arrotondato (raggio 15px, colore #93bbc5) per creare una forma di circa 475×145 pixel che abbia gli angoli smussati. Aggiungi lo stile (Opzioni di Fusione) a questo rettangolo: Ombra Esterna (Multipica #3c6d7a, Opacità 56%, Distanza 2px, Estensione 0%, Dimensione 2px); Sovrapposizione sfumatura (with-to-transparent, Opacità 8% and Scala 53%); Traccia (1px, colore #acc4cb e Opacità settata al 62%) infine carica questo pattern pack e aggiungi un pattern (Sovrapposizione Pattern) quadrato di 1px con l’opacità a 8%.

Clicca col tasto destro sul rettangolo appena disegnato e scegli Trasformazione Libera per posizionare la forma come mostrato in figura.

Aggiungi un testo (60pt, colore #f2faff) usando Days Free Font.
Inserisci lo stesso stile usato in precedenza per il rettangolo (modifica solo Sovrapposizione Livello sostituendo il bianco con #9fc2cb). Posiziona il testo come riportato nell’immagine in basso.

Aggiungi un secondo livello di testo (55pt) con colore #38555c, setta la Modalità di fusione del livello a Colore Brucia (Opacità 82%) ed aggiungi allo stile Sovrapposizione livello (da #20515c a #ffffff, Opacità 31%, Scala 46%).

Passo 4 – Menù

Per creare il menù usiamo la stessa tecnica utilizzata per costruire il logo. Usa lo Strumento Rettangolo Arrotondato per disegnara una barra e applica a questa lo stesso stile livello utillizato per la base del logo.
Sopra la forma appena creata inserisci una stringa di testo con il font Lucida Sans a 25pt e colore #d8ebf7.

Featured

Passo 5 – Basic Box e Titolo

Questa è probabilmente la sezione più elaborata di tutto il tutorial.
Per prima cosa c’è da creare, sempre con lo strumento rettangolo, la forma base per inserire gli elementi featured. Si usa il colore #dbeaee per realizzarla (come visto in precedenza), una volta disegnata il segmento si imposta lo stile del livello allo stesso modo del Passo 3 e 4 con alcune differenze nell’Ombra Esterna e nella Traccia. Infatti per l’ombra si setta Moltiplica #3c6d7a, Opacità 50%, Distanza 3px, Estensione 0%, Dimensione 4px; mentre per la traccia avremo #516e75 come colore e una opacità del 62%.
Inoltre accertati che l’allineamento del box sia coerente con quello del logo.

Ora, ripetendo l’operazione precedente, si andrà a creare un quarto rettangolo (stavolta lo stile sarà identico a quello del Passo 3) dove si posiziona il titolo del box. Questo dovrà essere posizionato al di sotto di quello generale per il content del featured box. Il titolo è stato realizzato seguendo lo stesso iter usato nel realizzare il testo del del logo; le uniche differenze sono nella grandezza del font, impostata a 45pt, e nel colore, in questo caso si è scelto #89b6c1.
Sotto si può apprezzare il risultato finale di tali operazioni.

Passo 6 – Tabs

Utilizzando per l’ennesima volta la stessa tecnica andiamo a disegnare dei piccoli rettangoli smussati, stavolta con raggio di 10px, per creare delle linguette di switch (giocando con il Riempimento del livello è possibile alternare anche i colori di base). Da segnalare una differenza sostanziale rispetto agli altri layer creati fino ad ora: in questo caso nelle opzioni di fusione, oltre ad applicare il solito stile, si aggiunge anche Ombra interna (Angolo -90°, non usare luce globale, Moltiplica #3c6d7a, Opacità 25%, Distanza 24 px – che dipende dall’altezza della forma – Dimensione 5px). Questo per evidenziare la sovrapposizione tra i diversi elementi.

Passo 7 – Il Contenuto

Riempi il box. Inserisci il testo necessario per la descrizione del tuo ultimo lavoro come mostrato in figura (usa Lucida Sans come font con colore #516e75). Per vivacizzare il box ho scelto di aggiungere delle icone di questo fantastico set Tutorial9 Watercolor Icon Pack. In realtà per mantenere un certa coerenza, oltre a ridimensionare le icone, sono state anche desaturate da Immagine–>Regolazioni–>Tonalità/Saturazione settando la saturazione a -30.

Sidebar

Passo 8 – Bookmark

E’ il momento di costruire la nostra barra laterale. Per farlo andremo a disegnare un vero e proprio segnalibro.
Per creare la forma base si usa lo Strumento Penna, ma è molto utile posizionare in modo opportuno alcune guide.
L’immagine seguente spiega in modo intuitivo come disegnare il bookmark.

Una volta finalizzato e chiuso il segmento (quando si è raggiunto un risultato discreto) si va a creare la selezione cliccando con il tasto destro del mouse e scegliendo Crea Selezione (strumento penna attivo).
A questo punto si genera un nuovo layer, si sceglie lo Strumento Selezione, right-click al centro della forma appena disegnata e attraverso l’opzione Riempi si inserisce una tinta unica di colore #516e75 al livello.
Anche al segnalibro aggiungeremo il solito stile (quello usato al Passo 3 per intenderci). C’è da fare solo un po’ di attenzione nell’impostare i settaggi dell’Ombra Esterna nel seguente modo: Angolo 60°, non usare luce globale, Multiplica #3c6d7a, Opacità 71%, Distanza 4px, Estensione 0%, Dimensione 5px.

Passo 9 – Sidebar Content

Ora si passa a riempire la barra laterale con i diversi contenuti (in questo caso si usa Lucida Sans con colore #e7f1fa per il titolo e #c4dfe6 per il paragrafo).

Per aggiungere le linee di divisione si usa lo Strmento Linea impostato a 1px, si setta il Riempimento del livello a 0%e si aggiunge il seguente stile: Sovrapposizione Sfumatura (Lineare da #e6f1f8 a trasparente, Opacità 100%, Angolo 180% Scala 108%). La stessa operazione può essere eseguita per le linee di divisione dei singoli post, con l’unica differenza che per questi si usa una sfumatura riflessa e non lineare.

Footer e Down Container

Passo 10 – Finalizziamo il Layout

Infine aggiungiamo due box testuali sotto la zona delle featured, facendo attenzione a mantenere distanze coerenti e il footer con un rettangolo (stavolta normale senza bordi arrotondati ma inserendo il solito stile al livello) e i crediti.
Nota anche che alle immagini presenti (nel box featured, nella sidebar e nei due box di testo) è stata inserita una traccia a fare da contorno.

Conclusione e Source File

Abbiamo concluso. Osserva il tuo lavoro e goditi una bella birra fredda. E’ un gran bel layout!
Questo è un tutorial di livello intermedio e abbiamo realizzato solo una prima parte del lavoro, il prossimo passo sarà quello di convertire il PSD in una vera e propria pagina web in HTML e CSS (e perchè no, anche un po’ di JavaScript). Per cui resta colegato!

Ricordo inoltre che questa risorsa è rilasciata dal PV.M Garage con Licenza Creative Common anche per uso pubblico e commerciale.

Seconda parte della guida: WaterColored Portfolio Coded, guida per realizzare un semplice layout (X)HTML/CSS

WaterColored Portfolio Tutorial Completo

• Prima Parte: Come creare un Web Portfolio Layout con sfondo Watercolored in PhotoShop
• Seconda Parte: WaterColored Portfolio Coded, guida per realizzare un semplice layout (X)HTML/CSS