Rpg²S Forum uses cookies. Read the Privacy Policy for more info. To remove this message, please click the button to the right:    I accept the use of cookies

Vai al contenuto

Rpg²S Forum uses cookies. Read the Privacy Policy for more info. To remove this message, please click the button to the right:    I accept the use of cookies

Screen Contest #90

Kamikun






  • Si prega di effettuare il log in prima di rispondere
[Grafica]Creare i frame per l'animazione dello Sfogliare una Pagina

    AsprusT26
  • Panda Elettrico

  • Utenti
  • Rens: 130
  • 0
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 2168 messaggi
  • Sesso:Maschio
  • Provenienza:Vicino alla 26° Casa. Non lo sapevi?
  • Abilità:Adepto

#1 Inviato 01 August 2011 - 17:50 PM

Creare i frame dell'animazione per una Pagina che si sfoglia
Versione 1.0


1. Introduzione

Per: Qualunque Tool.
Autore: AsprusT26
Descrizione

Su un topic che nemmeno ricordo, avevo accennato al fatto che io so come creare l'animazione di una pagina di un libro che viene Sfogliata, a prescindere dal libro. Ho ricevuto un'implorante richiesta (da chi, non dirò per Privacy XD) di scrivere un tutorial su come fare, e così eccomi qua.
Mettiamo in chiaro qualche cosa, però. Il procedimento che vi spiegherò è complesso, molto difficile da fare per chi non è abile o quantomeno non utilizza GIMP; sì, perché io utilizzerò GIMP. Fatevene una ragione. GIMP è gratuito, e praticamente ha tutte le feature che il suo collega, Photoshop, offre, senza contare il fatto che quest'ultimo costa, ed è troppo oneroso alle tasche di un povero ed umile Panda Elettrico quale io sono. :Ok:
Ragion per cui, se non avete dimestichezza con GIMP, se non lo volete scaricare, e se avete qualche problema con i Panda Elettrici, vi suggerisco caldamente di cliccare il banner e di leggervi un altro Topic che vi soddisfi; il forum ne è pieno. XD

PRO:

  • È possibile utilizzare questo procedimento per praticamente qualunque libro aperto esistente.
  • Molto efficace e versatile.
  • Riutilizzabile in qualunque momento.

CONTRO:
  • Non è intuitivo.
  • Le pagine possono risultare "legnose".
  • Ci vuole un bel po' di tempo per ogni frame.


Ultima modifica: 01/08/2011


2. Tutorial



Ve lo spiegherò con un elenco a punti numerati. Cercherò di essere il più chiaro possibile... leggete per bene ogni punto prima di passare al prossimo. Per questo tutorial utilizzo la versione Gimp 2.6. Prestate molta attenzione ai punti in Grassetto, sono particolarmente importanti.

1. Dopo aver deciso che immagine modificare, aprite il programma e attendete che si carichino i plug-in e gli script. Questa dovrebbe essere la vostra finestra dell'applicazione.

Immagine inserita

Ricordatevi di fare una copia dell'immagine prima di fare qualsiasi modifica all'originale. Tramite il menù File - - > Apri, caricate la vostra immagine del libro nel "banco di lavoro".

2. Nella tavolozza degli Strumenti, cercate l'icona di un paio di forbici, e cliccatela. Queste sono le Forbici Intelligenti, grazie alle quali potrete selezionare automaticamente la vostra pagina senza utilizzare i classici Seleziona, tramite un algoritmo molto utile ed efficace. Nell'immagine l'icona è cerchiata da un rettangolo arrotondato ROSSO.

Immagine inserita

Con precisione ed accuratezza, tracciate il contorno attorno al bordo della pagina, facendo attenzione ad eventuali pieghe o strappi (come ho fatto io. Peggior immagine non potevo utilizzare, >_<). Partendo dal margine in basso, cliccate lungo il bordo ripetutamente, e il programma farà da sè, trovando automaticamente i bordi del foglio. Se sbagliate, o se il programma calcola un percorso inesistente (sì, può capitare molto facilmente), cliccate sul tracciato già fatto o su uno dei punti blu e trascinatelo a forza verso la posizione corretta. Se il programma non ascolta, lasciate perdere per il momento. Ci passeremo dopo.

Immagine inserita

Quando siete arrivati al margine superiore, cliccate semplicemente sul punto iniziale del tracciato per chiuderlo e selezionare l'area. La piega centrale della pagina è una linea retta, per cui non preoccupatevi di tracciare più punti al suo interno, il programma farà da sè.


Immagine inserita

Attenzione! Per quanto intelligenti, le Forbici non saranno mai precise al 100% nel selezionare per bene la pagina. Questo perché è pur sempre una macchina il vostro strumento di lavoro, che non può riconoscere quello che state selezionando, può solo cercare di trovare un possibile margine all'area da selezionare. In questo caso, è molto probabile che verranno lasciati via alcuni pixel; come potete notare, è capitato anche a me, in quella "protuberanza" al centro del bordo superiore della pagina >_<
In tal caso, in gioco ritornano i cari, vecchi, rettangoli di selezione, o i Lazo, se preferite, insomma, gli strumenti che introducono la mano umana nel lavoro. Utilizzando i primi tre strumenti della tavolozza Strumenti (cerchiati in rosso nell'immagine), selezionate i pixel che le forbici ha lasciato indietro, tenendo premuto Shift per aggiungere pixel alla selezione, e Ctrl per sottrarli. Più precisi sarete, più l'effetto sarà realistico poi.

Immagine inserita

3. Ora che la pagina è selezionata, possiamo finalmente procedere e "Voltare Pagina" del libro. Premete Ctrl + C per copiare la pagina; poi deselezionate il tutto. XD.
Premete Ctrl + V per incollare la vostra nuova pagina. In teoria, la selezione dovrebbe ritrovarsi esattamente nello stesso punto di prima, ma se così non fosse, spostatela voi e sovrapponetela alla pagina inferiore. Non deselezionate.
Ora è giunto il tempo. Nella tavolozza Strumenti, cercate l'icona di un trapezio con agli angoli inferiori delle frecce bianche. Selezionandolo, passerete allo strumento Prospettiva, che serve appunto alla nostra opera. Con questo, potremo "sollevare" la nostra pagina-selezione. La didascalia recita "Cambia la prospettiva del livello", e che cos'è una pagina se non un intonso livello bi-dimensionale?

Immagine inserita

Ordunque, cliccate su Prospettiva e nelle impostazioni, alla voce Trasforma, cliccate l'iconcina del Livello, la minuscola fotografia a sinistra del quadratino rosso. Poi, lasciando tali il resto delle impostazioni, cliccate sulla selezione.
Vedrete che adesso la nostra pagina è circoscritta da un quadrilatero, con ai vertici degli altri quadrati. Senza mai toccare quelli a sinistra, che rappresentano "l'attaccatura" al dorso del libro, tenete cliccati i vertici a destra e trascinateli come meglio volete. A questo punto la faccenda dovrebbe essere abbastanza intuitiva; il livello si piega e si torce esattamente come una pagina, ma se doveste avere qualche problema, allora prendete un libro, apritelo e studiate il movimento di una pagina che si sfoglia.
Qual è la difficoltà? È che qui non avete nessun limite, nessuno. Potreste super-deformare la pagina, se non fate attenzione; potreste renderla più lunga e larga del dovuto; potreste impostare la pagina in un piano impossibile alla normalità. Lo strumento Prospettiva non è pensato per il semplice movimento di una pagina, ma noi lo stiamo adattando a questo. Per questo dovete fare molta attenzione, e SOLO quando siete soddisfatti, cliccare nel pulsante Trasforma della finestra di dialogo.

Immagine inserita

4. Ormai siamo a buon punto. Selezionata di fronte a noi abbiamo adesso la pagina, sfogliata per un quarto. Non deselezionate subito, a questo punto; abbiamo da aggiungere l'ombra alla pagina sottostante. Premete Ctrl + X per tagliare dallo sfondo la pagina, e, per precauzione, incollatela in un nuovo documento tramite il menù Modifica - > Incolla Come - > Nuova Immagine, casomai per sfiga in seguito copiaste qualcos'altro (parlo per esperienza vissuta :/ ).
Tornate alla vostra immagine del libro, e selezionate lo strumento Scherma-Brucia, l'ultimo della tavolozza. Questo permette di scurire e/o sbiancare le aree dell'immagine in cui andrete a cliccare, ma per impostazioni iniziali avrete un pennello un po' troppo "forte" per creare un'ombra soffusa e indistinta. Per renderlo più adatto, io ho impostato come Pennello il Circle Fuzzy 19, il cerchio sfuocato più grande, e come Scala un valore ideale di 3.91, senza ovviamente contare il Tipo che è impostato a Brucia. Potete giocherellare con le restanti due impostazioni rimaste, ma per quel che dobbiamo fare qui vanno bene anche così come sono.
Sulla pagina che si trova sotto a quella "sfogliata" (che al momento è stata tagliata via, ricordate?), iniziamo a creare delle aree scure, cliccando come meglio preferite nei punti più adatti, a seconda della luce che intendete dare al libro. Continuate a ripetere questo procedimento, magari ogni tanto incollando la pagina-selezione (con Ctrl + V) per vedere se l'ombra va bene, per poi cancellarla via con Canc se ancora l'ombra non va bene.

Immagine inserita

Quando sarete soddisfatti, incollate la vostra pagina, posizionatela nella posizione corretta e deselezionate il tutto. Date gli ultimi tocchi con la Matita in Scala 0.01 e il Contagocce per prelevare i colori che desiderate, finchè non sarete del tutto soddisfatti.

Immagine inserita

Salvate tramite il menù File - > Salva o File - > Salva Come nel formato che preferite, preferibilmente in PNG; ed ecco che avrete creato un frame dell'animazione da voi ambita!!
Ecco a voi, per esempio, l'immagine su cui ho lavorato io:

Immagine inserita

E questo è quanto. Come potete vedere, è un metodo non così semplice, ma che dà ottimi risultati. Salvate, convertite l'immagine a 8 o 16 bit, importatela nel vostro Tool e sfruttatela nel modo che preferite; credo che non abbia bisogno di spiegarvi come si fa, ma nel caso... vi arrangiate. XD.
Con un po' di pratica, riuscirete velocemente a trasformare qualunque immagine di un libro aperto con quanti frame preferite, e chissà, non solo libri, ma porte, finestre, giornali, credenze!
La mia immagine d'esempio è libera, potete farci quello che volete, utilizzarla come vi pare, ma creditate almeno me per averne fatto un frame, e Maxim, che l'ha rippata da Heroes of Might and Magic 2 e che ho trovato su The Spriters Resource. Vi prego é_è
E se utilizzaste tal metodo per farvi voi le vostre immagini... ci scappa una citazione nei credits del gioco, che vi ho insegnato il trucco, vero? :ph34r:

Enjoy!!

AsprusT26

:nana:



Membro N° 0026

userbarufficialeprp.png


SCContest1Oct.gif

 

Ringrazio in particolare AsprusT26 che credo abbia esagerato con i complimenti. :biggrin:

Questo è uno dei più grandi onori che mi siano mai stati fatti. GRAZIE RUDO!!

Spoiler
è mio parere che Guardian modifichi sistematicamente tutte le firme in cui viene citato <- Non è vero! Tu menti! XDXD E:3 e questa immagine? XD ^ ^ -> sisi.gif


    Guardian of Irael
  • Coniglietto Rosso

  • Rpg²S Admin
  • Rens: 195
  • 19
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 58424 messaggi
  • Sesso:Maschio
  • Provenienza:Bagnaia (Viterbo)
  • Abilità:Apprendista


#2 Inviato 01 August 2011 - 18:32 PM

Uhm raro vedere tutorial grafici così specifici, mi sembra ben dettagliato questo e dato il gran numero di libri o skin dedicate presenti nei progetti pure utile! XD
Bel lavoro Panda! ^ ^
Spero non risulti troppo arduo soprattutto per chi non è pratico di programmi di grafica avanzati D:
^ ^

(\_/)
(^ ^) <----coniglietto rosso, me!     
(> <)

 
Il mio Tumblr dove seguire i miei progetti, i progetti della Reverie : : Project ^ ^
 
KdUDtQt.png disponibile su Google Play, qui i dettagli! ^ ^
 
FwnGMI3.png completo! Giocabile online, qui i dettagli! ^ ^  
 
REVERIE : : RENDEZVOUS (In allenamento per apprendere le buone arti prima di cominciarlo per bene ^ ^) Trovate i dettagli qui insieme alla mia intervista (non utilizzerò più rpgmaker) ^ ^

Spoiler


    mmmarm
  • Nuovo Arrivato

  • Utenti
  • Rens: 2
  • 0
  • Stelletta
  • 21 messaggi
  • Sesso:Maschio
  • Provenienza:Palermo
  • Abilità:Novizio

#3 Inviato 01 August 2011 - 20:14 PM

Uso da molto Gimp ma non ci avevo mai pensato. Molto utile comunque, potrei anche usarlo.

Immagine inserita


Membro Fondatore n. 5 dell'associazione di "Mr.FruffoloBatuffolo"


Immagine inserita


    AsprusT26
  • Panda Elettrico

  • Utenti
  • Rens: 130
  • 0
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 2168 messaggi
  • Sesso:Maschio
  • Provenienza:Vicino alla 26° Casa. Non lo sapevi?
  • Abilità:Adepto

#4 Inviato 01 August 2011 - 22:21 PM

Grazie per i complimenti :D
:nana:

Membro N° 0026

userbarufficialeprp.png


SCContest1Oct.gif

 

Ringrazio in particolare AsprusT26 che credo abbia esagerato con i complimenti. :biggrin:

Questo è uno dei più grandi onori che mi siano mai stati fatti. GRAZIE RUDO!!

Spoiler
è mio parere che Guardian modifichi sistematicamente tutte le firme in cui viene citato <- Non è vero! Tu menti! XDXD E:3 e questa immagine? XD ^ ^ -> sisi.gif


    André LaCroix
  • Alex (Rm2k)

  • Utenti
  • Rens: 21
  • 0
  • StellettaStellettaStellettaStellettaStelletta
  • 1013 messaggi
  • Sesso:Maschio
  • Provenienza:Somewhere
  • Abilità:Adepto

#5 Inviato 01 August 2011 - 22:26 PM

Molto bello e utile. Mi sorge un dubbio, però. Per avere un'animazione abbastanza fluida in RM2003 quanti frame dovrei creare?

(Sì, sono l'AnteroLehtinen che bazzica in chat. E... sì, una volta insegnavo storyboarding.)

firmadn.png


    AsprusT26
  • Panda Elettrico

  • Utenti
  • Rens: 130
  • 0
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 2168 messaggi
  • Sesso:Maschio
  • Provenienza:Vicino alla 26° Casa. Non lo sapevi?
  • Abilità:Adepto

#6 Inviato 01 August 2011 - 22:43 PM

Molto bello e utile. Mi sorge un dubbio, però. Per avere un'animazione abbastanza fluida in RM2003 quanti frame dovrei creare?


Domanda interessante. Reputo che almeno tre frame ci vogliano, l'ossatura, in pratica. Il primo è come quello che ho fatto io qui. Il secondo dovrebbe essere una pagina "in piedi", a 90°. Il terzo è il come il primo, solo che la pagina è a sinistra...
Se vuoi un'animazione fluida, aggiungi frame del primo e del secondo tipo ad un'angolazione differente. Se ne aggiungi uno per tipo, tranne per quello a 90° gradi, dovrebbe venire già un'animazione abbastanza fluida.
:nana:

Membro N° 0026

userbarufficialeprp.png


SCContest1Oct.gif

 

Ringrazio in particolare AsprusT26 che credo abbia esagerato con i complimenti. :biggrin:

Questo è uno dei più grandi onori che mi siano mai stati fatti. GRAZIE RUDO!!

Spoiler
è mio parere che Guardian modifichi sistematicamente tutte le firme in cui viene citato <- Non è vero! Tu menti! XDXD E:3 e questa immagine? XD ^ ^ -> sisi.gif


    André LaCroix
  • Alex (Rm2k)

  • Utenti
  • Rens: 21
  • 0
  • StellettaStellettaStellettaStellettaStelletta
  • 1013 messaggi
  • Sesso:Maschio
  • Provenienza:Somewhere
  • Abilità:Adepto

#7 Inviato 01 August 2011 - 23:24 PM

Quindi, almeno 4 o 6 frame in totale. Bene, grazie.

PS: Ma perchè termini OGNI messaggio con una linguaccia? Lol.

(Sì, sono l'AnteroLehtinen che bazzica in chat. E... sì, una volta insegnavo storyboarding.)

firmadn.png


    Lomax af
  • Utente avanzato

  • Utenti
  • Rens: 22
  • 0
  • StellettaStellettaStelletta
  • 475 messaggi
  • Sesso:Maschio
  • Provenienza:Isola di Centra
  • Abilità:Apprendista

#8 Inviato 02 August 2011 - 01:19 AM

Anche se possiedo gimp da anni non l'ho mai usato. Ho sempre fatto il grosso del lavoro con paint e poi qualche rifinitura con cs3 photoshop.
Però grazie a questa tua guida finalmente posso imparare ad usarlo. Complimenti un tutorial molto preciso e chiaro. E il tema, almeno per me, utilissimo. Grazie ancora!
:nana:
......
Cospladya 2011
La mia Lightning:

Immagine inserita

........
Nissa comix 2011vincitori come miglior gruppo:
Immagine inserita

    Testament
  • Il Custode della Memoria

  • Utenti Speciali
  • Rens: 1141
  • 51
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 12370 messaggi
  • Sesso:Maschio
  • Provenienza:Firenze
  • Abilità:Esperto


#9 Inviato 02 August 2011 - 01:29 AM

una piccola aggiunta a questo tutorial potrebbe essere la definizione dell'arco (semicerchio) lungo cui far scorrere i vertici delle pagine per evitare che si accorcino nella sfogliatura.

comunque io non farei meno di 21/25 frame

183.png
donatePQ.gif bYridanSiBEi27EwrQBOKvYB04IgpCwL27xIfmrh FBnono.gif


    Hash'ak'Gik
  • Alex (Rm2k)

  • Utenti
  • Rens: 46
  • 0
  • StellettaStellettaStellettaStellettaStelletta
  • 837 messaggi
  • Sesso:Maschio
  • Abilità:Maestro

#10 Inviato 02 August 2011 - 02:08 AM

Per chi avesse Photoshop e non "trovasse" il tool della prospettiva faccio notare che si trova solo in modalità trasformazione libera (CTRL+T)

Va spostato il centro di rotazione a lato della pagina (la croce circoscritta al centro del disegno) e poi vanno spostati i punti di ancoraggio dopo aver scelto la modalità prospettiva (click destro sull'immagine>prospettiva)

Inoltre per la "legnosità" di cui parlava Asprus, tramite Photoshop (sempre dalla trasformazione libera) è possibile ovviare grazie alla modalità "altera" (click destro sull'immagine>altera)
Chiunque con un minimo di abilità nell'usare le curve di Bezier riesce ad ottenere pagine realistiche


@André: Termina ogni messaggio con :nana: per un "meme" risalente alla mia iscrizione...In quel tempo io e Guardian duellavamo a colpi di ^ ^ e di :P, Asprus ha voluto intromettersi nel duello con :Ok:

PS: In teoria non dovrei essere qui, ma non potevo permettere che un tutorial del genere non fosse perfetto

Modificato da Hash'ak'Gik, 02 August 2011 - 02:09 AM.

New-age-retro-hippie-psy_zpsde262717.gif

Spoiler

    Lomax af
  • Utente avanzato

  • Utenti
  • Rens: 22
  • 0
  • StellettaStellettaStelletta
  • 475 messaggi
  • Sesso:Maschio
  • Provenienza:Isola di Centra
  • Abilità:Apprendista

#11 Inviato 02 August 2011 - 02:21 AM

Ah la legnosità.. Ci sono arrivato solo adesso.
Non è meglio:
1.pagina selezionata copiata e incollata su un nuovo foglio di paint.

2.Salvare con nome l'immagine.

3.aprirla con photoshop
(io uso cs3) e selezionare fluidifica

In questo modo non viene più semplice..chiedo.
Ovvio si andranno ad alterare i bordi per renderlo più carta che cartone.

L'ho pensata adesso. Se è una cafchiata perdonatemi.
......
Cospladya 2011
La mia Lightning:

Immagine inserita

........
Nissa comix 2011vincitori come miglior gruppo:
Immagine inserita

    BrokenSword
  • Nuovo Arrivato

  • Utenti
  • Rens: 0
  • 0
  • Stelletta
  • 3 messaggi
  • Sesso:Maschio
  • Provenienza:...From Your Nightmares..
  • Abilità:Novizio

#12 Inviato 02 August 2011 - 02:51 AM

Beh, Secondo Me Con Questa Procedura Verrebbe Fuori Un " Brodo " E Non Una Curvatura, Al Massimo Potresti Usare I Filtri Di Distorsione Ma Sarebbe Un Impresa Anche Con Quelli :nana:

    Lomax af
  • Utente avanzato

  • Utenti
  • Rens: 22
  • 0
  • StellettaStellettaStelletta
  • 475 messaggi
  • Sesso:Maschio
  • Provenienza:Isola di Centra
  • Abilità:Apprendista

#13 Inviato 02 August 2011 - 03:14 AM

È da provare. Comunque lo utiliz. sicuro questo tutorial, non appena inizieremo ad assemblare il menu principale del game.
......
Cospladya 2011
La mia Lightning:

Immagine inserita

........
Nissa comix 2011vincitori come miglior gruppo:
Immagine inserita

    AsprusT26
  • Panda Elettrico

  • Utenti
  • Rens: 130
  • 0
  • StellettaStellettaStellettaStellettaStellettaStelletta
  • 2168 messaggi
  • Sesso:Maschio
  • Provenienza:Vicino alla 26° Casa. Non lo sapevi?
  • Abilità:Adepto

#14 Inviato 02 August 2011 - 10:29 AM

1.pagina selezionata copiata e incollata su un nuovo foglio di paint.

2.Salvare con nome l'immagine.

3.aprirla con photoshop


Non Paint. Paint crea automaticamente l'antialias alle selezioni che vengono incollate. Metti che i fogli dei nuovi documenti di Paint sono sempre bianchi, incollando la tua pagina formeresti un bordo di pixel bianchi che risulterebbe scomodo. Ecco perché ho consigliato di incollare in un documento di GIMP, il cui sfondo è trasparente per impostazioni.

:ohmy:

Membro N° 0026

userbarufficialeprp.png


SCContest1Oct.gif

 

Ringrazio in particolare AsprusT26 che credo abbia esagerato con i complimenti. :biggrin:

Questo è uno dei più grandi onori che mi siano mai stati fatti. GRAZIE RUDO!!

Spoiler
è mio parere che Guardian modifichi sistematicamente tutte le firme in cui viene citato <- Non è vero! Tu menti! XDXD E:3 e questa immagine? XD ^ ^ -> sisi.gif


    Lomax af
  • Utente avanzato

  • Utenti
  • Rens: 22
  • 0
  • StellettaStellettaStelletta
  • 475 messaggi
  • Sesso:Maschio
  • Provenienza:Isola di Centra
  • Abilità:Apprendista

#15 Inviato 02 August 2011 - 13:40 PM

vero..vero..i pixel bianchi!
Non ci avevo pensato!
Quindi si fare questa variazione.
Salvare l'immagine in gimp.
Comunque se si fa con estrema precisione si riesce con fluidifica, basta mettere il cursore piccolo (non troppo) e si passa. Almeno..
Comunque è un tutorial che in maniera imminente utilizzerò. Poi posterò qui i (scusate la battuta ma ci sta: 'risvolti') ciao :ohmy:
......
Cospladya 2011
La mia Lightning:

Immagine inserita

........
Nissa comix 2011vincitori come miglior gruppo:
Immagine inserita

    Robert Trent
  • Utente avanzato

  • Utenti
  • Rens: 21
  • 1
  • StellettaStellettaStelletta
  • 202 messaggi
  • Sesso:Maschio
  • Provenienza:Rabanastre, Ivalice.
  • Abilità:Adepto

#16 Inviato 16 October 2015 - 00:26 AM

Bel tutorial, domani provo a fare anche io qualcosa di simile :)


WmE9anR.png

______________________________________________________________

 

You pulled the trigger just for fun, forgetting i'm a loaded gun.





  • Feed RSS