In questo tutorial vedremo come realizzare uno splendido web layout con stile grunge usando Photoshop. Il tutorial è indicato per utenti con un minimo di esperienza con il programma Adobe. Questo tutorial è solo la prima parte di una serie di due, che vi mostrerà come realizzare il layout con Photoshop, e nella seconda parte come convertire il mockup in una pagina web usando HTML e CSS secondo gli standard odierni.

Risultato finale

Di seguito trovate l’immagine del layout definitivo che andremo a creare con questo tutorial.

Definiziamo il documento Photoshop

1. Creiamo un nuovo documento in Photoshop con le seguenti dimensioni: 1200px x 1160 px e settiamo i parametri dello stesso seguendo questa immagine:

Creiamo il background del Layout

2. Nel primo layer, creiamo il nostro background usando lo strumento Gradiente (G). Assicuriamoci che sia selezionato Gradiente Lineare come tipo gradiente. Settiamo il colore in primo piano a #9D6000 e il colore di sfondo a #FFFFFF.

Aggiungiamo una texture al background

3. Ora aggiungeremo alcune texture al nostro background sfumato. Scarichiamo da qui l’immagine da usare come texture. L’immagine è gratuita per uso personale e commerciale, ma non può essere rivenduta in nessun modo. Apriamo il file chiamato 3484741593_7575a6ebc7_b.jpg in Photoshop, File -> Apri (CTRL + O). Usiamo la funzione Trasforma (CTRL + T), e tiriamo la texture in modo da coprire tutto lo sfondo.

4. Usando un normale pattern gomma (E) con un diametro di 300px e l’opacità settata al 21%, cancelliamo il lato sinistro e tutta la parte bassa della texture. Nell’immagine successiva potrete vedere bene quali aree cancellare.

5. Scarichiamo da qui e apriamo il file 3484744611_f995d6c67f_b.jpg in Photoshop e trasciniamolo sul nostro piano di lavoro. Usiamo lo strumento Trasforma (T), ruotiamolo di 90 gradi in senso orario. Cambiamo la modalità di blending di questa texture in Luminosità e settiamo l’opacità del layer al 39%. Ripetiamo il passaggio numero 4 anche a questa texture, cancellando le stesse sezioni con un cancelletto soft.

6. Scaricate qui un interessante e utilissimo pacchetto di brush per Photoshop. Questo set è gratuito per uso personale e commerciale, ma non può essere rivenduto. Ora selezioniamo lo strumento Pennello (B) e selezioniamo questa brush cliccando sulla freccia, come nell’immagine seguente:

Non appena sarà aperto il pannello, cliccate sulla freccia (come da immagine seguente) e selezionate Carica Pennelli:

7. Ora crate un nuovo livello al di sopra delle texture. Settiamo il colore di primo piano a #000000, usiamo la sesta brush dal set che abbiamo appena installato (come da foto):

Una volta selezionato, clicchiamo sulla nostra immagine per “stampare” la brush, piazzandola non al centro, ma leggermente decentrata a sinistra, come da immagine seguente:

Cambiamo la modalità di questo livello a Sovrapponi e settiamo l’opacità al 52%, così da raggiungere questo risultato:

8. Ripetiamo tutto il passaggio numero 7, ma selezionando un’altra brush dal nostro nuovo set, quella con codice 2500:

Settiamo la modalità di questo livello a Sovrapponi e l’opacità al 41%. Dovremmo ottenere alla fine un risultato come il seguente:

9. Creiamo un altro livello, selezioniamo nuovamente la brush del passaggio 7 (la n. 2499), ma stavolta selezioniamo come dimensione 432 px e applichiamola in alto a sinistra del nostro canvas:

10. Su questo stello livello, utilizzando lo strumento Sfumino con una brush tonda morbida, clicchiamo e sfumiamo su quest’ultimo livello, trascinando verso il basso, fino ad ottenere un risultato simile al seguente:

11. Cambiamo adesso la modalità di questo livello su Sovrapponi, e l’opacità al 35%:

Settiamo le guide di Photoshop

12. E’ giunto il momento di inserire il contenuto. Per poter essere sicuro di inserire il materiale perfettamente al centro, inseriamo due guide equidistanti partendo dal lato sinistro e destro, per una larghezza di 1000 px, come da immagine:

Creiamo il logo

13. Utilizziamo lo strumento Testo Orizzontale (T), con un colore #3A0707, e aggiungiamo il titolo del sito web al nostro canvas. Come font possiamo utilizzare Stampete (scaricabile qui) o altri che potrete trovare qui. Sono tutti gratuiti per uso privato.

Creiamo la barra di navigazione

14. Sulla stessa riga del logo, ma sul lato destro, creiamo la barra di navigazione con i link principali del nostro sito web, utilizzando lo stesso font del logo, ma di dimensione ridotta:

15. Aggiungiamo un divisore tra le voci della barra di navigazione, utilizzando sempre lo strumento Testo Orizzontale (T), scrivendo I tra le voci utilizzando lo stesso font e lo stesso colore. Questo carattere farà da vero e proprio separatore. E’ consigliabile utilizzare una dimensione della I leggermente superiore, per rendere maggiormente evidente la separazione tra le varie voci.

Creiamo la sezione I MIEI LAVORI

16. Al di sotto della nostra “testata” (composta da logo e barra di navigazione), inseriamo la sezione I MIEI LAVORI, che sarà caratterizzata da un’immagine di un nostro lavoro rappresentativo (che servirà poi da miniatura e come link alla scheda dettaglio del lavoro), e la descrizione sul lato sinistro, utilizzando come titolo lo stesso font (nel nostro caso Stampete), e come testo descrittivo un più classico Arial.

Per l’immagine che abbiamo selezionato come miniatura del nostro lavoro, creiamo una traccia, utilizzando l’opzione di fusione Traccia, con colore #BA5009, e grandezza 12 pixel, come da immagine seguente:

Creiamo la sezione ALTRI LAVORI

17. Ora aggiungeremo una sezione “ALTRI LAVORI” appena sotto la miniatura del nostro lavoro principale. Come colore del titolo, utilizzeremo lo stesso della cornice al punto 16, #BA5009.

Per le immagini scelte, utilizziamo la stessa funzione del punto 16, ma con dimensione 16px e con colore #E7C788.

Creiamo la sezione “Informazioni sul sito”

18. Sul lato sinistro della sezione “I NOSTRI LAVORI”, creiamo una sezione, con titolo “Informazioni sul sito”. Come titolo utilizziamo colore e font della sezione a destra, mentre per il testo descrittivo il solito Arial.

Creiamo la seconda sezione contenuto

19. Sotto questa prima sezione contenuto, costituita da “Informazioni sul sito” e “Altri lavori”, creiamo una seconda sezione, dove inseriremo i riferimenti per i contatti (Get in touch), Flickr (con le foto di altri lavori o gallerie preferite) e Twitter. Utilizziamo come font e colori gli stesso del passaggio 18.

Creiamo il piè pagina

20. Alla fine del nostro canvass, sotto le tre sezioni che abbiamo creato, realizziamo il nostro piè pagina (footer). Creiamo un nuovo livello e utilizzando lo strumento Rettangolo (U) realizziamo un rettangolo in basso, e con il secchiello riempiamo il tutto con il colore #BA5009. Questa sezione conterrà le informazioni base sul copyright.

21. Usiamo lo strumento Gomma (E) e, selezionando uno qualunque dei brush installato precedentemente, creiamo un nuovo livello e riduciamo l’opacità del livello al 21% (come da immagine):

Ora cancelliamo alcune parti del rettangolo del nostro piè pagina, e appena finito inseriamo i dati sul copyright utilizzando il colore bianco e lo strumento Testo Orizzontale, scrivendo esattamente al centro del rettangolo.

Assicuriamo che al momento dell’aggiunta del testo sul copyright, la funzione di anti-aliasing testuale sia attiva, in modo da rendere i caratteri chiari e perfettamente leggibili.

Creiamo le linee divisorie orizzontali

22. Ora, per il tocco finale, creiamo le linee che separano le nostre sezioni. Creiamo un nuovo livello, utilizziamo lo strumento Matita (B), con un diametro di 2px e tracciamo una linea orizzontale tra la testata e prima sezione contenuti. E’ consigliabile tenere premuto il tasto Shift per tracciare una riga dritta e precisa.

23. Selezioniamo nuovamente lo strumento Gomma (E), selezioniamo una delle brush del nostro set, settiamo il diametro a 97 px e l’opacità al 40%. Cancelliamo un pò a caso sulla linea appena tracciata, per ammorbidirla e renderla più “grunge”.

24. Duplichiamo questo livello, cliccando con il tasto destro sul livello e selezionando “Duplica livello…” e utilizziamo le copie che ci servono per dividere le restanti sezioni, come nell’immagine seguente:

CONGRATULAZIONI! Avete completato il tutorial in maniera esemplare e ora potrete gustarvi il canvas web con stile grunge del vostro nuovo sito web. Al prossimo tutorial completo su Photoshop e Web Design.