Dopo aver imparato diverse cose leggendo i tutorials su PhotoShop CS3 di FlepStudio, è giunta l' ora di vedere come creare un layout per un sito web.
In questo tutorial attraverseremo il processo di design necessario alla costruzione di una semplice homepage.
La prima cosa che dobbiamo tenere a mente è che non tutti gli utenti di internet utilizzano la stessa risoluzione sui loro monitor.
Dobbiamo quindi impostare il nostro layout in modo tale che sia ben visualizzato su tutte o quasi tutte le risoluzioni.
Sceglieremo un layout che abbia 850px di larghezza affinchè sia visibile su tutte le risoluzioni superiori o pari a 1024x768px.
E’ tecnicamente consigliabile farlo ancora più piccolo affinchè possa esser visualizzato su monitor impostati a 800x600, ma di monitor di quel tipo se ne vedono ormai davvero pochi.
Creaiamo un nuovo documento che sia abbastanza grande da contenere il nostro layout.
In genere mi piace lavorare su un’area di 2000x2000px, in modo tale da avere abbastanza spazio in altezza per sviluppare i contenuti a piacimento.
Quella dimensione consente inoltre di avere molto spazio vuoto ai lati del layout da poter utilizzare per fare prove di diverso tipo.
Attiviamo il righello sul nostro documento premendo CTRL+R sulla nostra tastiera, e impostiamo la grandezza a “Pixel” cliccandoci sopra col tasto destro del mouse.
Calcoliamo i nostri 850px e trasciniamo le guide corrispondenti sul nostro documento.
Una delle cose più importante del design è l’header.
Se è vero che deve rispecchiare i contenuti della pagina, è altresì vero che esso non deve mai attrarre troppo l’attenzione.
E’ consigliabile mantenere gli header relativamente corti in altezza per attirare l’attenzione sul contenuto della pagina.
Faremo un header di circa 250 pixel di altezza:
Inseriremo adesso un menu orizzontale sotto il nostro header, lo renderemo alto circa 100 pixel:
Creiamo anche un menu laterale per il layout.
Tiriamo le guide in modo tale da renderlo largo 200px.
L’altezza del contenuto principale è irrilevante al momento poichè varierà in base ai contenuti della pagina.
Usiamo lo strumento rettangolo con angoli arrotondati per creare dei box che riempiranno gli spazi che abbiamo definito con le guide, più un box grande per il nostro contenuto.
Ho usato un raggio di 10 pixel per i box costruiti in questo esempio.
Disattiviamo la visibilità delle guide andando su: Vista -> Mostra -> Guide.
Adesso separeremo tutti questi box (ad esclusione dell’header) uno dall’altro selezionando i layer che li contengono uno ad uno e spostandoli leggermente verso il basso.
Dovremo necessariamente ridimensionare il layer contenente il box del menu laterale.
Per farlo selezioniamo il layer e premiamo CTRL+T. Questo farà apparire il box di trasformazione libera.
Per ridimensionare trasciniamo uno degli angoli del box verso il centro dell’immagine tenendo premuto SHIFT+CTRL sulla tastiera.
Adesso abbiamo una struttura base sulla quale lavorare.
Iniziamo il design vero e proprio!
Inizieremo dal menu orizzontale.
Diamo uno stile al box che rappresenta il menu aggiungendo una sfumatura dal menu opzioni fusione del livello:
Creiamo un duplicato di questo livello (CTRL+J sulla tastier) e rasterizziamolo.
Con lo strumento selezione rettangolare, tagliamo il box a metà.
Andiamo nelle opzioni fusione e invertiamo la direzione del gradiente.
Giochiamo un po’ con l’opacità del livello per ottenere all’incirca questo effetto:
Uniamo questo livello a quello precedente (selezioniamoli entrambi nella palette e premiamo CTRL+E) e aggiungiamo I seguenti stili livello nelle opzioni fusione:
Aggiungeremo adesso uno stile allo sfondo.
Scegliamo una bella sfumatura o un colore solido.
Io userò un grigio molto scuro per creare un forte contrasto con il rosa lucido del menu.
Aggiungiamo ora uno stile al livello del box dei contenuti principali.
Diamo un colore bianco al box e aggiungiamo un leggero bagliore interno di color nero nelle opzioni fusione:
Ravvicinato:
Aggiungiamo ora uno stile al menu di sinistra.
La prima cosa che faremo è masterizzare il livello contenente il box del menu e tagliarne un porzione in modo tale da poterne aggiustare l’altezza a piacimento.
Per farlo usiamo lo strumento di selezione rettangolare per selezionare le porzioni del livello che vogliamo tagliare e spostare.
Aggiungiamo una sovrapposizione colore nelle opzioni fusione, un bel giallo post-it:
Aggiungiamo qualche contenuto pe capire un po’ in che direzione sta andando il nostro design.
Iniziamo aggiungendo gli elementi del menu laterale e gli elementi del menu orizzontale.
Ricordatevi sempre di usare font web-safe e di disattivare l’anti-alias di Photoshop qualora abbiate intenzione di utilizzare link testuali standard al posto di immagini per i vostri menu.
Questo vi servirà a capire come effettivamente apparirà il design una volta realizzatone il codice.
Duplichiamo il menu laterale e spostiamo la copia sotto.
Sarà il nostro newsbox.
Aggiungiamo i conetnuti principali della pagina
Aggiungiamo ora un po’ di grafica per separare gli elementi del menu orizzontale e del menu laterale.
Utilizzeremo una linea tratteggiata per il menu laterale (basta che scriviate: “- - - - - “) e dei piccoli cerchi bianchi con una trasparenza del 50% per il menu orizzontale.
Giocate un po’ con i colori e le opacità per ottenere effetti diversi.
Adesso creiamo il nostro header.
Posizioniamo il logo sul lato sinistro e iniziamo a disegnare qualche forma con lo strumento penna dal lato destro.
Aggiungiamo gradienti e stili simili o uguali a quelli utilizzati nel resto della nostra homepage.
In questo esempio ho creato dei quadrati molto piccoli e li ho riempiti con una sfumatura che usa gli stessi colori del menu orizzontale.
Questi quadrati vengono poi ripetuti per formare una barra che si espanderà per tutta la dimensione dello schermo.
Ho anche creato una forma “ondosa” con lo strumento penna.
Ho duplicato questa forma e l’ho specchiata verticalmente per ottenere un effetto interessante.
Sia le forme che i quadrati usano lo stesso gradiente. Una delle due forme ha un’opacità del 50% circa.
E voilà!
Il nostro design è completato!
Giocate pure un po’ con il PSD incluso nel download e usate pure questo template per i vostri design!
01-07-08, 16:22
Linear Mode
