Questo tutorial è molto bello ed anche molto semplice. Con esso vedremo come creare un i-pod tutto personalizzato.

Tutto il materiale necessario per lo svolgimento del tutorial è disponibile in questo zip.

Apriamo Photoshop e creiamo un nuovo documento con queste misure: 470X500. Scegliamo lo strumento rettangolo arrotondato e settiamo la sfumatura a 20px. Tracciamo una forma come da figura in basso:


Applichiamo uno smusso e dopo una traccia


Ora che la base è pronta, occupiamoci del display. Scegliamo sempre un rettangolo arrotondato, ma questa volta abbassiamo il valore dell'angolo fino a 5px. Come colore di sfondo, scegliamo il seguente: #F3F7FB. Chiamiamo il livello appena creato ' cornice' e applichiamo una traccia con queste impostazioni. Di seguito potete osservare il risultato:


Creaimo ora una selezione rettangolare , e sfumiamo con questi colori:

Primo piano: #FFFFFF
Secondo piano: #CDDBE3
Ecco cosa abbiamo ottenuto:


Adesso selezioniamo lo strumento Linea e come colore scegliamo il seguente: #97A7AF. Tracciamo una linea sotto la sfumatura appena creata.

Adesso selezioniamo lo strumento Poligono, e all'interno della casella Lati, inseriamo il valore 3.

Ora disegniamo un piccolo triangolo. Quindi aggiungiamo un'ombra esterna e una sovrapposizione colore.

Abbiamo appena realizzato il simbolo Play del display:


Adesso realizzeremo l'indicatore del livello della batteria. Creiamo una selezione cosi Selezioniamo Sfumatura lineare e selezioniamo i seguenti colori:

Primo piano: #B0D499
Secondo piano: #167448
Tracciamo la sfumatura dall'altro verso il basso come da immagine. Ed ecco realizzato l'indicatore del livello di batteria:


Andiamo avanti con una selezione rettangolare


Dal menu Modifica > Traccia tracciamo la selezione con lo spessore di 1px e con questo colore: #C1CED4.

Adesso creiamo una nuova selezione , e riempiamola con un'altra sfumatura lineare scegliendo questi altri colori:

Primo piano: #1DA2DD
Secondo piano: #62C6ED
Ecco il risultato
Servono ancora due selezioni e una sfumatura. Penso che adesso sarete in grado di realizzarne due davvero semplici. Ecco i colori per queste altre selezioni:

Primo piano: #C4C7CA
Secondo piano: #EAEDF2

Ecco una barra di avanzamento completa:


Per il testo del display, ho usato un Franklin Gothic Demi, ma andrà benissimo anche qualsiasi altro Serif. La copertina dell'album l'ho scaricata da un Cd Covers dove troverete praticamente di tutto.

Ho aggiunto al display, oltre alla copertina, la dicitura "Now Playing", il numero della traccia, il titolo dell'album, gli indicatori del tempo trascorso/restante. Vediamo il risutlato del display completo:


Realizzare il jog dell'iPod, ovvero la famosa ghiera del lettore, è tra le cose più semplici. Partiamo subito con il creare una selezione circolare e riempiamola con il colore di primo piano #ECF0F3. Vediamo il risultato:


La seconda selezione circolare, ci servirà per realizzare il pulsante centrale della ghiera cliccabile. Stavolta riempiremo la selezione con il colore bianco:



Adesso creiamo un'icona in maniera dimostrativa, dopo sarà sicuramente facile realizzare le altre. In questo caso ho preferito scegliere il simbolo Avanti (Forward).

Scegliamo lo strumento Poligono, e settiamo 3 come numero dei lati Adesso tracciamo un triangolo e duplichiamolo. Dopo, accanto a i due triangoli appena creati, affianchiamo una selezione rettangolare. Riempiamo di bianco ed ecco il risultato:


L'icona è comunque presente nello zip con i sorgenti. A questo punto il nostro iPod è finalmente pronto. Vediamolo:

Citazione:Ringrazio sciax2 e html per la fornitura delle immagini e dello zip

 

GraficHEGGIare non è un hobby, ma uno stile di vita!

Grazie Miste, ottimo tutorial!

 

Tutti possono avere un iPod così

 

Ottimo Miste