Share
Questo tutorial fornirà esempi di tecniche di creazione della trama del legno e del tessuto. Impareremo anche come rendere il gioco della luce sugli oggetti con l'aiuto di Opacity Mask, Blend Tool e Art Brushes. Studiando questo tutorial passo dopo passo, conoscerai tutti i segreti della creazione di un design professionale di icone.
Le icone per le applicazioni iOS hanno una dimensione tipica. Anche se useremo un editor vettoriale, l'icona verrà creata con le dimensioni predefinite richieste. Comprendere quanto sopra ci consente di creare una grafica professionale, evitare la creazione di dettagli strani, che non saranno mai visibili in scala reale, o potrebbero influenzare la sua visione generale.
Oggi creeremo un'icona con la dimensione di 512 per 512 px. Questa dimensione è utilizzata per la visualizzazione in iTunes, inclusi CoverFlow e App Store. Lo stile retrò è considerato una delle fantasiose indicazioni del design moderno. Pertanto, ho deciso di rendere Radio App Icon come un set radiofonico in stile retrò della metà del secolo scorso.
Inizieremo con lo strumento Rettangolo arrotondato per modellare la forma dell'icona con una dimensione e un raggio di arrotondamento degli angoli richiesti, come mostrato di seguito.
Riempi il modulo con il colore marrone scuro.
Tutti gli oggetti saranno colorati nel corso del processo di creazione dell'icona, ma è necessario determinare in anticipo la posizione della fonte di luce. Nel nostro caso, la fonte di luce si trova in alto a destra. I colori di riempimento sfumato, la direzione dell'ombra discendente, la posizione di evidenziazione e l'intensità dipendono dalla sua posizione.
Evitare l'applicazione di alcune sorgenti luminose o immagini simili. Questo perché il nostro cervello percepisce il mondo reale e la grafica in un modo diverso; pertanto, se vengono applicate alcune sorgenti luminose, l'immagine potrebbe sembrare innaturale e persino perdere le sue funzioni 3D. Dobbiamo usare il nostro giudizio artistico per determinare come visualizzare la luce sul nostro design di icone.
Crea una copia del rettangolo arrotondato e incollalo direttamente sopra a quello precedente (Comando + C; Comando + F). Riempi la copia con un gradiente lineare composto da diversi colori marroni con tinte chiare e scure.
Come puoi vedere, i cursori più chiari del gradiente si trovano a destra di questo modulo, in base alla posizione della sorgente di luce.
Fai una copia dell'ultimo rettangolo arrotondato fatto e incollalo davanti. Riempilo con una sfumatura dal nero al bianco, come mostrato nella figura sotto.
Seleziona due rettangoli in alto e crea una maschera di opacità scegliendo Crea maschera di opacità nel menu del pannello Trasparenza.
Pertanto, abbiamo raggiunto una distribuzione non uniforme della luce nella parte superiore dell'immagine.
Crea una copia del rettangolo creato inizialmente durante il primo passaggio e incollalo in primo piano. Posiziona il nuovo modulo nella parte superiore di tutti gli oggetti creati e riempilo con un gradiente lineare da marrone scuro a marrone.
Seleziona i punti A, B, C e D con l'aiuto dello Strumento selezione diretta (A), quindi spostalo verticalmente tenendo premuto il tasto Maiusc per vincolarlo.
Mantieni l'oggetto selezionato, vai su Oggetto> Tracciato> Tracciato offset e imposta il valore di offset mostrato nella finestra di dialogo.
Riempi il rettangolo con un colore marrone scuro.
Ora vai su Oggetto> Miscela> Opzioni di fusione e imposta il numero di passi specificati mostrato nella finestra di dialogo. Seleziona due moduli in alto e vai su Oggetto> Miscela> Crea.
Crea una copia dell'oggetto in alto e incollalo in primo piano. Sposta il nuovo modulo dall'oggetto blend nel pannello Livelli.
Riempilo con un colore marrone chiaro.
Ora creiamo la texture del legno vettoriale. Utilizzare lo strumento Rettangolo (M) per creare un rettangolo pieno di grigio. L'altezza di tale rettangolo deve essere maggiore di quella del rettangolo marrone chiaro.
Mantieni l'oggetto selezionato, vai su Effetto> Schizzo> Penna grafica e imposta i parametri per tale effetto nella finestra di dialogo.
Ora vai su Oggetto> Espandi aspetto, quindi su Oggetto> Traccia in tempo reale> Opzioni di traccia e imposta i parametri mostrati nella figura seguente.
Vai a Oggetto> Espandi ed estendi la texture vettoriale in orizzontale con l'aiuto dello Strumento di selezione (V), tenendo premuto il tasto Alt. La larghezza della trama deve essere maggiore di quella del rettangolo arrotondato marrone chiaro.
Riempi la texture con un colore marrone chiaro. Questo colore deve avere una tinta leggermente più chiara rispetto al rettangolo posto sotto di esso.
Usa lo strumento Warp; Fare doppio clic su questa icona dello strumento nella barra degli strumenti, che aprirà la finestra di dialogo con le sue impostazioni.
Applica gli offset orizzontali e verticali dei grani di trama con l'aiuto dello strumento Ordito.
Seleziona l'intera trama e vai a Effetto> Distorci e trasforma> Irrigidisci e imposta i parametri per tale effetto osservando contemporaneamente le modifiche applicate alla trama.
Fai una copia e incolla la trama di fronte. Riempi la copia con una tinta più scura di colore marrone e spostala leggermente verso il basso. Modifica i parametri dell'effetto Roughen; impostare la modalità di fusione multipla e diminuire l'opacità. Tutti questi parametri sono accessibili dal pannello Aspetto.
Applicando la tecnica descritta nei passaggi 7 e 8, ho creato un altro tipo di texture e l'ho posizionato sopra i due precedenti. A scopo dimostrativo, la visibilità delle prime due trame è stata disabilitata, come mostrato nella figura seguente.
Tuttavia, tutte le trame appaiono insieme come segue.
Usando lo strumento Penna (P) per creare la forma dell'ombra.
Mantieni l'oggetto selezionato, vai su Effetto> Sfocatura> Sfocatura gaussiana e imposta il valore del raggio come mostrato di seguito.
Applica la modalità di fusione multipla e diminuisci l'opacità con l'aiuto del pannello Trasparenza.
Fai una copia del rettangolo arrotondato marrone chiaro e incollalo davanti. Posiziona la copia sopra tutti gli oggetti creati in precedenza.
Seleziona tutte le trame, la forma dell'ombra e il rettangolo arrotondato in alto, quindi fai clic sulla scorciatoia Comando + 7, creando così la maschera di ritaglio.
Ora, l'ombra e tutti gli oggetti della trama sono raggruppati. Riduci l'opacità di questo gruppo con l'aiuto del pannello Trasparenza.
Seleziona il sottolivello con il percorso di ritaglio nel pannello Livelli e incollalo in primo piano.
Sposta il percorso creato fuori dal gruppo con il percorso di ritaglio e riempilo con un gradiente lineare da bianco a grigio.
Applica la modalità di fusione multipla per l'oggetto con l'aiuto del pannello Trasparenza.
Ora creiamo una scala di sintonia per la radio. Utilizzare lo strumento Ellisse (L) per disegnare un'ellisse piena di colore marrone scuro.
Crea una copia dell'ellisse creata e incollala davanti. Tieni premuti i tasti Alt + Maiusc, quindi riduci le dimensioni dell'ellisse in alto con l'aiuto dello Strumento di selezione (V).
Seleziona entrambe le ellissi e vai su Oggetto> Miscela> Crea.
Crea altre due ellissi come mostrato nella figura sotto.
Usa lo strumento Forbici (C) per tagliare le ellissi nei punti 1-8. Elimina i segmenti tra di loro.
Applicare il profilo appropriato dal pannello Traccia ai segmenti di sinistra.
Seleziona tutti i segmenti e vai su Oggetto> Espandi aspetto. Ora possiamo riempire gli oggetti con gradienti lineari. Pertanto, abbiamo creato i riflessi sul cerchio della scala di sintonizzazione.
Creare la nuova ellisse e riempirla con un gradiente lineare complesso, come mostrato nella figura seguente.
Quindi riempiremo le due ellissi con un colore marrone e un gradiente lineare.
Creiamo una serie di ellissi con tratti di varie larghezze e senza riempirli.
Selezionali e vai su Oggetto> Espandi. Ora riempili con gradienti lineari come mostrato nella figura sottostante.
Disegna l'ellisse al centro della scala di accordatura.
Riempi con una sfumatura conica.
Le istruzioni dettagliate per tale creazione con riempimento sfumato conico sono fornite nel mio tutorial accessibile qui Crea un gradiente conico con Adobe Illustrator, in due minuti!.
Usando lo strumento Penna (P) per disegnare una linea inclinata che deve attraversare il punto centrale dell'ellisse centrale.
Utilizzare lo strumento Forbici (C) per tagliarlo in due punti e quindi eliminare il segmento centrale.
Seleziona entrambi i segmenti e vai su Oggetto> Espandi; ora, riempire gli oggetti con un gradiente lineare da bianco a giallo.
Seleziona entrambi i segmenti, copiali e incollali indietro. Riempi i segmenti inferiori con un colore grigio scuro e spostali leggermente verso il basso.
Ora creiamo il bagliore. Usa lo strumento Ellisse (L) per disegnare un'ellisse. Ora gira e allunga, quindi trascina uno dei punti nella direzione del centro della scala di accordatura con l'aiuto dello strumento di selezione diretta (A). Riempi l'oggetto con un colore giallo chiaro.
Successivamente, disegna un'altra ellisse e riempila con un colore bianco.
Impostare il valore Opacità su 0% nel pannello Trasparenza per l'oggetto posizionato in basso.
Seleziona entrambi gli oggetti, quindi usandoli come base, crea la fusione (Oggetto> Miscela> Crea).
Disegna un'altra ellisse e posizionala sotto tutti gli oggetti della scala di accordatura. Riempilo con il nero, applica il metodo di fusione multipla e diminuisci l'opacità nel pannello Trasparenza.
Ora passiamo alla creazione dell'altoparlante della radio. Utilizzare lo strumento Penna (P) per creare il modulo mostrato nella figura seguente.
Ora crea il cerchio, seleziona entrambi i moduli e premi il tasto Minus Front nel pannello Pathfinder.
Riempi la forma ottenuta con un colore beige scuro.
Sfortunatamente, non è efficiente arrotondare gli angoli di tali moduli con l'aiuto degli strumenti standard di Adobe Illustrator. L'effetto Round Corner non è applicabile in questi casi, poiché distorce tutta la forma.
Pertanto, è utile arrotondare gli angoli manualmente aggiungendo i punti e spostandoli con l'aiuto delle maniglie. Il modo più conveniente scelto da me per risolvere questo problema è il plugin VectorScribe che consente di arrotondare facilmente qualsiasi angolo con l'aiuto dello strumento Dynamic Corners.
Creiamo la trama del tessuto sull'altoparlante. Usa lo Strumento Rettangolo (M) per disegnare un rettangolo con una larghezza di 1px.
Il colore di riempimento per un tale rettangolo può essere qualsiasi per il momento. Lasciando il rettangolo come selezionato, vai su Oggetto> Trasforma> Sposta e imposta il valore di offset orizzontale, quindi premi il pulsante Copia.
Ora premi applica Command + D tutte le volte che vuoi per coprire il modulo altoparlante con le copie del rettangolo.
È necessario che tutti questi rettangoli siano riempiti con diverse tonalità di colore marrone. Per nostra fortuna, questo potrebbe essere fatto automaticamente. Usa il pannello Colore per creare alcune sfumature di colore marrone e salvali nel pannello Campioni.
Ora seleziona tutti i rettangoli, scegli i colori richiesti dal pannello Campioni e avvia lo script Campioni colore casuali. È possibile scaricare questo script freeware e ottenere le informazioni dettagliate su di esso facendo clic sul seguente link Random Swatches Fill.
Mantieni i rettangoli selezionati, vai su Effetto> Distorci e trasforma> Irrigidisci e imposta i parametri dell'effetto.
Raggruppa tutti i rettangoli. Applicare la tecnica precedentemente descritta per creare un gruppo di rettangoli orizzontali.
Applica la modalità di fusione multipla per il gruppo.
Copia il modulo altoparlante e incollalo davanti, quindi posizionalo sopra tutti gli oggetti.
Seleziona la trama del tessuto e il modulo superiore applicando Command + 7, creando così la maschera di ritaglio.
Usa lo Strumento Rettangolo (M) per disegnare alcuni rettangoli, che devono essere riempiti con un gradiente lineare.
Raggruppali e trascinali nel gruppo con la maschera di ritaglio dell'altoparlante. Questa manipolazione dovrebbe essere eseguita nel pannello Livello.
Copia i rettangoli raggruppati e incollali sul retro. Riempi il gruppo con un colore grigio e applica la modalità di fusione multipla utilizzando il pannello Trasparenza.
Ora l'ombra è creata.
Facciamo l'iscrizione sull'altoparlante. A tale scopo ho utilizzato il font Sf American Dreams che può essere scaricato facendo clic sul seguente link. Quindi, usa lo Strumento testo (T) e crea l'iscrizione "Radio".
Mantieni il testo selezionato, vai su Tipo> Crea contorni, quindi su Oggetto> 3D> Estrusione e smusso e imposta i parametri dell'effetto mostrato nella figura sotto.
Inoltre è possibile regolare l'illuminazione dell'oggetto; per questo scopo è necessario premere il tasto Altre opzioni in questa finestra di dialogo.
Copia l'iscrizione e incollala sul retro. Riempi l'iscrizione in posizione bassa con un colore grigio e quindi applica il metodo di fusione multipla con una riduzione dell'opacità nel pannello Trasparenza. Ora spostalo leggermente verso il basso e verso destra. Così viene creata l'ombra cadente dell'iscrizione.
Utilizzare lo strumento Penna (P) per creare la forma della parte finale dell'apertura nel caso della radio.
Applicare la tecnica descritta nei passaggi 7-8 per creare la trama per questo oggetto.
Crea la forma dell'ombra dal bordo destro dell'apertura nella custodia del set di radio e riempila con un colore marrone.
Trascina il sottolivello con questo modulo nel gruppo con la maschera di ritaglio dell'altoparlante.
Lasciando l'oggetto come selezionato, vai su Effetto> Sfocatura> Sfocatura gaussiana e imposta il raggio di sfocatura nella finestra di dialogo.
Ora, diminuisci l'opacità della forma d'ombra.
Ora, creiamo l'indicatore. La tecnica della creazione è simile alle stesse appena descritte in questo tutorial; quindi, ti mostrerò i passaggi della creazione da cui tu puoi lavorare.
Ora è il momento di creare i sintonizzatori. Utilizzando lo strumento Penna (P), creare il modulo simile alla forma mostrata nella figura sotto.
Trascina questo modulo nel pannello Pennelli e salva il nuovo pennello come Pennello pattern.
Crea la circonferenza e applica il pennello modello.
Mantieni selezionato il modulo di sintonizzazione, vai su Oggetto> Espandi aspetto e sostituisci il riempimento e il tratto.
Utilizzare lo strumento Ellisse (L) per creare il cerchio mostrato nella figura sottostante.
Seleziona tutti gli elementi del sintonizzatore e premi il pulsante Unisci nel pannello Elaborazione tracciati.
Rendi più piccola la forma ottenuta e posizionala nella parte inferiore della radio.
Il colore di riempimento per tali forme può essere qualsiasi per il momento.
Seleziona il sintonizzatore e vai a Effetto> 3D> Estrusione e smusso, quindi imposta i parametri mostrati nella figura sotto.
Ora vai su Oggetto> Espandi aspetto. Le suddette manipolazioni devono comportare la creazione del normale gruppo di oggetti vettoriali. Riempi le superfici finali del sintonizzatore con gradienti lineari per rendere la distribuzione della luce su di essi.
Creare l'ellisse sulla superficie del sintonizzatore anteriore e riempirla con una sfumatura radiale, come mostrato nella figura seguente.
Ora crea il bordo sull'accordatore e riempilo con un gradiente lineare.
I riflessi sull'accordatore vengono creati con l'aiuto di oggetti Blend applicando la tecnica sopra descritta.
È possibile applicare un'altra tecnica per la creazione dei riflessi. Usa lo Strumento matita (N) per creare la forma di riflessi con la seguente applicazione dell'effetto Sfocatura gaussiana.
Queste forme riproducono l'illuminazione morbida. Ora creiamo riflessi più intensi. Le suddette forme sono create anche con l'aiuto dello strumento Pencil (N), ma senza l'applicazione dell'effetto Gaussian Blur in questo caso.
Usa due ellissi e lo strumento di fusione per creare l'ombra dal sintonizzatore.
Raggruppa tutti gli elementi del sintonizzatore e duplicalo due volte, dopo aver posizionato i sintonizzatori come mostrato nella figura seguente.
Procediamo con la creazione dei bagliori sul case del radiotelegrafista. Usa due ellissi per creare l'oggetto Blend.
Trascinalo nel pannello Pennelli e salva il nuovo pennello come Pennello artistico.
Ora usa pennelli simili menzionati per creare tutti i bagliori.
Quindi, abbiamo creato un'icona con la dimensione di 512 per 512 px. È possibile utilizzare gli oggetti esistenti per la creazione di icone con altre dimensioni. Per nostra fortuna, abbiamo a che fare con il vettore 'senza dimensione'. Tuttavia, si consiglia di modificare alcuni elementi durante il ridimensionamento.
Ad esempio, per le icone di dimensioni inferiori, è consigliabile modificare l'iscrizione per renderla più leggibile. Inoltre puoi semplificare le trame e cancellare alcuni bagliori. Ogni volta che applicate le trasformazioni, verificate sempre la sua efficienza osservando l'icona delle dimensioni reali.
Qualsiasi icona per le applicazioni iOS avrà finalmente il formato bitmap (PNG) e quindi, potrai visualizzare la tua opera d'arte nella modalità Anteprima pixel (Visualizza> Anteprima pixel) per stimare la qualità del prodotto finale.
L'icona finale è mostrata sotto.
Accentsconagua