[video_lightbox_youtube video_id="VcilQOS2ALQ" width="800" height="450" anchor="https://giovannipalese.com/wp-content/uploads/2017/04/Come-disegnare-licona-di-un-iMac-con-Illustrator.jpg" alt="clicca sull'anteprima per il video"]

clicca sull’anteprima per il video

In questo videotutorial voglio mostrarti come creare l’icona web di un iMac con Illustrator. Lo faremo in pochi semplici passi, seguiremo le dimensioni standard cosigliete e aggiungeremo un effetto di luce riflessa alla fine.

Per ricevere risorse gratuite ogni settimana da scaricare direttamente con un link sicuro nella tua mail, aggiornamenti, guide e notizie dal mondo della grafica e del design: https://goo.gl/DS7rqR

Per ricevere il Kit per Designer in maniera completamente gratuita puoi andare qui:
https://goo.gl/lqdtFv

Creiamo lo spazio che ospiterà la nostra icona per il web dalle dimensioni di 128px x 128px, metodo di colore RGB.

Ora con lo strumento rettangolo bordi arrotondati facciamo un clic sull’area di lavoro e definiamo il nostro rettangolo di 120px x 68px con un raggio di curvatura degli angoli di 8,5 px. Annulliamo il colore di riempimento e lasciamo solo la traccia di 1 px per vedere bene il nostro rettangolo.

Come disegnare l'icona di un'iMac

Ora annulliamo il colore di traccia e diamo un colore scuro come riempimento, io ho scelto un marrone con questo codice esadecimale: 211b00.

Come disegnare l'icona di un'iMac

Ora selezioniamo lo strumento rettangolo e disegnamo un rettangolo normale con la stessa larghezza di quello precedente ma con un altezza decisamente più piccola in modo da costruire la parte bassa dell’iMac, quindi andrà bene un’altezza di 14 px.

Per definire manualmente larghezza e altezza ti basterà selezionare lo strumento dalla palette livelli e fare un clic sull’area di lavoro.

Ora posizioniamo il rettangolo piccolo alla base di quello più grande e gli conferiamo un colore più chiaro ma della stessa matrice cromatica di quello usato in precedenza. Andrà bene un giallo opaco (d1b43b).

Come disegnare l'icona di un'iMac

I colori usati in questo tutorial sono naturalmente un esempio tra le tante varianti possibili.

Ora dobbiamo convertire gli angoli inferiore del rettangolo più piccolo in angoli curvi, perciò selezioniamo entrambi gli oggetti e apriamo il pannello elaborazione tracciati. Clicchiamo quindi su scomponi.

Selezioniamo ed eliminiamo le sezioni degli angoli inferiori e avremo gli angoli del rettangolo più piccolo arrotondati.

Come disegnare l'icona di un'iMac

Come disegnare l'icona di un'iMac

Ora con lo strumento ellisse disegnamo un cerchio delle dimensioni di 6px x 6px, che rappresenterà il pulsante per accendere o spegnere il monitor.

Dopodicché lo selezioniamo e con lo strumento contagocce clicchiamo sul colore più scuro in modo da attribuirlo al cerchio piccolo. A questo punto trasciniamo il cerchio al centro del rettangolo più basso (possiamo aiutarci con le guide automatiche). Selezioniamo tutti e tre gli oggetti, apriamo il pannello allinea, clicchiamo su allinea alla tavola da disegno e poi di nuovo un clic sull’allineamento orizzontale al centro.

Come disegnare l'icona di un'iMac - allieiamo gli elementi

Ora disegnamo un rettangolo normale delle dimensioni di 32px x 14px e diamogli un colore grigio.

Lo posizioniamo al di sotto del secondo rettangolo, centrato.

Come disegnare l'icona di un'iMac - costruiamo la base

Ora con lo strumento selezione diretta selezioniamo (uno per volta) i punti degli angolo superiori.

Selezioniamo il punto dell’angolo in alto a sinistra e poi facciamo tre clic con il tasto freccia verso destra da tastiera. Ogni clic equivale a uno spostamento.

Ripetiamo il procedimento con il punto dell’angolo in alto a destra.

Come disegnare l'icona di un'iMac - costruiamo la base con le frecce

Ora con lo strumento rettangolo disegnamo la base inferiore delle dimensioni di 41px x 4px e lo posizioniamo centralmente al di sotto.

Come disegnare l'icona di un'iMac - costruiamo seconda base

Ora voglio fare in modo che gli angoli superiore di quest’ultimo rettangolo siano curvi e non retti.

Seleziono lo strumento rettangolo con i bordi arrotondati (mantengo il raggio di curvatura di 8,5 px), disegno un rettangolo delle stesse dimensioni del precedente e lo vado a posizionare esattamente sopra. Per comodità di visualizzazione potremmo anche dargli un altro colore di riempimento.

Come disegnare l'icona di un'iMac - curviamo gli angoli della base

Ora seleziono entrambi i rettangoli e dal pannello elaborazione tracciati clicco su scomponi. A questo punto seleziono ed elimino le aree degli angoli superiori, ottenendo questo risultato.

Come disegnare l'icona di un'iMac

Seleziono di nuovo entrambi i rettangoli e dal panello elaborazione tracciati clicco su unifica.

ome disegnare l'icona di un'iMac

Ora seleziono il rettangolo e gli conferisco un nuovo colore, che potrebbe essere lo stesso della figura appena al di sopra.

Come disegnare l'icona di un'iMac - diamo un colore alla base inferiore

Ora voglio applicare un effetto di luce riflessa sul monitor.

Disegnamo due rettangoli bianchi della stessa altezza del monitor ma con due larghezze variabili.

Come disegnare l'icona di un'iMac - disegnamo il riflesso

Ora selezioniamo entrambi e con lo strumento rotazione ruotiamoli di -45°.

Come disegnare l'icona di un'iMac - ruotiamo i riflessi

Ora ridimensioniamo i due rettangoli bianchi in modo da renderli più grandi e attraversare completamente quella parte di figura.

Come disegnare l'icona di un'iMac - ridimensioniamo i rifelssi

Ora con la selezione diretta selezioniamo tutti i punti degli angoli dei rettangoli e trasciniamoli sulla figura fino a farli coincidere con i lati del monitor.

Come disegnare l'icona di un'iMac - trasciniamo i punti di ancoraggio

Ora aggiungiamo un nuovo punto di ancoraggio nella parte alta in modo da non sovrastare con la figura bianca la curvatura del monitor in alto a sinistra.

Come disegnare l'icona di un'iMac - aggiungiamo un punto di ancoraggio

A questo punto selezioniamo con la selezione diretta entrambe le figure bianche e apriamo il pannello trasparenza: applichiamo un’opacità del 3%.

Questo ci permette di conferire un colore realistico al riflesso luminoso.

Come disegnare l'icona di un'iMac - opacizziamo i riflessi

Abbiamo ottenuto la nostra icona di un’iMac, ora non ci resta che salvarla ed esportarla correttamente per il web: andiamo quindi su Salva per web – scegliamo il formato .png24 (in modo da supportare la trasparenza) e clicchiamo su salva.

[ninja-inline id=13522]