- 2 Giugno 2008
- 2.374
- 0
- Miglior risposta
- 0
Creare un iPod con Photoshop
fonte-> HTML
iPod: un oggetto che non è più un lettore mp3, ma un "must" del design. Sia chiaro: non voglio fare assolutamente pubblicità ad Apple, anche perchè penso che non ne abbia bisogno
.
Ho visto diversi magazine che illustrano le caratteristiche di questo lettore, e non voglio nemmeno contare tutti i siti su cui appare ogni giorno. Proprio per questo ho deciso di fare un tutorial su come realizzarne uno graficamente con il nostro Photoshop. L'uso che poi vorrete farne dipende soltanto dalla vostra creatività.
Tutto il materiale necessario per lo svolgimento del tutorial è disponibile in
Passo per passo impareremo a realizzare un semplice modello di Ipod Video; avendo la base, ci potremmo poi sbizzarrire con le skin.
Nell'esempio qui sopra, ho realizzato due illustrazioni. Il primo modello è del tutto uguale a quello reale, il secondo (sulla destra) è stato ulteriormente personalizzato usando
Quando ho scaricato il filtro (totalmente gratuito), l'ho fatto solo per curiosità e dopo non l'ho mai più usato. Da quel momento, ho imparato che a volte anche lo strumento più inutile può ritrovarsi comodo in altre occasioni.
Qui trovate il lavoro ultimato nelle sue dimensioni reali. Ho voluto aggiungere anche il modello in nero.
La base dell'iPod
Apriamo Photoshop e creiamo un nuovo documento con queste misure: 470X500. Scegliamo lo strumento
Applichiamo uno smusso con
Il display
Ora che la base è pronta, occupiamoci del display. Scegliamo sempre un
Creaimo ora una selezione rettangolare come in
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
Ora disegniamo un piccolo rettangolo come in
Abbiamo appena realizzato il simbolo Play del display:
L'indicatore della batteria
Adesso realizzeremo l'indicatore del livello della batteria. Creiamo una selezione come in
Primo piano: #B0D499
Secondo piano: #167448
Tracciamo la sfumatura dall'altro verso il basso come da
La barra di avanzamento
Andiamo avanti con una selezione rettangolare
Adesso creiamo una
Primo piano: #1DA2DD
Secondo piano: #62C6ED
Primo piano: #C4C7CA
Secondo piano: #EAEDF2
Di seguito potete osservare il display con la barra di avanzamento completa.
Testo e copertina dell'album
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
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:
La ghiera cliccabbile
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
L'icona è comunque presente nello zip con i sorgenti. A questo punto il nostro iPod è finalmente pronto. Vediamolo:
Usiamo Camouflage per le skins
Come ho già accennato all'inizio dell'articolo,
Il suo uso è davvero facile ed intuitivo. Tra gli strumenti, potete trovare addirittura dei
In conclusione, per personalizzare l'illustrazione, si possono usare centinaia di metodi. Ad esempio provate con alcuni Brushes per rendere il lavoro ancora più originale, o intersecate delle forme personali, il risultato sarà sempre soddisfacente. Alla prossima!
fonte-> HTML
iPod: un oggetto che non è più un lettore mp3, ma un "must" del design. Sia chiaro: non voglio fare assolutamente pubblicità ad Apple, anche perchè penso che non ne abbia bisogno
.Ho visto diversi magazine che illustrano le caratteristiche di questo lettore, e non voglio nemmeno contare tutti i siti su cui appare ogni giorno. Proprio per questo ho deciso di fare un tutorial su come realizzarne uno graficamente con il nostro Photoshop. L'uso che poi vorrete farne dipende soltanto dalla vostra creatività.
Tutto il materiale necessario per lo svolgimento del tutorial è disponibile in
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Figura 1 - iPod realizzato con Photoshop
Passo per passo impareremo a realizzare un semplice modello di Ipod Video; avendo la base, ci potremmo poi sbizzarrire con le skin.
Nell'esempio qui sopra, ho realizzato due illustrazioni. Il primo modello è del tutto uguale a quello reale, il secondo (sulla destra) è stato ulteriormente personalizzato usando
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, un plug-in di Perfavore,
Entra
oppure
Registrati
per vedere i Link!
che crea diversi effetti: mimetiche militari, mantelli di fauna come zebbre, mucche e giraffe.Quando ho scaricato il filtro (totalmente gratuito), l'ho fatto solo per curiosità e dopo non l'ho mai più usato. Da quel momento, ho imparato che a volte anche lo strumento più inutile può ritrovarsi comodo in altre occasioni.
Qui trovate il lavoro ultimato nelle sue dimensioni reali. Ho voluto aggiungere anche il modello in nero.
La base dell'iPod
Apriamo Photoshop e creiamo un nuovo documento con queste misure: 470X500. Scegliamo lo strumento
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
e settiamo la Perfavore,
Entra
oppure
Registrati
per vedere i Link!
a 20px. Tracciamo una forma come da figura in basso:Figura 2 - Creazione di un rettangolo arrotondato
Applichiamo uno smusso con
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, e dopo una traccia con Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Il display
Ora che la base è pronta, occupiamoci del display. Scegliamo sempre un
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, 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 Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Di seguito potete osservare il risultato:Figura 3 - Creazione del display
Creaimo ora una selezione rettangolare come in
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, e sfumiamo con questi colori:Primo piano: #FFFFFF
Secondo piano: #CDDBE3
Ecco cosa abbiamo ottenuto:
Figura 4 - Applicazione della sfumatura
Adesso selezioniamo lo strumento Linea e come colore scegliamo il seguente: #97A7AF. Tracciamo una linea sotto la sfumatura appena creata.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Adesso selezioniamo lo
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, e all'interno della casella Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, inseriamo il valore 3.Ora disegniamo un piccolo rettangolo come in
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Quindi aggiungiamo un'Perfavore,
Entra
oppure
Registrati
per vedere i Link!
e una Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Abbiamo appena realizzato il simbolo Play del display:
Figura 5 - Pulsante Play sul display
L'indicatore della batteria
Adesso realizzeremo l'indicatore del livello della batteria. Creiamo una selezione come in
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Selezioniamo Sfumatura lineare e selezioniamo i seguenti colori:Primo piano: #B0D499
Secondo piano: #167448
Tracciamo la sfumatura dall'altro verso il basso come da
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Ed ecco realizzato l'indicatore del livello di batteria:Figura 6 - Indicatore della batteria
La barra di avanzamento
Andiamo avanti con una selezione rettangolare
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Dal menu Modifica > Traccia tracciamo la selezione con lo spessore di 1px e con questo colore: #C1CED4. In Perfavore,
Entra
oppure
Registrati
per vedere i Link!
potete osservare il risultato.Adesso creiamo una
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, e riempiamola con un'altra sfumatura lineare scegliendo questi altri colori:Primo piano: #1DA2DD
Secondo piano: #62C6ED
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. 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
Figura 7 - Barre di avanzamento
Di seguito potete osservare il display con la barra di avanzamento completa.
Figura 8 - Display con la barra di avanzamento
Testo e copertina dell'album
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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:
Figura 9 - Display completo
La ghiera cliccabbile
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:
Figura 10 - Tracciamento della selezione circolare
La seconda selezione circolare, ci servirà per realizzare il pulsante centrale della ghiera cliccabile. Stavolta riempiremo la selezione con il colore bianco:
Figura 11 - Selezione circolare interna
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
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, e settiamo 3 come numero dei lati come da Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. 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:Figura 12 - Disegno del pulsante Avanti
L'icona è comunque presente nello zip con i sorgenti. A questo punto il nostro iPod è finalmente pronto. Vediamolo:
Figura 13 - iPod completo
Usiamo Camouflage per le skins
Come ho già accennato all'inizio dell'articolo,
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
è un plug-in che usato con coerenza (come tutti i filtri) può regalare una simpatica skin all'illustrazione. Il suo uso è facilissimo. Dopo averlo Perfavore,
Entra
oppure
Registrati
per vedere i Link!
(link a file .exe) e installato, selezionate il Livello base dell'iPod tramite CTRL+Click. Adesso richiamate lo stesso plug-in dal menu Filtri.Il suo uso è davvero facile ed intuitivo. Tra gli strumenti, potete trovare addirittura dei
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
. Nell'esempio in basso ho usato l'effetto Cowskin:Figura 14 - iPod con skin
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
potete osservare i modelli citati precedentemente.In conclusione, per personalizzare l'illustrazione, si possono usare centinaia di metodi. Ad esempio provate con alcuni Brushes per rendere il lavoro ancora più originale, o intersecate delle forme personali, il risultato sarà sempre soddisfacente. Alla prossima!
Ultima modifica da un moderatore:
