Suggerimento rapido come creare uno stile di icona riutilizzabile utilizzando il pannello Aspetto

Nel seguente suggerimento rapido imparerai come creare uno stile di icona arrotondato carino. Utilizzerai le forme di base e le opzioni di Pathfinder per creare icone di stile degli glifi e il pannello Aspetto per creare uno stile che può essere riutilizzato su qualsiasi cosa, dalle icone al testo. Cominciamo!


Passo 1

Poiché questo design è concepito per essere utilizzato come icona web, inizia realizzando una tavola da 96 pixel a 96 pixel. Altre dimensioni comuni per le icone Web sono 48px e 16px. Quando crei le icone ricorda di impostare la griglia su pixel. Vai a Preferenze> Guide e Griglia e modifica le impostazioni per avere una linea di griglia ogni 10px con 10 suddivisioni. Questo ti darà una griglia in pixel con cui lavorare.


Passo 2

Ad esempio, ti mostrerò come creare una semplice lente di ingrandimento usando le opzioni Pathfinder e alcune forme. Puoi creare qualsiasi forma che ti piace.

Per creare una Lente di Ingrandimento, Comando + Fai clic sulla tavola da disegno con lo Strumento Ellisse (L) per visualizzare la finestra di dialogo Opzioni Ellisse e inserisci 42 px per la larghezza e l'altezza. Fai clic su OK per creare una cerchia.


Passaggio 3

Con lo strumento Rettangolo (L), Comando + Fai clic sulla tavola da disegno per visualizzare la finestra di dialogo Opzioni rettangolo e inserisci 12 px per la larghezza e 40 px per l'altezza. Questa sarà la maniglia della lente d'ingrandimento.


Passaggio 4

Posiziona il rettangolo nella parte inferiore dell'Ellipse in modo che si sovrapponga leggermente e allinea le due forme orizzontalmente. Puoi trovare le opzioni di allineamento nella parte superiore della finestra del programma o andando su Finestra> Allinea.


Passaggio 5

Seleziona entrambe le forme e mentre tieni premuto Maiusc, ruota la forma a sinistra in modo che sia seduta in diagonale. Raggruppare le due forme con Command + G e allinearle alla tavola da disegno. Puoi allineare gli oggetti alla tavola da disegno facendo clic sulle opzioni "Allinea a" nel pannello Allinea. Una volta selezionata l'opzione, tutto ciò che è allineato sulla tavola da disegno si allineerà alla tavola da disegno stessa e non agli oggetti che è stata selezionata con.

Nota: Un altro utile strumento è l'opzione Allinea a griglia pixel presente in Illustrator CS5. Ciò assicurerà che le forme esportino da Illustrator con le linee più nitide possibili. Per trovare l'opzione Allinea a griglia pixel, vai su Finestra> Trasforma e ci sarà una casella di controllo nella parte inferiore del pannello Trasforma.


Passaggio 6

Seleziona l'Ellisse e vai su Oggetto> Tracciato> Tracciato offset e nella finestra di dialogo inserisci -6px. Questo creerà un Ellipse più piccolo. Seleziona la nuova ellisse e riempila con un colore diverso dall'oggetto principale in modo che tu possa vederlo.


Passaggio 7

Seleziona la grande ellisse e il rettangolo e nel pannello Pathfinder, Opzione + Fai clic sul pulsante Unisci per creare una forma composta. Mi piace questa opzione poiché non combina ed espande completamente l'oggetto, dandoti la possibilità di modificare le forme in un secondo momento senza doverle ridisegnare.

Con gli oggetti ancora selezionati, inviarli sul retro con "Command + Shift + Left Square Bracket".


Passaggio 8

Seleziona l'Ellisse più piccola e copiala (Comando + C) quindi eliminala. Fare clic nella forma composta della forma della lente di ingrandimento e incollare l'ellisse più piccola in posizione (comando + F). Seleziona sia Ellissi che Opzione + Fai clic sul pulsante Escludi per tagliare un buco nell'ellisse principale. Ancora una volta, perché è una forma composta, è facile da modificare in seguito.


Passaggio 9

Ora inizieremo a creare lo stile dell'icona. Seleziona l'oggetto su cui stai lavorando e vai al pannello Aspetto. Seleziona il livello Riempimento e fai clic sull'icona Effetti nella parte inferiore del dialogo. Vai a Stilizzazione> Angoli tondi e inserisci 2 pixel come Raggio, quindi fai clic su OK.

Nota: È possibile visualizzare l'anteprima dell'effetto selezionando la casella di anteprima nella parte inferiore della finestra di dialogo Opzioni angolo tondo. Questo può essere utile se non sei sicuro della scala.


Passaggio 10

Crea un nuovo livello di riempimento nel pannello Aspetto (puoi farlo facendo clic sull'icona nella parte inferiore del pannello) e selezionare qualsiasi colore che ti piace. Ho usato il blu e ho cambiato l'icona principale in bianco. Torna alla scheda effetti e seleziona Converti in forma> Ellisse. Questo crea dinamicamente un cerchio dietro l'icona.

Inserisci la larghezza e l'altezza che desideri rendere l'icona. Ho selezionato 93px per entrambi in modo che ci siano alcuni pixel a sinistra di ogni lato dello spazio icona 96px.


Passaggio 11

Con il livello di riempimento blu selezionato nel pannello Aspetto e la forma principale ancora selezionata, torna alla scheda effetti e seleziona Distorsione e trasformazione> Zig Zag. Imposteremo la dimensione relativa degli Zig Zag all'1% (questo consentirà loro di scalare con l'oggetto), le Creste per Segmento a 15 ei Punti a Liscio. Puoi giocare con queste impostazioni finché non hai un aspetto che ti piace.


Passaggio 12

Per il tocco finale, aggiungi un effetto a grana fine. Di nuovo, questo è applicato nel menu degli effetti andando su Texture> Granulosità. Gioca con le impostazioni Intensità e Contrasto fino a trovare uno stile che ti piace, ho reso il mio sottile con le zone scure utilizzando un'intensità di 12 e un contrasto di 64. Le impostazioni saranno diverse a seconda di quanto scuro o chiaro è il tuo colore. Clicca OK e ammira i risultati.

Nota: Poiché il grano è un effetto raster, potresti ottenere dei bordi frastagliati. Questo perché le impostazioni predefinite di Effetto raster sono impostate su 72 dpi per risparmiare tempo di rendering. Se si desidera aumentare la risoluzione di visualizzazione, è possibile farlo selezionando Effetti> Impostazioni effetti raster documento. Consiglierei di farlo alla fine di un progetto poiché un'impostazione alta può rallentare Illustrator.

Prenditi del tempo per fare alcune variazioni sullo stile e provali su diverse forme e lettere. Ho apportato alcune modifiche al tema principale creando un colore più chiaro con una diversa impostazione di grana e alcune forme quadrate anziché cerchi che ho applicato a un carattere grassetto. Una volta soddisfatti dei risultati, salvali nel pannello Stili grafica per progetti futuri. Puoi farlo selezionando l'oggetto e facendo clic sul pulsante Nuovo stile grafico nella parte inferiore del pannello.


Conclusione

Ecco qua. Un modo semplice per creare alcuni effetti diversi che ti aiuteranno a creare delle icone dall'aspetto carino. Ora hai imparato come gli effetti possono tornare utili quando crei set di icone personalizzate, tutto ciò di cui hai bisogno è una serie di simboli e alcuni stili e puoi creare centinaia di disegni diversi. Spero ti sia piaciuto questo tut.