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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.