Grafica ed interfacce per la comunicazione Scienze della Comunicazione

Transcript

1 Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 21: Progettazione di un interfaccia di una app lettore musicale in GIMP

2 Scopo di questa lezione Realizzazione di un interfaccia App per un lettore musicale attraverso l utilizzazione del software opensource GIMP Grafica ed interfacce per la comunicazione A.A. 2013/14 2

3 Cominciamo Creiamo una interfaccia per una app lettore musicale partendo da zero, in GIMP. Inizieremo creando uno sfondo astratto scuro per l'interfaccia, quindi aggiungeremo una serie di punti luminosi, creeremo una icona del CD lucida e una selezione di base dei controlli del lettore musicale. Grafica ed interfacce per la comunicazione A.A. 2013/14 3

4 Cosa impareremo e cosa ci serve Competenze che svilupperemo 1. Utilizzo di gruppi di livelli per organizzare e strutturare il lavoro in GIMP 2. L'applicazione di una serie di metodi di fusione dei livelli per creare diversi effetti di luce e ombra 3. Utilizzo di plugin esterni per filtrare gli elementi dell'immagine in modo rapido e semplice 4. Compositing gli elementi di un disegno realistico di una interfaccia app Risorse che serviranno 1. Scaricare e installare gli stili di livello (Layer Effects) per GIMP. 2. Scaricabile dall indirizzo: 3. Seguire le istruzioni sulla pagina per installare il pacchetto e aggiungerlo al menu di GIMP. Grafica ed interfacce per la comunicazione A.A. 2013/14 4

5 Fase 1 - Creare l'immagine di sfondo della app Aprite GIMP e creare un nuovo documento con Ctrl+N o File-> Nuovo. Nella casella delle opzioni, impostare la larghezza e l'altezza di questo nuovo documento a rispettivamente 1080 e 1920 pixel. Scegliete il colore di primo piano nero (se avete appena aperto GIMP sarà già impostato correttamente). Grafica ed interfacce per la comunicazione A.A. 2013/14 5

6 Fase 1 - Creare l'immagine di sfondo della app Individuare il pannello Livelli, o aprirlo con Ctrl+L, e aggiungere un nuovo livello sopra lo sfondo nero con l'icona Nuovo livello o Ctrl+Shift +N. Dare a questo livello un riempimento trasparente. Useremo diversi strati trasparenti in tutto il resto di questo tutorial. Grafica ed interfacce per la comunicazione A.A. 2013/14 6

7 Fase 1 - Creare l'immagine di sfondo della app Attivate lo strumento pennello con la chiave P e scegliere la punta in Opzioni strumenti nell'area della casella degli strumenti. Selezionate un pennello morbido (un pennello con 25% di Durezza) e regolare le dimensioni del pennello a pixel o giù di lì (enorme). Grafica ed interfacce per la comunicazione A.A. 2013/14 7

8 Fase 1 - Creare l'immagine di sfondo della app Impostare il colore di primo piano di un giallo brillante ( #f2ff14 ), e fare clic una o due volte sul nuovo livello per dipingere una grande macchia gialla su di esso. Grafica ed interfacce per la comunicazione A.A. 2013/14 8

9 Fase 1 - Creare l'immagine di sfondo della app Cambiare il colore di primo piano in un luminoso rosso, poi un luminoso viola, e ripetere il processo appena spiegato per aggiungere altre due macchie su questo livello. Usare una dimensione diversa del pennello ogni volta in modo da mescolare un po le cose. dimensioni di pixel e1.400 pixel, potrebbero andare bene. Grafica ed interfacce per la comunicazione A.A. 2013/14 9

10 Fase 1 - Creare l'immagine di sfondo della app Tornate ora sul pannello dei livelli e riducete l'opacità di questo livello di circa il 10% usando il cursore o inserendo manualmente il valore nella casella (al 90%). Potrebbe sembrare inutile aver fatto tutto questo e poi farlo «scomparire», ma risulterà tutto più chiaro tra breve. Grafica ed interfacce per la comunicazione A.A. 2013/14 10

11 Fase 1 - Creare l'immagine di sfondo della app 1. Aggiungere un altro layer trasparente sopra al precedente, quindi premere D per azzerare i colori di GIMP di primo piano e sfondo e riportarli a bianco e nero, rispettivamente. 2. Riempire questo livello con il nero usando Ctrl+e o Modifica -> Riempi con il colore e cambia il metodo di fusione (con i livelli sottostanti) a Brucia (Dodge) nella casella a discesa. Grafica ed interfacce per la comunicazione A.A. 2013/14 11

12 Fase 1 - Creare l'immagine di sfondo della app La «magia» appare quando si dipingono alcuni punti bianchi su questo livello. Impostare il colore di primo piano a bianco manualmente, oppure premiamo X per ruotare la posizione dei due colori. Con lo strumento Pennello, nel pannello delle opzioni, impostare la dimensione del pennello a 100 pixel e utilizzare un pennello di durezza 50%. Spuntate la casella di opzione «Tremolio» (Jitter) e impostate il valore su 10. Grafica ed interfacce per la comunicazione A.A. 2013/14 12

13 Fase 1 - Creare l'immagine di sfondo della app Utilizzando il comando «Tremolio» selezionato precedentemente create una serie di punti bianchi pennellando velocemente. Utilizzate tratti brevi altrimenti avrete troppi punti luminosi. Questo è il livello in modalità di fusione normale, in modo da poter vedere cosa sta succedendo. Grafica ed interfacce per la comunicazione A.A. 2013/14 13

14 Fase 1 - Creare l'immagine di sfondo della app Ed ecco invece come appare con il metodo di fusione selezionato su Brucia. Il metodo di fusione Brucia aumenta la luminosità del livello sottostante, basandosi sul contrasto nero / bianco. Grafica ed interfacce per la comunicazione A.A. 2013/14 14

15 Fase 1 - Creare l'immagine di sfondo della app Questo sta per diventare il nostro background, quindi abbassiamo l'opacità del livello fino a circa il 50%. Poi aggiungiamo un altro livello sopra questo e ripetiamo l'ultimo passaggio con un pennello più grande (tipo 150 pixel), abbassando l'opacità di questo livello al 50% in seguito. Grafica ed interfacce per la comunicazione A.A. 2013/14 15

16 Fase 2 - Creare l'icona principale della app Create un nuovo livello trasparente in alto e chiamatelo base del disco o qualcosa del genere. Per avere un risultato affidabile e preciso utilizzare una griglia. Rendere la griglia visibile barrando Visualizza-> Mostra griglia e fare in modo che oggetti del disegno siano agganciati alla griglia utilizzando il comando Visualizza -> Griglia magnetica. Per vedere la griglia chiaramente sul nostro sfondo scuro impostare Immagine-> Configura griglia come nell immagine accanto. Quello che è cambiato è il colore della griglia impostato ad un grigio chiaro in modo che sia visibile Impostiamo uno spazio tra ogni griglia di 10 pixel. Grafica ed interfacce per la comunicazione A.A. 2013/14 16

17 Fase 2 - Creare l'icona principale della app Attivare lo strumento Ellisse con la chiave E e usarlo per disegnare un cerchio al centro del layer. I bordi del cerchio si agganceranno alla griglia in maniera automatica il centro dovrà essere posizionato nel punto 110,400 e dimensione 860x860. Potete vedere le sue dimensioni nella barra degli strumenti in basso nella finestra. Trascinatela fino ad ottenere un'area di selezione che è 860 pixel di diametro, quindi rilasciare il pulsante del mouse. Assicuratevi che sia posizionato nel centro del layer, lo si può fare tranquillamente anche trascinandolo dopo averlo fatto. Grafica ed interfacce per la comunicazione A.A. 2013/14 17

18 Fase 2 - Creare l'icona principale della app E utile spegnere la griglia per la parte successiva, altrimenti non saremo in grado di vedere quello che stiamo facendo, quindi fare clic su Visualizza->Mostra griglia di nuovo per nasconderla. Ricordate però che abbiamo ancora lo snap sulla griglia attivato. Impostate il colore di primo piano #a4a4a4 e lo sfondo a #d2d2d2; due diverse tonalità di grigio. Attivare lo strumento Sfumatura con la chiave L e usate il suo pannello delle opzioni per impostare una forma Bi-lineare - questo produrrà una miscela a due vie che ha il colore di primo piano al centro, e dissolverà verso il colore di sfondo in ogni direzione. Fare clic e trascinare una linea sfumata su tutta l'area del cerchio come mostrato nella figura. Grafica ed interfacce per la comunicazione A.A. 2013/14 18

19 Fase 2 - Creare l'icona principale della app Tenendo presente che avete ancora la selezione attiva, andare su Seleziona -> Riduci nel menu e immettere un valore di 280pixel. Selezionare Modifica-> cancella per cancellare questa selezione del CD. Grafica ed interfacce per la comunicazione A.A. 2013/14 19

20 Fase 2 - Creare l'icona principale della app Mantenendo questa selezione sempre attiva, create un nuovo livello chiamato CD interno in alto sopra i layer esistenti, e riempite la selezione con il colore di primo piano #a4a4a4, utilizzando un qualunque metodo per farlo. Grafica ed interfacce per la comunicazione A.A. 2013/14 20

21 Fase 2 - Creare l'icona principale della app Restringere la selezione di altri 45 pixel, quindi cancellate l interno Modifica-> cancella, ora disattivate la selezione con Ctrl, Shift e A o Seleziona -> Niente dal menu. Infine, riducete l'opacità di questo livello al 30% dal pannello Livelli e date un'occhiata ai progressi effettuati finora. Grafica ed interfacce per la comunicazione A.A. 2013/14 21

22 Fase 3 aggiungere gli effetti al CD Anche se sembra già molto bello, stiamo progettando un'interfaccia di una app di qui l'icona centrale è una caratteristica fondamentale, quindi passeremo ancora del tempo per farla sembrare eccezionale. Aggiungeremo qualche dettaglio in più, come i riflessi di luce colorata che si ottengono dalla parte lucida di un CD. Guardate il pannello Livelli. Tenete premuto il tasto Alt e fate clic sulla miniatura del livello base del Disco per creare una selezione solo delle parti che si trovano su questo livello. Grafica ed interfacce per la comunicazione A.A. 2013/14 22

23 Fase 3 aggiungere gli effetti al CD Con il livello base del Disco selezionato, aggiungere un nuovo livello denominato Scanalature ed inserirlo sopra la base del disco, ma sotto il CD interno. Grafica ed interfacce per la comunicazione A.A. 2013/14 23

24 Fase 3 aggiungere gli effetti al CD Riempite la selezione con il nero puro (#000000). Quindi fate clic su Livello -> Ritaglia a selezione per ritagliare il contorno del circolo. Vedrete il contorno tratteggiato nero e giallo che circonda la forma ad anello quando ciò è avvenuto. C'è un motivo specifico per farlo, come scopriremo più avanti. Grafica ed interfacce per la comunicazione A.A. 2013/14 24

25 Fase 3 aggiungere gli effetti al CD Aggiungete delle macchioline bianche a questo strato circolare nero con il filtro Filtri -> Disturbo - > Disturbo HSV, impostando la saturazione a 85, e il valore a175. È possibile lasciare il valore di tenuta e tonalità come sono, rispettivamente a 2 e 3. Grafica ed interfacce per la comunicazione A.A. 2013/14 25

26 Fase 3 aggiungere gli effetti al CD Tornate al menu Filtri, selezionate Filtri -> Sfocatura -> Movimento, e selezionate il pulsante Radiale nelle opzioni visualizzate. Poiché abbiamo ritagliato il livello ai limiti del perimetro dell anello, questa sfocatura radiale si svolgerà attorno al centro del livello (vengono calcolate automaticamente in base alla selezione), che è anche il centro del nostro anello. Grafica ed interfacce per la comunicazione A.A. 2013/14 26

27 Fase 3 aggiungere gli effetti al CD Cambiate il metodo di fusione di questo livello in Somma, e abbassate l'opacità a circa il 70%. Questo ci dà un effetto che sembra quello dei solchi nel CD sulla sua superficie. Grafica ed interfacce per la comunicazione A.A. 2013/14 27

28 Fase 3 aggiungere gli effetti al CD Tenendo premuto il tasto Alt, facciamo clic sulla miniatura del livello base del disco in modo da effettuare una selezione (se non lo è già). Aggiungete un nuovo livello chiamato Rosso e attivate lo strumento Sfumatura ancora una volta. Impostate il colore di primo piano #d50808 e selezionare il gradiente da pp a Transparente. Poi tirare alcune brevi righe Bi-lineari all'interno dell'area selezionata. Grafica ed interfacce per la comunicazione A.A. 2013/14 28

29 Fase 3 aggiungere gli effetti al CD Trucco: cercate di far passare ogni sfumatura attraverso o quasi il centro del CD per avere un risultato più efficace. Cambiate il metodo di fusione di questo livello in Sovrapponi, per vederne l'effetto finale. Grafica ed interfacce per la comunicazione A.A. 2013/14 29

30 Fase 3 aggiungere gli effetti al CD Ripetere questo processo, questa volta usando un colore di riempimento di primo piano #00cafd - blu brillante. Abbassate l'opacità di questo livello se l'impatto sovrapposizione del blu sull immagine è troppo forte. Grafica ed interfacce per la comunicazione A.A. 2013/14 30

31 Fase 3 aggiungere gli effetti al CD Ripetetelo ancora una volta con un colore di primo piano come il #25d93e - verde. Grafica ed interfacce per la comunicazione A.A. 2013/14 31

32 Fase 3 aggiungere gli effetti al CD Infine, facciamo uso del plug-in stili di livello che abbiamo scaricato e installato all'inizio di questo tutorial per aggiungere un'ultima raffinatezza. Selezionate il livello disco di base, e scegliere Script-Fu ->Layer effets->stroke dal menu. Impostate il colore su bianco, opacità al 30%, Blending Mode su Normal, Size da 10 e posizione a 100 (fuori forma). Assicurarsi che «Merge with layer» sia deselezionata e fate clic su OK per eseguire lo script sul livello del disco. Grafica ed interfacce per la comunicazione A.A. 2013/14 32

33 Fase 3 aggiungere gli effetti al CD Questo dovrebbe dare un contorno traslucido alla forma del disco principale, il tutto creato su un nuovo livello sottostante. Grafica ed interfacce per la comunicazione A.A. 2013/14 33

34 Fase 3 aggiungere gli effetti al CD Lo script ci ha dato un bel contorno lucido senza dover fare tutto il lavoro per creare selezioni complesse una per una. Selezionate il livello CD interno ed eseguire lo Stroke con il nuovo plug-in, ma questa volta impostare l'opacità al 30%, Size da 2 e Position a 0 (interno), per dare un colpo all'interno all area centrale del CD. Grafica ed interfacce per la comunicazione A.A. 2013/14 34

35 Fase 3 aggiungere gli effetti al CD Infine, selezionare il livello base del Disco ancora una volta, e fate clic su Filtri->Luce e Ombra->Drop Shadow. Impostate gli offset X e Y a 0. Inserite un Raggio di sfocatura (Blur radius) di 80 e selezionate un colore di riempimento bianco. Impostate un valore di opacità per lo strato ombra del 70%. Deselezionare Consenti ridimensionamento se è spuntato prima di iniziare e fate clic su OK. Grafica ed interfacce per la comunicazione A.A. 2013/14 35

36 Fase 4 Aggiungere gli elementi dell'interfaccia utente Ora passiamo alla progettazione di controlli della nostra app. Fare clic sul livello più alto del progetto GIMP per attivarlo (probabilmente CD interno).create un nuovo gruppo di layer cliccando sull'icona della cartella nella parte inferiore del pannello Livelli. Vedrete una miniatura di una cartella che apparirà in cima ai livelli preesistenti. Assegnategli il nome «Bottone play» Grafica ed interfacce per la comunicazione A.A. 2013/14 36

37 Fase 4 Aggiungere gli elementi dell'interfaccia utente Non si può disegnare nulla su un gruppo di layer che è solo un contenitore che può contenere altri livelli al suo interno. Con il gruppo di layer selezionato creare un nuovo livello, che apparirà come un sublivello del gruppo. Chiamatelo «Bordo del Bottone Play» Grafica ed interfacce per la comunicazione A.A. 2013/14 37

38 Fase 4 Aggiungere gli elementi dell'interfaccia utente Disegniamo il pulsante Play per primo. Faremo un bordo pulsante per definire i suoi confini, quindi aggiungeremo il simbolo. Come vedrete, si tratta di un modo piuttosto efficace di lavorare quando si tratta di progettare un set completo di controlli. Partiamo dallo strumento Rettangolo (tasto della tastiera R), fate clic e trascinate un'area di selezione rettangolare di 152 pixel di larghezza per 110 pixel di altezza, nella posizione 464 e 1400 Grafica ed interfacce per la comunicazione A.A. 2013/14 38

39 Fase 4 Aggiungere gli elementi dell'interfaccia utente Ora diamo al nostro pulsante bordi arrotondati. Andate a Seleziona -> Rettangolo arrotondato (rounded Rectangle) e immettere un raggio di 40%. Tenete deselezionato concavo e fate clic su OK Grafica ed interfacce per la comunicazione A.A. 2013/14 39

40 Fase 4 Aggiungere gli elementi Ora, ci sono vari modi di eseguire il passo successivo, ma quello che penso dia il risultato più pulito è quello di Riempire la selezione con il bianco, quindi fate clic su Seleziona -> Riduci, inserendo un valore di 3 pixel, prima di premere il tasto Delete per cancellare l'area interna. Premere Ctrl+Shift +A per deselezionare tutto (opzione di menu è Seleziona -> Niente). dell'interfaccia utente Grafica ed interfacce per la comunicazione A.A. 2013/14 40

41 Fase 4 Aggiungere gli elementi dell'interfaccia utente Tornare al pannello Livelli e aggiungete un altro nuovo livello, su cui disegneremo il simbolo del pulsante. Selezionate il gruppo di layer, poi aggiungere un nuovo livello Simbolo Play che andrà automaticamente all'interno del gruppo, sopra il primo. Grafica ed interfacce per la comunicazione A.A. 2013/14 41

42 Fase 4 Aggiungere gli elementi dell'interfaccia utente Selezionate lo strumento di selezione libera (F) e, utilizzando la funzione di aiuto della griglia magnetica, cliccate sui tre angoli di un triangolo con la punta a destra per il simbolo Play. Con lo Griglia magnetica acceso, sarà molto più facile controllare le dimensioni e la rettilineità dei bordi. Anche in questo caso, non dobbiamo essere troppo preoccupati per il posizionamento, si può sempre spostare il livello più tardi. Grafica ed interfacce per la comunicazione A.A. 2013/14 42

43 Fase 4 Aggiungere gli elementi dell'interfaccia utente Riempire il triangolo con il bianco come prima, e deselezionare la regione in modo da poter controllare il risultato. Grafica ed interfacce per la comunicazione A.A. 2013/14 43

44 Fase 4 Aggiungere gli elementi Ora è il momento di apportare eventuali modifiche al posizionamento della cornice del pulsante e del simbolo, per ottenere tutto l allineamento di cui si ha bisogno. Attivate lo strumento spostamento (M sulla tastiera), quindi attivate il pulsante movimento del livello attivo. Selezionate il livello che ha bisogno di muoversi nel pannello Livelli e semplicemente trascinate fino a quando non avete l allineamento desiderato. dell'interfaccia utente Grafica ed interfacce per la comunicazione A.A. 2013/14 44

45 Fase 4 Aggiungere gli elementi dell'interfaccia utente Fate clic sul gruppo di layer del pulsante Play. Selezionate Livello -> Autoritaglio layer Questo ritaglierà entrambi i layer figlio solamente nelle zone dove ci sono pixel e ci permetterà di spostare la coppia di forme facilmente con lo strumento spostamento. Grafica ed interfacce per la comunicazione A.A. 2013/14 45

46 Fase 4 Aggiungere gli elementi Duplicate questo gruppo di livelli e rinominatelo in modo da utilizzarlo per creare il pulsante successivo. In questo modo tutti i pulsanti saranno della stessa dimensione. Agganciate i livelli che compongono il gruppo in modo da raggrupparli. Spostate questo nuovo gruppo di livelli accanto al pulsante Play. Tenete premuto il tasto Ctrl mentre trascinate, per limitare il movimento ad un asse alla volta, in maniera da mantenere tutto ben allineato. dell'interfaccia utente Grafica ed interfacce per la comunicazione A.A. 2013/14 46

47 Fase 4 Aggiungere gli elementi Trovate e rinominare il livello con il simbolo del pulsante duplicato. Cancellare prima con il tasto Canc, quindi disegnate un quadrato di pixel 60 x 60 all'interno del bordo esterno del livello e riempitelo con il bianco. Anche in questo caso, utilizzare lo strumento spostamento per riposizionarlo dopo averlo disegnato. Ricordate che con il movimento attivato, è possibile utilizzare le frecce della tastiera per spostare il livello di circa un pixel alla volta. dell'interfaccia utente Grafica ed interfacce per la comunicazione A.A. 2013/14 47

48 Fase 4 Aggiungere gli elementi dell'interfaccia utente Facciamo di questo pulsante Interrompi appena disegnato un esempio di pulsante di unpressed nel nostro prototipo di app. Basta riattivare il livello capogruppo e abbassare l' opacità a circa il 20%. Grafica ed interfacce per la comunicazione A.A. 2013/14 48

49 Fase 4 Aggiungere gli elementi Ripetere il processo di duplicazione dei gruppi di layer e modificare i livelli del simbolo al loro interno per creare un set completo di pulsanti di interfaccia. Seguite le istruzioni in figura. Troverete che è possibile riutilizzare forme esistenti copiando i livelli, quindi trascinare le copie in nuovi gruppi di layer per risparmiare tempo. dell'interfaccia utente Grafica ed interfacce per la comunicazione A.A. 2013/14 49

50 Fase 4 Aggiungere gli elementi dell'interfaccia utente Tutto questo lavoro dovrebbe portare ad un risultato simile a quello mostrato in figura. Grafica ed interfacce per la comunicazione A.A. 2013/14 50

51 Fase 5 Aggiungere tracce alla progettazione E 'importante tenere tutto il nostro lavoro ben organizzato, prima abbiamo creato un gruppo di layer. Ora, se l'elemento in alto è esso stesso un gruppo di livelli, quando aggiungeremo un altro gruppo questo verrà inserito entro quello corrente. Questo non è quello che vogliamo, quindi fate clic su un livello al di fuori del gruppo, oppure trascinate il nuovo gruppo di livelli fino alla cima dove volete che esso sia. Grafica ed interfacce per la comunicazione A.A. 2013/14 51

52 Fase 5 Aggiungere tracce alla progettazione Aggiungete un nuovo livello trasparente all interno di questo nuovo gruppo, su cui disegneremo una barra di avanzamento canzone. Grafica ed interfacce per la comunicazione A.A. 2013/14 52

53 Fase 5 Aggiungere tracce alla progettazione Attivate lo strumento Rettangolo e disegnate una forma di 800 pixel di larghezza per 40 pixel di altezza. Arrotondate i bordi con lo stesso comando utilizzato precedentemente facendone un rettangolo arrotondato con il 40% di arrotondamento, e riempitelo con il bianco. Utilizzate le maniglie per ridimensionare e modificare la forma fino a che non si adatterà perfettamente sopra i controlli, sotto il CD e centrata orizzontalmente. Grafica ed interfacce per la comunicazione A.A. 2013/14 53

54 Fase 5 Aggiungere tracce alla progettazione Utilizzate il comando Seleziona-> Riduci con selezione di 3 pixel e Elimina sulla zona centrale della barra. Grafica ed interfacce per la comunicazione A.A. 2013/14 54

55 Fase 5 Aggiungere tracce alla progettazione Utilizzate il comando Riduci con selezione di altri 5 pixel e riempite l'area interna con il bianco per creare una barra di avanzamento piena. Grafica ed interfacce per la comunicazione A.A. 2013/14 55

56 Fase 5 Aggiungere tracce alla progettazione Mantenendo la selezione attiva, fate clic una volta su di essa, mentre lo strumento rettangolo è attivo. Questo riattiverà i quadratini di ridimensionamento agli angoli e, soprattutto, al centro di ciascun bordo della selezione. Passante il mouse sopra la maniglia centrale del lato sinistro, quindi fate clic e trascinate verso destra. Quando arrivate a circa i due terzi della distanza dall'altra parte, premere la chiave Delete e deselezionare tutto così possiamo vedere come la nostra barra di avanzamento apparirà quando un brano è in riproduzione. Spostate la barra per posizionarla correttamente se è ancora un po fuori centro. Grafica ed interfacce per la comunicazione A.A. 2013/14 56

57 Fase 5 Aggiungere tracce alla progettazione Ora aggiungiamo i marcatori di tempo. Soono numeri che indicano quanto tempo è durata la riproduzione del brano corrente(che colocherete a sinistra), e quanto tempo c è ancora da ascoltare (a destra). Attivate l utensile testo con la chiave T, quindi la collocate sul lato sinistro della barra di avanzamento per immettere il testo per il prototipo. Questo andrà su un nuovo livello nel gruppo di livelli corrente. Scegliete una font in linea con lo stile dell app lettore musicale e assicuratevi che sia di colore bianco utilizzando la casella di riempimento nello strumento di editing. Grafica ed interfacce per la comunicazione A.A. 2013/14 57

58 Fase 5 Aggiungere tracce alla progettazione Ripetete l operazione sul lato destro per aggiungere il testo 'tempo rimanente', utilizzando lo stesso tipo di carattere, dimensione e colore. Grafica ed interfacce per la comunicazione A.A. 2013/14 58

59 Fase 5 Aggiungere tracce alla progettazione Infine, aggiungete le informazioni sulla pista e le informazioni dell album nella parte superiore dell app. Fate clic e trascinate un'area di testo di dimensioni coerenti, quindi fate clic sul pulsante testo al centro nel pannello Opzioni strumento per centrare entrambe le righe di testo. Grafica ed interfacce per la comunicazione A.A. 2013/14 59

60 Fase 5 Aggiungere tracce alla progettazione Ecco come dovrebbe venire il lavoro finito. Grafica ed interfacce per la comunicazione A.A. 2013/14 60

61 Fase 5 Aggiungere tracce alla progettazione Modificando anche solo il livello dello sfondo possiamo provare varie possibilità creative. Grafica ed interfacce per la comunicazione A.A. 2013/14 61