martedì 19 dicembre 2017

Creare il VISUAL partendo dal WIREFRAME

Creo lo spazio

1 -  Aprire il programma di grafica 

2 -  nuovo file → 1000 x 1500 px 
(l'altezza è libera, in base a quanto dobbiamo inserire) 72 dpi

Lo sfondo

Se scelgo un colore tinta unita:

1 - seleziono il livello sfondo

2 - prendo il secchiello

3 - seleziono il colore

4 - faccio un clic sullo sfondo

Se scelgo un'immagine:

1 -  seleziono un'immagine MOLTO grande, larga almeno 1000 px e possibilmente verticale (evitare di stiracciarle)

2 - se la cerco su google immagini prima la devo visualizzare → poi la salvo

3 - posso inserirla direttamente sullo sfondo (me la mette su un altro livello)

4 - con lo strumento scala posso modificarla per trovare il taglio che si attaglia meglio

Inserire elementi grafici

Le immagini .png o .gif tengono la trasparenza.

1 - copia immagine → incolla come nuovo livello

2 - per ridimensionarla uso lo strumento scala applicato al livello

Oppure la modifico prima di inserirla.

Tenere sempre le immagini grandi salvate su PC, perché una volta rimpicciolite perdono di qualità e non possono più essere ingrandite.

ATTENZIONE! nominare sempre gli elementi in maniera pertinente, ed organizzarli in gruppi di livelli (cartelle).

Inserire elementi testuali

1 - selezionare lo strumento testo

2 - clicco sullo sfondo e inserisco il testo, il colore viene selezionato dal quadrato in primo piano

3 - usare lo strumento sposta,posizionarlo bene sul testo, altrimenti sposteremo lo sfondo

Il testo può essere sia inserito con un clic, sia disegnando un quadrato con lo strumento testo (ciò è più pratico con i testi lunghi).

Social Icon

1 - le cerco su google immagini

2 - le apro con gimp

3 - seleziono le parti che mi servono e le porto nel mio file

Disegni, linee, tratti

1 - strumento matita o pennello

molto utile anche lo strumento contagocce, dà la possibilità di selezionare un colore che è già nelle immagini

Per non perdersi tra i colori è utile utilizzare una palette, aiuta a definire l'identità visiva del sito.





venerdì 15 dicembre 2017

Come scaricare immagini dal WEB


  1. Aprire Google immagini
  2. Visualizzare le dimensioni della foto scelta in pixel (solitamente basta cliccarci sopra, viceversa guardare le proprietà) → ATTENZIONE: devo tenere conto delle dimensioni della grandezza dello schermo! Di solito attorno ai 1000px
  3. [Se scattiamo una foto con il telefono la risoluzione sarà molto alta, se invece ingrandisco una foto piccola di base poi sgrana]
  4. ⟹Fondamentale quindi sapere le dimensioni della foto da manipolare⟸
  5. Scegliere la foto dal web e aprirla dentro il browser per avere l'originale della stessa (se no rimane minuscola)
  6. Salvare con nome l'immagine 
  7. ! Questo è il procedimento di salvataggio per mantenere una certa qualità !
  8. Dal file salvato, tasto destro e cliccare "Modifica con GIMP"
  9. Menu GIMP cliccare "Immagine"
  10. "Scala immagine" e inserire nella tabella le dimensioni che servono (icona "catena" sempre accesa!) (mantenere la risoluzione a 72px)

venerdì 8 dicembre 2017

Gimp Tutorial

Ciao,

per facilitare il lavoro sulla parte grafica condivido una lista ragionata di tutorial di gimp

Scompaiono le finestre?
Ecco un tutorial ad hoc: https://www.youtube.com/watch?v=7THe93juVWs

In difficoltà con i testi?
Ecco tutti i trucchi: https://www.youtube.com/watch?v=M1jFaMwx8U4

Qualche idea per la header del sito?
Ecco una possibilità: https://www.youtube.com/watch?v=j98eiNAubOQ

Come impostare il layout complessivo di una pagina?
Potete prendere spunti qui: https://www.youtube.com/watch?v=DrkqEcz5ky0

Voglio sapere tutto?
Ecco una lista di 23 video dedicati: https://www.youtube.com/watch?v=EIEDzlXPV4s&list=PLOmznSrYTTM4Nnb8pgEFf6SvmkwxB4eE2

Voglio ribadire che per imparare le basi del design grafico è necessaria TANTA pratica. Il che vuol dire che dovete mettervi tutti nell'ordine di idee di scaricarvi il programma (o venire nel lab del dipartimento) e dedicare TANTE ore a: fare delle prove, leggere la guida, guardare dei tutorial. Il mio ruolo è essenzialmente di rompighiaccio, per farvi superare il momento di panico iniziale. Ora sta a voi metterci del vostro e vedere fino a dove riuscite ad arrivare!

Vi invito a trovare e replicare tutorial: quando l'avete fatto postateli come commento a questo post.