Realizzare un layout per portfolio con Photoshop – parte 2/2

Photoshop Advanced - Lezioni di photoshop - come realizzare un portfolio web

Torniamo a parlare di web e grafica. Con questo tutorial continueremo il lavoro iniziato nel precedente articolo su come realizzare un layout web grafico per un portfolio. Riprenderemo dal punto dove abbiamo lasciato la volta scorsa, quindi se ti sei perso la prima parte del tutorial, puoi rimediare andando a leggere ora l’articolo.

Porta ora la freccia così ottenuta sopra il semicerchio precedentemente creato. Attivando anche qui le opzioni di fusione, potrai applicare un bagliore esterno e una sfumatura interna circolare come in figura.

tutorial photoshop - step 17

A questo punto creiamo una circonferenza con lo strumento selezioni in modo da arrotondare gli angoli del nostro frame principale. Per farlo, dopo aver fatto le 4 selezioni premendo SHIFT+click sinistro del mouse, premi CTRL+SHIFT+I per invertire la selezione. A questo punto con lo strumento gomma cancellate con attenzione i quattro angoli.

tutorial photoshop - step 18

Applica la stessa procedura vista fino a qui anche per il lato destro del frame, l’aspetto finale di questa parte del nostro lavoro dovrebbe essere qualcosa di questo tipo.

tutorial photoshop - step 19

Abbiamo ora bisogno di identificare la pagina che stiamo visualizzando. Creiamo quindi un effetto bagliore sul tasto home. Cliccando con il tasto sinistro tenendo premuto CTRL sul livello del bottone (avendo selezionato lo strumento delle selezioni). A questo punto dal menù selezione in alto scegliamo l’opzione Modifica->Contrai e scegliamo di ridurre la selezione di 1px. Scegliendo un colore chiaro e un pennello sfumato, andiamo ad evidenziare il bagliore. Ovviamente su un nuovo livello superiore a quello del bottone.

tutorial photoshop - step 20

Ora dobbiamo creare le tre aree di contenuto che ci permetteranno di presentarci ai nostri visitatori. Di solito queste sul web sono aree dedicate alle sezioni “Chi siamo” “Cosa facciamo” “Dove trovarci”. Per realizzarle, creiamo tre forme vettoriali rettangolari con angolo smussato e ordiniamole con gli strumenti della barra orizzontale in alto. Facendo tasto destro creiamo la selezione che andremo a riempire con un gradiente su di un nuovo livello.

Selezionando lo strumento testo, possiamo creare delle aree di testo (cliccando e trascinando) dove possiamo posizionare del testo di presentazione.

tutorial photoshop - step 21

Cerchiamo di arricchire queste aree con delle immagini che richiamino il contenuto testuale. E’ necessario abbinare un elemento visuale al testo che i visitatori leggeranno. Ad ogni foto, applica un effetto di bagliore esterno scuro che permetta di avere un effetto di rilievo/ombra.

tutorial photoshop - step 22

Con la stessa tecnica utilizzata per il menù, crea dei tasti per permettere ai visitatori di continuare a leggere i nostri contenuti. Avendo selezionato un fondo blu, ho optato per un gradiente tra giallo ed arancio, colori complementari all’azzurro.

tutorial photoshop - step 23

Con i tasti CTRL+Click sinistro sul livello delle immagini per selezionarle, crea quindi un nuovo livello e trasforma la selezione (menù Selezione->Trasforma selezione) in un’area larga come l’immagine sottostante ma più bassa. Riempila con il colore nero e riduci l’opacità del livello fino a circa il 20%.

Con un font più creativo, realizza un titolo per la sezione in esame.

tutorial photoshop - step 24

L’unica cosa che ci manca ora, è lavorare sul footer. Crea quindi un testo e usa il | per dividere i link alle pagine. Anche in questo caso, il font utilizzato è il Tahoma con un colore grigio, ma abbastanza scuro da rimanere visibile.

tutorial photoshop - step 25

Su internet puoi poi trovare un sacco di raccolte di icone social per linkare i tuoi social network preferiti dove farti trovare. Ad esempio puoi fare una ricerca su www.iconfinder.com dove sicuramente troverai il set di icone che più ti aggrada.

tutorial photoshop - step 26

Un effetto simpatico che potrai applicare, o far applicare dal tuo sviluppatore, è quello di realizzare i link in grigio e farli colorare sull’hover del mouse.

tutorial photoshop - step 27

Il risultato finale dovrebbe quindi essere qualcosa di simile a questo:

A questo punto il tuo sito è terminato. Per capire meglio come è stato realizzato questo tutorial, puoi scaricare il file psd dal seguente link.

scarica il file psd per photoshop

fold-left fold-right
L'autore
Appassionato di web, grafica e nuove tecnologie, realizzo siti web, grafiche online ed offline e formazione in ambito grafica e web. Puoi seguirmi su Twitter o visitare il mio portfolio e contattarmi per una consulenza.