Grafica ed interfacce per la comunicazione - paolavocca.it · consiglio, andate su gimp.org per una rapida panoramica degli strumenti, ... finito la linea di riempimento nella slide

Grafica ed interfacce per la comunicazione

Scienze della Comunicazione

Paola Vocca

Lezione 11: Creazione di un’interfaccia web

Scopo di questa lezione

• Realizzazione di un’interfaccia Web attraverso

l’utilizzazione del software opensource GIMP

Grafica ed interfacce per la comunicazione A.A. 2013/14 2

Inizio

Per gli utenti che utilizzano per la prima volta questo software, un consiglio, andate su gimp.org per una rapida panoramica degli strumenti, anche se la sua interfaccia è piuttosto semplice e facile da utilizzare.


1. Creare una nuova immagine 780x1000 2. Riempire lo sfondo con il colore #ededed

utilizzando lo strumento «secchiello di riempimento».

3. Create un nuovo livello e chiamatelo «Header».

4. Utilizzare lo strumento «Selezione Rettangolo» e trascinare tutta la larghezza, che è 780px e un'altezza di 125px (usare i righelli come guide).

5. Ora selezionare il riempimento con lo strumento «Sfumatura» e scegliere Gradiente con il FG (foreground) e il BG (background) in RGB e aggiungere il colore 000000 per FG e 3a4146 per BG.

6. Ora trascinate dal basso all’alto del rettangolo assicurandosi che la linea sia perfettamente verticale.


Dovrebbe apparire così

Creazione del logo


Per la creazione del logo utilizzeremo un testo semplice con un effetto riflessione.

1) Con lo strumento Testo inserire la scritta Gimp-tutorials.net di dimensione 30px e font Trebuchet MS Bold colore ffffff. (si può provare ad utilizzare sia il proprio nome sia una font differente, naturalmente).

2) Ora per creare la riflessione duplicare il testo (duplicare il livello)

3) riflettere il testo duplicato utilizzando lo strumento «Rifletti» , capovolgendolo attraverso una riflessione verticale e posizionatelo sotto il testo originale

Creazione del logo (2)


1. Utilizzare lo strumento

riempimento sfumato e

selezionare «da pp a

trasparente» e cambiare il

colore di pp in 000000

2. Ora trascinate dal basso

verso l'alto più volte sulla

parte inferiore del layer logo

per sfumare la trasparenza.

Creazione della barra di navigazione superiore 1) creare un nuovo livello

«Barra» e utilizzare lo strumento rettangolo di selezione per selezionare un blocco di larghezza pari a 780px e altezza di 20px

2) Ora, usando strumento sfumatura scegliete il gradiente pp a sf (RGB) e aggiungere il colore 0276cf come pp e 82c9ff come sf, applicare la sfumatura dal basso verso l'alto, come mostrato nell’immagine partendo da 225 px fino a 125px di altezza.

3) Per le singole schede, create un nuovo livello e nominatelo Tab.


Creazione della barra di navigazione superiore

1) Utilizzare lo strumento rettangolo e disegnare un rettangolo di 105px di larghezza e 30px di altezza utilizzare nuovamente il righelli come guida.

2) Il rettangolo deve essere posizionato con il vertice in alto a sx nella posizione 200px da sx e 105px dall’alto

3) Ora fate clic con il tasto destro sulla scheda e andare su spigoli arrotondati e modificate il Raggio% a 8.

4) Usate il Riempimento sfumato utilizzando come estremi gli stessi colori della barra di navigazione, 0276cf per pp e 82c9ff per sf.

5) Ora trascinate dal basso verso l'alto assicurandovi di iniziare precisamente da 225px (sul ruler) e finire a 125px (sempre sul ruler), oppure accadrà che la scheda non si fonderà con la barra di navigazione in maniera perfetta, si può vedere come ho iniziato e finito la linea di riempimento nella slide successiva.




dovrebbe apparire come questa


Duplicare la scheda 3 volte, rinominare i livelli per continuare ad avere una organizzazione coerente del file . dovrebbe venire alla fine così.


Ora vorremmo centrare le

linguette, cosa che faremo

cliccando sulle icone chain nella

finestra dialogo layer e

spostando tutte le linguette

contemporaneamente


• Aggiungere il testo del titolo per ogni scheda,

o digitiamo home, products, contacts, about, font Trebuchet MS

Bold colore ffffff. Dimensione 20pt

• salvate il documento utilizzando il formato XFC.


Creazione della barra di navigazione laterale

Ora creiamo la barra di navigazione sinistra, creiamo una sidebar pulita che può funzionare bene con i siti basati su CSS.

1. Crea un nuovo livello, denominarlo «barra dei menu di sinistra»

2. utilizzare lo strumento di selezione rettangolo e disegnare una selezione larga 200px e alta 950px che arriverà fino in fondo al file e poi riempitelo con il colore #232323

3. collegate le linguette e il testo cliccando sulle icone chain nella finestra dialogo layer e spostarle insieme in modo da allineare il tutto così come nell’immagine.


Ora per creare i separatori di linea della barra di navigazione laterale, creare un nuovo livello, nominatelo Linea, ingranditelo circa al 300% in modo da poterlo vedere bene, disegnare un rettangolo da 1px di altezza e di larghezza quasi uguale a quella del menu, poi riempitela con il colore 232222


Creazione della barra di navigazione laterale

Tracciare ora un'altra linea di

dimensioni uguali alla

precedente e posizionarla al

di sotto. Riempirla utilizzando il

colore 4e4c4c.

Questa è come apparirà la

linea ingrandita al 200%.

Ora duplicate il livelllo appena

creato per 7 volte gestendo lo

spazio intermedio fra le linee

Aggiungere gli effetti nel blocco content

• Aggiungere qualche effetto sfumatura di luce sullo sfondo della sezione content.

• Creare un livello chiamato «effetto gradiente» quindi disegnare un rettangolo di 205px di altezza e 580px di larghezza

• Riempirlo dal basso verso l'alto con il colore #ededed per pp e #ffffff per sf con lo strumento «Sfumatura»

• Fare esattamente la stessa operazione per il livello inferiore ma invertendo la direzione della linea.


Ultimi ritocchi

Ora la parte principale del layout è finita, è il tempo di

aggiungere qualche contenuto di base, innanzitutto

avremo bisogno di qualche bella fotografia, uno dei siti di

immagini è http://www.stockvault.net/ all’interno trovate

materiale libero al 100% da utilizzare sul vostro sito.

Andateci e scaricate un’immagine che considerate in

linea con il template che state costruendo.


http://www.stockvault.net/

Ultimi ritocchi Ora aprite la nuova immagine appena scaricata e selezionate lo strumento «Scala» e ridimensionatela dalle sue dimensioni reali (in questo caso erano 1500px per 1835px) a 1024x705 (menù immagini,- Dimensioni immagini) poiché l'immagine originale è ancora troppo grande ne utilizzeremo solo un particolare, per fare questo utilizziamo lo strumento Selezione e lo trasciniamo a circa 580px di larghezza e 179px altezza scegliendo l’area della foto che desideriamo utilizzare, quindi taglieremo questa porzione premendo CTRL + C e poi andremo nel nostro file di esercitazione , creare un nuovo llivello e premeremo CTRL + V per incollarlo, allineandolo e posizionandolo sotto la barra di navigazione come nell’immagine.


Ultimi ritocchi

ora si aggiungeranno i link di testo nel menu di sinistra, per fare questo utilizziamo lo strumento Testo e scriviamo al massimo 5-6 parole di descrizione , dopodiché allineiamo questo livello perfettamente tra le due linee separatorie.

Ripetiamo l'operazione per gli altri separatori assicurandoci sempre del loro allineamento, l'allineamento è tutto quando si parla di graphic design, questa immagine vi mostra come dovrebbe apparire il tutto alla fine del lavoro.


Ultimi ritocchi Ancora una volta utilizzare lo strumento Testo per aggiungere un paio di paragrafi all’interno della pagina e posizionarlo al centro dello spazio vuoto assicurarsi che la distanza tra tutti i lati sia perfettamente uguale per allinearlo correttamente .


Se volete alla base della pagina potete

inserire un ulteriore menù di navigazione, nel

nostro caso si è inserito il logo di gimp

Ultimi ritocchi

• Ecco la pagina di template finita, ed accanto una sua variazione modificando solamente il logo.


Documents

Grafica ed interfacce per la comunicazione - paolavocca.it · consiglio, andate su gimp.org per una rapida panoramica degli strumenti, ... finito la linea di riempimento nella slide