Πώς να δημιουργήσετε κινούμενα σχέδια gif στο illustrator. Πώς να δημιουργήσετε κινούμενα σχέδια στο Adobe Illustrator. Εξαγωγή αρχείων SWF από το Illustrator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Στο παράθυρο ρυθμίσεων εξαγωγής, φροντίστε να ορίσετε το 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.

Roman aka dacascas ειδικά για το blog

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

Πρόσφατα, διάφορα είδη κινούμενων εικόνων γραφικών 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 σε ένα σύγχρονο πρόγραμμα περιήγησης και απολαύστε το εφέ.

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

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

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

Το 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Εικονογράφος. Για να συνδέσετε το αρχείο 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. Τελειωμένο κινούμενο σχέδιο

Ένα διαφανές GIF στο Adobe Illustrator γίνεται ως εξής. Μεταβείτε στο μενού Αρχείο > Αποθήκευση για Ιστό και συσκευές (Alt+Ctrl+Shift+S). Στο παράθυρο που ανοίγει, στο πεδίο Βελτιστοποιημένη μορφή αρχείου, πρέπει πρώτα να μεταβείτε στην καρτέλα Μέγεθος εικόνας. Το γεγονός είναι ότι από προεπιλογή ολόκληρη η σελίδα περιλαμβάνεται στο παράθυρο βελτιστοποίησης και αυτό συνήθως δεν είναι απαραίτητο. Επομένως, στην καρτέλα Μέγεθος εικόνας, καταργήστε την επιλογή του πλαισίου ελέγχου Clip to Artboard και κάντε κλικ στο κουμπί Apply.

Στη συνέχεια, επιλέξτε GIF από τη λίστα επιλογής μορφής και επιλέξτε το πλαίσιο ελέγχου Διαφάνεια.

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

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

Λίγα λόγια για τη μέθοδο ρύθμισης της διαφάνειας. Είναι υπεύθυνος για το αναπτυσσόμενο μενού Specify Transparency Dither Algorithm, στα Ρωσικά - Αλγόριθμος για προσομοίωση διαφάνειας (Εικ. παρακάτω). Υπάρχουν τέσσερις επιλογές: Χωρίς διάχυση διαφάνειας, διάχυση διαφάνειας, μοτίβο διαφάνειας και θόρυβος διαφάνειας. Στη λειτουργία αλγορίθμου διάχυσης, το ρυθμιστικό Ποσού ενεργοποιείται, επιτρέποντάς σας να αλλάξετε την τιμή διάχυσης. Τι να εφαρμόσετε στην πράξη; Ανάλογα με το σκοπό και την εικόνα. Δεν χρησιμοποιώ αυτήν την επιλογή και την αφήνω πάντα στην προεπιλογή - Χωρίς διαφάνεια.

Κάντε κλικ στην Αποθήκευση - το διαφανές GIF είναι έτοιμο. Η εργασία πραγματοποιήθηκε στην έκδοση CS4 (έκδ. 14) του Adobe Illustrator, αλλά όλες οι ενέργειες και οι συντομεύσεις πληκτρολογίου σχετίζονται επίσης με την προηγούμενη έκδοση CS3 (έκδ. 13).

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