#Comunicazione

  • Campagne pubblicitarie offline: perché continuare a farle è ancora molto utile
  • Allestimento inaugurazione negozio: 4 consigli per farlo al meglio
  • Gadget natalizi, quali scegliere per promuovere la propria attività: ecco alcune idee
  • Accessori e gadget personalizzati: dai classici intramontabili a quelli più moderni, garanzia di successo per la tua attività

#Tutorial

  • Stampa pdf online in pochi click: facile, veloce ed economico
  • Foto di famiglia: quando il piccolo formato non basta
  • Tutorial: come utilizzare i livelli di Photoshop
  • Tutorial: come fare l’Effetto Glitch su Gimp

#Fuoridalcoro

  • Simona Mirto: una food blogger fantasiosa nel solco della tradizione
  • Sheila & Angelica: la passione per il mondo fashion di madre in figlia
  • Elisa Perillo: le ricette sane e creative di una mamma ai fornelli
  • Gina Beltrami: la moda è una passione che non conosce età

Stampaprint Blog
Stampa online
BIGLIETTI DA VISITA
VOLANTINI
PIEGHEVOLI
MANIFESTI
creativityblog
Home  /  Blog  /  Tutorial  /  Website Responsive: Photoshop e Grid System
30 settembre 2016

Website Responsive: Photoshop e Grid System

Scritto da Emanuele Salvato 30 Settembre 2016
Tutorial Lascia un commento Ultimo aggiornamento: 21 Febbraio 2023
grid_systems

Siete dei web designer? Come ben sapete velocità, indicizzazione e Seo non sono gli unici elementi importanti per avere un sito web performante… Bisogna anche prestare un’accurata attenzione all’User Experience (UX) e all‘Interfaccia Utente (IU). Questi due acronimi regolano l’esperienza visiva e i comportamenti degli utenti che visitano i siti web. Ogni web designer dovrebbe tenere sempre in mente questi concetti.

Ecco dunque un breve tutorial per iniziare a progettare un sito Web Responsive grazie a Photoshop aiutandoci con il Grid System.

Il Grid System è uno strumento tutt’ora validissimo per i tutti web designer che vogliono realizzare dei siti servendosi delle griglie, rendendo il lavoro più semplice e veloce. Da qui si scegliere su quante colonne lavorare: da 12, 16 o 24. In genere é preferibile la griglia da 12 – la più utilizzata e in qualsiasi al mondo – nulla però vieta che si possa lavorare con un numero diverso di griglie.

Il layout e il codice sono open source e tranquillamente scaricabili su 960 Grid System. Una volta scaricato, avete qua a disposizione la base su cui mettere le mani per la realizzazione del vostro sito web.

Step 1: Creiamo il nostro documento.

photoshop-nuovo-documento

Si parte con la creazione di un nuovo documento Photoshop con una larghezza di 1680px e un’altezza di 1100px. Riempiamo quindi lo sfondo con un grigio molto chiaro (es. # F9F9F9-).

Step 2: Aggiungere la griglia.

1 – Estraete i file della cartella scaricata dal sito 960 Grid System. I file per Photoshop sono su “Templates/Photoshop/…“.Noi abbiamo scelto le 12 collonne (960_grid_12_col.psd). Incollate la griglia scelta nel vostro documento ed estendetela per tutta l’altezza del documento.

Ora ci serve una linea base orizzontale per la griglia, per aiutarci con la spaziatura degli elementi.

2 – Create dunque un altro nuovo documento con seguenti misure 24×24 pixel e sfondo trasparente. Disegnate adessouna linea nera con spessore da 1px nella parte inferiore del documento. Successivamente cliccate su “Modifica > Definisci pattern” e diamogli un nome da ricordare, ci servirà in seguito.

pattern1

3 – Ritornate al vostro documento precedente dove avevamo inserito le griglie. Create un nuovo livello. Riempiamo questo livello con il modello creato: “Modifica > Riempi” (metodo di fusione: moltiplica).

pattern-moltiplica1

4 – Infine delimitate la vostra area di lavoro utilizzando le guide. Create una nuova guida: “Visualizza > nuova guida“. Selezionare verticale e create delle guide rispettivamente a: 360px, 840px e 1320px.

Adesso avete a disposizione il tutto come modello, salvatelo. Vi servirà certamente per i vostri progetti futuri.

Step 3: Avvio del progetto. 

Ora che disponete della base pronta potete lanciarvi con il vostro progetto. Il pagina web potrà essere divisa in 5 parti:

  1. Testata (Header)

  2. Callout

  3. Content sinistro (Left Sidebar)

  4. Content destro/ (Right Sidebar)

  5. Piè di pagina (Footer)

Sono le sezioni ormai divenute canoniche in questi ultimi anni nel mondo del web design.

Step4: Aggiungere l’Header (Intestazione)

Create l’header inserendo una forma rettangolare ed uno spessore di 120px. Riempitela con de grigio scuro (#2C2C2C) ad esempio. In questa sezione solitamente si inserisce il logo e il menu di navigazione.

header1

Step 5: il Logo.

Inserite il vostro Logo in alto a sinistra allineandolo con la seconda colonna della vostra griglia e dategli un padding di 40px. Utilizzate il font che preferite, noi abbiamo scelto il Century Gothic da 50pt, colore light blue (#ADC7D9) per la prima parola e bianco per la seconda (bold). Applicate poi un’ombra interna per dargli profondità. Riducete l’opacità dell’ombra a 25% e date i seguenti valori: distanza 2px, Riduci 0%, dimensione 5px.

logo1

Step6: il Menu.

Il font che abbiamo scelto è l’Arial a 18pt. Date il colore bianco alla prima voce (Home) e un grigio chiaro per le altre (#BBBBBB). Allineate tutti le voci e metterele al centro della barra d’intestazione.

menu1

Step7: il Callout.

Abbiamo sceltodi nominarlo Callout dal momento che in questa parte si possono richiamare le informazioni sulla pagina principale.

Ripete il processo fatto per la creazione del menu, create un rettangolo di colore blu (#ADC7D9) con uno spessore di 240px.Aggiungete una sfumatura facendo doppio clic sul livello e scegliendo “sovrapposizione sfumatura“. Adesso scegliete il colore di sovrapposizione trasparente, quindi cambiate il metodo di fusione in Sovrapponi e riducete l’opacità al 30%.

callout-sfondo1

Step 8: lo sfondo Callout. 

Abbiamo scelto di chiamare il sito “Bluegrid” e dunque é opportuno aggiungere uno sfondo in stile griglia per il Callout. Per fare ciò utilizzerete una tecnica simile a quella usata per creare le linee orizzontali. Per prima cosa creiate un documento 25×25 pixel. Di nuovo usate uno sfondo trasparente e tracciate una linea nera con spessore da 1px nella parte inferiore e un’altra uguale lungo il lato destro. Ora andiamo su “Modifica > Definisci pattern“.

25x25grid1

Step 9: Aggiunta dello sfondo nella sezione Callout. 

Create un nuovo livello sopra Callout e riempitelo con il nuovo modello creato facendo: “Modifica > Riempi“. Ruotelo di 15 gradi e applicategli un colore bianco di sovrapposizione in “metodo di fusione”. Applicate un metodo di sovrapposizione con luce soffusa.

Ora utilizzate lo strumento sezione rettangolare e sezionate quest’ultimo livello, quindi clicchiamo sopra con il tasto destro del mouse e scegliamo “seleziona inverso”, cliccate poi su canc per eliminare le parti di griglia che non servono.

 Sezione Rettangolare

Ora dovete far sì che le griglie si estendano solo nell’area di lavoro. Create una maschera vettoriale sul livello delle griglie. Prendete lo strumento sfumatura e provate ad ottenere una sfumatura che vada dal nero al trasparente. Il metodo da selezionare: luce lineare. Inserite dunque la sfumatura da un lato e dall’altro.

Questo il risultato:

Risultato

Step 10: il contenuto sul Callout.

Ora siete pronti per inserireil titolo, noi abbiamo usato il font Arial a 45 pt grigio (#2C2C2C) con un breve paragrafo introduttivo di 17 pt (bold). Inserite il tutto nel lato sinistro.

Callout

Sulla destra potete invece inserire un banner sempre utilizzando lo strumento rettangolo con un altezza di 8 linee orizzontali. Riempitelo con lo stesso colore del testo posto sulla parte sinistra. È bene inserire una piccola ombra di background, basta fare doppio clic sul vostro livello ed inserite un’ombra esterna con una distanza 1px e una dimensione 10px.

Ombra rettangolare

Dentro il rettangolo abbiamo inserito uno screenshot del un blog, per farvi vedere un po’ il risultato di quello che potrete ottenere…

Esempio

Step 11: Contenuto. 

Prima di poter cominciare a dilettarvi con la sezione dei contenuti dovete preparare il terreno riempiendolo con una sfumatura sottile. Utilizzate la sezione rettangolare per selezionare l’area , quindi usate lo strumento gradiente (G). Selezionate un gradiente da (#F0F0F0) a trasparente e portatelo verso il basso della pagina (non troppo,la parte più bassa dovrebbe avere il colore dello sfondo).

Gradiente

Step 12: Testo di sinistra.

Aggiungete un paragrafo introduttivo con font Arial a 18 pt grigio (#9C9C9C) e una parola sottolineata di colore blu (#A3BBCC) per evidenziare un link

Content

Step 13: sezione elenco di servizi.

Mettete un titolo per la sezione in Arial a 25 pt bold, colore ( #262626). Procedete aggiungendo un elenco di voci con Arial a 18 pt e colore (#9C9C9C). Per creare il punto dell’elenco potete utilizzare lo strumento selezione ellittica oppure la scorciatoia di tastiera “Alt + 7”.

Elenco

Step 14: Testo di destra.

La sezione destra della pagina potrà servirvi per mostrare la selezione delle notizie recenti. Quindi aggiungete un titolo come nella sidebar di sinistra e il contenuto sottostante diviso in tre parti con un link finale usando font Arial a 16 pt sottolineato di colore blu (#A4BDCD).

News

Passaggio 15: Organizzazione del Footer. 

In questa sezione di norma si inseriscono alcune informazioni riguardanti l’azienda e il copyright dei contenuti.

Create prima di tutto la sezione del footer utilizzando nuovamente la forma rettangolare in grigio scuro (#262626).

pannelli

Create un titolo di colore bianco per il modulo con Arial di 20 pt bold e posizionatatelo sulla parte a sinistra.

Riprendete nuovamente lo strumento di sezione rettangolare e create due piccoli rettangoli che vi serviranno per i dati nel form. Riempiteli con de testo grigio chiaro (#9C9C9C) Arial 16pt. Ripetete questa procedura con il tasto invio ma utilizzate il rettangolo arrotondato. Aggiungete anche un’ombra interna a questi elementi con un’opacità al 30%,, distanza 0 e grandezza di 10px. Aggiungete un link sul fianco del pulsante invio con scritto “password dimenticata?” (Arial 13 pt, colore  #A4BDCD).

Inserite come ultima cosa un po’ di informazioni di contatto nella parte destra. Create come fatto precedentemente un titolo bianco Arial 20 pt bold e le informazioni subito sotto in Arial 16 pt, (bianche anche loro).

Passaggio 16: Ultime verifiche

Utilizzate le griglie e le linee per controllare che tutto sia ben allineato e bilanciato. Bene, adesso potete pure distendervi: avete ideato la vostra prima Homepage

Fine

Emanuele Salvato

Senior copywriter per StampaPrint. Conseguita la Laurea in Scienze Politiche presso l’Università degli Studi di Bologna nel 1998, Emanuele ha iniziato ad arricchire le sue competenze in media e comunicazione lavorando per numerose testate locali, arrivando al titolo di giornalista professionista. Abile nella ricerca, nel servizio clienti, nella gestione, nella pubblicità e nell'editing, Emanuele vanta oggi una collaborazione pluriennale con StampaPrint. Esperto di stampa online, Emanuele si occupa infatti della stesura e della pubblicazione di numerosi contenuti testuali che popolano il sito di Stampaprint.net.

 Articolo precedente Tutorial Photoshop: esposizione in doppio colore
Articolo successivo   Effetto vintage con Adobe Illustrator

Articoli correlati

  • Stampa pdf online in pochi click: facile, veloce ed economico

    27 Giugno 2022
  • Foto di famiglia: quando il piccolo formato non basta

    3 Febbraio 2020
  • Tutorial: come utilizzare i livelli di Photoshop

    13 Settembre 2019

Lascia un commento

Annulla risposta

Stampa online ora

  • Stampa online
  • Striscioni
  • Adesivi personalizzati
  • Etichette
  • Biglietti da visita

#Comunicazione

  • Campagne pubblicitarie offline: perché continuare a farle è ancora molto utile 27 aprile 2023
  • Allestimento inaugurazione negozio: 4 consigli per farlo al meglio 28 dicembre 2022
  • Gadget natalizi, quali scegliere per promuovere la propria attività: ecco alcune idee 05 settembre 2022
  • Accessori e gadget personalizzati: dai classici intramontabili a quelli più moderni, garanzia di successo per la tua attività 25 luglio 2022

#Tutorial

  • Stampa pdf online in pochi click: facile, veloce ed economico 27 giugno 2022
  • Foto di famiglia: quando il piccolo formato non basta 03 febbraio 2020
  • Tutorial: come utilizzare i livelli di Photoshop 13 settembre 2019
  • Tutorial: come fare l'Effetto Glitch su Gimp 25 giugno 2019

#Fuori dal coro

  • Simona Mirto food blogger intervista
    Simona Mirto: una food blogger fantasiosa nel solco della tradizione 06 settembre 2017
  • sheila
    Sheila & Angelica: la passione per il mondo fashion di madre in figlia 06 giugno 2017
  • ritratto Elisa Perillo kids food blogger
    Elisa Perillo: le ricette sane e creative di una mamma ai fornelli 30 maggio 2017
  • Gina Beltrami fashion blogger
    Gina Beltrami: la moda è una passione che non conosce età 22 maggio 2017

#Web to print

  • Stampare un catalogo prodotti: ecco perché è una buona idea 10 maggio 2023
  • Come fare uno striscione pubblicitario perfetto per la tua attività 14 febbraio 2023
  • Stampa QR code: come si fa e come sfruttarlo al meglio 26 gennaio 2023
  • Gadget personalizzati ed economici, su Stampaprint più stampi e più risparmi 22 agosto 2022

Scopri come risparmiare sulla prossima stampa

Stampa online ora

  • Stampa online
  • Striscioni
  • Adesivi personalizzati
  • Etichette
© 2023 Stampaprint - Tutti i diritti riservati. Stampaprint srl via Bachelet 97 46047 - Porto Mantovano (MN) - Italy P.iva C.F IT02383950207 +39 0376 689593
Sei un creativo? Un designer? ...Scopri come risparmiare sulla prossima stampa!