Oggi voglio spiegarvi come creare un avatar manga con una guida passo passo per creare l’avatar del vostro personaggio manga o anime preferito. Utilizzerò il software Adobe Fireworks CS4 di Adobe.
Creare avatar manga
Innanzitutto abbiamo bisogno di un’immagine con la quale realizzeremo il nostro avatar manga in stile Aqua (cioè lucido e a forma di pin). Andando su Google immagini: ho scelto questa immagine di Sasuke come immagine da trasformare in avatar.
Quando scegliete la vostra immagine per trasformarla in avatar, sceglietela bella grande e definita. In questo modo otterrete un avatar con una buona qualità grafica. Ora che abbiamo scelto l’immagine da usare apriamola con Fireworks CS4, il tutorial può essere benissimo seguito anche da chi utilizza Fireworks CS3 o altre versione precedenti.
Appena aperto il programma ci mostra la sua barra laterale con tutti gli strumenti che ci servono per disegnare, tracciare forme, scegliere i colori eccetera. In questa guida per creare il vostro avatar manga useremo i pulsanti che ho evidenziato in rosso.
Ritagliare l’immagine per la creazione del nostro avatar manga
Clicchiamo con il tasto sinistro del mouse sul Tool per fare una selezione e teniamo premuto fino a che compare l’opzione per poter scegliere se farla ovale o rettangolare.
Quando rilasciamo il mouse, la linea tratteggiata sulla barra passa da rettangolare a ovale: ciò significa che abbiamo correttamente attivato la selezione ovale.
Ora, tenendo premuto il tasto sinistro del mouse, tracciamo una selezione circolare. Per tracciare una selezione perfettamente circolare, e non ovale, dovrete tenere premuto il tasto SHIFT (maiscole) mentre trascinate il mouse. Per evitare che il cerchio si deformi prima di rilasciare il tasto Shift, rilasciate il tasto sinistro del mouse.
Abbiamo ottenuto la nostra selezione perfettamente circolare, ora dobbiamo tagliarla premendo CTRL+X (windows) o Command + X (mac) . Così facendo la selezione che abbiamo fatto scomparirà, andrà a salvarsi nella memoria del computer e potremo recuperarla in seguito.
Potete tranquillamente chiudere l’immagine, senza salvare, poiché l’immagine rotonda, che diventerà la base dell’avatar la abbiamo già ottenuta.
Quindi cliccate senza paura su Don’t Save per chiudere il file senza salvarlo. Una volta chiuso il file, creiamone uno nuovo, cliccando su File -> New, oppure facendo semplicemente Ctrl+N (Win) o Command+N (Mac).
Fireworks aprirà una finestra nella quale possiamo impostare le caratteristiche del nuovo file.
Nella finestra delle impostazioni del novo file inserite i valori che vedete nell’immagine.
Width: 100 Larghezza dell’immagine in Pixel
Height:100 Altezza dell’immagine in Pixel
Resolution: 72
Ricordatevi di impostare anche in Canvas Color l’opzione su Transparent
Cliccando su OK si apre il nuovo file.
Il nuovo file creato apparirà come un quadrato a scacchi bianchi e grigi, ciò significa che avete creato un immagine con fondo trasparente.
Dato che 100 x 100 è un formato di file abbastanza piccolo ingrandite l’immagine con lo strumento ZOOM evidenziato nella prima immagine del tutorial. Cosi facendo lavorerete più comodamente.
Per richiamare l’immagine tagliata nel precedente file premete CTRL + V (windows) o Command + V (mac): apparirà un messaggio che vi chiede se volete fare un Resample dell’immagine: cliccate su DON’T RESAMPLE.
L’immagine verrà incollata sopra lo sfondo trasparente, ma non apparirà nella sua interezza. per farlo impostiamo i valori nel box delle proprietà dell’immagine i seguenti valori:
W: 90 H:90 X:5 Y:5
I valori sono rispettivamente altezza e larghezza dell’immagine incollata e posizione rispetto al layer trasparente sottostante, inserendo il valore 5 in X e Y si centra il cerchio nel quadrato.
Ora dovete aggiungere le luci, che creano l’effetto 3D sferico, per farlo selezionate nella colonna dei Tools di Fireworks il tool per disegnare delle immagini, e come avete fatto per selezionare lo strumento di selezione tondo tenete premuto il tasto sinistro del mouse. Apparirà un menu che da la possibilità di scegliere tra diverse forme. Scegliete ELLIPSE TOOL
Creare avatar manga, passaggio 2: Aggiungere gli effetti di luce
Iniziate a disegnare l’ellisse in alto a sinistra. Lo strumento ellisse permette anch’esso di tracciare un cerchio perfetto premendo il tasto Shift, ma in questa occasione non serve farlo perché è proprio un’ellissi che ci interessa. Tracciata l’ellissi, questa apparirà sopra alla nostra immagine di Sasuke. Agite sul secchiello e la matita per impostare il colore di riempimento e il colore del bordo. Cliccate sull icona con la linea trasfersale rossa per eliminare il bordo e lasciere solo il riempimento.
L’ellisse, che qui vedete in rosso, è stata automaticamente disegnata sopra ad un nuovo layer: su Fireworks ogni nuova forma viene posizionata automaticamente su un layer differente.
Ora dovete cambiare colore all’ellissi (non possiamo certo lasciarla rossa!).
Il colore rosso è un colore definito come SOLID, ossia un “rosso pieno”; voi avete bisogno di un gradiente. Un gradiente si ottiene quando un colore di partenza si trasforma gradatamente in un altro, come in questo caso da bianco a rosso.
Per trasformare il colore da solido a gradiente cliccate su SOLID nel box delle proprietà scegliete GRADIENT e poi LINEAR.
Ecco il gradiente che si ottiene! Ma c’è ancora del lavoro da fare, dobbiamo ottenere un gradiente che da BIANCO va a BIANCO.
Che senso ha?? Non basterebbe avere un colore solido bianco?
Più avanti scoprirete che ha senso, non preoccupatevi, e proseguiamo!
Per ottenere il gradiente da bianco a bianco cliccate sopra l’iconcina del secchiello nel Box delle proprietà. Apparirà una finestrella con il gradiente attuale dell’immagine e l’icona di due matite (un quadrato con un triangolo bianco sopra). Le matita in basso, colorata di rosso e di bianco, serve per stabilire la tonalità iniziale e finale del gradiente.
Cliccate sopra il quadrato che sta sotto il triangolo di ciascuna “matita” e, tenendo premuto il tasto sinistro del mouse, scegliete il colore bianco. Ripetete il passaggio anche per l’altra matita.
Fatto? Bene! Ora dovete impostare al gradiente una TRASPARENZA per farlo dovrete agire sulle due matite che compaiono in alto (queste hanno il quadrato sopra e il triangolo sotto).
Ancora una volta, cliccate sopra al quadrato: apparirà una barra da trascinare con sotto un valore numerico. Il valore indica la trasparenza, in percentuale, del gradiente rispetto all’immagine di Sasuke nel layer sottostante. Più la percentuale è alta più l’immagine di Sasuke apparirù visibile rispetto al nostro gradiente.
Impostate la percentuale della matita di sinistra su 70 – 80 % mentre la percentuale della matita di destra sullo 0% ossia totalmente trasparente.
In questo modo ottenete l’effetto luce superiore.
Disegnate ora un altra ellissi nella parte inferiore dell’avatar. Il programma di ricorderà la vostra ultima selezione e la disegnerà con le stesse caratteristiche di colore e trasparenza.
Curiosità: Se provate a selezionare ciascuna ellissi separatamente, noterete che è ciascuna è percorsa da una linea verticale nera con un pallino e un quadratino nero alle estremità. Cliccando sul quadratino nero, potete scegliere la direzione del gradiente, e della trasparenza, in questo caso per esempio il gradiente di è verticale perché la trasparenza è al massimo in alto e diminuisce andando verso il basso.
Come detto in precedenza questa nuova ellissi che avete disegnato è stata posta su un nuovo layers, in totale abbiamo quindi:
Il layer 0 che è il fondo trasparente a scacchi
il layer 1 che è l’immagine di Sasuke rotonda
il layer 2 che è l’ellissi in alto
il layer 3 che è l’ellissi in basso.
Creare avatar manga, passaggio 3: luci ed ombre
Manca un ultimo effetto da applicare prima di terminare il vostro avatar manga di Sasuke.
Dovete accorpare in un unico layer tutti gli elementi che avete disegnato. Per farlo premete il tasto CTRL + A (windows) o MELA + A (mac) o, in alternativa, selezionate tutti gli oggetti trascinando il mouse sopra il vostro disegno, dall’angolo in alto a sinistra a quello in basso a destra. Ancora in alternativa, se non riuscite con nessuno di questi metodi, fate clic sul primo layer in alto a destra, premete il tasto SHIFT sulla tastiera, e fate clic sull’ultimo layer in basso. Qualunque metodo scegliate, i layer indicati nel Box layers a destra, si illumineranno di azzurro.
Ora creiamo un singolo layer. Cliccate su Modify -> Flatten Selection
Ora tutti gli elementi sono stati “accorpati” in un unico layer e possiamo ora applicare l’ultimo effetto per rendere l’avatar ancora più tridimensionale.
Nel box delle opzioni che avete usato in precedenza trovate anche l’opzione Filters.
Cliccate sul tastino + questo vi darà accesso ad un menù per poter scegliere vari filtri. scegliete Shadow and Glow -> Glow
Questo effetto aggiunge alla figura un effetto ombreggiato per tutto il perimetro del cerchio, ma non è ancora sufficiente, dovete infatti andare ad agire sulle impostazioni dell’effetto per modificarlo e ottenere il colore e la grandezza desiderati.
L’effetto verrà applicato con le opzioni di default, e comparirà una finestrella per modificarne le caratteristiche.
Cambiate il colore da Rosso (nel mio caso) a NERO cliccando su quadratino colorato, e impostate i valori come nell’immagine.
Avete finito! Con lo strumento zoom riportare al 100% lo zoom dell’immagine, per vederlo nella dimensione effettiva di 100 x 100 px.
Creare avatar manga, passaggio 4: salvare il vostro avatar manga
Ora dovete salvare il vostro manga avatar! Andate sul menu File -> Save As…
Apparirà la finestra per le impostazioni di salvataggio.
Prima di tutto selezioniamo dal menu a tendina l’opzione Flattened PNG
Cliccate poi sul bottone Options che si illuminerà per accedere all’ultimo pannello prima di salvare.
Dal menu a tendina FORMAT: selezionate PNG 32, fate click su OK e su SAVE per salvare il vostro avatar con lo sfondo trasparente.
Finito!! Il vostro manga avatar è pronto per essere utilizzato nei forum, in msn o dove preferite!
Prima di lasciarvi, vorrei aggiungere qui sotto alcuni manga avatars che ho creato proprio come insegno in questo tutorial. Sono già pronti da scaricare!
Avatar Forum: Death Note
Maggiori informazioni sulla serie di Death Note: Death Note – Wikipedia
Avatar Forum: Fullmetal Alchemist
Maggiori informazioni sulla serie di Fullmetal Alchemist: Fullmetal Alchemist – Wikipedia
Avatar Forum: Bleach
Maggiori informazioni sulla serie di Bleach: Bleach – Wikipedia
Avatar Forum: Naruto
Maggiori informazioni sulla serie di Naruto: Naruto – Wikipedia
Se avete domande particolari, o se qualche passaggio nel creare il vostro manga avatar non vi è chiaro, non esitate a chiedermi maggiori informazioni lasciando un messaggio qui sotto, nei commenti!
Avatar Forum: Onepiece
Maggiori informazioni sulla serie di Onepiece: Onepiece – Wikipedia
ammaaaazzaaa yuki che lungo sto articolo XD
waaa sembra semplice …. mmmm … bene bene …. be tanto se non capisco come ho detto ieri ho un altra soluzione … ovvero “yuki fammi sta palletta!!” u.u
blaaaaaaaavo yukiiii *lancia zuccherino a forma di kumagoro*
ora mando gli altri pazzoidi della chat a vedere il tutorial … *blaaavaaa rukia **si lancia zuccherino da sola**
ps hai usato sas’ke come modello *_*
**riempie le tasche di yuki di zuccherini**
eeeh dillo che l’hai fatto per me XD hahahahaha
Bravissimo Yuki!!!!!!!!!!!!!!
Bellissimo tutorial………!!!
Grazie mille^_^
ok, io penso di poterlo fare anche con photoshop, non dovrebbe cambiare molto!! non ce l’ho fireworks cs4 ho sl photoshop cs4 e illustrator cs4 come programmi per la grafica vettoriale (e tutti quelli che insieme a loro si installano) sinceramente non mi va di andarmi a prendere anche quello…anche perchè le stesse cose si dovrebbero potere fare anche con photoshop…correggetemi se sbaglio!!!! XD
cmq belli questi avatar, semplici e belli!!
Si si può usare benissimo anche photoshop 🙂
bel tutorial Yuki 🙂 complimenti eheh – Dario-kun (Yuki permettendo) se vuoi te lo traduco io per Photoshop 🙂
se vuoi volentieri ^^
Bellissimo tutorial e soprattutto dettagliatissimo come hai detto tu!!! Se inserite anche la guida per photoshop ve ne sarei grato!!! *____*
Glassie mille!!! :DDDD
Magnifico tutorial mi metto subito al opera *w* grazie^^
Olè, grazieh *_* *heart*
bellissimi grazie yuki 🙂
ottima anche questa, ma io, non avendo fireworks, mi butto su quella di fotoscioppo
e così con due guide accontentate tutti ^______________^
**** GRANDE NANODA!!!! ***** Il sito che si occupa di te!
nn ci capisco un tobo ma se lo sai fare vuol dire ke 6 in gamba…
neeeeeeeeeee troppo belloooo!!
ma nn so se ho il programma nel pc.
xoi controllo!!
e intanto mi scarico quelli che avete messo!! tanks
Bellissimo l’ avatar ! E` la guida a photoshop piu` dettagliata che abbia letto ! (piu` che principiante sembri un professionista! ) io cel’ ho photoshop ma non posso usarlo perche` il mio computer e` stracarico e vecchio . . . T_T Non vedo l’ ora di avere quello nuovo, intanto . . . studio !
p.s. buon capodanno !
io ci sono riuscito alla grande!!!!e comunque come si fanno a far diventare animati come il mio?
ha ragione mio fratello come faccio a farlo diventare con lo sfondo animato?
beeeeeeeeeello!!!!!!!!! stupendo.. lol
____##########*_______________________… __*##############______________________ __################_____________________ _##################_________**##*______ __##################_____*##########___ __##################___*#############__ ___#################*_###############*_ ____#################################*_ ______###############################__ _______#############################=__ ________=##########################____ __________########################_____ ___________*####################=______ ____________*##################________ _____________*###############__________ _______________#############___________ ________________##########_____________ ________________=#######*______________ _________________######________________ __________________####_________________ __________________###__________________ ___________________#___________________
Bello, ma visto che oggi mi scade i giorni di prova del Fireworks CS5, non posso metterli in atto la nozione appena trovata !
Comunque penso che si possa fare,in teoria, anche con gli altri software di grafica, vero?!
Hello there,
thanks for your info, I am an expert of graphical animation.
I like use whiteboard animation to create a comical marketing video.
Did you never try to be artistic in this technique?