Rebelia.it

[Gimp] Preparare la grafica di un layout

Notizia del 30/11/2006

Dopo aver visto come si progetta un sito, vediamo come realizzarne la parte grafica con Gimp. Il layout è pensato per una risoluzione di 800x600, quindi per evitare la barra di scorrimento orizzontale creo una grafica non più larga di 750 pixel.

• Apro il programma e scelgo File -> Nuovo; le impostazioni saranno di 900 pixel per la larghezza e 600 per l'altezza ->Ok
• Riempio il livello di sfondo di color grigio molto chiaro, #e8e8e8
• Creo 2 nuovi livelli:
  • uno rosso scuro #a00000 (sotto)
  • uno grigio medio #959595 (sopra)
• Sposto i due nuovi livelli con lo strumento Sposta livelli e selezioni (il terzo da sinistra nella seconda riga a scendere del pannello strumenti) in modo che si veda una fascia stretta rossa spuntare da sotto una fascia più larga grigia
• creo un nuovo livello che mi servirà per ilcorpo del layout

Nell'immagine il risultato ottenuto dopo questi passaggi:

• Creo le guide agganciando col mouse uno dei righelli e trascinando verso il centro: le guide laterali saranno rispettivamente a 100 e a 800, mentre quelle orizzontali a 50 e a 550 in modo da avere un po' di "luce" per la decorazione
• Mi accerto che sia attivata l'opzione Guide magnetiche che mi aiuteranno a creare una selezione più precisa; il percorso di questa opzione è Visualizza -> Griglia magnetica (se è già attiva è spuntata, altrimenti è sufficiente cliccarci sopra per attivarla)
• Con lo strumento Selezione rettangolare (il primo in alto a sinistra) disegno un rettangolo all'interno delle guide
• Imposto il colore di primo piano sul bianco e riempio la selezione con lo strumento contraddistinto dal vaso di colore evidenziato sotto, dopo essermi accertata che nel pannello delle opzioni di questo strumento sia selezionata la voce che corrisponde al colore che voglio usare (nel mio caso il colore di primo piano):

Senza deselezionare*, provvedo all'arrotondamento degli angoli: Seleziona -> Rettangolo arrotondato -> [imposto i valori] -> Ok; spuntando la casella Concavo l'arrotondamento avverrà verso l'interno:

Una volta terminato lo script, elimino la parte in più con Selezione -> Invertita e quindi Modifica -> Cancella

Ripeto il passaggio Selezione -> Inverti e procedo alla creazione dell'ombra con Script-fu -> Ombre -> Crea ombra; per ottenere un'ombra uniforme sui quattro lati imposto lo scostamento di X e Y a 0:

Il nuovo livello con l'ombra è posizionato al di sopra del livello a cui fa riferimento, perciò lo sposto sotto trascinandolo dal pannello dei livelli.

Per un effetto più realistico, la parte in primo piano dev'essere sfalsata rispetto al resto, perciò procedo in questo modo:

• con lo strumento Seleziona per colore (il quinto in alto a sinistra) seleziono l'area bianca del livello con gli angoli smussati
• mi sposto sul livello bordeaux: la selezione si ridurrà perchè quel livello è spostato rispetto a quello da cui sono partita; a questo punto scelgo Seleziona -> Fluttuante e si creerà un nuovo livello
• procedo allo stesso modo sul livello grigio e a fine operazione avrò la situazione livelli dell'immagine sottostante:

Per l'effetto sfasamento, provvedo a spostare leggermente (una decina di pixel più o meno) i due livelli grigio e rosso che stanno sotto e lo faccio agganciandoli con lo strumento Sposta selezione usato all'inizio e evidenziato nell'immagine dove si vede un particolare dei due livelli spostati verso il basso rispetto alle selezioni create sopra:

Con lo strumento Testo aggiungo il nome; nella figura le impostazioni gestite tramite il pannello delle opzioni di testo e in secondo piano la finestra dove si va a inserire il testo vero e proprio:

Procedo a salvare il file così ottenuto, mantenendo l'estensione proprietaria di Gimp; in questo modo saranno mantenuti i vari livelli e avrò la possibilità di procedere a delle eventuali modifiche future senza dover rifare tutto daccapo (pensiamo per esempio a un layout uguale, ma che preveda una fascia verde anziché rossa perché nel frattempo i colori dell'associazione sono cambiati).

Il passaggio successivo è la preparazione della grafica per l'utilizzo nelle pagine vere e proprie; nella figura sono evidenziate le parti che andrò a utilizzare:

Per procedere, devo per prima cosa unificare i livelli e il percorso è Menu livelli -> Immagine appiattita come evidenziato qui sotto:

Per un taglio più preciso mi aiuto con guide che posiziono in modo da formare dei rettangoli che contengano tutto quello che voglio ritagliare:

• nel caso dello sfondo, una porzione di grigio e rosso alta come tutta la fascia in verticale e larga pochi pixel in orizzontale (andrò poi a ripeterla con i CSS)
• nel caso dell'intestazione, una selezione che comprenda anche la sfumatura
• nel caso del corpo della pagina la selezione sarà larga esattamente come quella dell'intestazione, ma alta poche decine di pixel
• nel caso dell'immagine di chiusura procederò come per l'intestazione

Nella figura il particolare dei quattro tagli (l'ultima immagine comprende sia la fascia del corpo che quella di chiusura):

Procedimento:

• seleziono la parte dell'intestazione
• Modifica -> Copia
• Modifica -> Incolla come nuovo
• salvo la nuova immagine come header.gif in una cartella
• ripeto i vari passaggi per le quattro immagini ottenendo i seguenti files:
  • header.gif
  • sfondo.gif
  • sfondo_pagina.gif
  • chiusura.gif

Le tre selezioni orizzontali devono essere fatte senza spostare le guide verticali in modo che siano tutte della stessa identica larghezza!

Scarica le immagini del layout (zip - 7kb)

Tutorial correlati: Il codice xhtml - Dalla grafica al CSS

I campi con * sono obbligatori.