Πώς να φτιάξετε ένα απλό animation στο Illustrator. Εικονογραφημένο σεμινάριο για το Adobe Illustrator CS. Κάντε λήψη και συνδέστε το πρόσθετο

Έχετε ένα ή δύο εικονίδια που θα θέλατε να ζωντανέψετε με κινούμενα σχέδια. Από πού θα ξεκινούσατε; Ας υποθέσουμε ότι έχετε αρχεία SVG, Illustrator CC και After Effects CC, αλλά η λύση σας διαφεύγει.

Σε αυτό το άρθρο, θα δείξω πώς μπορείτε εύκολα να κάνετε κίνηση σε ένα αρχείο SVG, συμπεριλαμβανομένης της προετοιμασίας του αρχείου SVG στο Illustrator και της εισαγωγής του στο After Effects CC. Θα εξηγήσω επίσης πώς μπορείτε να το μετατρέψετε σε επίπεδα σχήματος και να προσθέσετε κίνηση. Τέλος, ας μιλήσουμε για εξαγωγή και απόδοση.

Το τελικό αποτέλεσμα της εργασίας.

Τώρα ας φτάσουμε στο διασκεδαστικό μέρος - μάθετε πώς να ζωντανεύετε τις εικόνες.

Προετοιμασία αρχείου SVG στο Illustrator

Ας ξεκινήσουμε ανοίγοντας το αρχείο SVG στο Adobe Illustrator CC. Θα δημιουργήσω κίνηση σε ένα μικρό εικονίδιο αυτοκινήτου που είναι διαθέσιμο δωρεάν στο Week Of Icons.

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

Μπορούμε να καταργήσουμε την ομαδοποίηση των αντικειμένων χρησιμοποιώντας το Release to Layers (Sequence) για να μην χάνουμε πολύτιμο χρόνο. Εισαγάγετε και οργανώστε ένα αρχείο στο After Effects CC

Τώρα είστε έτοιμοι να κάνετε εισαγωγή στο After Effects CC. Ας χρησιμοποιήσουμε τη συντόμευση πληκτρολογίου Ctrl+I (Windows) ή Command+I (Mac) για να φορτώσουμε το πλαίσιο διαλόγου Εισαγωγή αρχείου ή μεταβούμε στο Αρχείο > Εισαγωγή > Αρχείο... Από εκεί, επιλέξτε το αρχείο Illustrator CC που ετοιμάσαμε και κάντε κλικ στο Εισαγωγή . Θα πρέπει να εμφανιστεί ένα μικρό πλαίσιο διαλόγου με το όνομα του επιλεγμένου αρχείου. Επιλέξτε Σύνθεση από την αναπτυσσόμενη λίστα που ονομάζεται Είδος εισαγωγής.

Περισσότερο γρήγορος τρόποςεισαγωγή ενός αρχείου - κάντε διπλό κλικ στη θέση της στήλης στον πίνακα έργου.

Στο Timeline Panel θα δούμε μια νέα σύνθεση. Κάντε διπλό κλικ πάνω του. Θα πρέπει τώρα να δούμε τα επίπεδα Illustrator CC με πορτοκαλί εικονίδια στα αριστερά των ονομάτων τους.

Πριν ξεκινήσουμε, πρέπει να μετατρέψουμε όλα αυτά τα επίπεδα σε επίπεδα σχήματος. Πρέπει να τα επιλέξουμε όλα χρησιμοποιώντας Ctrl+A/Command+A ή χειροκίνητα χρησιμοποιώντας Shift + Αριστερό ποντίκι. Μετά από αυτό, κάντε δεξί κλικ στο επίπεδο και επιλέξτε Δημιουργία > Δημιουργία σχημάτων από διανυσματικό επίπεδο.

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

Μετατρέψτε τα επίπεδα Illustrator CC σε επίπεδα σχήματος στο After Effects CC

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

Η τοποθέτηση ετικετών σε επίπεδα σχήματος με κατάλληλα ονόματα, χρώματα, κείμενο και τοποθέτηση είναι πολύ πρακτική.

Για να διαμορφώσετε τις παραμέτρους, χρησιμοποιήστε τη συντόμευση πληκτρολογίου Ctrl+K/Command+K ή Σύνθεση > Ρυθμίσεις σύνθεσης... Από τις Ρυθμίσεις σύνθεσης, πρέπει να επιλέξετε Πλάτος, Ύψος, Ρυθμός καρέ και Διάρκεια. Για αυτό το έργο επέλεξα 60 καρέ ανά δευτερόλεπτο για να διατηρήσω το κινούμενο σχέδιο ομαλό.

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

Χρησιμοποιήστε το Pick Whip για να αντιστοιχίσετε ένα γονικό επίπεδο σε πολλαπλά επίπεδα.

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

Δημιουργία κινούμενων εικόνων

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

Σκίτσο που περιγράφει το κινούμενο σχέδιο

Το πρώτο βήμα ήταν να δημιουργήσω ένα ροκ στοιχείο ή στρώμα, αλλά αντί να επιστρέψω στο Illustrator CC για να προσθέσω ένα άλλο επίπεδο, απλώς χρησιμοποίησα το εργαλείο Pen Tool στο After Effects CC. Αυτό μου επέτρεψε να σχεδιάσω γρήγορα μια μικρή πέτρα.

Ω, το πανίσχυρο εργαλείο στυλό!

Ο κορμός ήταν μια σχετικά απλή εργασία. Το τοποθέτησα στο πίσω μέρος του αυτοκινήτου και έκανα ένα σημείο αγκύρωσης στην κάτω αριστερή κορυφή. Χρησιμοποιώντας το Pick Whip το εκχώρησα στο γονικό στρώμα σώματος. Το προτελευταίο βήμα ήταν να δώσουμε το εφέ της περιστροφής, που με τη σειρά του έκανε πιο ρεαλιστική τη στιγμή που το αυτοκίνητο αναπηδά.Το Bodymovin σε συνδυασμό με την κινητή βιβλιοθήκη Lottie.

ΥΣΤΕΡΟΓΡΑΦΟ. μπορείς να βρεις το δικό μου Αρχεία Illustrator CC και After Effects CC.

Το σύνολο εικονιδίων είναι διαθέσιμο για λήψη δωρεάν στο .

Πρόσφατα, διάφορα είδη κινούμενων εικόνων γραφικών SVG (Scalable Vector Graphics) σε ιστότοπους και εφαρμογές έχουν γίνει πολύ δημοφιλή. Αυτό οφείλεται στο γεγονός ότι τα πάντα πιο πρόσφατα προγράμματα περιήγησηςυποστηρίζει ήδη αυτή τη μορφή. Ακολουθούν πληροφορίες σχετικά με την υποστήριξη του προγράμματος περιήγησης για SVG.

Αυτό το άρθρο εξετάζει το απλούστερο παράδειγμα διανυσματικής κινούμενης εικόνας SVG χρησιμοποιώντας το ελαφρύ πρόσθετο Jquery Lazy Line Painter.

Πηγή

Για να ολοκληρώσετε και να κατανοήσετε πλήρως αυτήν την εργασία, βασικές γνώσεις HTML, CSS, Jquery είναι επιθυμητές, αλλά δεν απαιτούνται εάν θέλετε απλώς να κάνετε κίνηση SVG) Ας ξεκινήσουμε!

Και αυτά είναι τα βήματα που πρέπει να ακολουθήσουμε:

Δημιουργήστε τη σωστή δομή αρχείου

Κάντε λήψη και συνδέστε το πρόσθετο

Σχεδιάστε μια όμορφη εικόνα περιγράμματος στο Adobe Illustrator

Μετατρέψτε την εικόνα μας σε Lazy Line Converter

Επικολλήστε τον κώδικα που προκύπτει στο main.js

Προσθέστε λίγο CSS για γεύση

1. Δημιουργήστε τη σωστή δομή αρχείου
Σε αυτό θα μας βοηθήσει η υπηρεσία Initializr, όπου πρέπει να επιλέξουμε παραμέτρους όπως στην παρακάτω εικόνα.

• Classic H5BP (HTML5 Boiler Plate)
• Χωρίς Πρότυπο
• Μόνο HTML5 Shiv
• Ελαχιστοποιήθηκε
• Τάξεις IE
• Chrome Frame
• Στη συνέχεια, κάντε κλικ στο Λήψη!

2. Κάντε λήψη και συνδέστε το πρόσθετο

Δεδομένου ότι το initializr συνοδεύεται από την πιο πρόσφατη βιβλιοθήκη Jquery, από το αρχείο που πρέπει να κατεβάσουμε από το αποθετήριο του έργου Lazy Line Painter, χρειάζεται μόνο να μεταφέρουμε 2 αρχεία στο έργο μας. Το πρώτο είναι «jquery.lazylinepainter-1.1.min.js» (η έκδοση της προσθήκης μπορεί να διαφέρει) βρίσκεται στη ρίζα του φακέλου που προκύπτει. Το δεύτερο είναι το example/js/vendor/raphael-min.js.

Τοποθετούμε αυτά τα 2 αρχεία στον φάκελο js. Και τα συνδέουμε στο index.html πριν από το main.js ως εξής:

3. Σχεδιάστε ένα όμορφο περίγραμμα στο Adobe Illustrator

Σχεδιάστε την περίγραμμα εικόνα μας στο Illustrator (ο ευκολότερος τρόπος για να το κάνετε αυτό είναι με το Pen Tool)

Είναι απαραίτητο τα περιγράμματα του σχεδίου μας να μην κλείνουν γιατί για το εφέ μας χρειαζόμαστε αρχή και τέλος

Δεν πρέπει να υπάρχουν γεμίσματα

Μέγιστο μέγεθος αρχείου – 1000×1000 px, 40 kb

Ας κάνουμε μια περικοπή στα όρια του αντικειμένου Object>Artboards>Fit To Artboards Bounds

Αποθήκευση σε μορφή SVG (οι τυπικές ρυθμίσεις αποθήκευσης είναι καλές)

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε τα εικονίδια στο συνημμένο.

4. Μετατρέψτε την εικόνα μας σε Lazy Line Converter
Απλώς σύρετε το εικονίδιο σας στο παράθυρο στην παρακάτω εικόνα.
Το πάχος, το χρώμα του περιγράμματος και η ταχύτητα κίνησης μπορούν να αλλάξουν στον ίδιο τον κώδικα, ο οποίος θα εμφανιστεί μετά τη μετατροπή!

5. Επικολλήστε τον κώδικα που προκύπτει στο main.js
Τώρα απλώς επικολλάμε τον κώδικα που προκύπτει σε ένα κενό αρχείο main.js
Επιλογές:
strokeWidth — πάχος περιγράμματος
strokeColor — χρώμα περιγράμματος
Μπορείτε επίσης να αλλάξετε την ταχύτητα σχεδίασης κάθε διανύσματος αλλάζοντας τις τιμές της παραμέτρου διάρκειας (προεπιλογή 600)

6. Προσθέστε λίγο CSS για γεύση
Αφαίρεση παραγράφου από το index.html

Γειά σου Κόσμε! Αυτό είναι HTML5 Boilerplate.

Και αντί για αυτό εισάγουμε ένα μπλοκ στο οποίο θα λάβει χώρα η κινούμενη εικόνα μας

στη συνέχεια προσθέτουμε λίγο CSS στο αρχείο main.css για να φαίνεται πιο ωραίο:

Κύριο μέρος ( φόντο:#F3B71C; ) #εικονίδια ( θέση: σταθερή; επάνω:50%; αριστερά:50%; περιθώριο: -300 px 0 0 -400 px; )

αποθηκεύστε όλα τα αρχεία.
Τώρα απλώς ανοίξτε το index.html σε ένα σύγχρονο πρόγραμμα περιήγησης και απολαύστε το εφέ.

ΥΣΤΕΡΟΓΡΑΦΟ. κατά την εκκίνηση τοπική μηχανήΜπορεί να υπάρξει καθυστέρηση στην έναρξη της κινούμενης εικόνας για αρκετά δευτερόλεπτα.

Γεια σε όλους! Σήμερα θα προσπαθήσω να περιγράψω τις δυνατότητες Προγράμματα της Adobe Illustrator, συγκρίνοντάς το με τις δυνατότητες του Flash. Αυτό δεν θα είναι μια συνολική ανάλυση του προγράμματος, αλλά μάλλον μια περιγραφή ορισμένων ενδιαφερόντων χαρακτηριστικών που ανακάλυψα σε αυτό το πρόγραμμα. Συγκέντρωσα πληροφορίες κομμάτι-κομμάτι καθώς τις μελετούσα για να αναρτήσω τα πάντα σε μια ανάρτηση. Θα παραδεχτώ αμέσως ότι δεν είμαι πολύ έμπειρος χρήστης του Illustrator, το χρησιμοποιούσα μόνο για σχέδιο τους τελευταίους έξι μήνες (πριν από αυτό σχεδίαζα τα πάντα στο Flash). Πολλοί άνθρωποι παραπονιούνται ότι ο εικονογράφος είναι πολύπλοκος και όχι πάντα διαισθητικός. Σε κάποιο βαθμό, συμφωνώ ότι μετά το flush αυτό το πρόγραμμα είναι πολύπλοκο. Αλλά το κύριο πράγμα εδώ δεν είναι να τα παρατήσεις, αλλά να συνεχίσεις να σπουδάζεις. Και μετά από μερικές εβδομάδες έρχεται η σκέψη, πώς τα κατάφερα χωρίς αυτό πριν!

Λοιπόν, τι μου άρεσε στον εικονογράφο και τι βρήκα που δεν ήταν σε flash;
1. Θα ξεκινήσω με το πιο απλό, αλλά ταυτόχρονα απαραίτητο. Δοκιμάστε να τακτοποιήσετε αντικείμενα σε κύκλο στο Flash. Παλαιότερα υπήρχε ένα Deco Tool, αλλά αφαιρέθηκε, προφανώς θεωρήθηκε περιττό. Αποφασίσαμε ότι θα ήταν πιο διασκεδαστικό να το κάνουμε με τα χέρια. Το Illustrator έχει αυτή τη λειτουργία: Εφέ – Παραμόρφωση & Μεταμόρφωση – Μεταμόρφωση.

Όλα είναι γρήγορα και απλά· ορίζουμε μόνοι μας τις τιμές (απόσταση μεταξύ αντικειμένων, αριθμός αντιγράφων) στις ρυθμίσεις.

2. Ζιγκ-ζαγκ

Ένα ακόμα πιο απλό, αλλά παρόλα αυτά χρήσιμο πράγμα. Θα φαινόταν σαν μικρό πράγμα, αλλά στο Flash πρέπει να σχεδιάσετε με το χέρι, στο Illustrator είναι θέμα δευτερολέπτων.

3. Παραμόρφωση αντικειμένων (Warp)

Δεν υπάρχει κάτι τέτοιο στο Flash. Στο παρακάτω παράδειγμα, έδειξα μόνο 2 τρόπους παραμόρφωσης απλών σχημάτων (Effect – Warp – Arc/Fish). Στην πραγματικότητα υπάρχουν 15 από αυτούς τελευταία έκδοσηπρογράμματα.

4. Αυτόματη στρογγυλοποίηση γωνιών (Round Corners)

Μπορείτε να το κάνετε χειροκίνητα: σε ένα αντικείμενο γραφικών, όταν είναι επιλεγμένο, εμφανίζεται μια λευκή κουκκίδα και μια στρογγυλεμένη γραμμή στη γωνία (σε όλες τις γωνίες). Σέρνουμε με το ποντίκι και το προσαρμόζουμε στο γούστο σας.

Αλλά αυτό ισχύει μόνο για τα σχήματα, με μια γραμμή μολυβιού το κάνουμε λίγο διαφορετικά - εφαρμόζουμε ένα στρογγυλεμένο εφέ (Effect – Stylize – Round Corners). Στην έξοδο έχουμε το ίδιο αποτέλεσμα.

5. Τραχύστε

Το εφέ εφαρμόζεται σε απλά σχήματα (Effect – Distort&Transform – Roughen). Η έξοδος είναι κάτι που μοιάζει με τρισδιάστατα μοντέλα χαμηλής ποιότητας. Νομίζω ότι είναι ωραίο :) Και το πιο σημαντικό, είναι πολύ απλό.

6. Pucker&Bloat (τράβηγμα και φούσκωμα)
Παράδειγμα στην παρακάτω εικόνα:

7. Επέκταση φόρμας (Offset Path)

Το Flash έχει μια λειτουργία Expand Fill, δεν λειτουργεί καθόλου με γραμμές μολυβιού, σε αντίθεση με το Illustrator.

8. Πινέλα (Art Brush, Pattern Brush, Scatter Brush)
Δείτε την παρακάτω εικόνα με παραδείγματα:

9.Πινέλο υφής

Το Illustrator διαθέτει επίσης πολλά πινέλα υφής, για τα οποία έγραψα και πώς εμφανίστηκαν νέα έκδοσηφλας - . Παρατηρήθηκε ότι η χρήση πινέλων στο Adobe Animate είναι τρομερά αργή. Αυτό είναι:(

10. Δεν είμαι σίγουρος αν αυτό είναι πραγματικό κόλπο, αλλά θέλω να εστιάσω σε ένα πινέλο με το αστείο όνομα Blob Brush. Βρίσκεται στη γραμμή εργαλείων, αυτό είναι ένα πολύ ωραίο πινέλο για χρήση. Έχει ένα σωρό ρυθμίσεις, μου αρέσει περισσότερο από το συνηθισμένο. Είναι δύσκολο να εξηγήσεις τα οφέλη του με λόγια, καλύτερα να το δοκιμάσεις μια φορά.

10.Split to Grid

Ένα άλλο χρήσιμο στοιχείο είναι η λειτουργία Split to Grid (Object-Path-Split to Grid) που σας επιτρέπει να κόψετε το σχήμα σε ίσα τμήματα. Τι μας θυμίζει αυτό; Αυτό είναι σωστό - παράθυρα σε ένα πολυώροφο κτίριο. Νομίζω ότι είναι ωραίο να ζωγραφίζεις, για παράδειγμα, τοπία της πόλης.)

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

12. Μετακίνηση (δεξιά – Μεταμόρφωση – Μετακίνηση)

Μετατοπίζει ένα αντικείμενο κατά μια καθορισμένη απόσταση. Εάν θέλετε, μπορείτε να δημιουργήσετε αμέσως ένα αντίγραφο που θα τοποθετηθεί στην επιθυμητή απόσταση από το επιλεγμένο αντικείμενο οριζόντια/ή κατακόρυφα. Μια προηγούμενη έκδοση του Flash είχε μια προσθήκη που το έκανε αυτή τη λειτουργία. Δυστυχώς δεν θυμάμαι το όνομά του.

Το Illustrator είναι πολύ βολικό για τη δημιουργία μοτίβων χωρίς ραφή (Object-Pattern-Make). Θυμάμαι πόσο μανιωδώς ανέπτυξα την επιτήδευση in flash με τη δημιουργία του . Στην έκδοση SS 2015 του Illustrator, όλα είναι αυτοματοποιημένα· μια δέσμη ρυθμίσεων θα σας βοηθήσει να δημιουργήσετε ένα μοτίβο σε δεκάδες παραλλαγές, με λίγα μόνο γραφικά στοιχεία στη διάθεσή σας. Σε περισσότερα προηγούμενες εκδόσειςΌλα τα προγράμματα έπρεπε να γίνουν χειροκίνητα, όπως και στο Flash μέχρι τώρα.

(Σημείωση – το μοτίβο μπορεί να μετατραπεί σε διανυσματικό επεξεργάσιμο αντικείμενο χρησιμοποιώντας τη συνάρτηση Object – Expand Appearance.

14. Μωσαϊκό αντικειμένου

Δημιουργία παλέτας χρωμάτων με βάση μια υπάρχουσα εικόνα. Εισαγάγετε την εικόνα που σας αρέσει στην εικόνα (Άνοιγμα) και μετά Object – Create Object Mosaic. Στις ρυθμίσεις καθορίζουμε τη συχνότητα διαίρεσης σε ύψος και πλάτος.

Και στην έξοδο παίρνουμε:

15.Blend

Χρησιμοποιείται για τη δημιουργία κλίσεων. Μπορείτε να δημιουργήσετε μεταβάσεις βήμα προς βήμα, όπως στην εικόνα. Δεν θα πω ότι το χρησιμοποιώ συχνά, αλλά μπορεί να είναι χρήσιμο σε κάποιον. Μου φαίνεται ότι μπορεί να χρησιμοποιηθεί για τη δημιουργία απλών εικόνων φόντου.

Το εργαλείο μπορεί επίσης να χρησιμοποιηθεί για την κλωνοποίηση αντικειμένων. Τοποθετήστε δύο αντικείμενα σε απόσταση μεταξύ τους και εφαρμόστε το Blend Options, επιλέξτε τον αριθμό των βημάτων (τον αριθμό των κλωνοποιημένων αντικειμένων).

16. Εργαλείο Build Shape. Ένα πολύ βολικό πράγμα για εργασία με πρωτόγονους. Στο φλας, μου φάνηκε, ήταν λιγότερο βολικό.

Κρατήστε πατημένο το Alt και κάντε κλικ στα επιλεγμένα τμήματα για να διαγράψετε τα τμήματα. Αν απλώς σύρουμε το ποντίκι σε πολλές επιλεγμένες περιοχές - συνδέσεις.

Το πρόσθετο είναι ένα εργαλείο που βοηθά στην αυτόματη αποκοπή, σύνδεση κ.λπ. επισημασμένες μορφές. Όσο για μένα, δεν είναι πολύ βολικό· χρησιμοποιώ συχνά το Εργαλείο Build Shape.

(πίνακες τέχνης)

18.Πίνακας προσαρμοσμένων εργαλείων

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

Στο Flash, οι πίνακες τέχνης, δηλαδή οι σκηνές (Σκηνή 1,2,3..) βρίσκονται χωριστά και πρέπει να κάνετε εναλλαγή μεταξύ τους (Shift+F2). Στο Illustrator, μπορούν να τοποθετηθούν όλα μπροστά στα μάτια σας. Είναι βολικό όταν κάνετε πολλές εκδόσεις του ίδιου σχεδίου, έτσι ώστε όλες οι επιλογές να είναι μπροστά στα μάτια σας για σύγκριση.

19.Isometrics using Graphic Styles

Και το τελευταίο πράγμα είναι η δημιουργία ισομετρίας χωρίς τη χρήση της σε 1 κλικ (ή πιο συγκεκριμένα, σε 3 κλικ, επειδή έχουμε 3 πλευρές;) χρησιμοποιώντας στυλ γραφικών (Graphic Styles). Θα περιγράψω πώς γίνεται αυτό την επόμενη φορά.

Αυτό που έχει κοινό ο εικονογράφος με το φλας είναι η δυνατότητα αποθήκευσης ενός αντικειμένου σε σύμβολο και εξίσου εύκολα αυτό το σύμβολο μπορεί να μεταφερθεί στο flash (ανοίξτε το αρχείο στο flash.ai χρησιμοποιώντας Εισαγωγή – Εισαγωγή στο στάδιο).
Το σύμβολο στο Illustrator έχει τις ίδιες ιδιότητες όπως στο Flash.
Και εν κατακλείδι θα γράψω ότι στο Illustrator κατά τη γνώμη μου είναι κατώτερο του φλας. Ναι, ναι, υπάρχει κάτι τέτοιο. Και αυτό είναι το εργαλείο πλήρωσης (Κάδος ζωγραφικής). Ανεξάρτητα από το πόσο σκληρά προσπαθώ να το συνηθίσω στο Illa, είναι πιο βολικό στο Flash.
Εάν οι σημειώσεις μου έχουν γίνει χρήσιμες για εσάς ή αν θέλετε να προσθέσετε κάτι δικό σας, καλώς ήρθατε στα σχόλια! Καλή τύχη σε όλους;)

Βελτιστοποίηση γραφικών Ιστού

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

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

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

• 2-Up (δύο επιλογές) ταυτόχρονη προβολή της αρχικής και βελτιστοποιημένης εικόνας σύμφωνα με τις καθορισμένες ρυθμίσεις (Εικ. 1).
• 4-Up (τέσσερις επιλογές) Σε αυτήν τη λειτουργία, η θύρα προβολής χωρίζεται σε τέσσερα παράθυρα (Εικ. 2) για την εμφάνιση της αρχικής εικόνας και τρεις εκδόσεις της βελτιστοποιημένης: η πρώτη έκδοση δημιουργείται με βάση τις καθορισμένες τιμές βελτιστοποίησης και άλλα δύο είναι παραλλαγές των τρεχουσών ρυθμίσεων βελτιστοποίησης.

Και οι δύο λειτουργίες σάς επιτρέπουν να εξοικονομήσετε σημαντικά χρόνο για την εύρεση της καλύτερης επιλογής βελτιστοποίησης, καθώς εξαλείφουν την ανάγκη αποθήκευσης εικόνων με διαφορετικές ρυθμίσεις βελτιστοποίησης και την επακόλουθη οπτική σύγκριση τους. Επιπλέον, είναι δυνατό να αξιολογηθεί όχι μόνο η ποιότητα της βελτιστοποιημένης εικόνας, αλλά και το μέγεθος και ο χρόνος φόρτωσης υπό διαφορετικές επιλογές σύνδεσης. Για σύγκριση, η πιο βολική λειτουργία είναι το 4-Up (τέσσερις επιλογές), που σας επιτρέπει να αξιολογήσετε οπτικά την επίδραση της συμπίεσης ή της μείωσης της παλέτας στην ποιότητα της εικόνας και στο μέγεθός της και τελικά να προσδιορίσετε τις καλύτερες παραμέτρους βελτιστοποίησης.

Το Illustrator σάς επιτρέπει να βελτιστοποιείτε τα γραφικά Ιστού όχι μόνο σε μορφές GIF, JPG, PNG-8 και PNG-24, αλλά και σε SWF και SVG. Οι εικόνες με ευρετήριο που έχουν μικρό αριθμό χρωμάτων αποθηκεύονται σε μορφή GIF. Η μορφή JPG χρησιμοποιείται για την αποθήκευση εικόνων πλήρους χρώματος και κλίμακας του γκρι, φωτογραφιών και γραφικών με πλούσια χρώματα, όπως γεμίσματα ντεγκραντέ. Για έγχρωμες εικόνες με διαφανείς περιοχές, χρησιμοποιείται η μορφή PNG, η οποία σας επιτρέπει να αποθηκεύετε εικόνες με ευρετήριο και έγχρωμες εικόνες, ενώ στη μορφή PNG-8 ο μέγιστος δυνατός αριθμός χρωμάτων της βελτιστοποιημένης εικόνας είναι 256 και σε η μορφή PNG-24 η εικόνα μπορεί να έχει εκατομμύρια χρώματα, και γι' αυτό μοιάζει Μορφή JPEG. Η διαφορά μεταξύ PNG-24 και JPEG είναι ότι η μέθοδος συμπίεσης που χρησιμοποιείται για τη βελτιστοποίηση εικόνων σε μορφή PNG-24 δεν οδηγεί σε απώλεια ποιότητας, αλλά ως αποτέλεσμα αυξάνεται το μέγεθος του αρχείου. Οι μορφές SVG και SWF συνδυάζουν γραφικά, κείμενο και διαδραστικά στοιχεία και μπορούν επίσης να βελτιστοποιηθούν.

Ας σκεφτούμε συγκεκριμένο παράδειγμαβελτιστοποίηση εικόνας. Ας υποθέσουμε ότι αναπτύχθηκε ένα λογότυπο ιστότοπου στο Illustrator (Εικ. 3), που αρχικά αποθηκεύτηκε σε μορφή AI. Μια προσπάθεια άμεσης βελτιστοποίησής του για τον Ιστό δεν θα οδηγήσει σε τίποτα καλό, καθώς στην περίπτωση αυτή η εικόνα θα περικοπεί αυτόματα, κάτι που δεν θα λαμβάνει υπόψη την πραγματική θέση της προκύπτουσας επιγραφής ως αποτέλεσμα της παραμόρφωσης (Εικ. 4 και 5).

Επομένως, ας προσπαθήσουμε να εξαγάγουμε το λογότυπο σε μορφή PSD με την εντολή File=>Export (File=>Export) το μέγεθος της εικόνας που δημιουργείται θα είναι 143 KB. Ανοίξτε το αρχείο PSD που προκύπτει και χρησιμοποιήστε την εντολή File=>Save for Web. Λαμβάνοντας υπόψη τον περιορισμένο αριθμό χρωμάτων που εμπλέκονται στην εικόνα, σε αυτήν την περίπτωση η μορφή GIF είναι η βέλτιστη, οι συγκεκριμένες ρυθμίσεις της οποίας πρέπει να αποφασιστούν. Πειραματίζοντας με τις ρυθμίσεις, μπορείτε να βεβαιωθείτε ότι η καλύτερη ποιότηταδίνει τον προεπιλεγμένο αλγόριθμο συμπίεσης του προγράμματος, Selective. Όσον αφορά την εξομάλυνση, δεδομένης της παρουσίας πλήρωσης κλίσης, είναι προτιμότερο να επιλέξετε έναν αλγόριθμο με θόρυβο δημιουργίας θορύβου (Εικ. 6). Το μέγεθος του αρχείου βελτιστοποίησης που θα προκύψει θα είναι 6,729 KB (Εικ. 7), ενώ η διαφάνεια του φόντου θα διατηρηθεί, η οποία είναι εύκολο να επαληθευτεί αποθηκεύοντας την εικόνα σε μορφή GIF μαζί με το αρχείο HTML (Εικ. 8). Ως αποτέλεσμα, σε αυτό το παράδειγμα, τα αρχεία emblem.html και emblem.gif αποκτήθηκαν στο φάκελο Primer1.

Κουμπιά

Ένα απαραίτητο ειδικό στοιχείο της σχεδίασης οποιωνδήποτε ιστοσελίδων είναι τα γραφικά κουμπιά ελέγχου. Είναι απλά αδύνατο να φανταστεί κανείς μια σελίδα χωρίς αυτά. Το σχέδιο με κουμπιά έχει γίνει ένα ιδιαίτερο είδος σήμερα και το Illustrator σάς επιτρέπει να δημιουργείτε τις πιο περίπλοκες επιλογές. Για παράδειγμα, τα κουμπιά που έχουν σχεδιαστεί ως διχτυωτά αντικείμενα ή/και με μάσκες επικάλυψης φαίνονται πολύ πιο εντυπωσιακά από τα κανονικά.

Εξετάστε την επιλογή δημιουργίας ενός στρογγυλού, κυρτού κουμπιού στο Illustrator. Σχεδιάστε ένα διανυσματικό αντικείμενο σε μορφή κύκλου γεμάτο με αυθαίρετο χρώμα (Εικ. 9) και μετατρέψτε το σε πλέγμα με την εντολή Object => Create Gradient Mesh (Object => Create a gradient mesh), προσδιορίζοντας τέσσερις σειρές και τέσσερις στήλες και στη λίστα Εμφάνιση, επιλέγοντας την επιλογή To Center Highlight ίσο με 60 (Εικ. 10). Επιλέξτε το εργαλείο Direct Selection και κάντε κλικ στην επάνω αριστερή γωνία του αντικειμένου, επιλέγοντας τα σημεία αγκύρωσης που βρίσκονται εκεί (Εικ. 11). Αλλάξτε το χρώμα του αντίστοιχου κελιού σε λευκό επιλέγοντάς το στην παλέτα Swatches (Εικ. 12).

Πάρτε το εργαλείο Ellipse, τοποθετήστε το δείκτη του ποντικιού στο κέντρο του κύκλου που δημιουργήθηκε πριν και, κρατώντας πατημένα τα πλήκτρα Alt και Shift, τεντώστε τον νέο κύκλο πάνω από τον παλιό έτσι ώστε να είναι 1-2 pixel μεγαλύτερο από τον παλιό σε όλους πλευρές. Δώστε του ένα μαύρο περίγραμμα (Stroke) πλάτους 1-2 pixel και γεμίστε το με μια ακτινωτή κλίση προς την κατεύθυνση από κόκκινο σε λευκό (Εικ. 13). Σύρετε το δημιουργημένο διανυσματικό αντικείμενο 1-2 pixel προς τα δεξιά και προς τα κάτω και, στη συνέχεια, χωρίς να αφαιρέσετε την επιλογή, κάντε δεξί κλικ πάνω του και έξω κατάλογος συμφραζόμενωνεπιλέξτε Arrange=>Send To Back. Το αποτέλεσμα θα είναι ένα κενό για το κουμπί, που φαίνεται στο Σχ. 14.

Κατά κανόνα, σε οποιαδήποτε ιστοσελίδα υπάρχουν πολλά κουμπιά του ίδιου τύπου, που διαφέρουν, για παράδειγμα, μόνο στην κατεύθυνση των βελών που σχεδιάζονται σε αυτά, υποδεικνύοντας την κατεύθυνση κίνησης γύρω από τον ιστότοπο. Ας εξετάσουμε την απλούστερη περίπτωση ύπαρξης δύο κουμπιών, ένα από τα οποία, με ένα κάτω βέλος, θα σημαίνει μετακίνηση στην επόμενη σελίδα και ένα κουμπί με ένα επάνω βέλος θα σημαίνει μετακίνηση στην προηγούμενη. Ως πρότυπο βέλους, ας πάρουμε ένα κανονικό τρίγωνο, σχεδιασμένο με το εργαλείο Polygon, βαμμένο μαύρο και, για μεγαλύτερο εφέ, σχεδιασμένο επίσης ως αντικείμενο πλέγματος. Μετακινήστε το βέλος στο κουμπί και προσαρμόστε τη θέση όλων των αντικειμένων μεταξύ τους χρησιμοποιώντας τα αντίστοιχα κουμπιά στην παλέτα Στοίχιση. Το πρώτο από τα κουμπιά που προκύπτουν φαίνεται στο Σχ. 15. Ας κάνουμε ένα αντίγραφο της στρώσης με το κουμπί επιλέγοντας την εντολή Duplicate Layer Layers, με αποτέλεσμα να έχουμε δύο πανομοιότυπα επίπεδα. Στη συνέχεια, επιλέξτε το βέλος στο αντίγραφο του επιπέδου και περιστρέψτε το κατά 180° επιλέγοντας την εντολή Transform=>Rotate Transformation=>Rotate από το μενού περιβάλλοντος. Θα λάβουμε το ίδιο κουμπί όπως φαίνεται στο Σχ. 16. Λάβετε υπόψη ότι είναι πολύ πιο βολικό να αποθηκεύετε όλα τα κουμπιά του ίδιου τύπου για ένα έργο σε ένα αρχείο σε διαφορετικά επίπεδα, κάτι που αποδεικνύεται σε αυτήν την περίπτωση.

Τώρα πρέπει να αποθηκεύσετε τις βελτιστοποιημένες εκδόσεις κάθε κουμπιού. Πρώτα κάντε το κάτω στρώμα αόρατο σε αυτήν την περίπτωση το κουμπί στο επάνω στρώμα θα διατηρηθεί. Επιλέξτε την εντολή File=>Save for Web, διαμορφώστε τις παραμέτρους βελτιστοποίησης του κουμπιού, για παράδειγμα, όπως φαίνεται στην Εικ. 17, κάντε κλικ στο κουμπί Αποθήκευση και εισαγάγετε ένα όνομα αρχείου. Το τελικά αποθηκευμένο κουμπί φαίνεται στην Εικ. 18. Τώρα επιστρέψτε την ορατότητα στο κάτω στρώμα, κάντε το επάνω στρώμα αόρατο και αποθηκεύστε το δεύτερο κουμπί με τον ίδιο τρόπο, δίνοντάς του διαφορετικό όνομα. Το αποτέλεσμα φαίνεται στο Σχ. 19.

Τώρα το μόνο που μένει είναι να βεβαιωθείτε ότι τα κουμπιά φαίνονται αρκετά αποδεκτά στην ιστοσελίδα και να τα τοποθετήσετε σε μια προσαρμοσμένη σελίδα (Εικ. 20). Ως αποτέλεσμα, σε αυτό το παράδειγμα, ελήφθησαν το αρχείο Primer2.html και δύο εικόνες γραφικών στο φάκελο εικόνων (φάκελος Primer2).

Εάν θέλετε, είναι εύκολο να μετατρέψετε ένα κουμπί σε φέτα κατά τη διαδικασία βελτιστοποίησης. Σε αυτήν την περίπτωση, αφού επιλέξετε την εντολή File=>Save for Web (File=>Save for Web) και ορίσετε τις παραμέτρους βελτιστοποίησης, θα πρέπει να επιλέξετε το εργαλείο Slice Select από την παλέτα εργαλείων και να κάνετε διπλό κλικ στην εικόνα, η οποία τελικά θα μετατρέπεται αυτόματα σε φέτα με αύξοντα αριθμό 1 (Εικ. 21). Εάν κάνετε διπλό κλικ ξανά, θα ανοίξει το παράθυρο Επιλογές τομής, στο οποίο θα χρειαστεί να καθορίσετε έναν σύνδεσμο και προαιρετικά να αλλάξετε το όνομα του τμήματος (Εικόνα 22) και στη συνέχεια να αποθηκεύσετε τη βελτιστοποιημένη εικόνα. Το αποτέλεσμα σε αυτή την περίπτωση θα είναι τα αρχεία Primer3.html (Εικ. 23) και Primer3.gif (φάκελος Primer3).

Διαδραστικά στοιχεία

Ένας τρόπος για να δώσετε ζωή σε μια σελίδα είναι να εισάγετε στοιχεία σχεδίασης που την αλλάζουν εμφάνιση(ή κατάσταση) ανάλογα με τη συμπεριφορά του ποντικιού ή, λιγότερο συχνά, σε περίπτωση άλλων καταστάσεων: κλιμάκωση, κύλιση, φόρτωση, σφάλματα κ.λπ.

Ανάμεσα σε τέτοια στοιχεία, τα πιο διάσημα είναι τα rollovers (από το αγγλικό roll over roll over, turn over) στοιχεία που αλλάζουν εμφάνιση υπό την επίδραση του ποντικιού. Παραδείγματα τυπικών ανατροπών είναι τα κινούμενα κουμπιά. Οι ανατροπές χρησιμοποιούνται συχνά κατά τη δημιουργία άλλων στοιχείων πλοήγησης ιστότοπου. Στην πραγματικότητα, κάθε ανατροπή δεν είναι μία, αλλά πολλές (έως τέσσερις) εικόνες, καθεμία από τις οποίες αντιστοιχεί σε ένα συγκεκριμένο γεγονός. Τα κύρια γεγονότα θεωρούνται τα ακόλουθα: Κανονικά κανονική κατάσταση, Περνώντας τον δείκτη του ποντικιού πάνω από ένα στοιχείο και προς τα κάτω πατώντας το αριστερό κουμπί του ποντικιού όταν τοποθετείτε τον κέρσορα πάνω του. Θεωρητικά, μπορεί να εμπλέκονται συμβάντα όπως Κλικ που απελευθερώνει το αριστερό κουμπί του ποντικιού μετά το κλικ, Πάνω μετά την απελευθέρωση του κουμπιού, Έξοδος κατά την έξοδο από την ενεργή ζώνη. Ωστόσο, στην πράξη, συχνά περιορίζονται στην αλλαγή του στοιχείου μόνο για τα τρία πρώτα ή και δύο γεγονότα.

Κλασικές ανατροπές

Με την κλασική έννοια, ένα rollover είναι μια σειρά από γραφικές εικόνες σε μορφή GIF και τον αντίστοιχο κώδικα HTML, χάρη στον οποίο, ανάλογα με τη συμπεριφορά του ποντικιού, μια εικόνα αντικαθιστά μια άλλη στο παράθυρο του προγράμματος περιήγησης.

Το Illustrator δεν προορίζεται για την άμεση δημιουργία ανατροπών με την κλασική έννοια, αλλά μπορεί να βοηθήσει στην ανάπτυξη των αρχικών στοιχείων για αυτά. Η ιδέα σε αυτή την περίπτωση είναι να δημιουργήσετε ένα επίπεδο με την εικόνα που αντιστοιχεί στο πρώτο συμβάν. Στη συνέχεια, δημιουργήστε ένα αντίγραφο του επιπέδου και μεταμορφώστε την εικόνα ώστε να ταιριάζει με το δεύτερο συμβάν, και ούτω καθεξής. Η προκύπτουσα εικόνα πολλαπλών επιπέδων εξάγεται σε ένα αρχείο PSD με τα επίπεδα διατηρημένα, βάσει των οποίων δημιουργείται μια ανατροπή στο πρόγραμμα Image Ready. Το πλεονέκτημα της χρήσης του προγράμματος Illustrator, όπως σε πολλές άλλες περιπτώσεις, είναι μια σειρά από ενδιαφέροντα χαρακτηριστικά του που δεν είναι διαθέσιμα σε άλλες λογισμικό, σε συνδυασμό με την ευκολία μετατροπής διανυσματικών γραφικών.

Ας προσπαθήσουμε να δημιουργήσουμε ένα rollover με τη μορφή επιγραφής που αλλάζει χρώμα ανάλογα με τη συμπεριφορά του ποντικιού. Ανοίξτε το Illustrator και δημιουργήστε ένα σχήμα με τη μορφή στρογγυλεμένου ορθογωνίου με μαύρο χρώμα (Εικ. 24), δημιουργήστε ένα αντίγραφό του και τοποθετήστε το σε ένα ελεύθερο μέρος της οθόνης. Μετατρέψτε το πρώτο αντίγραφο του ορθογωνίου σε αντικείμενο πλέγματος με μια επισήμανση στο κέντρο (εντολή Object=>Create Gradient Mesh Object=>Create Gradient Mesh), προσδιορίζοντας τέσσερις σειρές και δέκα στήλες (Εικ. 25). Ενεργοποιήστε το δεύτερο αντίγραφο του ορθογωνίου και ρυθμίστε το σε ντεγκραντέ γέμισμα περίπου όπως φαίνεται στην Εικ. 26. Επικαλύψτε το αντικείμενο ντεγκραντέ πάνω από το πλέγμα, μειώστε την αδιαφάνεια του αντικειμένου ντεγκραντέ σε περίπου 80% και το μέγεθος κατά περίπου 1 εικονοστοιχείο για να προσομοιώσετε τελικά το αποτέλεσμα ενός χτύπημα. Και μετά εκτυπώστε την επιγραφή πάνω από τα αντικείμενα. Στην αρχική του μορφή, αφήστε το να έχει ένα λευκό χρώμα, το οποίο θα αντιστοιχεί στην Κανονική κατάσταση (Εικ. 27) και, στη συνέχεια, όταν αλλάξει η κατάσταση ανατροπής, το χρώμα της επιγραφής θα αλλάξει, για παράδειγμα, σε πράσινο όταν ο δείκτης του ποντικιού αιωρείται από πάνω του (κατάσταση υπεράνω) και γίνεται μπλε όταν πατηθεί το κουμπί του ποντικιού (κατάσταση κάτω).

Δώστε προσοχή στην παλέτα Layers σε αυτό το στάδιο υπάρχει μόνο ένα μόνο στρώμα σε αυτήν. Δημιουργήστε δύο αντίγραφα αυτού του επιπέδου χρησιμοποιώντας την εντολή Duplicate Layer από το μενού παλέτας Layers· θα υπάρχουν τρία επίπεδα στην παλέτα (Εικ. 28). Στη συνέχεια, στο πρώτο αντίγραφο του επιπέδου αλλάξτε το χρώμα της επιγραφής σε πράσινο και στο δεύτερο αντίγραφο σε μπλε (Εικ. 29). Ως αποτέλεσμα, θα ληφθεί το απαραίτητο κενό για την ανατροπή.

Εξάγετε τη δημιουργημένη εικόνα σε μορφή PSD, διατηρώντας τα επίπεδα, χρησιμοποιώντας την εντολή File=>Export και επιλέγοντας το χρωματικό μοντέλο RGB (Εικ. 30). Ανοίξτε το αρχείο PSD που δημιουργήθηκε στο πρόγραμμα ImageReady (Εικ. 31 και 32). Δημιουργήστε πλαίσια με βάση τα επίπεδα επιλέγοντας την εντολή Δημιουργία πλαισίων από επίπεδα από το μενού παλέτα κινούμενων εικόνων. Το παράθυρο Animation θα μοιάζει με το Σχ. 33. Σε αυτήν την περίπτωση, θα δημιουργηθεί αρχικά μια ενιαία Κανονική κατάσταση στην παλέτα Rollovers.

Στη συνέχεια, στο παράθυρο Animation, επιλέξτε το πλαίσιο που αντιστοιχεί στην επαγόμενη κατάσταση και το επίπεδο Αντιγραφής επιπέδου 1 θα επιλεγεί αυτόματα στην παλέτα Layers (Εικ. 34). Μεταβείτε στην παλέτα Rollovers και κάντε κλικ στο κουμπί Create Rollover State (Δημιουργία κατάστασης rollover) εικ. 35, το οποίο θα κάνει την κατάσταση Over State να εμφανιστεί στην παλέτα Rollovers (Εικ. 36). Δημιουργήστε μια κατάσταση Down με τον ίδιο τρόπο. Ενεργοποιήστε την κατάσταση Normal στην παλέτα Rollovers και διαγράψτε όλα τα καρέ στην παλέτα Animation εκτός από αυτό που πρέπει να αντιστοιχεί στην Normal κατάσταση. Ως αποτέλεσμα, για κάθε κατάσταση ανατροπής θα υπάρχει μόνο ένα καρέ στην παλέτα Animation (Εικ. 37, 38 και 39).

Ρύζι. 38. Προβολή της εικόνας, του παραθύρου Animation και των παλετών Layers και Rollovers για την κατάσταση Over State

Ελέγξτε το αποτέλεσμα κάνοντας κλικ στο κουμπί Προεπισκόπηση στο Προεπιλεγμένο πρόγραμμα περιήγησης στη γραμμή εργαλείων και μεταβαίνοντας στο παράθυρο του προγράμματος περιήγησης (Εικόνα 40). Μετά από αυτό, αποθηκεύστε το αρχείο χρησιμοποιώντας την εντολή File=>Save Optimized και καθορίζοντας την επιλογή HTML and Images (*.html). Ως αποτέλεσμα, σε αυτό το παράδειγμα, το αρχείο Primer4.html και μια σειρά γραφικών εικόνων ελήφθησαν στο φάκελο εικόνων.

Ρύζι. 40. Παράθυρο προγράμματος περιήγησης με στοιχείο Rollover

Ανατροπές SVG

Η ολοένα και πιο δημοφιλής μορφή SVG (Scalable Vector Graphics). Διανυσματικά γραφικά), που δημιουργήθηκε με βάση το πρότυπο XML, σας επιτρέπει επίσης να λαμβάνετε μια ποικιλία διαδραστικών στοιχείων, ιδίως ανατροπών, αλλά στην πράξη αυτό εφαρμόζεται εντελώς διαφορετικά. Αξίζει να σημειωθεί ότι η δημιουργία διαδραστικών ανατροπών SVG, σε αντίθεση με τα κλασικά, όταν ο αντίστοιχος κώδικας HTML δημιουργείται εντελώς αυτόματα, απαιτεί γνώση της γλώσσας JavaScript και κατανόηση των βασικών αρχών του αντικειμενοστρεφούς προγραμματισμού.

Για να εργαστείτε με αντικείμενα SVG υπάρχει μια ειδική παλέτα SVG Interactivity, η οποία μπορεί να ανοίξει εύκολα χρησιμοποιώντας την εντολή Window => SVG Interactivity (Window => SVG Interactivity) εικ. 41.

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

Δημιουργήστε ένα ορθογώνιο κουμπί με στρογγυλεμένες άκρες και επιλέξτε ένα κατάλληλο γέμισμα κλίσης για αυτό, για παράδειγμα όπως φαίνεται στην Εικ. 42. Προσαρμόστε τη διαφάνεια του κουμπιού στην παλέτα Διαφάνεια Σε αυτό το παράδειγμα, η τιμή Αδιαφάνειας έχει οριστεί στο 50%. Δημιουργήστε ένα αντίγραφο του κουμπιού, γεμίστε το με σκούρο πράσινο χρώμα (Εικόνα 43) και, στη συνέχεια, μετατρέψτε το σε αντικείμενο πλέγματος με την εντολή Object => Create Gradient Mesh, προσδιορίζοντας τέσσερις σειρές και δέκα στήλες και στη λίστα Εμφάνιση (Προβολή) επιλέγοντας την επιλογή To Center και ορίζοντας την τιμή Highlight σε 100. Μειώστε την αδιαφάνεια του στρώματος με το αντικείμενο mesh στο 40% περίπου (Εικ. 44). Τοποθετήστε ένα αντικείμενο πλέγματος πάνω από ένα ντεγκραντέ και το κουμπί θα μοιάζει με αυτό που φαίνεται στην Εικ. 45.

Ρύζι. 44. Μετατρέψτε ένα αντίγραφο ενός κουμπιού σε αντικείμενο πλέγματος

Συμπληρώστε το κουμπί με την προβλεπόμενη επιγραφή και προσαρμόστε τη θέση του χρησιμοποιώντας τα αντίστοιχα κουμπιά στην παλέτα Στοίχιση. Η εικόνα που θα προκύψει θα περιέχει ένα στρώμα με τρία αντικείμενα τοποθετημένα το ένα πάνω στο άλλο (Εικ. 46). Τα προγραμματισμένα συμβάντα θα σχετίζονται με ένα αντικείμενο κειμένου, επομένως για ευκολία, αλλάξτε το όνομά του σε Κείμενο κάνοντας διπλό κλικ στο αντικείμενο και εισάγοντας ένα νέο όνομα. Ομοίως, αλλάξτε το όνομα του επιπέδου από Layer 1 σε Layer (Εικ. 47).

Η επεξεργασία συμβάντων περιλαμβάνει τη χρήση διαδικασιών JavaScript, επομένως πρέπει να συμπεριλάβετε ένα αρχείο που να περιγράφει αυτές τις διαδικασίες. Ονομάζεται Events.js και αποθηκεύεται στο δίσκο στο φάκελο Sample Files\Sample Art\SVG\SVG όταν εγκαθιστάτε το Adobe Illustrator. Για να συνδέσετε το αρχείο Events.js, χρησιμοποιήστε την εντολή JavaScript Files SVG Interactivity (Εικ. 48). Στη συνέχεια, πρέπει να κάνετε κλικ στο κουμπί Προσθήκη και να βρείτε το επιθυμητό αρχείο στον σκληρό σας δίσκο. Όταν το όνομά του εμφανιστεί στο πεδίο URL (Εικόνα 49), κάντε κλικ στο κουμπί Τέλος.

Ρύζι. 48. Επιλογή της εντολής JavaScript Files

Στη συνέχεια, πρέπει να ορίσετε μια απόκριση στα συμβάντα του ποντικιού για το αντικείμενο Κείμενο. Επιλέξτε το αντικείμενο Text, στο πεδίο Event της παλέτας SVG Interactivity, επιλέξτε το συμβάν onmouseover elemColor(evt, "Text", "#3333FF") αυτό σημαίνει ότι όταν το ποντίκι βρίσκεται πάνω από το αντικείμενο Text, το χρώμα του θα αλλάξει σε μπλε (Εικ. 50). Για να αλλάξει το χρώμα του κειμένου σε μαύρο μετά την έξοδο του ποντικιού από την ενεργή περιοχή, θα χρειαστεί να δημιουργήσετε ένα άλλο συμβάν onmouseout επιλέξτε το στο πεδίο Συμβάν της παλέτας SVG Interactivity. Στη συνέχεια, στη γραμμή ενέργειας πληκτρολογήστε το κείμενο elemColor(evt, "Text", "#000000") αυτό θα επιστρέψει το χρώμα σε μαύρο (Εικόνα 51).

Ρύζι. 51. Τελική εμφάνιση της παλέτας SVG Interactivity για το αντικείμενο Text

Αποθηκεύστε τη μετατροπή που δημιουργήθηκε ως αρχείο SVG με την εντολή Αρχείο=>Αποθήκευση ως (Αρχείο=>Μορφή τύπου αρχείου SVG και, στη συνέχεια, ορίστε τις επιλογές αποθήκευσης του αρχείου SVG όπως φαίνεται στην Εικ. 52. Μετά την αποθήκευση, θα λάβετε μόνο ένα μεμονωμένο αρχείο με την επέκταση SVG και όχι δύο, όπως στην περίπτωση ενός κλασικού rollover, σε αυτήν την περίπτωση ελήφθη το αρχείο Primer5.svg (φάκελος Primer5). Ωστόσο, για να λειτουργήσει πραγματικά η ανατροπή, πρέπει επιπλέον να αντιγράψετε το αρχείο Events.js από την περιγραφή των διαδικασιών JavaScript. Μετά από αυτό, μπορείτε να ελέγξετε τη λειτουργικότητα του rollover το αποτέλεσμα θα μοιάζει όπως φαίνεται στην Εικ. 53.

SVG κινούμενα σχέδια

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

Ας δημιουργήσουμε περίπου την ακόλουθη σειρά αντικειμένων γραφικών και κειμένου, όπως φαίνεται στο Σχ. 54. Ας μετονομάσουμε όλα τα δημιουργημένα αντικείμενα με βολικό τρόπο κάνοντας διαδοχικά κλικ στο όνομα του επόμενου αντικειμένου στην παλέτα Επίπεδα και εισάγοντας επιθυμητό όνομα(Εικ. 55). Σημειώστε ότι αυτά που επισημαίνονται στο Σχ. 56 αντικείμενα Text1, Text2, Text3 και Path1 θα είναι πάντα ορατά και όλα τα άλλα μόνο όταν τοποθετείτε το ποντίκι πάνω από το αντικείμενο Text1.

Ρύζι. 54. Αρχική προβολή της εικόνας

Συμπεριλάβετε το αρχείο Events.js που περιγράφει τις διαδικασίες JavaScript χρησιμοποιώντας την εντολή JavaScript Files από την παλέτα SVG Interactivity, κάνοντας κλικ στο κουμπί Προσθήκη, δείχνοντας το επιθυμητό αρχείο στον σκληρό σας δίσκο και κάνοντας κλικ στο κουμπί Τέλος.

Καθορίστε μια απόκριση στα συμβάντα του ποντικιού για το αντικείμενο Text1. Επιλέξτε το αντικείμενο Text, στο πεδίο Event της παλέτας SVG Interactivity, επιλέξτε το συμβάν onmouseover και στη γραμμή παρακάτω πληκτρολογήστε το κείμενο elemShow(evt, "Text4"); elemShow(evt, "Path2") . Ως αποτέλεσμα, όταν το ποντίκι βρίσκεται πάνω από το αντικείμενο Text1, τα αντικείμενα Text4 και Path2 θα γίνουν ορατά. Λάβετε υπόψη ότι εάν πρέπει να εκτελεστούν πολλές ενέργειες όταν συμβαίνει ένα συμβάν, αυτές πρέπει να καθοριστούν χρησιμοποιώντας το σύμβολο ";". Στη συνέχεια, εκτελέστε μια παρόμοια λειτουργία για το συμβάν onmouseout, εισάγοντας το κείμενο για αυτό, που θα σημαίνει απόκρυψη αντικειμένων (Εικ. 57).

Αποθηκεύστε το αποτέλεσμα ως αρχείο SVG χρησιμοποιώντας την εντολή File=>Save as, καθορίζοντας το όνομα του αρχείου, επιλέγοντας τη μορφή SVG στο πεδίο Τύπος αρχείου και, στη συνέχεια, ορίζοντας τις επιλογές για την αποθήκευση του αρχείου SVG σύμφωνα με την Εικ. 58. Μετά την αποθήκευση, θα ληφθεί το αρχείο Primer6.svg (φάκελος Primer6). Μην ξεχάσετε να αντιγράψετε το αρχείο Events.js στο φάκελο με αυτό το αρχείο. Εάν μετά από αυτό τρέχετε coz αυτό το αρχείο, τότε θα δείτε το αποτέλεσμα που φαίνεται στο Σχ. 59. Αυτό είναι σχεδόν ό,τι χρειάζεστε. Το μόνο πράγμα που δεν συμπεριλήφθηκε στα σχέδιά μας ήταν η αρχική εμφάνιση των αντικειμένων Text 4 και Path 2 κατά τη φόρτωση. Για να απαλλαγείτε από αυτό το μειονέκτημα, επιλέξτε και τα δύο δεδομένα αντικειμένων ταυτόχρονα και δημιουργήστε μια ενέργεια για αυτά elemHide(evt, "Text4"); elemHide(evt, "Path2") στο συμβάν onload (Εικ. 60). Αποθηκεύστε ξανά το αρχείο και βεβαιωθείτε ότι τα αντικείμενα Text4 και Path2 είναι πλέον ορατά μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το αντικείμενο Text1.

Κινούμενα σχέδια GIF

Οποιαδήποτε ιστοσελίδα είναι αδιανόητη χωρίς κινούμενα σχέδια στο Web, συμπεριλαμβανομένων των κινούμενων gif. Μία από τις επιλογές για τη δημιουργία τους είναι η χρήση της εφαρμογής Adobe ImageReady, η οποία επιτρέπει, μεταξύ άλλων, τη δημιουργία κινούμενων εικόνων από επίπεδα. Σε αυτήν την περίπτωση, η ίδια η εικόνα πολλαπλών επιπέδων μπορεί να προετοιμαστεί σε διαφορετικές εφαρμογές, συμπεριλαμβανομένου του Adobe Illustrator.

Είναι πολύ εύκολο να δημιουργήσετε ένα κινούμενο σχέδιο βασισμένο σε στοιχεία από την παλέτα Symbols, που ανοίγει με την εντολή Window=>Symbols ή από μία από τις βιβλιοθήκες συμβόλων που μπορεί να ανοίξει χρησιμοποιώντας την εντολή Window=>Symbol Libraries. ).

Για παράδειγμα, θα προσπαθήσουμε να αυξήσουμε το μέγεθος οποιουδήποτε αντικειμένου συμβόλου· τα βασικά στάδια της διαδικασίας αύξησης του αντικειμένου πρέπει να οριστούν σε ξεχωριστά επίπεδα. Αρχικά, απλώς τοποθετήστε τα αντικείμενα συμβόλων το ένα πάνω από το άλλο και, στη συνέχεια, αυξήστε το μέγεθος κάθε επόμενου αντικειμένου, για παράδειγμα όπως φαίνεται στην Εικ. 61. Ως αποτέλεσμα, θα δημιουργηθεί ένα στρώμα με πολλά αντικείμενα στην παλέτα Layers (Εικ. 62). Εάν εξαγάγετε απευθείας αυτήν την εικόνα σε μορφή PSD, δεν θα δώσει τίποτα, αφού υπάρχει μόνο ένα επίπεδο, και φυσικά, όταν ανοίγετε το αρχείο PSD στο πρόγραμμα ImageReady, θα υπάρχει επίσης μόνο ένα επίπεδο. Επομένως, πρέπει πρώτα να τοποθετήσετε αντικείμενα σε διαφορετικά επίπεδα. Αυτό μπορεί να γίνει διαφορετικοί τρόποιΟ ευκολότερος τρόπος είναι να επιλέξετε πρώτα το Layer 1 στην παλέτα Layers και να χρησιμοποιήσετε την εντολή Release to Layer. Το αποτέλεσμα θα είναι ότι καθένα από τα αντικείμενα θα μετακινηθεί στο δικό του στρώμα, αλλά θα είναι όλα ένθετα στο Επίπεδο 1. Επομένως, θα πρέπει στη συνέχεια να σύρετε χειροκίνητα όλα τα ένθετα στρώματα στην κορυφή της παλέτας Layers έτσι ώστε να βρίσκονται πάνω από το επίπεδο Layer 1 και, στη συνέχεια, απλώς να διαγράψετε το τώρα άδειο Layer 1 layer (Εικ. 63). Εξάγετε την εικόνα σε μορφή PSD χρησιμοποιώντας την εντολή File=>Export με ρυθμίσεις όπως στην Εικ. 64.

Φορτώστε το δημιουργημένο αρχείο PSD στο πρόγραμμα ImageReady (Εικ. 65 και 66). Ανοίξτε το μενού της παλέτας Animation Make Frames From Layers. Ως αποτέλεσμα, θα δημιουργηθούν πέντε καρέ, το καθένα από τα οποία θα αντιστοιχεί στο δικό του στρώμα και το παράθυρο της παλέτας κινούμενων εικόνων θα μοιάζει όπως στο Σχ. 67.

Μετά από αυτό, ορίστε τη διάρκεια καθενός από τα δημιουργημένα πλαίσια σε αυτήν την περίπτωση, η διάρκεια για όλα τα καρέ ορίζεται σε 0,2 δευτερόλεπτα. Και στη συνέχεια αποθηκεύστε το animation με βελτιστοποίηση χρησιμοποιώντας την εντολή File=>Save Optimized (Αρχείο=>Αποθήκευση με βελτιστοποίηση). Το αποτέλεσμα που προκύπτει μπορεί να μοιάζει με το Σχ. 68.

Είναι ακόμη πιο βολικό να αποκτήσετε κενά που μπορούν στη συνέχεια να μετατραπούν εύκολα σε κινούμενα σχέδια στο ImageReady για να χρησιμοποιήσετε τις λειτουργίες Live Blends του Illustrator. Αυτή η συνδυασμένη χρήση του Illustrator και του ImageReady επιταχύνει σημαντικά τη διαδικασία δημιουργίας κινούμενων εικόνων GIF.

Για παράδειγμα, σχεδιάστε δύο αυθαίρετα πολύχρωμα αντικείμενα και, στη συνέχεια, συνδέστε τα με έναν σύνδεσμο ανάμειξης με τις κατάλληλες παραμέτρους (Εικ. 69). Είναι αδύνατο να χρησιμοποιήσετε αυτό το αρχείο απευθείας για τη δημιουργία κινούμενων εικόνων, καθώς η εικόνα βρίσκεται σε ένα μόνο επίπεδο (Εικ. 70). Επομένως, θα χρειαστεί πρώτα να τοποθετήσετε κάθε στοιχείο του αντικειμένου μείγματος σε ένα ξεχωριστό στρώμα. Για να το κάνετε αυτό, στο παράθυρο Layers, επιλέξτε τη γραμμή, ενεργοποιήστε το μενού της παλέτας κάνοντας κλικ στο μαύρο βέλος στην επάνω δεξιά γωνία του και επιλέξτε την εντολή Release to Layers Sequence (Εικ. 71). Κρατήστε πατημένο το πλήκτρο Shift, επιλέξτε τα στρώματα που δημιουργήσατε και τοποθετήστε τα πάνω από το επίπεδο Layer 1 και, στη συνέχεια, διαγράψτε το ίδιο το επίπεδο Layer 1, μετακινώντας το στον κάδο απορριμμάτων, ως αποτέλεσμα, η παλέτα στρώσεων θα έχει την ίδια μορφή όπως στο Σχήμα. 72.

Ρύζι. 70. Αρχική κατάστασηΕπίπεδα παράθυρα

Εξάγετε το δημιουργημένο αρχείο σε μορφή PSD χρησιμοποιώντας την εντολή File=>Export. Ανοίξτε το αρχείο PSD που δημιουργήθηκε στο πρόγραμμα ImageReady (Εικ. 73). Λάβετε υπόψη ότι όλα τα επίπεδα που δημιουργούνται στο Illustrator θα εμφανίζονται στο παράθυρο επιπέδων (Εικ. 74) και στο παράθυρο Κινούμενη εικόνα θα υπάρχει μόνο ένα καρέ προς το παρόν.

Ενεργοποιήστε το μενού της παλέτας Animation κάνοντας κλικ στο μαύρο βέλος στην επάνω δεξιά γωνία της παλέτας και επιλέξτε την εντολή Make Frames From Layers. Ως αποτέλεσμα, σε αυτό το παράδειγμα, θα δημιουργηθούν πέντε καρέ και το παράθυρο της παλέτας Animation θα λάβει το μορφή σύμφωνα με το Σχ. 75. Επιλέξτε όλα τα καρέ κρατώντας πατημένο το πλήκτρο Shift και ορίστε την κατάλληλη διάρκεια καρέ σε αυτό το παράδειγμα, λαμβάνεται ο ίδιος χρόνος 0,2 δευτερολέπτων για κάθε καρέ. Στη συνέχεια αποθηκεύστε το αρχείο με βελτιστοποίηση χρησιμοποιώντας την εντολή File=>Save Optimized (Αρχείο=>Αποθήκευση με βελτιστοποίηση), ορίζοντας την επιλογή Images Only (*.gif) στη λίστα Τύπος αρχείου. Το κινούμενο σχέδιο θα μοιάζει με το Σχ. 76.

Αυτό που φαίνεται πολύ πιο ενδιαφέρον δεν είναι η κίνηση, αλλά η ομαλή αλλαγή μεγέθους αντικειμένων ανάμειξης. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε την ήδη δημιουργημένη μετάβαση μείξης. Σε αυτήν την περίπτωση, αφού δημιουργήσετε ξεχωριστά επίπεδα για κάθε στοιχείο μετάβασης μείξης, τοποθετήστε όλα τα αντικείμενα το ένα πάνω στο άλλο χρησιμοποιώντας τα κουμπιά Οριζόντια στοίχιση Κέντρο και Κατακόρυφη στοίχιση Κέντρο της παλέτας Στοίχιση (Εικ. 77) .

Εξάγετε το δημιουργημένο αρχείο σε μορφή PSD (File=>Export File=>Export) και ανοίξτε το αρχείο PSD που δημιουργήθηκε στο πρόγραμμα ImageReady (Εικ. 78). Δημιουργήστε καρέ κινούμενων εικόνων με βάση επίπεδα (Make Frames From Layers Δημιουργήστε πλαίσια από επίπεδα) και επιλέξτε την κατάλληλη διάρκεια για αυτά (Εικ. 79). Και μετά, για να κάνετε το κινούμενο σχέδιο πιο αποτελεσματικό, αντιγράψτε τα υπάρχοντα καρέ, αλλά με αντίστροφη σειρά, ώστε η εικόνα πρώτα να αυξάνεται και μετά να μειώνεται και ούτω καθεξής σε κύκλο (Εικ. 80). Στη συνέχεια αποθηκεύστε το αρχείο βελτιστοποίησης (File=>Save Optimized File=>Save with optimization). Το κινούμενο σχέδιο που προκύπτει φαίνεται στο Σχ. 81.

Ρύζι. 80. Κατάσταση του παραθύρου Κινούμενη εικόνα μετά την αναπαραγωγή πλαισίων

Ρύζι. 81. Τελειωμένο κινούμενο σχέδιο

Adobe Illustrator και After Effects
Εισαγωγή και απλό κινούμενο σχέδιο Γεια σας. Σήμερα εξετάζουμε τα απλά κινούμενα σχέδια στο After Effects.

Πόροι: Adobe Illustrator CC
Adobe After Effects CC

Ας ξεκινήσουμε να μαθαίνουμε σχεδιάζοντας στο Illustrator.

Ας ζωγραφίσουμε
1) Σχεδιάστε ένα κίτρινο ορθογώνιο ως φόντο

Εικόνα 1 - Ορθογώνιο

2) Σχεδιάστε έναν κύκλο και γεμίστε τον με μια κλίση
Ας δουλέψουμε λίγο τον κύκλο:
- διαγράψτε το κάτω σημείο στο περίγραμμα, έχουμε ένα τόξο.
- σχεδιάστε μια ευθεία γραμμή, κλείνοντας το κάτω μέρος του τόξου, παίρνουμε ένα ημικύκλιο

Εικόνα 2 - 1) σχεδιάστε κύκλο. 2) κλίση? 3) διαγραφή σημείου

3) Σχεδιάστε ένα Ορθογώνιο και δημιουργήστε ένα αντίγραφό του
- ένα γκρι ορθογώνιο.
- ένα άλλο ορθογώνιο είναι σκούρο γκρι
4) Σχεδιάστε ένα τρίγωνο από έναν αστερίσκο θέτοντας τον αριθμό των ακτίνων σε 3

Εικόνα 3 - 1) ορθό φως. 2) ορθό σκοτάδι? 3) τρίγωνο

5) Σχεδιάστε μια γάτα χρησιμοποιώντας στυλό και απλά σχήματα

Εικόνα 4 - 1) κεφαλή. 2) λαιμός? 3) σώμα? 4) πόδι? 5) ουρά

Και τώρα η πιο ΣΗΜΑΝΤΙΚΗ στιγμή
Ας διανείμουμε τις εικόνες σε επίπεδα (αυτό που θα κινείται είναι σε ξεχωριστό επίπεδο) ως εξής:

Εικόνα 5 - όλες οι φωτογραφίες (κόκκινο σημάδι σημαντικά επίπεδα)

Αυτό ήταν, τώρα ας σώσουμε.
Ας δούμε τις ρυθμίσεις αποθήκευσης

Εικόνα 6 - Αποθήκευση

Και τώρα το επόμενο στάδιο. Κλείστε το Adobe Illustrator και ανοίξτε το After Effects.

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

Εικόνα 7 - Εισαγωγή ως σύνθεση

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

Εικόνα 8 - Ανοιχτή σύνθεση

Και τώρα αυτό που είμαστε εδώ σήμερα είναι το Animation.

Κινούμενα σχέδια στο After Effects
Ρυθμίστε το σημείο περιστροφής στο επάνω μέρος του βέλους χρησιμοποιώντας το εργαλείο Pan Behind Tool (συντόμευση - Y). Απλώς παίρνουμε ένα σημείο και το μετακινούμε όπου χρειάζεται. Ως αποτέλεσμα θα μοιάζει με αυτό..

Εικόνα 9 - Εργαλείο μετατόπισης και στρώσεις

Αυτό ήταν, τώρα ας περάσουμε στα επίπεδα για κινούμενα σχέδια.
Θα χρειαστούμε ένα επίπεδο Arrow και Head_cat.
Ας ξεκινήσουμε με το βέλος.
Ας επεκτείνουμε τη λίστα, ας τη βρούμε και κάνουμε κλικ στο ρολόι. Έτσι ορίσαμε το πρώτο σημείο στο μηδέν δευτερόλεπτο. Το animation θα διαρκέσει συνολικά 2 δευτερόλεπτα.
Λοιπόν, αυτές είναι οι ρυθμίσεις που πρέπει να κάνετε (θα βάλουμε 3 βαθμούς συνολικά):

Δεύτερος	0	1	2
	+66	- 70	+66

Έτσι θα μοιάζει:

Εικόνα 10 - Βέλος περιστροφής

Τώρα ας ζωοποιήσουμε το κεφάλι της γάτας.
Ας αναπτύξουμε το head_cat και ας βρούμε τη Θέση .
Εδώ θα υπάρχουν 4 τελείες.
Μόνο η τελευταία συντεταγμένη θα αλλάξει χωρίς να επηρεαστούν οι άλλες.

Δεύτερος	0.1	0.17	1.12	2.0
Θέση	689.3	729.3	729.3	689.3

Ας δούμε την εικόνα.

Εικόνα 11 - Τοποθετήστε το κεφάλι

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

Το τελικό στάδιο

Παραγωγή
Πρέπει να δημιουργήσετε ένα τελικό προϊόν από την εργασία σας.
Μεταβείτε στο μενού - Προσθήκη στην ουρά απόδοσης
Θα ανοίξει ο πίνακας Render και στο Output Module (δύο κλικ) επιλέξτε τη μορφή εξόδου. Πήρα *.mov

Εικόνα 12 - Render

Κάντε κλικ στο κουμπί RENDER και λάβετε το αποτέλεσμα (απλώς μην ξεχάσετε να καθορίσετε τη διαδρομή).
Αυτό είναι όλο.