Share
Cosa starai creandoNel tutorial di oggi, ci divertiremo e creeremo il nostro Boombox utilizzando alcuni degli strumenti e delle forme di base di Illustrator.
Quindi, se sei un vero giocatore, indossa il cappello da festa dato che le cose stanno per essere bloccate.
Inoltre, se decidi di voler espandere il progetto, puoi sempre trovare l'ispirazione dando un'occhiata veloce a Envato Market, dove puoi trovare le illustrazioni più dure pronte per la presa.
Detto questo, apriamo Illustrator e facciamo partire la festa.
Come sempre, la prima cosa che faremo è creare un nuovo documento personalizzato (File> Nuovo o Control-N), che verrà impostato utilizzando le seguenti impostazioni:
E dal Avanzate tab:
Consiglio rapido: la maggior parte delle impostazioni indicate può essere attivata impostando il documento Profilo a web; l'unico che non verrà impostato automaticamente è il Taglia, che dovrai selezionare manualmente.
Una volta creato il nostro documento, ora possiamo preparare il nostro progetto creando una serie di livelli individuali per separare le diverse sezioni della nostra illustrazione.
Quindi, supponendo che tu sappia come usare il Livelli pannello, portalo su e crea tre livelli, nominandoli come segue:
Poiché Illustrator ci consente di sfruttare il suo sistema Grid, ne imposteremo uno personalizzato utilizzando i valori più bassi possibili e useremo il comando Aggancia alla griglia opzione quando non ci siamo Anteprima pixel modalità, al fine di garantire che tutte le nostre forme siano perfettamente agganciate al Pixel Grid.
Le impostazioni a cui siamo interessati possono essere trovate sotto Modifica> Preferenze> Guide e griglia sottomenu preferenze, e dovrebbe essere regolato come segue:
Consiglio rapido: ora, non entrerò troppo nei dettagli, dal momento che ho già scritto due parti separate che spiegano come funziona il sistema Grid e come è possibile utilizzare varie impostazioni per aderire a un flusso di lavoro perfetto per i pixel.
Quello che sto per fare è incoraggiarvi a leggerli, dal momento che probabilmente risponderanno a tutte le vostre domande e amplieranno le vostre capacità tecniche quando si tratta di alcuni deistrumenti e opzioni più ambigui.
La prima cosa che stiamo per creare è lo sfondo funky, che, come vedrai, sarà un compito abbastanza facile.
Assicurati di essere sul primo livello e quindi di utilizzare il Strumento rettangolo arrotondato creare un più piccolo 42 x 10 px forma (# 3e4249) con un Raggio d'angolo di 5 px e un altro significativamente più grande 386 x 10 px (# 3e4249) uno con lo stesso valore per gli angoli. Allineare verticalmente i due, assicurandosi di lasciare uno spazio vuoto di 8 px fra loro.
Consiglio rapido: quando si tratta di un posizionamento preciso, consiglio sempre di accendere il dispositivo Anteprima pixel modalità (Visualizza> Anteprima pixel)in modo che tu possa avere il pieno controllo delle tue forme usando la griglia di pixel sottostante che diventa visibile una volta che la accendi.
Raggruppa le due linee che abbiamo creato solo un momento fa (Controllo-G), quindi orizzontale allinearli al centro del tavola da disegno, assicurandoti di lasciare uno spazio vuoto 168 px verso il suo lato inferiore.
Usando il Strumento ellisse (L) creare un 324 x 324 px cerchio, che coloreremo usando # acd18c, e poi centro orizzontale allinearlo al tavola da disegno, posizionandolo sopra le due linee, pochi pixel verso il basso.
Disegna un'altra serie di tre cerchi, uno 284 x 284 px uno, un più piccolo 244 x 244 px uno, e ancora più piccolo 204 x 204 px uno, che coloreremo usando il nero (# 000000) e sovrapporsi al cerchio più grande che abbiamo creato nel passaggio precedente abbassando i loro livelli di opacità a solo 10%.
Dal momento che vogliamo nascondere le sezioni inferiori dei cerchi che vanno oltre le due linee, creeremo a 328 x 256 px rettangolo, che posizioneremo appena sopra le linee, e quindi useremo come Maschera di ritaglio selezionando sia esso che i cerchi, e poi fare clic con il tasto destro> Crea maschera di ritaglio.
Una volta che hai mascherato i cerchi, seleziona entrambi e le due linee e raggruppali usando il Controllo-G scorciatoia da tastiera, in modo che se hai bisogno di spostare o riposizionare lo sfondo in futuro, puoi farlo senza preoccuparti che alcune forme siano rimaste indietro.
Dato che ora abbiamo finito con lo sfondo, possiamo bloccare il suo livello e passare a quello successivo, dove inizieremo a lavorare sul piccolo boombox stesso.
Finora abbiamo creato rapidamente lo sfondo. Ora è il momento di fare il nostro flusso e creare il pezzo centrale. Sì, sto parlando del boombox! Iniziamo con la base.
Posizionati sul secondo livello e usa il Strumento rettangolo (M) creare un 216 x 6 px forma che coloreremo usando # a0a5a8 e poi dare uno spessore 8 px schema (# 3e4249) applicando un Offset Path ad esso (selezionare> Oggetto> Percorso> Percorso offset).
Quindi seleziona semplicemente la forma di riempimento e il suo contorno e posiziona i due appena sopra le linee dello sfondo, assicurandoti che il centro orizzontale li allini al tavola da disegno.
Consiglio rapido: se non l'hai mai usato Percorsi sfalsati prima, dovresti assolutamente dare un'occhiata a questo tutorial su come creare icone linea usando gli offset, il che spiega il processo che può essere applicato a qualsiasi progetto, non solo alle icone.
Usando il Strumento rettangolo (M), creane un altro 216 x 2 px forma, che coloreremo usando # 3e4249 dal momento che agirà come un'ombra sottile, e quindi si sovrapporrà alla parte superiore del pezzo grigio scuro che abbiamo appena creato abbassando il suo Opacità a 40%.
Aggiungere un 216 x 2 px divisore orizzontale alla base del boombox, che coloreremo usando # 3e4249 e posizionarsi sopra il rettangolo grigio, allineandolo verso il centro.
Prendi il Strumento rettangolo (M) e creare un piccolo 2 x 2 px e più grande 4 x 2 px forma posizionata 2 px l'uno dall'altro. Colorare le forme usando il bianco (#FFFFFF) e poi farli agire come una coppia di punti salienti impostando il loro Modalità di fusione a copertura e abbassando il loro Opacità livelli a 40%.
Una volta terminato, posiziona i punti salienti verso la sezione destra della base e raggruppali (Controllo-G) in modo che non vengano separati per caso.
Crea un paio di tre 12 x 2 px rettangoli arrotondati con a Raggio d'angolo di 1 px, che coloreremo usando # 3e4249, gruppo (Controllo-G) e posizionarsi su ciascun lato della base del boombox, assicurandosi di allinearli alla sezione superiore della linea del divisore orizzontale e, soprattutto, che le sezioni interne si sovrappongano completamente 8 px spessore del contorno.
Dato che abbiamo praticamente finito di lavorare sulla base del boombox, possiamo selezionare tutte le sue forme di composizione e raggrupparle usando il Controllo-G scorciatoia da tastiera in modo che non li sposteremo per sbaglio.
Crea il corpo principale del boombox disegnando a 232 x 120 px rettangolo che coloreremo usando un grigio chiaro (#eaeaea), e quindi dargli una bella struttura usando un 8 px compensare. Una volta che hai entrambe le forme, posizionale verso la parte superiore della base che abbiamo appena creato, assicurandoti che i due contorni si sovrappongano.
Usando il Strumento rettangolo (M), creare la parte superiore del boombox disegnando a 232 x 12 px forma (# a0a5a8), che allineamo verso la parte superiore del corpo grigio, separandolo usando a 232 x 8 px rettangolo (# 3e4249) appena al di sotto di esso come una linea divisoria.
Aggiungi alcuni punti salienti sottili nella parte superiore del boombox, creando due 232 x 4 px rettangoli, che coloreremo usando il bianco (#FFFFFF) e quindi regolare impostando il loro Modalità di fusione a copertura e abbassando il Opacità livello per la cima più a 40% e impostandolo su 90% per il secondo.
Iniziare a stabilire i dettagli creando un 212 x 4 px rettangolo arrotondato con a Raggio d'angolo di 2 px, che coloreremo usando # 3e4249 e quindi posizionarsi sulla sezione grigia più scura del boombox, assicurandosi di allinearlo al centro.
Aggiungi altre due righe di dettaglio creando due più strette 14 x 4 px rettangoli arrotondati (# 3e4249) usando lo stesso Raggio d'angolo di 2 px, e allineare uno per ciascun lato del contorno del boombox.
Finire la parte superiore del boombox, creando un paio di punti salienti verticali, usando il bianco (#FFFFFF) come colore di riempimento, copertura per il Modalità di fusione e 40% per il Opacità.
Gruppo (Controllo-G) e posiziona le due luci nella parte destra del pezzo principale, assicurandoti di allinearle all'altra coppia che abbiamo creato per la sezione di base.
Crea due 4 x 100 px rettangoli (# 3e4249) e posizionare uno su ciascun lato della sezione grigio chiaro inferiore del boombox, assicurandosi di lasciare a 2 px divario tra loro e il contorno più spesso.
Usando il Strumento rettangolo (M) creare due 2 x 96 px forme (# a0a5a8), che posizioneremo tra il contorno del boombox e i due divisori verticali che abbiamo appena creato per scurire quelle aree.
Quindi, aggiungi quattro 4 x 4 px cerchi in ogni angolo della sezione centrale del boombox, che coloreremo usando # 3e4249 dal momento che agiranno come piccole viti.
Posiziona ciascun cerchio in modo da avere a 2 px divario tra loro e il divisore e il contorno circostanti.
Usando il Strumento rettangolo (M), disegnare un paio di segmenti di linea (# 3e4249) su ciascun lato dei divisori centrali e aggiungere punti salienti sottili (colore: bianca; Modalità di fusione: overlay; Opacità: 60%) sotto ognuno di essi.
Disegna due 96 px alte luci verticali, usando il bianco (#FFFFFF) per il colore di riempimento, copertura per il Modalità di fusione, e 90% per il Opacità, e posizionarli sulla sezione centrale del boombox, alcuni pixel verso destra.
Oh, e non dimenticare di selezionarli entrambi e raggrupparli usando il Controllo-G scorciatoia da tastiera.
Iniziare a lavorare sull'unità altoparlante sinistro, creando un 60 x 60 px cerchio (# c7c8c9) e dandogli un 8 px contorno spesso (# 3e4249) utilizzando il metodo del percorso di offset.
Posizionare i due verso forme il lato sinistro del boombox, lasciando un 8 px spazio vuoto vuoto verso il lato sinistro e inferiore del contorno dell'altoparlante.
Consiglio rapido: non dimenticare di usare il Anteprima pixel modalità (Visualizza> Anteprima pixel) in modo da ottenere quel preciso posizionamento e nitidezza che vogliamo.
Quindi, crea il cono effettivo disegnando un più piccolo 44 x 44 px cerchio (# 6e787c) e un altro ancora più piccolo 20 x 20 px uno (# 3e4249) e posizionandoli sopra le forme precedenti, assicurandosi di allinearli al loro centro.
Crea il piccolo anello interno, disegnando a 32 x 32 px cerchio (# 3e4249) e poi un altro più piccolo 28 x 28 px uno (# 3e4249), che utilizzeremo per creare un ritaglio da quello più grande usando esploratore'S Fronte meno opzione.
Iniziare ad aggiungere dettagli al diffusore creando un 6 x 6 px cerchio (#FFFFFFF) che sovrapporremo al pezzo centrale del cono impostandone il suo Modalità di fusione a copertura e abbassando il suo Opacità a 40%, posizionandolo di pochi pixel verso l'angolo superiore destro.
Successivamente, aggiungi un'ombra interna simile a un anello sul cono, creando una copia di esso e quindi aggiungendo un più piccolo 36 x 36 px cerchio, che useremo per creare il ritaglio. Cambia il colore della forma risultante in # 3e4249, e poi abbassare la sua Opacità solo per 20% per far sembrare un'ombra reale.
Creane un altro 36 x 36 px cerchio (#FFFFFF) che poi regoleremo rimuovendo il suo punto di ancoraggio superiore usando il Strumento di selezione diretta (A) e impostando il suo Modalità di fusione a copertura mentre abbassando il suo Opacità solo per 30%.
Una volta che abbiamo la forma corretta, assicurati di posizionarla sotto l'anello del cono e il naso, in modo che non si sovrapponga a loro.
Dare al relatore alcune dimensioni aggiungendo un'ombra superiore e un'evidenziazione inferiore. Per fare ciò, prima crea un 60 x 60 px cerchio (#FFFFFF) da cui taglieremo un più piccolo 56 x 56 px uno. Quindi, usando un rettangolo, ritaglia la metà inferiore della sezione e crea una copia della forma risultante che rifletteremo orizzontalmente (tasto destro> Trasforma> Rifletti> Orizzontale) e posizionati sotto l'originale.
Regola il mezzo giro superiore impostando il suo colore su # 3e4249 e abbassando il suo Opacità a 20%.
Quindi, seleziona l'evidenziazione metà inferiore e cambiala Modalità di fusione a copertura mentre abbassando il suo Opacità a 30%.
Termina l'altoparlante sinistro aggiungendo quattro 4 x 4 px cerchi (# 3e4249) sugli angoli della superficie che circonda il cono.
Quindi, seleziona tutti i suoi elementi di composizione e raggruppali usando il Controllo-G scorciatoia da tastiera.
Dato che ora abbiamo il nostro diffusore sinistro, dobbiamo aggiungere il piccolo cono del tweeter. Per fare questo, prima afferrare il Strumento ellisse (L) e creare a 6 x 6 px cerchio (# 6d6f70). Dare la forma a 4 px schema (# 3e4249) e una piccola riflessione (colore: bianca; Modalità di fusione: overlay; Opacità: 30%) e quindi posizionare i due verso l'angolo superiore sinistro dell'altoparlante.
Seleziona e raggruppa sia il tweeter che il diffusore (Controllo-G) e creane una copia (Control-C> Control-F) che poi rifletteremo verticalmente (tasto destro> Trasforma> Rifletti> Verticale) e posizionarsi sul lato destro del boombox.
Consiglio rapido: puoi creare un duplicato di qualsiasi forma selezionandolo e quindi trascinandolo in una direzione tenendo premuto il tasto alt chiave (che crea la copia) e il Cambio tasto (che consente di trascinare in linea retta).
A questo punto, possiamo iniziare a lavorare sulla parte anteriore del boombox aggiungendo i piccoli pulsanti funzione. Per prima cosa, seleziona il Strumento rettangolo (M) e creare a 42 x 12 px forma (# 3e4249) che posizioneremo sulla sezione centrale dell'unità, circa 4 px dal suo contorno inferiore.
Ingrandisci la forma che abbiamo appena creato e utilizza il Strumento rettangolo (M) creare sei 4 x 4 px piazze (# a0a5a8), che posizioneremo 2 px l'uno dall'altro e poi centrano il rettangolo sottostante più grande.
Colora il primo, il terzo e il quinto quadrato usando # 7a7f82, e quindi dare ciascun pulsante a 4 x 2 px evidenziare (colore: bianca; Modalità di fusione: overlay; Opacità: 40%). Quando hai finito, seleziona tutti gli elementi che compongono e raggruppali usando il Controllo-G scorciatoia da tastiera.
Usando il Strumento rettangolo arrotondato creare un 50 x 2 px forma (# 3e4249) con un Raggio d'angolo di 1 px e posizionarlo appena sopra i pulsanti, lasciando a 2 px divario tra loro.
Prendi il Strumento rettangolo (M) e creare a 34 x 20 px forma (# 9e8dce), dargli un 4 px schema (# 3e4249) e quindi posizionare i due sopra la linea che abbiamo appena creato, lasciando lo stesso 2 px divario tra loro.
Aggiungere un 34 x 2 px evidenziare (colore: bianca; Modalità di fusione: overlay; Opacità: 40%) verso il lato superiore del rettangolo viola e un altro 34 x 2 px ombra (colore: # 3e4249; Opacità: 40%) verso il fondo.
Disegna due punti salienti diagonali (colore: bianca; Modalità di fusione: overlay; Opacità: 40%) utilizzando il Strumento penna (P), uno più sottile e uno più spesso,e posizionali verso il centro del rettangolo viola.
Consiglio rapido: puoi ottenere 45 perfetti mentre disegni con Strumento penna (P) se tieni premuto il tasto Cambio chiave.
Usando il Strumento rettangolo (M) disegnare due 2 x 20 px divisori verticali (# 3e4249), che posizionerai su ciascun lato del rettangolo viola, lasciando a 2 px divario tra loro e il contorno più spesso. Quindi aggiungere un altro 26 x 2 px forma (# 3e4249) verso il lato inferiore, lasciando lo stesso 2 px vuoto vuoto.
Completa il portacassette aggiungendo le due ruote che ruotano la band e a 6 x 4 px rettangolo arrotondato con a Raggio d'angolo di 1 px (# 3e4249) per dargli più dettagli.
Una volta che hai finito, non dimenticare di selezionare e raggruppare tutti i suoi elementi di composizione usando il Controllo-G scorciatoia da tastiera.
Sposta alcuni pixel verso l'alto e usa il Strumento rettangolo (M) creare un 84 x 16 px forma (# 3e4249) che posizioneremo sopra il portacassetta, circa 8 px dal suo lato superiore. Poiché la forma ora si sovrappone agli altoparlanti, dovremo selezionarli e portarli in primo piano tasto destro> Disponi> Porta in primo piano.
Aggiungere un 42 x 8 px rettangolo (# e87979) in cima alla forma che abbiamo creato in precedenza, assicurandoti di posizionarlo verso il centro.
Poiché questa sezione rossa fungerà da sintonizzatore radio, aggiungere un paio di punti salienti utilizzando gli stessi valori utilizzati per il portacassette.
Aggiungi un paio di 2 px linee spesse (dieci più esattamente) con due altezze variabili (cinque con 4 px, e gli altri con 2 px), che dovrai posizionare 2 px gli uni dagli altri e colorano usando lo stesso valore usato per i contorni (# 3e4249).
Inoltre, non dimenticare di raggruppare tutti i componenti del sintonizzatore in modo che non vengano spostati in modo errato (Controllo-G).
Per il prossimo passo, ti permetterò di essere creativo e di creare il resto dei dettagli del boombox da solo, dato che sono abbastanza facili da creare.
Prenditi il tuo tempo e, a seconda che tu voglia lo stesso identico aspetto o qualcosa di unico, usa l'immagine di riferimento per fare la tua strada e portarla a termine.
Supponendo che tu abbia fatto il passo precedente, passiamo alla sezione superiore del boombox e iniziamo a lavorare sui piccoli pulsanti.
Innanzitutto, crea un 4 x 6 px rettangolo (#eaeaea) e dargli un 4 px contorno spesso (# 3e4249). Useremo queste due forme per creare altre due copie (pulsanti) verso il lato destro posizionato 2 px l'uno dall'altro. Per il quarto pulsante, creeremo solo un 12 x 12 px piazza (# 3e4249) che lo farà apparire come se fosse stato premuto. Per il quinto e ultimo pulsante vorremmo creare un più ampio 18 x 6 px rettangolo (# e5d37a) che userà lo stesso 4 px contorno spesso.
Una volta che hai tutti e cinque i pulsanti, posizionali verso il centro del boombox, assicurandoti di mandarli sul retro (tasto destro> Disponi> Porta in secondo piano).
Dai un tocco di profondità ai pulsanti, aggiungendo una piccola ombra a tutti tranne il quarto.
A questo punto, ti consiglierei anche di raggruppare individualmente (Control-G) ogni pulsante e quindi selezionarli e raggrupparli tutti insieme.
Spostati verso il lato sinistro del boombox e usa il Strumento rettangolo (M) creare un 4 x 18 px forma, che coloreremo usando # e5d37a, dare un 8 px schema (# 3e4249) e quindi posizionarsi verso il lato in alto a sinistra, lasciando uno spazio di 38 px tra esso e il contorno più grande.
Aggiungere un 2 x 12 px rettangolo (# 3e4249) verso il lato sinistro del contorno del quadrante giallo, a 2 x 18 px ombra (colore: # 3e4249; Opacità: 40%) dove incontra il profilo del boombox e a 4 x 4 px piazza (# 3e4249) verso la parte superiore, che fungerà da indicatore di guadagno.
Una volta che hai finito, raggruppa tutti gli elementi del quadrante insieme (Controllo-G) e creare una copia per il lato destro del boombox.
Completa il boombox aggiungendo la maniglia superiore, quindi raggruppa tutti i suoi elementi usando il Controllo-G scorciatoia da tastiera.
Dato che a questo punto abbiamo finito di lavorare sulle sezioni principali della nostra illustrazione, ora possiamo passare alla parte finale, dove aggiungeremo il piccolo schema di note musicali.
Ora, cosa sarebbe un boombox senza un piccolo suono per farlo scoppiare? Nei prossimi momenti andremo a concludere le cose creando un piccolo schema che porterà la nostra illustrazione alla vita.
Passa al terzo e all'ultimo livello e usa il Strumento ellisse (L) creare un 10 x 8 px forma (# 3e4249) che agirà come la nota head (1), a cui aggiungeremo a 2 x 14 px rettangolo (# 3e4249) verso il lato destro (la radice della nota) (2). Aggiungi un altro piccolo rettangolo diagonale (# 3e4249) alla sua cima (la bandiera) (3) e quindi raggruppare tutte e tre le forme insieme (Controllo-G).
Usando la stessa testa e stelo della nota, crea una doppia nota.
Prendi le note musicali che abbiamo appena creato e inizia ad aggiungerle attorno al boombox. Prenditi il tuo tempo e divertiti con loro finché non ottieni uno schema interessante che puoi usare.
Colora le note che vanno fuori dallo sfondo verde usando un grigio chiaro (# e5e5e5) per dare alla composizione un piccolo tocco.
Una volta che hai finito, selezionali e raggruppali (Controllo-G) così rimarranno uniti.
Ecco qua: un buon vecchio boombox che puoi usare in qualsiasi nuovo progetto per far risaltare il tuo lavoro. Spero che ti sia piaciuto questo tutorial e sono riuscito a imparare qualcosa di nuovo e utile lungo la strada.
Accentsconagua