Come illustrare un vettore, HD Media Player

In questo tutorial, ti mostrerò come creare il tuo lettore multimediale HD con un telecomando usando gli strumenti di Adobe Illustrator, quali: Strumento Rettangolo, Strumento Ellisse, gradienti e l'opzione 3D Estrusione e smusso.


Passo 1

Seleziona lo strumento Rettangolo (M), disegna un rettangolo con dimensione W = 187,5 px e H = 603 px, quindi gli angoli arrotondati con un raggio di 30 pixel. Subito dopo vai a Oggetto> Espandi Aspetto e riempi la forma con Sfumatura lineare e i colori: R = 24 G = 29 B = 38 a R = 25 G = 31 B = 43.


Passo 2

Copia la forma del passaggio 1 usando Comando + C seguito da Comando + F. Ora vai su Oggetto> Tracciato> Aggiungi punti di ancoraggio ed elimina i quattro punti chiave della forma con lo strumento Selezione diretta, come mostrato nella figura qui sotto. Raggruppa i quattro angoli rimasti e applica Colore tratto: 0,5 px a loro con colore bianco:


Passaggio 3

Con le forme del passaggio precedente che hai applicato Colore tratto su ancora selezionato, vai su Effetto> Sfocatura> Controllo sfocatura, quindi imposta il Raggio su 1,5 px e fai clic su OK.


Passaggio 4

Ora copia la forma dal Passo 1 usando Comando + C seguito da Comando + F. Muovi la copia su tutte le altre forme andando su Oggetto> Disponi> Porta in primo piano. Quindi seleziona le forme dal passaggio precedente a cui hai applicato Gaussian Blur, e la forma che hai spostato sulle altre, quindi vai su Oggetto> Maschera di ritaglio> Rendi.


Passaggio 5

Seleziona la forma dal passaggio 1, vai a Oggetto> Tracciato> Tracciato offset, imposta Offset su -2px, fai clic su OK e modifica il colore di riempimento su nero.


Passaggio 6

Con la forma del passaggio precedente che è apparso dopo aver applicato Offset è ancora selezionato, di nuovo vai su Oggetto> Tracciato> Offset Path. Applicare ora Offset: -2px, fare clic su OK e riempirlo con i colori del gradiente lineare R = 7 G = 9 B = 13 a R = 4 G = 5 B = 7.


Passaggio 7

Ripeti la stessa azione che hai fatto per gli angoli neri della forma dal passaggio 1, ma questa volta fai lo stesso con la forma del passaggio precedente.


Passaggio 8

Copia la forma del passaggio 6 usando Command + C seguito da Command + F, sposta la forma su tutti gli altri andando su Oggetto> Disponi> Porta in primo piano. Utilizzare lo strumento Penna (P) per creare una forma rispetto a quella precedente, quindi selezionare entrambe le forme, aprire il pannello Pathfinder e fare clic sul pulsante Meno anteriore. Riempi la nuova forma con un colore bianco e riduci l'opacità al 25%.

Nei prossimi passi aggiungeremo i pulsanti del telecomando.


Passaggio 9

Seleziona lo strumento Ellisse (L), disegna un cerchio al centro nella parte superiore delle forme precedenti e riempilo con un colore nero. Guarda la foto sotto:


Passaggio 10

Con la forma del passaggio precedente che hai riempito con un colore nero ancora selezionato, vai su Oggetto> Tracciato> Tracciato offset, imposta Offset su -2,5 px e fai clic su OK. Riempi la nuova forma con i colori del gradiente lineare che vanno dal grigio scuro al grigio chiaro come mostrato.


Passaggio 11

Con la forma che hai riempito con un gradiente lineare nel passaggio precedente ancora selezionato, vai nuovamente su Oggetto> Tracciato> Tracciato offset. Ora imposta l'offset su -1px e modifica i colori del gradiente da R = 35 G = 35 B = 35 a nero. Quindi raggruppa le forme del pulsante andando su Oggetto> Gruppo (Comando + G).


Passaggio 12

Copia il gruppo di pulsanti creato nel passaggio precedente utilizzando Comando + C seguito da Comando + F. Ora sposta la copia in posizione come mostrato nell'immagine sottostante e vai a Oggetto> Trasforma> Scala. Nella nuova finestra aperta impostare Scala uniforme su 85% e fare clic su OK.


Passaggio 13

Copia il pulsante del passaggio precedente 7 volte utilizzando Command + C seguito da Command + F. Ora sposta le copie in posizioni come mostrato.


Passaggio 14

Ora continueremo ad aggiungere il resto dei pulsanti allo stesso modo, come mostrato di seguito:

Aggiungi i seguenti pulsanti in posizione come mostrato di seguito:


Passaggio 15

Ora abbiamo lasciato per aggiungere solo un pulsante, che è l'ultimo. Seleziona lo strumento Ellisse (L), disegna un cerchio con la dimensione W = 138 px a H = 138 px, riempilo con il colore nero e posizionalo nella seguente posizione:


Passaggio 16

Con la forma del passaggio precedente ancora selezionato, vai su Oggetto> Tracciato> Tracciato offset, imposta l'Offset su -2,5 px e fai clic su OK. Ora riempire la nuova forma con un gradiente lineare con i colori R = 168 G = 165 B = 164 a R = 194 G = 190 B = 189.


Passaggio 17

Copia la forma del passaggio precedente utilizzando Comando + C seguito da Comando + F, elimina il punto chiave inferiore e sinistro della copia con lo Strumento selezione diretta (A), quindi disattiva il colore Riempimento. Ora applica un colore Stroke bianco con 1 pixel. Per farlo apri il pannello Traccia (comando + F10) e usa le seguenti impostazioni: Peso di 1px e Profilo di profilo larghezza.


Passaggio 18

Seleziona lo strumento Ellisse (L), disegna un altro cerchio al centro degli altri con la dimensione W = 80px e H = 80px con un colore nero.


Passaggio 19

Con la forma del passaggio precedente ancora selezionata, vai su Oggetto> Tracciato> Tracciato offset. Impostare l'offset su -2px e fare clic su OK. Spostare la nuova forma 1 px a sinistra e riempirla con un gradiente lineare utilizzando i colori: R = 15 G = 15 B = 15 a R = 71 G = 70 B = 73.


Passaggio 20

Con la forma che è apparso nel passaggio precedente selezionato, vai di nuovo su Oggetto> Tracciato> Offset Path. Impostare l'offset su -1px, fare clic su OK e riempire la nuova forma con un gradiente lineare utilizzando i colori: R = 35 G = 35 B = 35 a nero come mostrato.

Ora ti resta solo da aggiungere il testo necessario sui pulsanti. Puoi anche aggiungere il simbolo necessario dal pannello Simboli andando su Finestra> Simboli. Ora abbiamo finito con il telecomando del giocatore fino ad ora. Nei prossimi passi creeremo il lettore multimediale HD.


Passaggio 21

Seleziona lo strumento Rettangolo (M) e disegna un rettangolo della dimensione W = 672 px a H = 428 px. Ora vai su Effetto> Stilizzazione> Angoli arrotondati e imposta il Raggio su 100 px, quindi fai clic su OK.


Passaggio 22

Con il rettangolo a cui hai arrotondato gli angoli nel passaggio precedente ancora selezionato, vai su Effetto> 3D> Estrusione e smusso. Impostare i valori come mostrato nell'immagine sottostante, fare clic su OK e subito dopo andare su Oggetto> Espandi aspetto.


Passaggio 23

Seleziona lo Strumento selezione diretta (A), fai clic sulla parte superiore del player e riempilo con un colore nero come mostrato.


Passaggio 24

Ora seleziona la parte inferiore del lettore dal gruppo e apri il pannello Pathfinder. Fare clic sul pulsante Aggiungi a forma area e riempirlo con un gradiente lineare come mostrato.


Passaggio 25

Con la forma del passaggio precedente che hai riempito con un gradiente lineare selezionato, copialo usando Comando + C seguito da Comando + F e vai a Effetto> Galleria effetti> Artistico> Ordito di plastica. Ora nella nuova finestra aperta applica i valori mostrati nell'immagine sottostante. Fare clic su OK e modificare il metodo di fusione da Normale a Moltiplica.


Passaggio 26

Dopo aver applicato l'effetto Plastic Warp, noterai i pixel ai bordi della forma. Per rimuoverli, copia la forma usando Command + C seguito da Command + F. Ora apri il pannello Aspetto, rimuovi l'effetto Plastic Warp, quindi seleziona la forma con l'effetto Plastic Warp applicato e la forma in cima. Ora applica Oggetto> Maschera di ritaglio> Crea.


Passo 27

Seleziona la forma dal passaggio 24, copialo usando Command + C seguito da Command + F e spostalo sulle altre forme. Ora vai su Oggetto> Disponi> Porta in primo piano, quindi con lo Strumento selezione diretta (A) seleziona i punti in basso e premi Elimina sulla tastiera.


Passaggio 28

Con la forma visualizzata nel passaggio precedente ancora selezionata, disattiva il colore di riempimento e applica un tratto di 3 px con il colore: R = 206 G = 206 B = 206.


Passaggio 29

Seleziona la parte superiore del giocatore che hai riempito con un colore nero all'inizio, copialo usando Comando + C seguito da Comando + F. Usa lo strumento Penna (P) per creare una forma mostrata nell'immagine qui sotto, quindi seleziona la copia e la forma che hai appena creato. Ora apri il pannello Pathfinder, fai clic sul pulsante Minus Front e riempilo con un gradiente lineare come mostrato.


Passaggio 30

Seleziona lo strumento Rettangolo (M), disegna un rettangolo con le dimensioni e gli angoli arrotondati di 20 px come mostrato. Riempi la forma con un colore nero e invia la forma sotto tutti gli altri andando su Oggetto> Disponi> Invia a Indietro. Ora posiziona la forma in posizione come mostrato.


Passaggio 31

Seleziona lo strumento Penna (P), crea una forma al centro del lettore come mostrato nell'immagine sottostante, riempi il gradiente radiale come mostrato e applica Ombra esterna con i valori come mostrato di seguito:


Passo 32

Ora tutto quello che ti resta da fare è aggiungere il testo necessario al giocatore. Dopo aver scritto il testo necessario, vai su Effetto> 3D> Ruota. Impostare i valori come mostrato nella figura qui sotto e fare clic su OK.


Conclusione

E alla fine puoi aggiungere uno sfondo, un'ombra e un riflesso nel modo desiderato. Questo è il risultato finale: