Share
Per i principianti, le icone nitide possono essere difficili da realizzare in Adobe Illustrator. Con pochi semplici trucchi, il pannello Aspetto e lo Strumento per la creazione di forme, creerai icone dall'aspetto professionale in pochissimo tempo, è facile!
Per prima cosa crea un nuovo documento nella scala della tua icona, le dimensioni comuni sono 96px, 48px, 32px, 24px e 16px. Per questo tutorial creerò un'icona di 48 x 48 px. Imposta la Modalità colore su RGB, Effetti raster su 72ppi e Unità su pixel.
Ora imposteremo la griglia su pixel, questo renderà più semplice pianificare il progetto. Vai a Preferenze> Guide e Griglie e imposta la griglia in 10px con 10 suddivisioni, quindi vai a Visualizza> Mostra griglia poi Visualizza> Blocca sulla griglia.
Con tutte le mie icone (a parte quelle di base) mi piace fare uno schizzo veloce come base per il mio disegno. Puoi disegnare con carta e penna oppure puoi disegnare in Illustrator o Photoshop. Ho creato il mio schizzo in Photoshop, quindi copiato e incollato sulla tavola da disegno in Illustrator.
Una volta che lo schizzo è sulla tavola da disegno, posso ridimensionarlo, posizionarlo e ridurre l'opacità al 50%. Se stai usando uno schizzo, riduci l'opacità al 50% (o più se lo schizzo è un po 'troppo scuro) quindi blocca il livello e crea un nuovo livello sotto il livello dello schizzo, questo sarà il tuo livello di grafica.
Con qualsiasi forma complessa, puoi scomporla in forme base. Per questo motivo ho tracciato la testa utilizzando lo strumento Ellisse (L), quindi spostato e ruotato le forme in posizione con lo strumento Selezione (V).
Quando le forme di base sono nella posizione approssimativa, prendi lo Strumento di creazione forme (Shift + M) e uniscile insieme trascinando il cursore sulle forme.
Se hai bisogno di creare curve sottili, prendi lo strumento Penna (P) e disegna la forma base. Crea un punto al centro di ogni curva, questo è dove le linee saranno levigate.
Per ottenere curve morbide dai punti, prendi lo strumento Converti punto di ancoraggio (Maiusc + C) e trascina il punto tenendo premuto il tasto Maiusc..
Per semplificare la simmetria, usa lo strumento Rifletti (O). Per riflettere una forma, prima selezionala con lo strumento Selezione (V), quindi seleziona lo strumento Rifletti (O) e Opzione + Fai clic sulla tavola da disegno in cui la forma rifletterà, ora dovresti vedere una finestra delle impostazioni.
Imposta l'asse nel modo in cui desideri riflettere la forma (la mia immagine viene riflessa verticalmente) e fai clic su Copia. Ora avrai una copia riflessa della tua forma.
Combina le forme con lo Strumento di creazione forme (Maiusc + M) e smussa tutti i punti con lo strumento Converti punto di ancoraggio (Maiusc + C).
Ecco la parte divertente. C'è un trucco che puoi usare per vedere l'anteprima dell'icona mentre lavori. Per prima cosa vai su Finestra> Nuova finestra. Questo creerà una copia del documento su cui stai lavorando.
Una volta creata la nuova finestra, nascondi la griglia. Nel menu "Visualizza", imposta la finestra su Dimensioni effettive, Nascondi tavole da disegno e seleziona Anteprima pixel. Ora avrai un'anteprima quasi perfetta dell'icona finita.
La cosa migliore di lavorare con la seconda finestra è che qualsiasi cosa tu cambi nella prima finestra cambierà anche nella seconda finestra.
Per fare un pulsante dietro l'icona, seleziona lo strumento Rettangolo arrotondato e Opzione + Fai clic sulla tavola da disegno, questo farà apparire un menu delle impostazioni. Imposta la larghezza e l'altezza a pochi pixel in meno della dimensione finale dell'icona, in questo modo avrai spazio per aggiungere eventuali ombre o effetti successivi. Il raggio dell'angolo sarà diverso a seconda delle dimensioni dell'icona che stai creando, ho scelto di usare 6px perché la mia icona è abbastanza piccola.
Dopo aver creato il rettangolo arrotondato, selezionalo e spostalo dietro il disegno dell'icona premendo Comando + il tasto sinistro del riquadro quadrato.
Per creare un gradiente morbido per il rettangolo arrotondato, riempire la forma utilizzando lo strumento Sfumatura (G) e modificare il campione inferiore della sfumatura in modo da diventare un grigio medio, cambiare il campione superiore in un grigio molto chiaro e quindi appena sotto il campione superiore , fai clic sulla sfumatura per aggiungere un terzo campione. Cambia il terzo campione con una tonalità leggermente più scura del secondo grigio
Per aggiungere un contorno, vai al Pannello Aspetto (Finestra> Aspetto) e con il rettangolo arrotondato selezionato, fai clic sull'opzione del tratto, imposta il colore come grigio medio (leggermente più scuro della tonalità più scura) e imposta il peso su 1px.
Ora aggiungiamo un contorno gradiente alla forma dell'icona e salviamo il pulsante e gli stili delle icone per i progetti futuri. Innanzitutto, il modo più semplice per creare un contorno sfumato su una forma è creare un percorso di offset. Per fare ciò, seleziona la forma, quindi nel Pannello Aspetto (Finestra> Aspetto) aggiungi un nuovo riempimento sopra il primo riempimento. Rendi questa versione leggermente più scura del tuo primo gradiente.
Come puoi vedere nell'immagine di esempio qui sotto, ho utilizzato un gradiente radiale scuro per l'interno della forma (gradiente superiore) e una versione più leggera per il contorno (gradiente in basso). Entrambi i riempimenti possono essere modificati selezionando il riempimento nel pannello Aspetto e modificando le impostazioni con il pannello Sfumatura (Finestra> Gradiente) e lo strumento Sfumatura (G).
Seleziona il gradiente superiore nel pannello Aspetto e vai al Fx pulsante nella parte inferiore del pannello. Passare a Percorso> Offset Path e impostare l'Offset su -1px con Round Joins e fare clic su OK.
Per salvare un aspetto come un campione, vai al Pannello Aspetto e trascina l'icona nella parte superiore del pannello nel pannello Stili grafica (Finestra> Stili grafica).
Ora avrai due stili grafici che possono essere applicati a molte forme e pulsanti diversi per creare un rapido set di icone di base. Guarda cosa puoi inventare e sentiti libero di condividere il tuo lavoro sulla pagina Facebook di Vectortuts +.
Se ti è piaciuto questo tutorial, ti potrebbe piacere "Come creare uno stile di icona riutilizzabile usando il pannello Aspetto".
Accentsconagua