lezione da wireframe a design

Ciao, 

nella scorsa lezione abbiamo realizzato un design a partire da un wireframe, ecco il file su cui abbiamo lavorato in aula. Sotto Greta ha gentilmente riassunto alcuni strumenti nuovi che abbiamo usato. Per i vostri design lavorate su un file da 980x600, mi raccomando! 

ALTRI STRUMENTI UTILI NEL PROGRAMMA GIMP

Nella lezione di venerdì 15 febbraio abbiamo imparato a usare nuovi strumenti del programma gimp,tra cui :

-LO STRUMENTO “SECCHIELLO” / RIEMPIMENTO COLORE

Serve a riempire l’area selezionata con il corrente colore di primo piano;a seconda delle opzioni scelte, lo strumento riempirà l'intera selezione o solo le parti i cui colori sono simili al punto in cui si è fatto clic. Altre opzioni riguardano il modo in cui è gestita la trasparenza

Riferimenti alla guida : http://docs.gimp.org/it/gimp-tool-bucket-fill.html

Abbiamo parlato di colore…nella produzione digitale vengono impiegati tre spazi di colori: Lab, RGB e CMYK. 

Il metodo RGB è il più utilizzato, in quanto la maggior parte degli strumenti di elaborazione (fotocamere, scanner, monitor, stampanti fotografiche e stampanti d’ufficio) opera proprio in questa modalità. Un'immagine RGB può essere pensata come la sovrapposizione di tre immagini in scala di grigi sovrapposte, ognuna con un filtro colorato rispettivamente di rosso, verde e blu.

-LO STRUMENTO “TESTO”

E’ lo strumento che ci permette di inserire del testo in un punto qualsiasi dell'immagine.Ci sono due modalità per scrivere un testo :
1) basta semplicemente cliccare un punto qualsiasi dell’immagine e iniziare a digitare per comporre il testo
2)oppure si può trascinare il campo di testo e creare così un’area di testo

Selezionando dalla finestra degli strumenti la "A" che corrisponde allo strumento, in basso compaiono una serie di parametri di personalizzazione come : carattere(determina la "calligrafia" con cui scrivere, il tipo di carattere),dimensione(la grandezza del testo),colore(determina il colore del testo da inserire),allineamento( determina l'allineamento rispetto alla finestra del testo) ecc . Inoltre il testo rimane modificabile in qualsiasi momento.
Il testo viene creato automaticamente su un nuovo livello.

Riferimenti alla guida : http://docs.gimp.org/it/gimp-image-text-management.html

-LO STRUMENTO “RIFLETTI”

Serve semplicemente a riflettere il livello selezionato sia orrizontalmente che verticalmente.

Lo strumento rifletti può essere invocato:

- nel seguente ordine dal menù : Strumenti  Trasformazione Riflessione .

-oppure può essere richiamato anche facendo clic sull'icona corrispondente.

Riferimenti alla guida : http://docs.gimp.org/it/gimp-tool-flip.html

-LO STRUMENTO “SCALA”

Serve a rimpicciolire il livello selezionato,non è invece consigliato ingrandire l’immagine poichè questa si sgranerebbe.Per usare lo strumento scala basta semplicemente cliccare l’icona corrispondente e trascinarla nell’area di lavoro.
Per ottenere un buon ridimensionamento bisogna mantenere invariato il rapporto tra altezza/larghezza dell’immagine originale,per farlo basta semplicemente andare nella finestra delle informazioni di scala e cliccare sulla “catenella” per far sì che risulti unita.

Riferimenti alla guida : http://docs.gimp.org/it/gimp-tool-scale.html

-LO STRUMENTO “CONTAGOCCE”

Lo strumento contagocce o “prelievo colore” permette di prelevare un colore da un punto qualsiasi di un'immagine e di impostarlo come colore primario, inoltre consente di reperire informazioni sui colori visualizzabile nella finestra info.Se cliccate una parte qualsiasi dell'immagine con questo strumento il colore del punto cliccato verrà prelevato e verrà messo come colore primario;ovviamente bisogna stare attenti a selezionare il livello che ci interessa!Viene considerato il livello selezionato.

Riferimenti alla guida : http://docs.gimp.org/it/gimp-tool-color-picker.html

Come scaricare immagini da google

L'operazione richiede pochi click: andiamo su google.it, clicchiamo in alto a sinistra sulla voce "immagini" e inseriamo nella barra di ricerca il nome dell'immagine che desideriamo cercare (es: gatto, Dali') e clicchiamo sul tasto cerca a destra della barra.

A questo punto compariranno una sfilza di immagini e passando il puntatore del mouse su di esse, comparirà al di sotto la dimensione in pixel (es: 560 x 560) , cliccando su "strumenti di ricerca" vedremo apparire altre opzioni per affinare maggiormente la nostra ricerca. 

Scelta la nostra immagine clicchiamoci su', e per scaricarla nella sua grandezza originale clicchiamo su "visualizza l'immagine originale".

A questo punto non dobbiamo far altro che scaricare la nostra immagine; clicchiamo il tasto destro del mouse su un punto qualsiasi di essa e andiamo a cliccare sulla voce "salva immagine con nome", con questa operazione salviamo l'immagine nella cartella che desideriamo.

I LIVELLI nel programma GIMP

Cos'è un livello?

Un'immagine GIMP può essere immaginata come una lasasagna formata da vari strati, ogni strato corrisponde ad un livello. Non c'è limite, in linea di principio, al numero di livelli che un'immagine può avere, se non nella quantità di memoria del sistema necessaria a contenerli tutti.
I livelli vengono gestiti attraverso la apposita finestra livelli, che compare sulla destra quando viene aperto il programma.

La finestra livelli

La finestra dei livelli è l'interfaccia principale per gestire e modificare i livelli. Usando i livelli, si può costruire un'immagine costituita da diverse parti, ognuna delle quali può essere manipolata senza influenzare le altre parti dell'immagine. I livelli sono incolonnati uno sopra l'altro. Il livello in fondo rappresenta lo sfondo e sopra vengono via via gli elementi che nell'immagine sono in primo piano.

  Attributi livelli

L'attributo principale è il nome del livello che può essere modificato facendo clic con il tasto destro del mouse sulla miniatura del livello, nella finestra dei livelli, e poi selezionando la voce  modifica attributi di livello.
Altro attributo importante è quello della visiblità del livello. Sempre nella finestra livelli, accanto alla miniatura di ogni livello compare l'icona di un occhio. Cliccandoci sopra si può attivare o disattivare la visibilità del livello, facendo apparire o scomparire gli elementi presenti sul livello selezionato.

Creazione di nuovi livelli

Sono tre i principali modi per creare un nuovo livello in un'immagine:

• Selezionando livello  → nuovo livello nella barra del menu sopra la finestra immagine. In questo modo si apre una maschera che permette di definire: nome, largezza, altezza e tipo di riempimento del nuovo livello.
• Selezionando livello  → duplica livello nella barra del menu sopra la finestra immagine. In questo modo si crea un nuovo livello perfettamente uguale a quello attulamente selezionato.
• Quando si taglia o copia qualcosa e successivamente la si incolla. In questo caso si crea una selezione fluttuante, una sorta di livello temporaneo. Prima di fare qualsiasi altra operazione è necessario andare nella finestra livelli, quella a destra, cliccare col tasto destro sulla miniatura della selezione fluttuante e poi con il tasto sinistro su a nuovo livello.

Link alla guida online

Guida livelli

GLI STRUMENTI DI SELEZIONE nel programma GIMP

GLI STRUMENTI DI SELEZIONE

guida consultabile al seguente link:

http://docs.gimp.org/it/gimp-tools-selection.html

A COSA SERVONO GLI STRUMENTI DI SELEZIONE?

Gli strumenti di selezione sono progettati per selezionare delle zone del livello attivo in modo che si possa lavorare senza compromettere le aree non selezionate;

es. se ho un'immagine di un paesaggio della quale l'unico elemento che m'interessa è un albero, dovrò creare una selezione che contenga solamente questo; così facendo non andremmo ad alterare il resto dell'immagine ma potremo lavorare esclusivamente sull'elemento da noi selezionato (ad es. lo si può "tagliare" e "incollare" su di un altro livello della stessa immagine oppure lo si può "incollare" su di un'altra immagine)

CHE TIPO DI STRUMENTI DI SELEZIONE CI SONO?

- selezione rettangolare

- selezione ellittica

- selezione a mano

(sono i tre tipi di selezione principali; vedi guida per ulteriori approfondimenti)

COME USARE GLI STRUMENTI DI SELEZIONE?

Se l'elemento che vogliamo selezionare possiede dei bordi che vanno a costituire una forma perfettamente rettangolare, o quadrata, useremo la "selezione rettangolare" (nel pannello strumenti: prima icona in alto a sx),

se invece presenta dei bordi concentrici useremo la "selezione ellittica" (nel pannello strumenti: seconda icona in alto a sx),

nel caso in cui invece l'elemento non rientrasse in nessuna di queste due categorie useremo la "selezione a mano" (nel pannello strumenti: terza icona in alto a sx).

Se invece volessimo selezionare tutto ciò che si trova in un determinato livello, basterà andare nella sezione "SELEZIONA" presente nella barra in alto della finestra centrale e cliccare su "TUTTO" (--> SELEZIONA>TUTTO)

Una volta cliccato sull'icona della selezione andremo a selezionare l'elemento, apparirà una linea tratteggiata che va a racchiudere una porzione dell'immagine ( quella sulla quale abbiamo deciso di lavorare);

una volta selezionato l'elemento è bene ingrandirlo, lo si può fare utilizzando l'icona raffigurante una lente d'ingrandimento (nel pannello strumenti), oppure attraverso la barra che si trova nella parte bassa della finestra centrale dove lo zoom è espresso in percentuali, in questo modo potremmo ottenere una maggiore precisione nella selezione (più riesco a far coincidere la linea tratteggiata della selezione con i bordi dell'immagine , più il risultato sarà migliore!!)

se usiamo la selezione rettangolare, o ellittica:

con il mouse selezioniamo un punto all'interno dell'immagine e, tenendo premuto il tasto sx ci "allarghiamo" verso il basso-alto, dx-sx a seconda della forma dell'elemento che abbiamo deciso di andare a selezionare, cercando di far coincidere al meglio la linea tratteggiata con il bordo di questo 

se usiamo la selezione a mano:

selezionare un punto facendo un solo click con il mouse (ovviamente dev'essere un punto appartenente al bordo dell'elemento che stiamo andando a selezionare!), spostarsi poi con il cursore (apparirà una linea che ha origine nel punto da noi appena selezionato) cercare dunque di farla coincidere al meglio con il bordo e fare un altro click (continuare finché non si è completato il contorno dell'immagine --> solo così diventerà una selezione! cioè quando l'ultimo punto si ricongiunge con il primo )

Nel caso in cui si dovesse sbagliare a selezionare un punto, sarà sufficiente premere il tasto "DEL" (= il tasto sopra l' INVIO) per cancellare solamente quest'ultimo,

premendo invece il tasto "ESC" cancelleremo tutta la selezione fatta!

CREARE/APRIRE e SALVARE FILE su GIMP

PER CREARE UN FILE:
Aprire gimp, e cliccare su FILE > NUOVO

Si aprirà una finestra dalla quale è possibile decidere le dimensioni dell'immagine da creare. Aprire il menù a tendina in alto per usare dimensione predefinite, oppure impostarle manualmente.

Impostiamo un formato adatto a tutti gli schermi e per il web, che è: larghezza 960 pixel e altezza 600 pixel.

Troviamo inoltre scritto 72 ppi, che è la risoluzione (pixels per inch) standard per il web e RGB che è lo spazio colore su cui stiamo lavorando (red, green, blue). Queste due impostazioni sono modificabili cliccando nel tasto "opzioni avanzate" (esempio: 300 ppi è la risoluzione per la stampa)
Poi si clicca CREA, e il file si apre.

PER SALVARE UN FILE:
Cliccare FILE > SALVA
Si apre una finestra che ci permette di decidere il formato del file da salvare, cliccando in "seleziona il tipo di file".
Bisogna salvare il file come formato nativo/aperto, cioè un formato che anche se salvato è poi riapribile con gimp e modificabile. Questo formato su gimp è .XCF (su photoshop è .PSD)
In questo modo i nostri lavori sono sempre modificabili; bisogna sempre tenere i file nativi come archivio del nostro lavoro.
Anche il nome del file da salvare è modificabile, ma per evitare problemi futuri conviene rinominarli senza utilizzare spazi, ma eventualmente "-" o "_" .
Salvare un file in formato per il web:
ci sono 3 tipi di formati per le immagini del web : JPG ; PNG ; GIF.
Quindi, partendo dal file nativo aperto, cliccare FILE > SALVA COME ... e in "seleziona il tipo di file" scegliere o jpg o gif o png.
Oppure, cliccare FILE > ESPORTA.

Quando si clicca "salva come", o "esporta" , si aprirà una finestra che permette di impostare la qualità dell'immagine, in quanto impostando il formato jpg/gif l'immagine viene compressa e la qualità è ridotta.
Siccome lavoriamo su immagini che andranno nel web, non bisogna appesantirle troppo, quindi impostiamo 60-70% di qualità.

Wireframe

wireframe

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.html.it/articoli/leggi/3083/progettare-con-i-wireframe/

http://www.italianwebdesign.it/limportanza-del-wireframe-nel-processo-di-creazione-di-un-sito/

http://css.html.it/guide/lezione/53/le-sezioni-logiche-di-una-pagina-web/

Esercizio

File per gimp:
https://docs.google.com/open?id=0B1m8ENcsLn8JeHd1MWtWZjVUNzI3eXpReF9UUkhJQQ

File per photoshop:
https://docs.google.com/open?id=0B1m8ENcsLn8JVTdTNTlyNkdUd1dYVW5uaHNfNkctUQ

Gimp note

Gimp è scaricabile qui:
http://www.gimp.org/downloads/
dove p anche presente un manuale da scaricare.
Il manuale online, più leggero, è qui:
http://docs.gimp.org/it/
Altro tutorial:
http://grafica.html.it/guide/leggi/15/guida-gimp/