[video_lightbox_youtube video_id="wi94fivL8Pc" width="800" height="450" anchor="https://giovannipalese.com/wp-content/uploads/2017/04/Come-creare-unicona-flat-con-ombra-3d.jpg" alt="clicca sull'anteprima per il video"]
clicca sull’anteprima per il video
In questo videotutorial voglio mostrarti come creare un’icona web dallo stile flat con l’aggiunta di un’ombra dalla percezione tridimensionale con Adobe Illustrator. Lavoreremo con una griglia appositamente costruita e con strumenti e funzioni come il pannello elaborazione tracciati e lo strumento crea forme. Al termine, ti basterà salvare la tua icona andando su File – Slava per Web – formato .png24 per garantirti un formato di destinazione adeguato per la stampa a monitor.
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 la nostra icona per il web: 128 px x 128 px (dimensioni standard per un icona) – metodo di colore RGB.
Useremo una griglia personalizzata per generare comodamente l’icona, facciamo quindi un clic sullo strumento rettangolo dalla palette livelli e disegnamo un quadrato dalle dimensioni di 20 px per 20 px. Ora copiamo e incolliamo questo quadrato (ctrl c + ctrl v da windows / cmd c + cmd v da mac) in modo da formare tre righe e 3 colonne perfettamente adiacenti, come in figura. Naturalmente useremo solo il colore della traccia e nessun colore di riempimento.
Ora con lo strumento ellisse disegnamo un cerchio per i 4 quadrati che stanno agli angoli della griglia. Possiamo aiutarci trascinando il mouse da un’estremità di un quadrato fino al suo angolo opposto.
Ora viene la parte più espressamente creativa e personale, dove potete sbizzarrirvi creando la forma che desiderate, dalla più semplice alla più complessa, utilizzando le forme geometriche semplici. In alternativa potete trascinare direttamente una forma che avete creato in precedenza nel quadrato centrale della griglia.
Copiamo e incolliamo uno dei quattro cerchi nel quadrato centrale e con le maniglie lo ridimensioniamo facendo in modo di far coincidere il punto basso dell’ellisse con il centro della griglia. Dopodicché copiamo e incolliamo una copia dell’ellisse appena creata esattamente al di sotto, come in figura.
Ora con lo strumento selezione diretta selezioniamo tutti gli oggetti presenti nell’area di lavoro (griglia e cerchi). Poi prendiamo lo strumento crea forme (sempre dalla palette strumenti) e cominciamo ad unire tutte le sezioni che ci interessano semplicemente passando il mouse e assicurandoci che ci sia sempre il segno + accanto all’icona dello strumento durante il suo utilizzo (significa che stiamo unendo forme).
Dobbiamo unire tutte le forme laterali lasciando fuori gli angoli (che risulteranno quindi arrotondati) e la forma al centro della griglia.
Ora riselezioniamo tutti gli oggetti e prendiamo di nuovo lo strumento crea forme. Passiamo il mouse lungo le sezioni della forma centrale tenendo premuto il tasto alt da tastiera in modo (questa volta) da sottrarre le forme e non aggiungerle. Ci accorgeremo che stiamo “togliendo” perché compare il segno – accanto al cursore dello strumento. Andiamo quindi a definire la forma centrale che ci interessa e che rappresenterà quindi il cuore della nostra icona web.
Ora selezioniamo il contorno della forma totale appena generata e dal pannello campioni colore gli diamo un riempimento nero ed escludiamo il colore di traccia. Possiamo anche dare il nero anche cliccando sul colore di riempimento nella parte bassa della palette livelli.
Questa forma è solo un esempio, potete creare ciò che volete. In questo tutorial ho voluto intenzionalmente utilizzare le forme geometriche semplici perché queste ci garantiscono un armonia professionale nelle dimensioni.
Ora selezioniamo la forma interna della griglia e la duplichiamo trascinando la copia al di fuori del riquadro. Dopidicché selezioniamo la forma copiata e la ruotiamo di 90° in senso antiorario con lo strumento ruota (dalla palette livelli) oppure cliccando sulla forma interessate, poi col tasto destro su trasforma e poi di nuovo su rotazione.
Ora eliminiamo la forma originale e ciò che resta della nostra griglia (oppure trasciniamo il tutto all’esterno dell’area di lavoro).
Selezioniamo la figura copiata e ruotata e andiamo a ridimensionarla in modo da farla grande quanto la tavola di lavoro perché quest’ultima ha le dimensioni di un’icona web. Ingrandiamo perciò la figura del 200% (anche qui possiamo cliccare col tasto destro poi andiamo su trasforma e infine clicchiamo su ridimensiona oppure possiamo agire dall’apposito comando nella palette strumenti.
Ora selezioniamo la nostra figura e gli attribuiamo un colore primario. Per comodità possiamo preparare di riquadri, uno con il colore primario e un altro con il colore secondario che deve avere una tonalità che parte dal colore primario ma più scura in modo da rappresentare un’ombra realistica.
Io ho prelevato questi colori dal pannello colore: 28ff86 (colore primario) e 28ae86 (colore secondario/ombra).
Come vedete la matrice cromatica è la stessa, cambia naturalmente la tonalità e quindi la luminosità per ognuno.
Seleziono quindi la figura e con lo strumento contagocce clicco sul riquadro contenente il colore primario.
Ora creiamo la nostra ombra in modo da dare un effetto 3d realistico all’icona.
Selezioniamo lo strumento linea dalla palette livelli e andiamo a tracciare due linee (senza colore di traccia e senza colore di riempimento) che partono dall’angolo in basso a destra e in alto a sinistra della forma piccola al centro e finisco con un angolazione di 225° sul bordo della figura più grande, come in figura.
Potete vedere il grado di angolazione nel riquadro grigio mentre muovete la linea dal punto di partenza.
Ora selezioniamo la figura e le due linee insieme e andiamo nel pannello elaborazione tracciati cliccando su scomponi.
In questo modo otteniamo due aree distinte e definite dalle linee all’interno della figura.
Ora passando il mouse sulla figura con lo strumento selezione diretta possiamo notare le aree distinte grazie alla “scomposizione” appena effettuata.
Ci interessa l’area più piccola, quella compresa tra le due linee nella parte in basso a sinistra. Selezioniamola e con lo strumento contagocce clicchiamo sul riquadro del colore più scuro. Fatto, abbiamo appena conferito un colore realistico all’ombra della figura centrale.
Ora non ci resta che salvare la nostra icona per il web, andiamo quindi su File – Salva per il web.
Un formato particolarmente adatto per il nostro obiettivo e il .png 24 perchè mantiene alta la qualità per la stampa a monitor e supporta la trasparenza.
[ninja-inline id=13522]
Scrivi un commento