Un layout semplice e professionale? Disegniamolo insieme in pochi semplici step

Transcript

1 Un layout semplice e professionale? Disegniamolo insieme in pochi semplici step In questo articolo abbiamo visto alcuni siti veramente accattivanti accumunati tra di loro da uno stile semplice, pulito e minimalista. I tratti distintivi? Grafica ridotta al minimo, buona tipografia, colori quasi assenti e una spiccata predilezione per bianco, grigio, nero. Dato che trovo questo stile molto accattivante, oggi disegneremo un layout per un portfolio in Photoshop, concentrandoci su dettagli quali i margini, gli allineamenti e la tipografia e riducendo il più possibile i colori e gli ornamenti grafici che non riteniamo essenziali per l efficacia estetica del sito. In fondo all'articolo puoi trovare il file sorgente da scaricare: sei libero di personalizzarlo e di utilizzarlo liberamente nei tuoi progetti. Se invece sei alle prime armi ti consiglio di seguire passo dopo passo questo semplicissimo tutorial e disegnare questo layout insieme a me. Le basi Cominciamo con aprire un nuovo documento di 1680 x 1050 con background bianco. Posizioniamo le prime guide esterne a 360px dai bordi, così che la sezione centrale entro cui verrà sviluppato il sito sia larga 960px. Apriamo il framework 960 grid system, che puoi scaricare su questo sito; nel nostro caso utilizziamo il template a 12 colonne. Per sapere come utilizzare questo framework ti consiglio di 1 / 6

2 leggere il nostro articolo sull argomento. Inseriamo il template nel nostro file e posizioniamolo nella sezione centrale della pagina, lasciando esattamente 10px di margine da entrambi i lati. Blocchiamo il gruppo (cliccando sull icona a forma di lucchetto) così che le colonne non vengano spostate per errore. Lasciamo una colonna vuota a sinistra (per coerenza grafica ne lasceremo una vuota anche a destra) e inseriamo il logo. Grazie alla griglia possiamo posizionare ogni elemento nel nostro layout con la massima precisione e rispettando i vari margini e gli allineamenti. 2 / 6

3 Accanto al logo inseriamo la toolbar, partendo dal presupposto che il nostro sito sarà composto da cinque pagine: home page, about, portfolio, blog, contatti. Dato che in questo tema ci limiteremo ad utilizzare un solo font, anche nel menù di navigazione abbiamo utilizzato il georgia, già presente nello slogan sotto il logo. Questo font verrà usato per tutte le sezioni della pagina, per rendere più omogeneo possibile il layout. Disegniamo un piccolo effetto per l hover e l active, in modo da arricchire graficamente la toolbar. Con lo strumento rettangolo incorniciamo il link e aggiungiamo con lo strumento forma personale un piccolo triangolo, così da creare un grazioso baloon. Scegliamo il colore nero per l active e un grigio (#e4e4e4) per l hover. 3 / 6

4 Aggiungiamo una linea grigia nella parte superiore e, con lo stesso colore, disegniamo una sezione centrale alta 360px. In questa sezione inseriremo i nostri ultimi lavori, che verranno visualizzati con un effetto slider. Sempre facendo attenzione a utilizzare in modo corretto la griglia, inseriamo quindi l immagine di un notebook, dentro cui metteremo un piccolo screenshot di un nostro lavoro. Lasciamo un po di spazio laterale per inserire le freccette che ci permetteranno di sfogliare i nostri lavori. 4 / 6

5 Accanto al notebook inseriamo una descrizione del lavoro, aggiungendo due pulsanti che permettono di vedere il dettaglio del progetto o, in caso di realizzazione di un sito web, di visitarlo. 5 / 6

6 Powered by TCPDF ( Lateralmente aggiungiamo un pulsante (un rettangolo contenente due 6 / 6