domenica 2 febbraio 2014

Come creare e salvare un file con Gimp

Come creare e salvare un file con Gimp

Come creare un file con Gimp? Per prima cosa clicco su Nuovo, immediatamente si apre una finestra con tutte le funzioni avanzate, tra cui la dimensione dell'immagine, fondamentale è la grandezza dell'immagine in quanto il programma vuole sapere la lunghezza e la larghezza di essa in pixel. Per comodità sceglieremo quasi sempre 960 x 600 cosi da avere un'immagine un po più larga e non molto alta. Importante è il fatto di accertarsi che nell'immagine vi siano sempre 72 dpi (punti per pollice) e che il colore sia sempre RGB (rosso, verde, blu) ovvero lo spazio colore dell'immagine.
Dopo aver inserito questi dati del file e aver cliccato su Ok comparirà lo spazio della grafica o dell'immagine alla quale andremo a lavorare. Per organizzare il lavoro al meglio è fondamentale regolare lo zoom in basso a sinistra e posizionare le finestre degli strumenti, sia per la creazione del nostro lavoro e sia per la gestione dei suoi livelli, ai lati dello schermo e lo spazio di lavoro al centro. Ma come si salva un file su Gimp? E' molto semplice, basta con lo strumento Pennello per esempio disegnare un disegno o una grafica sul foglio di lavoro e infine per salvare bisogna cliccare su Salva. Tutti i file grafici però possono essere molto complessi, come file immagini, scritte ecc... per salvarli con tutte le loro caratteristiche dobbiamo salvarli nel loro formato grafico nativo del programma. Il formato di Gimp è XCF, e solo questo formato permette di conservare la complessità del lavoro effettuato, tutti i lavori di grafica e design che andremo a fare, li salveremo in formato nativo, questo per appunto modificare o lavorare nuovamente sul file di Gimp. Altrettanto importante è la possibilità di salvare in un formato visibile a tutti gli altri programmi di visualizzazione immagini e grafica, come lo è per esempio Jpeg. Se ho bisogno di dare a qualcuno lo stesso file con la quale sto lavorando su Gimp, devo cliccare “Salva come”, selezionare il tipo di file, selezionare Jpeg e salvarlo sul desktop. Si tratterà di un file che basterà alla sola visualizzazione e non darà la possibilità di operare su di esso. E' necessario sapere che il Jpeg permette per mezzo di un algoritmo di compressione di fare delle immagini comprimendole in modo da regolare la dimensione fisica, ma lo fa perdendo delle informazioni e buttando via della qualità, la qualità va da 0 a 100, ma noi per il web generalmente utilizzeremo una qualità intorno ai 70. Con questo processo ho salvato il file sia con il suo formato nativo sia in Jpeg per la comunicazione esterna, e quindi posso vedere la grafica o l'immagine con un normale visualizzatore d'immagini e lo posso far vedere agli altri. Bisogna prestare molta attenzione attenzione a non lasciare il file per Gimp in Jpeg salvandolo sempre di nuovo con il suo formato nativo per poterci lavorare su.


Roberto Neri

venerdì 24 gennaio 2014

I Livelli

Un'immagine Gimp può essere figurata come una struttura a strati, uno sopra l'altro, in cui ogni strato viene chiamato livello. Usando i livelli si può costruire un'immagine composta da diverse parti, ognuna delle quali può essere manipolata senza influenzare nessun'altra parte dell'immagine. L'organizzazione di questi livelli viene mostrata nella finestra livelli (la colonna a destra quando viene aperto il programma) che è l'interfaccia principale per alterarli, modificarli e gestirli. I livelli sono incolonnati uno sopra l'altro: il livello in fondo rappresenta lo sfondo e al di sopra di esso vi sono via via gli elementi che nell'immagine sono in primo piano. Non c'è limite, in linea di principio, al numero di livelli che un'immagine può avere.
Nella barra dei menu sopra la finestra immagine si trova il menu Livello, contenente un gruppo di comandi che riguardano il livello attivo di un'immagine, cioè quello selezionato su cui si sta lavorando. Se un livello è attivo, viene mostrato evidenziato nella finestra dei livelli ed il suo nome viene mostrato nell'area di stato della finestra immagine. Se non è attivo, per renderlo tale basta fare clic su di esso.

Proprietà del livello
Ogni livello in un'immagine possiede un certo numero di importanti attributi:
Nome: il nome viene assegnato automaticamente quando il livello viene creato, ma è possibile cambiarlo facendo doppio clic su di esso nella finestra livelli o facendo clic con il tasto destro del mouse (sempre nella finestra dei livelli) e selezionando la voce Modifica attributi di livello.
Visibilità: si può rimuovere un livello da un'immagine senza però distruggerlo facendo clic sul simbolo dell' “occhio aperto" che si trova accanto alla miniatura di ogni livello nella finestra dei livelli. Per riattivarne la visibilità basterà cliccare di nuovo sull'icona. 
Se si fa clic con il tasto Maiusc sul simbolo dell'occhio, verranno disabilitati di tutti i livelli eccetto quello su cui si è fatto clic.
Miniatura: Il contenuto del livello viene rappresentato in una immagine in miniatura. Quando il livello è attivo, la miniatura possiede un bordo bianco. Il bordo diventa nero se il livello non è attivo.

Creazione di nuovi livelli
Ci sono 3 modi principali per creare nuovi livelli in un'immagine:

  • Selezionando LivelloNuovo livello nel menu sopra la finestra immagine. In questo modo si apre in primo piano una finestra che permette di impostare il nome e le dimensioni del nuovo livello.
  • Selezionando LivelloDuplica livello nel menu sopra la finestra immagine. Viene creato un nuovo livello uguale a quello attualmente selezionato, subito sopra di esso.
  • Quando si "taglia" o "copia" qualcosa (menu ModificaTaglia/Copia) si crea una "selezione fluttuante", una specie di livello temporaneo che è necessario convertire in un livello normale tramite il menu ModificaIncolla come nuovo livello.


Guida GIMP: http://docs.gimp.org/it/gimp-image-combining.html#gimp-concepts-layers

giovedì 16 gennaio 2014

Strumenti di selezione


Potete consultare la guida completa qui http://docs.gimp.org/it/gimp-tools-selection.html

 Gli strumenti di selezione servono per poter "isolare" una zona sulla quale si intende lavorare. Ci sono 7 strumenti di selezione: selezione rettangolare, selezione ellittica, selezione libera (lazo), seleziona regioni contigue (bacchetta magica), seleziona per colore, seleziona forme dall'immagine, selezione primo piano.

SELEZIONE RETTANGOLARE
Questo strumento serve per selezionare delle zone rettangolari in un' immagine ma anche per disegnare un rettangolo (sia pieno che vuoto). Il modo più semplice per attivare lo strumento è cliccare sull'icona corrispondente nel pannello degli strumenti (ha come simbolo un rettangolo quindi è facilmente riconoscibile). Una volta selezionata la zona, è possibile modificare la selezione spostando il cursore del mouse sui lati del rettangolo (o quadrato) ottenuto e "tirandoli" a seconda della modifica che dobbiamo apportare (la stessa cosa succede tirando gli angoli). La selezione può essere spostata tenendo premuto il pulsante del mouse e spostandolo -ATTENZIONE- così facendo verrà spostata solo la selezione, non verrà spostata l'immagine sottostante. Per deselezionare un'immagine basta cliccare fuori dalla selezione oppure dal menù in alto cliccare su "seleziona" e da lì su "niente"

SELEZIONE ELLITTICA
Questo strumento è il "fratello" di quello descritto qui sopra, con la differenza che le zone selezionate avranno forma ellittica o circolare; la sua icona è un'ellissi e si trova nel pannello degli strumenti. Per quanto riguarda la modifica della selezione, valgono le stesse indicazioni date per la selezione rettangolare.

SELEZIONE LIBERA (O LAZO)
Questo strumento permette di selezionare forme più complesse disegnandole a mano libera con il puntatore del mouse. Si può, sia tenere premuto il tasto sinistro del mouse e muovere il cursore in modo da creare un tratto continuo, sia creare tanti punti ravvicinati per ottenere una selezione più precisa; l'icona corrispondente ha come simbolo un lazo e si trova anch'essa nel pannello degli strumenti. Per deselezionare l'immagine con questo strumento non si può cliccare fuori dalla selezione ma bisogna andare su "seleziona" e da lì cliccare su "niente".


SELEZIONA REGIONI CONTIGUE (O BACCHETTA MAGICA)
Questo strumento serve per selezionare aree del livello o dell'immagine in base alla somiglianza dei colori; risulta molto efficace quando si hanno oggetti con margini ben definiti. Una volta creata la selezione con la bacchetta magica la si può spostare ma non modificare; per deselezionarla bisogna eseguire gli stessi passaggi che si usano per il lazo.

SELEZIONA PER COLORE
Lo strumento di selezione per colore funziona quasi come la bacchetta magica, con la differenza che, quest'ultima, seleziona delle regioni contigue, con tutte le parti collegate al punto di partenza da tracciati che non sono separati da spazi molto grandi, mentre lo strumento di selezione per colore seleziona tutti i pixel che hanno un colore abbastanza simile a quello del pixel selezionato, indipendentemente dalla loro posizione. L'icona corrispondente a questo strumento ha come simbolo una manina che indica tre quadrati colorati disposti verticalmente.

SELEZIONA FORME DELL'IMMAGINE (O FORBICI INTELLIGENTI)
Questo strumento è utile quando si vuole selezionare una zona che ha forti variazioni di colore ai margini; per iniziare ad usare le forbici si fa clic sui margini della zona che si vuole selezionare per creare un insieme di "nodi di controllo", lo strumento produce una curva continua che passa attraverso questi nodi di controllo, seguendo il margine che riesce a trovare. Per modificare la curva ottenuta basta spostare i nodi e, una volta soddisfatti, si clicca all'interno di essa per trasformarla in una selezione. L'icona corrispondente a questo strumento ha come simbolo un paio di forbici.

SELEZIONE PRIMO PIANO
Questo strumento permette l'estrazione dell'immagine di primo piano dal livello attivo o da una sua selezione.
- Selezionare l'immagine di primo piano che si desidera estrarre. Nella prima parte dell'operazione lo strumento di selezione in primo piano funziona come il lazo. Appena si rilascia il pulsante del mouse, la parte non selezionata dell'immagine viene coperta da una maschera blu scuro. Se la selezione non è chiusa, le sue estremità saranno collegate automaticamente da una linea retta. A questo punto il puntatore del mouse assume l'icona del pennello.
- Disegnare una linea attraverso il primo piano: usando il pennello, si disegna una linea continua nel primo piano selezionato andando sopra ai colori che verranno tenuti dall'estrazione.
- Quando viene rilasciato il mouse tutte le aree non selezionate vengono rese in un colore scuro.
- Per ottenere la selezione desiderata cliccare "invio"






 


 

strumenti di selezione

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

Grafica Selezioni Esercizio

File per gimp:


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

SOLUZIONE

https://docs.google.com/file/d/0B1m8ENcsLn8JdzYxNGlkZktRSktlSjI0YWxuRGV4QQ/edit

Wireframe




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

giovedì 9 gennaio 2014

Link ai progetti

Puppini Davide - Wireframe OK
https://docs.google.com/presentation/d/1m830TiyYAc7r4PuJNNmD_OkCNe4FRi8uRpNOQGO99zo/edit#slide=id.p

Tomei Michele - Wireframe OK
https://docs.google.com/presentation/d/1hasAMlct6kg6sk2PDakmynAca1o95aCay-iC1LX2-RE/edit?usp=sharing




Motteran Federica
https://docs.google.com/presentation/d/1vOf9iY8tDypDZ3NpVuVV_4ne0vjlnfxRrToIE6HfEfE/edit#slide=id.p

Valentina Parisini - Wireframe OK
https://docs.google.com/presentation/d/13-9fqK0mk2X09Jgdd6BbnVKUmjc3zj3JkoR0J_TlbQU/edit?usp=sharing

Scagliati Stefano - Wireframe OK

https://docs.google.com/presentation/d/1nHbCpbezVneLCkVURFmGMnoDVBtTlgDZhCjfJ0GW3X4/edit?usp=sharing

Selli Giulia - Wireframe OK
https://docs.google.com/presentation/d/1y-qRXmaeArMhTGCvuan54iXiXObSVtMcJCKNmMOgV8g/edit?usp=sharing

Carotti Martina - Wireframe OK
https://docs.google.com/presentation/d/1p5Z2dc0pKTW1HbjvdAipxxGTdRWSArhx0WGDMjdD2n8/edit?usp=sharing

Barbieri Gabriele - Programma!
https://docs.google.com/presentation/d/1JSNOZ8-5aB3JE3sWM8auc5m2oUus6Vc4BBlifyjkbwU/edit?usp=sharing

Roberto Neri
https://docs.google.com/presentation/d/1BEiw8LmPrHYqFKy0HW2-EMbP8WBOqBJCm0imMfm7ZwM/edit

Kostova Lora  - Wireframe OK

https://docs.google.com/presentation/d/1acjF0X6BJon1ZiUyA9omV2vMdL_fIupz14Lz1XuTDmE/edit#slide=id.p

Canovi Arianna   - Wireframe OK
https://docs.google.com/presentation/d/1pfH4USSd3iw9pWSUwgUBJKlegMqT4FoQU6lt1XGFHio/edit?usp=sharing

Baccigotti Lisa  - Programma!
https://docs.google.com/presentation/d/1TpI5a3TG_hSm8LhNY8grxrNnj7-sso-TYjm88zmTtnw/edit#slide=id.p 

Giorgi Sara
https://docs.google.com/presentation/d/1Y7PWy2kD-T8P3TwML8wzZE6WVt3IAnAZLYtdqeum2x0/edit?usp=sharing

Martini Jessica

https://docs.google.com/presentation/d/1XBSG3zVPL40HlJtvJrsQlt9IA6ulX4UVHObRDyYizBs/edit#slide=id.g267d5b27d_635

Luca Naldi
https://docs.google.com/presentation/d/1yezK21LuhALJhZHSdBlERiYcj1MoX_VewBN4rE3RUJI/edit#slide=id.p

Gargani Carola - Programma!
https://docs.google.com/presentation/d/1apawVLVxg6hNE2Q0ZFiFxPi8a9GStsQ-hV6tZ_w1wPU/edit?usp=sharing

Romano Francesco   - Wireframe OK

https://docs.google.com/presentation/d/1N4EdCJN7y3NFN1egf1J-fWIwrhZUhDtH_2-vJsdhdu8/edit?usp=sharing

Hristova Karolina - Wireframe OK

https://docs.google.com/presentation/d/1jNYRQr0QHpAFwR2YWZlgC5_86EnMBeu2JtVbzKH3Gmo/edit?usp=sharing

Micunco Michele
https://docs.google.com/presentation/d/1hsSzbEtd7aIZyfiMCG8QM1sIYkuWKJjR9XdIbVjwk6s/edit#slide=id.p

Sacchi Federica

https://docs.google.com/presentation/d/1AGUteQMfiVHfkDfMjOqIGnPioot53cT0J42PIEBtJ3I/edit?usp=sharing

Salvati Margrethe - Wireframe OK
https://docs.google.com/presentation/d/1q-WMGcJ-0ulp29YDDYqkzU1QkL3iUCYT04iS0n3Zeb8/edit?usp=sharing

Zola Giovanni - Wireframe OK
https://docs.google.com/presentation/d/1MAjIRQvl_Qbmau-n__EioNvbQ146SUen_Xvj-9E6Aqg/edit#slide=id.g267d2ed1c_032

Abbagnato Morena - Wireframe OK
https://docs.google.com/presentation/d/1He3I3w4s7mPjbR8T3tPalVZqitrBLCCivFZzGQa83bI/edit#slide=id.g2656c851a_080

Tosatti Federico - Wireframe OK
https://docs.google.com/presentation/d/1MVJgORRq_dTmTp06MXVlXBvdGmQHltmRqzByp45ZCeI/edit?usp=sharing

Di Mari Elisabetta
https://docs.google.com/presentation/d/1RGowlYzt7-2VakDFOVlca_KyDtc49crwqrhkUjGpmIU/edit#slide=id.p