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

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

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

2. Ζικ-ζαγκ

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

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

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

4. Αυτόματη στρογγυλοποίηση γωνιών (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.Πινέλο υφής

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

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

10.Split to Grid

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

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

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

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

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

(Σημείωση – ένα μοτίβο μπορεί να μετατραπεί σε ένα διανυσματικό επεξεργάσιμο αντικείμενο χρησιμοποιώντας τη συνάρτηση ανάλυσης ( Αντικείμενο – Επέκταση εμφάνισης).

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

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

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

15.Blend

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

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

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

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

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

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

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

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

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

19.Isometrics using Graphic Styles

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

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

Σήμερα έχουμε ένα ασυνήθιστο μάθημα Adobe Illustrator. Γιατί αυτή τη φορά δεν θα κάνουμε μια στατική εικόνα, αλλά ένα πραγματικό animation. Φανταστείτε, αποδεικνύεται ότι μπορείτε επίσης να σχεδιάσετε κινούμενα σχέδια χρησιμοποιώντας το Adobe Illustrator :)

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

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

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

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

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

Με παρόμοιο τρόπο, πρέπει να συσσωρεύσουμε 12 στρώματα πλαισίων φιλμ που καθορίζουν την κίνησή του.

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

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

Εάν αποεπιλέξετε τον κύκλο, θα μοιάζει με ένα ενιαίο σύνολο. Αυτό ακριβώς χρειαζόμαστε.

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

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

Στη συνέχεια πρέπει να προσθέσουμε υφή στα στρώματά μας. Ενεργοποιήστε το πρώτο στρώμα και αντιγράψτε την υφή από το αρχικό αρχείο με ανταλλακτικά εκεί.

Στη συνέχεια, ενεργοποιήστε τα επόμενα στρώματα ένα προς ένα και αντιγράψτε την ίδια υφή εκεί. Για να το κάνετε να φαίνεται διαφορετικό σε κάθε καρέ, απλώς περιστρέψτε το κατά 90 μοίρες. Όπως ίσως μαντέψατε, πρέπει να προσθέσουμε υφή και στα 12 καρέ.

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

Τώρα που ο κύριος κύκλος με τα κινούμενα σχέδια είναι έτοιμος, το μόνο που μένει είναι να προσθέσουμε τους αριθμούς. Δεδομένου ότι η αντίστροφη μέτρηση πηγαίνει από το 3 στο 1 συν τη λέξη Go!!!, χρειαζόμαστε ακόμη περισσότερα επίπεδα. Όχι 12, αλλά 48. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε άλλα τρία αντίγραφα έτοιμων επιπέδων με κινούμενα σχέδια.

Και τότε όλα είναι απλά. Ανοίξτε την πρώτη στρώση και βάλτε τον αριθμό τρία εκεί.

Στη συνέχεια, πρέπει να αντιγράψετε αυτό το σχήμα στα επόμενα επίπεδα μέχρι να τελειώσει η κινούμενη εικόνα του κύκλου. Όταν φτάσετε στο επόμενο αντίγραφο των επιπέδων, όπου ο κύκλος θα συμπληρωθεί ξανά πλήρως, πρέπει να βάλετε τον αριθμό δύο. Με τον ίδιο τρόπο, αντιγράψτε τον αριθμό ένα στα επιθυμητά επίπεδα. Και όταν φτάσετε στα τελικά επίπεδα για την επιγραφή Go!!!

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

Στο παράθυρο ρυθμίσεων εξαγωγής, φροντίστε να ορίσετε το Export As: AI Layers σε SWF Frames. Αυτή η επιλογή είναι που μετατρέπει τα επίπεδα του Illustrator σε καρέ κινούμενων σχεδίων. Στη συνέχεια, κάντε κλικ στο κουμπί Για προχωρημένους.

Θα ανοίξουν πρόσθετες ρυθμίσεις. Εδώ πρέπει να ορίσετε τον ρυθμό καρέ. Έχω 12 καρέ ανά δευτερόλεπτο. Το πλαίσιο ελέγχου Looping είναι υπεύθυνο για την κυκλική κίνηση. Χάρη σε αυτό, το βίντεο θα αναπαραχθεί σε κύκλο. Και η επιλογή Layer Order: Bottom Up αναπαράγει επίπεδα εικονογράφων από κάτω προς τα πάνω στον πίνακα. Αυτός ακριβώς είναι ο τρόπος με τον οποίο φτιάξαμε το κινούμενο σχέδιο μας.

Η έξοδος είναι ένα βίντεο flash με την κινούμενη εικόνα μας.

Τώρα βλέπετε ότι η δημιουργία απλών κινούμενων εικόνων στο Adobe Illustrator δεν είναι τόσο δύσκολη όσο φαίνεται με την πρώτη ματιά.

Αλλά για να δημιουργήσετε μεγάλα βίντεο ή διαδραστικές εφαρμογές, είναι ακόμα καλύτερο να χρησιμοποιήσετε το Adobe Flash ή άλλα προγράμματα επεξεργασίας flash. Για παράδειγμα, έφτιαξα αυτή τη γάτα σε ένα παλιό Macromedia Flash που έβγαλα από τη δουλειά μου.

Επίσης, πρόσφατα τα HTML5 και CSS3 χρησιμοποιούνται όλο και περισσότερο για τη δημιουργία κινούμενων εικόνων. Αυτός ο κωδικός υποστηρίζεται από σύγχρονα προγράμματα περιήγησης και δεν απαιτεί τη χρήση flash player.

Ρωμαίος γνωστός και ως dacascasειδικά για το blog

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

Η μορφή αρχείου Flash (SWF) βασίζεται σε διανυσματικά γραφικά και έχει σχεδιαστεί για επεκτάσιμα, συμπαγή γραφικά για τον Ιστό. Επειδή αυτή η μορφή αρχείου βασίζεται σε διανυσματικά γραφικά, το αντικείμενο διατηρεί την ποιότητα της εικόνας σε οποιαδήποτε ανάλυση και είναι ιδανικό για τη δημιουργία καρέ κινούμενων εικόνων. Στο Illustrator, μπορείτε να δημιουργήσετε μεμονωμένα καρέ κινούμενων εικόνων σε επίπεδα και στη συνέχεια να εξαγάγετε τα επίπεδα εικόνας ως μεμονωμένα καρέ για χρήση στον ιστότοπό σας. Μπορείτε επίσης να ορίσετε σύμβολαστο αρχείο Illustrator για να μειώσετε το μέγεθος της κινούμενης εικόνας. Κατά την εξαγωγή, κάθε σύμβολο ορίζεται μόνο μία φορά στο αρχείο SWF.

Εντολή εξαγωγής (SWF)

Παρέχει τον μεγαλύτερο έλεγχο στα κινούμενα σχέδια και στη συμπίεση bit.

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

Κατά την προετοιμασία ενός αντικειμένου για αποθήκευση σε μορφή SWF, λάβετε υπόψη τις ακόλουθες οδηγίες.

Χρησιμοποιώντας το Device Central, μπορείτε να δείτε πώς θα μοιάζει το έργο τέχνης του Illustrator στο Flash Player σε μια ποικιλία φορητών συσκευών.

Εισαγωγή γραφικού Illustrator

Ένα γραφικό που δημιουργείται στο Illustrator μπορεί να αντιγραφεί και να επικολληθεί γρήγορα, εύκολα και εύκολα στο Flash.

Όταν εισάγετε ένα γραφικό Illustrator σε μια εφαρμογή Flash, διατηρούνται τα ακόλουθα χαρακτηριστικά.

Περιγράμματα και σχήματα

• Πάχος διαδρομής

  Ορισμοί κλίσεων

  Κείμενο (συμπεριλαμβανομένων των γραμματοσειρών OpenType)

  Σχετικές Εικόνες

• Λειτουργίες ανάμειξης

Επιπλέον, το Illustrator και το Flash υποστηρίζουν τις ακόλουθες επιλογές κατά την εισαγωγή ενός γραφικού.

Όταν επιλέγετε ολόκληρα επίπεδα ανώτατου επιπέδου σε ένα γραφικό Illustrator και τα επικολλάτε σε μια εφαρμογή Flash, τα επίπεδα και οι ιδιότητές τους (ορατότητα και κλείδωμα) διατηρούνται.

Οι χρωματικές μορφές Illustrator εκτός από το RGB (CMYK, κλίμακα του γκρι και προσαρμοσμένες μορφές) μετατρέπονται σε RGB από το Flash. Τα χρώματα RGB εισάγονται ως συνήθως.

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

Το Flash διατηρεί μάσκες Illustrator.

Εξαγωγή αρχείων SWF από το Illustrator

Τα αρχεία SWF που εξάγονται από το Illustrator ταιριάζουν με την ποιότητα και τον λόγο συμπίεσης των αρχείων SWF που εξάγονται από το Flash.

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

Εισαγωγή αρχείων Illustrator σε εφαρμογή Flash

Για να δημιουργήσετε μια πλήρη διάταξη στο Illustrator και στη συνέχεια να την εισαγάγετε στο Flash με ένα βήμα, μπορείτε να αποθηκεύσετε το έργο τέχνης σε εγγενή μορφή (AI) του Illustrator και να το εισαγάγετε με ακρίβεια στο Flash χρησιμοποιώντας τις εντολές File > Import to Workbench " > "Εισαγωγή στη βιβλιοθήκη".

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

Όταν εισάγετε ένα γραφικό Illustrator ως αρχείο AI, EPS ή PDF, το Flash διατηρεί τα ίδια χαρακτηριστικά όπως όταν εισάγετε ένα γραφικό Illustrator. Επιπλέον, εάν το αρχείο Illustrator που εισάγετε περιέχει επίπεδα, μπορείτε να τα εισαγάγετε χρησιμοποιώντας μία από τις ακόλουθες μεθόδους.

Μετατρέψτε τα επίπεδα του Illustrator σε επίπεδα Flash.

Μετατρέψτε τα επίπεδα του Illustrator σε καρέ Flash.

Μετατρέψτε όλα τα επίπεδα του Illustrator σε ένα επίπεδο Flash.

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, αν βάλουμε πλάνα, θα λάβουμε μια εικόνα με συγχωνευμένα επίπεδα, αλλά δεν το χρειαζόμαστε.

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

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

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

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

Κινούμενα σχέδια σε Συνέπειες
Ρυθμίστε το σημείο περιστροφής στο επάνω μέρος του βέλους χρησιμοποιώντας το εργαλείο 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 και λάβετε το αποτέλεσμα (απλώς μην ξεχάσετε να καθορίσετε τη διαδρομή).
Αυτό είναι όλο.

Έχετε ένα ή δύο εικονίδια που θα θέλατε να ζωντανέψετε με κινούμενα σχέδια. Από πού θα ξεκινούσατε; Ας υποθέσουμε ότι έχετε αρχεία 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 (Μακ)για να φορτώσετε το παράθυρο διαλόγου Εισαγωγή αρχείου, ή πηγαίνετε στο Αρχείο > Εισαγωγή > Αρχείο…Εκεί, επιλέξτε το αρχείο 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 καρέ ανά δευτερόλεπτο για να διατηρήσω το κινούμενο σχέδιο ομαλό.

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

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

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

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

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

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

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

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

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

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

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