MoebiusMania

Tutorial, articoli e curiosità sul web e dintorni

Tutorial: Zucca vettoriale

Tutorial Illustrator - Zucca vettorialeApriamo questo "speciale" su Halloween con un paio di novità... innanzitutto il primo tutorial che pubblico su Illustrator, e grande novità per MoebiusMania.net arrivano i primi video! Registrati direttamente dal mio desktop, questi brevi filmati (per ora senza parlato, ma con sottofondo musicale) accompagneranno la parte testuale del tutorial in modo da rendere più "visuale" la spiegazione e sfruttare le comodità basilari dei video di poter fermare, rimandare indietro, e rivedere quante volte si vuole quella particolare azione. Dettagli e note tecniche a parte, iniziamo con il primo tutorial di questo speciale tematico disegnando una zucca in stile Web 2.0, siccome Illustrator è un software che disegna in modo vettoriale e non raster, il prodotto finale del nostro lavoro sarà liberamente scalabile, sia aumentando che diminuendo le dimensioni (ma magari mantenendo le proporzioni :P ), rendendo cosi questa "Zucca 2.0" adatta come elemento di decorazione sia per un sito/blog , sia per una cartolina da stampare. Per maggiori informazioni riguardo le differenze tra la grafica vettoriale e quella raster vi rimando a quest'ottimo articolo che spiega il tutto in modo soddisfacente. Ora diamoci da fare con Illustrator!

Software richiesto:

Illustrator , io uso la versione CS4 ma non sfrutto nessuna particolare novità di quest'ultimo quindi anche gli utenti di CS3 e CS2 dovrebbero poter seguire il tutorial senza problemi. Potete sempre scaricare la versione di prova per 30 giorni di Illustrator CS4 dal sito ufficiale di Adobe.

Prerequisiti:

Conoscenza base di software grafici, livelli e strumento penna.

Argomenti trattati:

Metodi di fusione, maschere di opacità.

1. Colori e gradienti

Non è mai una cattiva idea preparare i colori che abbiamo intenzione di usare prima di procedere con il disegno stesso. In Illustrator questo compito ci viene facilitato dal pannello "Campioni", quindi aprite un nuovo documento RGB e assicuratevi di avere aperto questo pannello che eventualmente potete richiamare dal menu Finestra --> Campioni . Il processo di memorizzare dei campioni di colore e gradienti (sfumature) è un'operazione molto semplice e molto utile perché ci permetterà di richiamare questi colori in poco tempo ogni volta che ci serviranno. NOTA: La "lavagnetta" che mi vedete usare per gli appunti in questo video è la mia SalvoToDoList realizzata in Flash e Air, scaricabile gratuitamente.

2. La "base" della Zucca e un tocco di Web 2.0

Ora che abbiamo i campioni pronti, iniziamo subito a disegnare! Per creare la base della nostra zucca ci basta lo strumento ovale, impostiamo come colore di traccia il rosso scuro, mentre come riempimento mettiamo il gradiente che va dall'arancione chiaro verso il giallo, poi spostiamoci sull'area di lavoro e tenendo premuto il pulsante del mouse tracciamo il nostro ovale. Una volta fatto il disegno selezioniamolo e impostiamo la larghezza della traccia a 4 punti per renderla più spessa. Poi sfrutteremo le "maschere di opacità" per creare un'effetto di superficie lucida e riflettente, che unita alla sfumatura dell'ovale che abbiamo disegnato prima darà alla nostra zucca quell'aspetto "Web 2.0" tanto amato/odiato. Seguite attentamente il video per vedere i pochi ma fondamentali passaggi necessari per creare la machera di opacità ed adattarla alla nostra zucca. In Illustrator CS4 abbiamo le guide automatiche che ci indicano quando stiamo allineando degli oggetti tra di loro, sfruttamiole per disporre rapidamente i nostri elementi!

3. La faccia

Per i 3 elementi della faccia (i 2 occhi e la bocca) dobbiamo semplicemente affidarci allo strumento Penna. Qui c'è poco da spiegare :) impostare il rosso scuro (lo stesso che abbiamo usato per la traccia della zucca) come colore di traccia e il gradiente che va dal nero al rosso come riempimento. Una volta disegnati gli elementi useremo lo strumento Sfumatura per sistemare il punto di inizio e di fine del gradiente in modo da simulare una luce all'interno della bocca e degli occhi, facendoli sembrare cavità con una luce dentro. Con lo strumento Penna clicchiamo per creare dei punti connessi fra di loro da linee rette, mentre clicchiamo e teniamo premuto prima di rilasciare per creare delle curve.

4. Il gambo e il tocco finale

Sempre con lo strumento Penna, semplicemente disegnamo un linea un po curva, come colore avrà il verde scuro e tramite il pannello dei livelli lo spostiamo in fondo come ultimo livello in modo da poterlo posizionare sotto la zucca. Ora la parte più interessante, daremo un tocco di realismo alla zucca con una texture. Duplichiamo la base della zucca e rimuoviamo la traccia, poi gli applichiamo un filtro di Illustrator che troviamo sotto la voce Effetto --> Filrtri SVG --> AI_EffettoLegno e vedremo sparire il colore di riempimento che sarà rimpiazzato da una texture. Cosi com'è non ci piace granche... apriamo il pannello "Trasparenza" e impostiamo come metodo di fusione "Sovrapponi" e impostiamogli un'opacità del 40%. Dopodiche spostiamo questo nuovo oggetto sulla nostra zucca, e dal pannello dei livelli arrangiamolo appena sopra il livello della zucca ed ecco fatto... la nostra "Zucca 2.0" è pronta per essere utilizzata! I metodi di fusione in Illustrator, sono quasi gli stessi di quelli Photoshop e funzionano proprio allo stesso modo, avevamo gia visto qualcosa nel mio primo tutorial su Photoshop.

In conclusioneHalloween Graphics Special

In questo primo tutorial di Illustrator avete visto delle tecniche basilari per il disegno vettoriale, con un po di pratica riuscirete a farle più "vostre" e riutilizzarle per lavori originali. Per oggi è tutto, ma ripassate domani per una raccolta abbondante di link per risorse e tutorial a tema "Halloweeniano"! PS: trovate il sorgente del file nel [download id="3" format="1"] !