Καλώς ήλθατε στο μάθημα "Κινούμενα σχέδια στο After Effects" από το PSD-Tutorials.de. Είμαι ο Philipp Sniechota και θα σας καθοδηγήσω μέσα από το μάθημα.

Εύκολα φτιαγμένο animation: έννοια - κείμενο και ήχος


Θέλω να εξερευνήσουμε μαζί ένα πρακτικό έργο στον κόσμο των κινούμενων σχεδίων και να δούμε τι χρειάζεται για μια καλή κινούμενη εικόνα.

Θα χρησιμοποιήσουμε το After Effects ως εργαλείο και δεν θα ασχοληθούμε με τις βασικές αρχές. Δεν θα μάθουμε πώς να δημιουργήσουμε σύνθεσεις, να χρησιμοποιήσουμε επίπεδα χρωμάτων ή να εφαρμόσουμε εφέ, αλλά θα εστιαστούμε στο τι κάνει μια καλή κινούμενη εικόνα. Οι γνώσεις που θα αποκτήσετε εδώ μπορούν να εφαρμοστούν σε πολλούς τομείς. Δεν χρειάζεται να σκεφτείτε ούτε καν την εργασία σας στο 2D After Effects. Αγγίζει το 3D και μάλιστα την χαρακτηριστική απεικόνιση.

Αυτό το μάθημα είναι ενδιαφέρον για οποιονδήποτε ενδιαφέρεται για το Motion Design και έχει να κάνει με την εργασία του στην κινούμενη εικόνα.


Συνεργαζόμαστε σε ένα έργο που έχω ονομάσει "Κινούμενα σχέδια εύκολα". Δημιουργούμε ένα σύντομο trailer, ο οποίος εστιάζει στην κινούμενη εικόνα. Θα προσδιορίζουμε βήμα-βήμα τι αποτελεί καλές κινήσεις, τι είναι σημαντικό και ποιους κανόνες πρέπει να λαμβάνουμε υπόψη και να εφαρμόζουμε στο After Effects. Πρόκειται για το πώς λειτουργεί αυτή η υλοποίηση, ποιες συμβουλές και κόλπα έχω στο νου μου και τι πρέπει να προσέχετε.

Το πρακτικό έργο είναι στο στυλ πολύ απλοϊκό. Δούλεψα μόνο με δύο χρώματα, δεν δημιούργησα μεγάλες εικόνες και γενικά όλα τα κράτησα πολύ απλά. Επέστρεψα στο στυλ της εποχής όπου οι εικόνες άρχισαν να κινούνται.

Οι γνώσεις στην κινούμενη εικόνα που σας διδάσκω υπάρχουν ήδη σχεδόν εδώ και 100 χρόνια και χρησιμοποιούνται από τότε από την Walt Disney, τη Pixar και τα άλλα μεγάλα στούντιο κινουμένων σχεδίων.

Θέλω ακριβώς να ανακαλύψω μαζί σας αυτόν τον κόσμο και με τον πλέον απλοποιημένο τρόπο, έτσι ώστε μέχρι το τέλος να έχετε καταλάβει τον πυρήνα μιας καλής κινούμενης εικόνας. Με αρκετή πρακτική, γιατί αυτό είναι επίσης σημαντικό, μπορείτε να εμπλουτίσετε σημαντικά τα κινούμενα σχέδιά σας τελικά.

Με αυτό το νόημα, σας εύχομαι καλή διασκέδαση με αυτό το μάθημα, ένα εκπαιδευτικό χρονικό διάστημα και θα ξαναδούμε σύντομα όταν πρόκειται για τις βασικές αρχές της κινούμενης εικόνας, δηλαδή το βασικό έργο του Walt Disney, το "Disney Rules - Μέρος 1" και μετά θα συνεχίσουμε με την έννοια του χρώματος.

Πριν ξεκινήσουμε λοιπόν και βυθιστούμε στο After Effects, θα ήθελα να χάσω λίγα λόγια για το σχέδιο, δηλαδή λίγα λόγια για το τι πρέπει να κάνει κανείς πριν αρχίσει.

Πρέπει να σκεφτείτε σε ποια κατεύθυνση στυλιστικά θέλετε να πάτε και ποια εμφάνιση ή ποιο mood θέλετε να μεταφέρετε.

Για αυτήν την περίπτωση, σκέφτηκα να απομακρυνθούμε από αυτά τα υπερλαμπρά Motion Graphics και Shiny Spheres που γνωρίζουμε σήμερα, από το Sky και την αμερικανική τηλεόραση. Ας πάμε ένα βήμα πίσω στην εποχή όπου ξεκίνησε η κινούμενη εικόνα, στην εποχή των κινούμενων σχεδίων και των κανόνων της Disney και ας δώσουμε στο βίντεο μας μια μικρή εμφάνιση προς την κατεύθυνση του κινούμενου σχεδίου.

Φυσικά δεν θέλουμε να υλοποιήσουμε κινούμενα σχέδια, γιατί αυτό είναι πολύ περίπλοκο και θέλουμε να χρησιμοποιήσουμε το After Effects. Έτσι, απλά καταφεύγουμε στη στιλιστική προσέγγιση των κινουμένων σχεδίων και την εφαρμόζουμε στο After Effects. Τι μας βοηθάει σε αυτό;

Βήμα 1

Σε αυτήν την περίπτωση, αποφάσισα ήδη για ένα χειρόγραφο γραφτό γραμματοσειρά. Αυτή η γραφή δεν είναι χειροποίητη από εμένα, αλλά είναι μια γραμματοσειρά που μπορείτε να βρείτε με το όνομα Amatic στο fontsquirrel.com. Ευχαριστώ τον δημιουργό Vernon Adams.

Εύκολη δημιουργία animation: Έννοια - Κείμενο και Ήχος.



Έχουμε κεφαλαία και μικρά γράμματα, τα οποία γράφονται όλα με κεφαλαία, αλλά έτσι διαθέτουμε δύο διαφορετικές εκδόσεις της γραμματοσειράς. Τα πεζά γράμματα είναι επανασχεδιασμένες εκδόσεις των κεφαλαίων.

Μια όμορφη γραμματοσειρά που λειτουργεί πολύ καλά σε κινούμενα σχέδια.

Εύκολη δημιουργία Animation: Έννοια - Γραφικό σχέδιο και ήχος.



Θα σας δείξω σε ένα από τα επόμενα μαθήματα πώς να το κάνετε, ώστε να φαίνεται ότι κάθε καρέ είναι πραγματικά νεοζωγραφισμένο.

Γι' αυτό, θα κατεβάσω αρχικά αυτήν τη γραμματοσειρά και θα την εγκαταστήσω.

Βήμα 2

Για να ανακτήσουμε ακόμα περισσότερο την αίσθηση της εποχής όπου οι εικόνες άρχισαν να κινούνται και έχει αρχίσει και η ταινία, γύρω στο 1900 περίπου, αποφάσισα να πάω και στη μουσική κατεύθυνση. Ένα Ragtime μας θυμίζει τον Charly Chaplin, τον Dick & Doof και όλες αυτές τις αρχικές προσπάθειες των ταινιών τηλεόρασης και φυσικά της βιομηχανίας των κινουμένων σχεδίων.

Το κατάλληλο κομμάτι το βρήκα στο Incompetech.com από τον Kevin MacLleod. Ένας φοβερός τύπος, παρών από τον Μάρτιο του 2006

Βήμα 3

Από πλευράς χρωμάτων, αποφάσισα να το κρατήσουμε αρκετά απλό σε μπλε σε συνδυασμό με κίτρινο, χρησιμοποιώντας έτσι μόνο δύο αποχρώσεις, οι οποίες είναι επίσης αντιστρεπτικές μεταξύ τους και έτσι ξεχωρίζουν πολύ καλά μεταξύ τους.

Αυτό λειτουργεί πολύ καλά και όταν κινείται προς την άλλη κατεύθυνση, δηλαδή κίτρινο κείμενο σε μπλε φόντο ή μπλε κείμενο σε κίτρινο φόντο. Έτσι μπορώ να παίξω, να διαιρέσω το βίντεο και να δημιουργήσω κεφάλαια, αλλάζοντας τα δύο χρώματα κατά τη μέση της anim ταινίας, για παράδειγμα, για να δημιουργήσω ένα οπτικό διαχωριστικό μεταξύ εξηγητικών και ερωτηματικών θέσεων. Αυτό είναι πολύ κατάλληλο για τέτοιες περιπτώσεις.

Εύκολη δημιουργία Animation: Έννοια - Γραφικό σχέδιο και ήχος.

Βήμα 4

Γι' αυτό θέλουμε να δημιουργήσουμε μια διεύθυνση και να ετοιμάσουμε αρχικά το αρχείο έργου, ώστε να μπορέσουμε να φτιάξουμε ωραίες anim και να επικεντρωθούμε σε αυτό.

Ανοίγουμε το After Effects και εισάγουμε από τον φάκελο με τον ήχο το "Fig Leaf Rag" και το εισάγουμε στο After Effects.

Κινούμενα σχέδια εύκολα δημιουργημένα: έννοια - γραφή και ήχος



Εμφανίζεται μια διάρκεια 3:29 εδώ, αλλά το βίντεο βέβαια δεν θα διαρκέσει τόσο. Θα τελειώσουμε το κομμάτι μετά από περίπου μισό λεπτό.

Βήμα 5

Για να ξεκινήσουμε, σύρουμε το "Fig Leaf Rag" πάνω στο εικονίδιο σύνθεσης και δημιουργούμε μια σύνθεση.

Ελέγχω με δεξί κλικ ή Ctrl+K τις ρυθμίσεις σύνθεσης. Εδώ είναι όλα τέλεια: Επιλέγουμε το προεπιλεγμένο: 720 25, δηλαδή το Half-HD με 25 καρέ ανά δευτερόλεπτο (Framerate), επειδή βρισκόμαστε στην Ευρώπη.

Αφήνουμε το μήκος όπως είναι, έτσι έχουμε χώρο προς τα πίσω. Δεν χρειάζεται να ασχοληθούμε με αυτό ακόμα. Επιβεβαιώνουμε πατώντας ΟΚ.

Κινούμενα σχέδια εύκολα: Έννοια - Γραφή και Ήχος

Βήμα 6

Η γραμματοσειρά είναι εγκατεστημένη και ρυθμισμένη: Amatic SC.

Γράφω "Ευκολία στην ανιματιον" και ρυθμίζω το μέγεθος της γραμματοσειράς λίγο μεγαλύτερο.

Ένα μικρό tip: Θα έπρεπε πάντα να προσπαθείτε να ρυθμίζετε το μέγεθος της γραμματοσειράς στο πλαίσιο εργαλείων. Βλέπω συχνά ανθρώπους που γράφουν ένα κείμενο και μετά το μετακινούν και το κάνουν μεγαλύτερο κρατώντας το κλειδωμένο Shift-κλειδί. Από αυτό αποτελείτε, μόνο την κλιμάκωση του επιπέδου. Αυτό δεν είναι πρόβλημα όσον αφορά την ποιότητα, διότι τα κείμενα στο After Effects είναι διανυσματικά, αλλά είναι λίγο δύσκολο όταν θέλετε να καθορίσετε ομοιόμορφα διάφορα κείμενα - δεν πρέπει να έχετε πολλές μεγέθη γραμματοσειρών. Και εκεί γίνεται δύσκολο το να τα φέρετε στο ίδιο μέγεθος.

Κινούμενα σχέδια εύκολα: Έννοια - Κείμενο και Ήχος



Θα έπρεπε να κρατήσετε την κλιμάκωση για ένα πιο υψηλότερο και μεγέθυνση. Για το διακοσμητικό και το βασικό σχεδιασμό σας συνιστώ το παλέτα σχεδίασης και το μέγεθος γραμματοσειράς.

Για την εργασία με κείμενο έχω άλλο ένα tip για εσάς:

Όταν μετακινείστε τον δρομέα σας μέσα στο κείμενο, μπορείτε να προσαρμόσετε μεμονωμένα την απόσταση μεταξύ των μεμονωμένων γραμμάτων, δηλαδή το Spacing (επίσης γνωστό ως Spationation ή Kerning), με μεγάλη ευκολία.

Βλέπω συχνά ανθρώπους που χρησιμοποιούν τον slider στο πλαίσιο εργαλείων - όταν επιλέγω τα πάντα, έχω εδώ το πλήρες πλάτος - και προσπαθούν να κερώσουν το κείμενο. Αυτό είναι ένα μαζοχιστικό τρόπο να το κάνετε. Μπορώ πραγματικά να κάνω όλα αυτά πολύ εύκολα χρησιμοποιώντας τα Alt+Αριστερό βέλος ή δεξιά, και μπορώ να σταθμίσω το κείμενο ωραία μέχρι να μου αρέσει.

Κατασκευή animation εύκολα: Έννοια - κείμενο και ήχος



Στην περίπτωσή μας, μια αποτυχημένη spationation δεν κάνει καμία διαφορά, γιατί εδώ είμαστε πάντα σε μια εμφάνιση χειρόγραφου και μια τέλεια spationation δεν είναι τόσο απαραίτητη, όσο θα ήταν για μια Sans Serif γραμματοσειρά.

Βήμα 7

Τώρα θα ήθελα επίσης να αλλάξετε το διάκενο μεταξύ των γραμμών. Εκεί ξανά υπάρχει ένας slider, ή μπορείτε να κάνετε τριπλό κλικ στη δεύτερη γραμμή, έτσι ώστε να επιλεγεί όλη η γραμμή.

Και μετά μπορείτε άνετα, κρατώντας το Alt-κλειδί και τα βελάκια προς τα επάνω και κάτω, να τοποθετήσετε τη γραμμή όπως σας αρέσει.

Η αυτόματη ταξινόμηση γίνεται αμέσως και κατεβαίνει σε βήματα, κάτι που για μένα προσωπικά είναι πολύ πιο βολικό.

Κινούμενα σχέδια εύκολα: Έννοια - Γραφή και Ήχος