Tutorial Creare Un Sito Hot

Come disegnare un sito web in photoshop con logica

By Andrea Marchetti
@marchetti_design

Quando andiamo a disegnare un sito in photoshop ci sono delle attività da svolgere per partire con il piede giusto e ottenere un buon risultato. Prima di tutto dobbiamo  fare un briefing con il cliente (possibilmente di persona) nel quale cerchiamo di capire le esigenze e  gli obiettivi del sito. Successivamente bisogna stabilire quali sono i contenuti principali e quali sono gli aspetti sui quali il sito deve “puntare” per promuovere l’attività.

Una volta fatto questo dobbiamo organizzare i contenuti nello spazio a nostra disposizione. La struttura che realizziamo oggi è una struttura semplice e abbastanza ricorrente nel web design moderno.  E’ quella classica con menù orizzontale, con logo in alto a sinistra e con Slider e contenuti in evidenza sotto.

Layout Finale

Scarichiamo una griglia PSD di riferimento

– 960 grid sistem

Per realizzare la struttura in maniera precisa e veloce ci aiutiamo scaricando una griglia, cioè un file photoshop vuoto che divide lo spazio a disposizione in dodici colonne. Utilizzeremo le colonne come riferimento per disegnare i vari “pezzi” del sito.

Logo

Per convenzione il logo di un sito solitamente va collocato in alto allineato a sinistra o centrato. L’importante è che sia ben visibile nella pagina  e della dimensione giusta.

Step 1

Ctrl + H per visualizzare le guide, poi premere U e con lo strumento rettangolo disegnare un rettangolo in alto a sinistra, ancorato alla seconda guida.

Step 2

Facendo doppio clic sul livello appena creato impostiamo il colore a #322a2b

Step 3

Ora selezionamo lo strumento testo con T, scegliamo un font che ci piace (io ho usato una combinazione di due font Intro e lobster) e scriviamo il nome del nostro sito

Step 4

Facendo doppio click sul livello sweet boston si apre il pannello degli stili livello. Impostiamo il colore a #cbba9f  e l’ombra di 2px  con Color Overlay e Drop Shadow come in figura

Step 5

Il menu

Il menu deve essere posizionato sempre nella stessa area nelle varie pagine. I pulsanti devono avere un’area cliccabile abbastanza grande in modo da rendere facile  la navigazione e i colori devono ben contrastare le voci. Non c’è niente di più bello in un sito di un bel menu chiaro e leggibile. Nel nostro caso occuperà tutta la larghezza disponibile e avrà una leggera trasparenza che lo renderà più accattivante.

Step 6

Selezioniamo lo strumento rettangolo premendo U, disegniamo un rettangolo che sia più largo della nostra area di lavoro e posizioniamolo nella parte superiore della pagina. Facendo doppio click sul livello apriamo il pannello stile livello e qui impostiamo il colore a #f2eeec con Color Overlay

Step 7

impostiamo l’ombra facendo doppio click sul livello e dal pannello stili selezioniamo Drop Shadow impostando i seguenti valori

Step 8

Selezionando il livello appena creato nel pannello livelli in alto, impostiamo l’opacità all’ 85% e successivamente con lo strumento testo T andiamo a scrivere le voci del menu. Io ho utilizzato il font Bebas.

Nella parte destra dell’ header del nostro sito inseriamo le icone dei social. Io ho utlizzato queste in stile minimal in free download al seguente indirizzo http://www.designdeck.co.uk/a/1252

Step 9

Una volta scaricate apriamo il file Pace_Social_Icon_Set.psd e trasciniamo l’icona di facebook e twitter nell’area di lavoro del nostro sito.

Step 10

cliccando due volte sul livello dell’ icona di facebook ci appare il pannello stili. Qui deselezioniamo gli effetti Drop Shadow, Gradient e Inner Shadow. Ora impostiamo il colore a #322a2b tramite l’effetto Color Overlay. Ripetiamo l’operazione per l’icona di twitter

Step 11

Aggiungiamo anche l’icona di ricerca con lo stesso metodo usato per le icone dei social e otteniamo il nostro menu

Lo slider

Lo slider è una parte fondamentale del sito. E’ infatti  in grado di dare quel qualcosa in più che rende un sito accattivante. Nel nostro design lo slider occuperà l’intera larghezza della pagina e sarà posizionato in trasparenza sotto il menu. Avrà anche una frase che apparirà con ogni singola slide. Dal punto di vista dei contenuti con lo slider possiamo realizzare un’introduzione all’azienda o al soggetto per il quale stiamo realizzando il sito utilizzando immagini e testi in sovrapposizione.

Step 12

Dobbiamo scegliere una bella immagine e aprirla con photoshop. Con lo strumento selezione M la selezioniamo e tenendo premuto Ctrl la trasciniamo nell’ area di lavoro del sito

Ora selezioniamo il livello dell’immagine importante e clicchiamo Ctrl + T per ridimensionarla. Tenendo premuto il tasto Maiuscolo, con il puntatore prendiamo un angolo dell’immagine e ridimensioniamola esattamente della larghezza della nostra area di lavoro (il livello dell’immagine deve essere sotto quello del menu)

Ora abbiamo la nostra immagine sotto il menu, vogliamo però tagliarla in lunghezza. Utilizziamo quindi una maschera, selezioniamo il livello dell’ immagine e con lo strumento selezione selezioniamo l’area che vogliamo rimanga visibile e clicchiamo il pulsante a forma di macchina fotografica in basso nel pannello dei livelli

Step 14

Step 15

L’immagine verrà “mascherata” ottenendo questo risultato

Step 16

Sopra lo slider andiamo a disegnare con lo strumento U  un rettangolo di colore #322a2b con opacità al 85% (sia per impostare il colore che per impostare l’opacità il metodo è lo stesso utilizzato nel menu)

Step 17

Sopra al rettangolo, andiamo con lo strumento T a scrivere la Frase/Parola della slide

Step 18

Ripetiamo la procedura per la didascalia dello slide, variando il colore del testo con #afa08a

Ora applichiamo una sfumatura da #332b2c a trasparente sopra l’immagine del nostro slider per preparare lo sfondo ai box in evidenza che metteremo sopra.

Step 19

Selezioniamo l’area della sfumatura con lo strumento M e selezioniamo il colore cliccando il box colore in basso a sinistra nel pannello degli strumenti

Step 20

ora selezioniamo lo strumento sfumatura G e nel pannello sfumatura in alto a destra selezioniamo la sfumatura da colore  a trasparente

Step 21

Ora creiamo un nuovo livello Ctrl + Shift + N e con lo strumento sfumatura G tracciamo all’interno della selezione una linea dal basso verso l’alto. Così appare la nostra sfumatura alla quale impostiamo un livello di opacità del 70%

Contenuti in evidenza

Sotto lo slider andiamo a posizionare  tre box di uguale dimensione, ognuno con titolo, preview di testo e immagine. Qui possiamo giocare con questi tre elementi. Si può mettere per esempio prima l’immagine, poi il titolo e poi la preview. Oppure possiamo mettere l’immagine sotto e far apparire il titolo allo stato hover. Ci sono molte vie e tutte possono avere un loro perchè ma l’importante è cercare di mantenere il design chiaro e leggibile senza farsi prendere troppo dal lato grafico a discapito dell’usabilità.

Dal punto di vista dei contenuti mettiamo qui le sezioni sulle quali puntiamo come per esempio potrebbe essere la sala di un ristorante, piuttosto che il prodotto di punta di un’ azienda.

Step 22

Scegliamo un’ immagine che ci piace, inseriamola nella nostra area di lavoro come abbiamo fatto per l’immagine dello slider e ridimensioniamola facendo Ctrl + T e tenendo premuto shift prendiamo un angolo e trasciniamo l’immagine finchè non ha un ingombro di quattro colonne della nostra griglia

Step 23

Ora selezioniamo l’area che vogliamo rimanga visibile e clicchiamo il pulsante a forma di macchina fotografica in basso nel pannello livelli applicando una maschera

Step 24

Ora sotto l’immagine con lo strumento U disegnamo un rettangolo di colore #322a2b, poi con lo strumento T scriviamo sopra questo rettangolo il nome del nostro contenuto in evidenza e aggiungiamo anche un’ icona funzionale presa da questa raccolta http://brankic1979.com/icons/

Infine aggiungiamo una preview del testo della sezione e il pulsante che porta alla sezione. Per inserire il testo utilizziamo logicamente T, mentre per il pulsante facciamo sempre un rettangolo con lo strumto U e sopra scriviamo “leggi…”

Step 25

Ripetiamo le stesse operazioni per gli altri due box ottenendo il seguente risultato

Non male. Come aggiustamento finale realizziamo un’ ombra per dare un pò di profondità ai nostri contenuti

Step 26

Selezioniamo lo strumento U (ovale) in alto sotto il menu di photoshop e impostiamo Feather a 20px e disegniamo un ovale schiacciato come in figura

Step 27

Creiamo un nuovo livello Ctrl + Shift + N e con lo strumento G (Riempimento)  coloriamo la selezione. Successivamente impostiamo l’opacità del livello a 50% ottenendo la sfumatura

Footer

Il footer è  una parte spesso sottovalutata del sito. Nel web design moderno viene spesso utilizzato per contenere molte informazioni addizionali, come orari, informazioni, mappe, contatti, copyright e altro ancora. Nel nostro design solo alcune info, ma può essere sviluppato ulteriormente.

Step 28

Con lo strumento forma U disegniamo un rettangolo come quello del menu e posizioniamolo alla fine della pagina, impostiamo il colore a #322a2b, copiamo i livelli di testo che formano il logo selezionandoli e facendo tasto destro nel pannello livelli, poi trasciniamoli nel footer e facendo Ctrl + T  ridimensioniamoli rimpicciolendoli leggermente e alla fine aggiungiamo un livello di testo con le info ottenendo così il nostro footer

Ecco il risultato finale

Abbiamo visto che per disegnare un sito in photoshop oltre che alla grafica pura ci sono delle logiche che guidano il processo di design. Si possono poi utilizzare icone, sfondi  e foto di qualità per aumentare l’impatto e l’usabilità. L’ importante è essere coerenti.

Ora il nostro sito è  un’istantanea di come potrebbe essere. Prossimamente vedremo come dar vita al sito realizzando il codice di quello che abbiamo disegnato.

Stay Tuned!

Creare Un Sito, Hot

Potrebbero interessarti:

Come costruire un sito Web: da Photoshop al codice Html5 e Css3

Come costruire un Sito Web Responsive

Nivo Slider Responsive con testi HTML animati

Creare un Parallax Design accattivante e Responsive con Bootstrap