Μετά τη δημιουργία ενός κινουμένων σχεδίων στο Photoshop, πρέπει να αποθηκευτεί σε μία από τις διαθέσιμες μορφές, ένα από τα οποία είναι gif. Ένα χαρακτηριστικό αυτής της μορφής είναι ότι προορίζεται να εμφανιστεί (παιχνίδι) στο πρόγραμμα περιήγησης.
Εάν ενδιαφέρεστε για άλλες επιλογές για την εξοικονόμηση κινούμενων σχεδίων, σας συνιστούμε να διαβάσετε αυτό το άρθρο:
Μάθημα: Πώς να αποθηκεύσετε το βίντεο στο Photoshop
Η διαδικασία δημιουργίας ενός κινούμενου GIF περιγράφηκε σε ένα από τα προηγούμενα μαθήματα και σήμερα θα μιλήσουμε για το πώς να αποθηκεύουμε το αρχείο σε μορφή GIF και σε ρυθμίσεις βελτιστοποίησης.
Μάθημα: Δημιουργήστε μια απλή κινούμενη εικόνα στο Photoshop
Εξοικονόμηση GIF.
Για να ξεκινήσετε, επαναλαμβάνουμε το υλικό και διαβάστε το παράθυρο Save Settings. Ανοίγει κάνοντας κλικ στο στοιχείο "Αποθήκευση για web" στο μενού Αρχείο.
Το παράθυρο αποτελείται από δύο μέρη: ένα μπλοκ προεπισκόπησης
και μπλοκ ρυθμίσεων.
Μπλοκ προεπισκόπηση
Επιλέξτε τον αριθμό των επιλογών προβολής επιλέγεται στην κορυφή του μπλοκ. Ανάλογα με τις ανάγκες, μπορείτε να επιλέξετε την επιθυμητή ρύθμιση.
Η εικόνα σε κάθε παράθυρο, εκτός από το πρωτότυπο, διαμορφώνεται ξεχωριστά. Αυτό γίνεται έτσι ώστε να μπορείτε να επιλέξετε τη βέλτιστη επιλογή.
Στην αριστερή πλευρά του μπλοκ υπάρχει ένα μικρό σύνολο εργαλείων. Θα χρησιμοποιήσουμε μόνο το "χέρι" και "κλίμακα".
Χρησιμοποιώντας το "χέρι" μπορείτε να μετακινήσετε την εικόνα μέσα στο επιλεγμένο παράθυρο. Η επιλογή γίνεται επίσης από αυτό το εργαλείο. Η "κλίμακα" εκτελεί την ίδια ενέργεια. Περίπου και διαγράψτε την εικόνα μπορεί επίσης να είναι κουμπιά στο κάτω μέρος του μπλοκ.
Χαμηλό κάτω είναι το κουμπί με την επιγραφή "Προβολή". Ανοίγει την επιλεγμένη επιλογή στο προεπιλεγμένο πρόγραμμα περιήγησης.
Στο παράθυρο του προγράμματος περιήγησης, εκτός από τις παραμέτρους ρύθμισης, μπορούμε επίσης να λάβουμε τον κώδικα GIF HTML.
Μπλοκ ρυθμίσεις
Σε αυτό το μπλοκ, οι παράμετροι της εικόνας διαμορφώνονται, θεωρούν περισσότερο.
- Χρώμα σχήματος. Αυτή η ρύθμιση καθορίζει ποιος πίνακας ευρετηρίων χρωμάτων θα εφαρμοστεί στην εικόνα κατά τη βελτιστοποίηση.
- Αντιληπτή, και απλά "Σχέδιο αντίληψης". Όταν χρησιμοποιείται, το Photoshop δημιουργεί ένα τραπέζι χρωμάτων, καθοδηγούμενη από τις τρέχουσες αποχρώσεις της εικόνας. Σύμφωνα με τους προγραμματιστές, ο πίνακας αυτός είναι όσο το δυνατόν πιο κοντά στο πώς το ανθρώπινο μάτι βλέπει το χρώμα. Επιπλέον - η εικόνα είναι η πιο κοντά στο πρωτότυπο, τα χρώματα αποθηκεύονται μέγιστα.
- Το επιλεκτικό σχήμα είναι παρόμοιο με το προηγούμενο, αλλά τα χρώματα που σχετίζονται με τον ιστό για τον ιστό χρησιμοποιούνται κατά κύριο λόγο σε αυτό. Επίσης, εστιάστηκε στην εμφάνιση των αποχρώσεων κατά προσέγγιση στην αρχική.
- Προσαρμοστικό. Σε αυτή την περίπτωση, ο πίνακας δημιουργείται από τα χρώματα που είναι πιο κοινά στην εικόνα.
- Περιορισμένος. Αποτελείται από 77 χρώματα, μερικά από τα δείγματα των οποίων αντικαθίστανται από λευκές με τη μορφή ενός σημείου (κόκκων).
- Εθιμο. Κατά την επιλογή αυτού του συστήματος, είναι δυνατό να δημιουργήσετε τη δική σας παλέτα.
- Μαύρο και άσπρο. Αυτός ο πίνακας χρησιμοποιεί μόνο δύο χρώματα (μαύρο και άσπρο), χρησιμοποιώντας επίσης κόκκους.
- Σε βαθμούς γκρι. Υπάρχουν διάφορα 84 επίπεδα αποχρώσεων του γκρι.
- Μακός και παράθυρα. Τα δεδομένα πίνακα καταρτίζονται με βάση τα χαρακτηριστικά των εικόνων χαρτογράφησης σε προγράμματα περιήγησης που εκτελούν αυτά τα λειτουργικά συστήματα.
Ακολουθούν ορισμένα παραδείγματα εφαρμογών συστημάτων.
Όπως μπορείτε να δείτε, τα τρία πρώτα δείγματα έχουν αρκετά αποδεκτή ποιότητα. Παρά το γεγονός ότι οπτικά δεν διαφέρουν σχεδόν ο ένας από τον άλλο, σε διαφορετικές εικόνες, αυτά τα συστήματα θα λειτουργήσουν διαφορετικά.
- Μέγιστος αριθμός χρωμάτων στον πίνακα χρωμάτων.
Ο αριθμός των αποχρώσεων στην εικόνα επηρεάζει άμεσα το βάρος του και, κατά συνέπεια, στην ταχύτητα λήψης στο πρόγραμμα περιήγησης. Η τιμή των 128 χρησιμοποιείται συχνότερα, καθώς αυτή η ρύθμιση σχεδόν δεν επηρεάζει την ποιότητα, μειώνοντας παράλληλα το βάρος του gif.
- Χρώματα ιστού. Αυτή η ρύθμιση καθιερώνει την ανοχή με την οποία οι αποχρώσεις μετατρέπονται ισοδύναμες από μια ασφαλή παλέτα ιστού. Το πεδίο του αρχείου προσδιορίζεται από την τιμή που ορίζεται από το ρυθμιστικό: Η τιμή είναι υψηλότερη - το αρχείο είναι μικρότερο. Κατά τη δημιουργία χρώματος Web δεν πρέπει επίσης να ξεχάσετε την ποιότητα.
Παράδειγμα:
- Το Dysrying σάς επιτρέπει να εξομαλύνετε τις μεταβάσεις μεταξύ των χρωμάτων αναμειγνύοντας τις αποχρώσεις που περιέχονται στον επιλεγμένο πίνακα ευρετηρίου.
Επίσης, η ρύθμιση θα βοηθήσει τον τρόπο διατήρησης των βαθμίδων και την ακεραιότητα των μονοχρωματικών ιστότοπων. Όταν η χρήση της διανομής αυξάνει το βάρος του αρχείου.
Παράδειγμα:
- Διαφάνεια. Η μορφή GIF υποστηρίζει μόνο απολύτως διαφανούς ή απολύτως αδιαφανή εικονοστοιχεία.
Αυτή η παράμετρος, χωρίς πρόσθετη ρύθμιση, δεν εμφανίζει κακώς τις καμπύλες γραμμών, αφήνοντας κυρίες pixel.
Η προσαρμογή ονομάζεται "ματ" (σε ορισμένους συντάκτες "kaima"). Με αυτό, έχει ρυθμιστεί ώστε να αναμειγνύεται εικόνες pixel με φόντο τη σελίδα στην οποία θα τοποθετηθεί. Για την καλύτερη οθόνη, επιλέξτε ένα χρώμα που αντιστοιχεί στο χρώμα του φόντου της τοποθεσίας.
- Interlaced. Ένα από τα πιο χρήσιμα για τις ρυθμίσεις ιστού. Σε περίπτωση που το αρχείο έχει σημαντικό βάρος, σας επιτρέπει να εμφανίζετε αμέσως μια εικόνα στη σελίδα, καθώς φορτώνει τη βελτίωση της ποιότητας του.
- Η μετατροπή SRGB βοηθά στην αποθήκευση των μέγιστων πρωτότυπων χρωμάτων εικόνας κατά την αποταμίευση.
Η ρύθμιση της "διαφάνειας δυσάρεσης" επιδεινώνει σημαντικά την ποιότητα της εικόνας και θα μιλήσουμε για την παράμετρο "απώλειας" στο πρακτικό μέρος του μαθήματος.
Για την καλύτερη κατανόηση της διαδικασίας δημιουργίας της διατήρησης των gifs στο Photoshop, πρέπει να εξασκηθείτε.
Πρακτική
Ο στόχος της βελτιστοποίησης των εικόνων για το Διαδίκτυο είναι η μέγιστη μείωση του βάρους του αρχείου διατηρώντας ταυτόχρονα την ποιότητα.
- Μετά την επεξεργασία της εικόνας, μεταβείτε στο μενού "Αποθήκευση για web".
- Εκθέστε τη λειτουργία προβολής "4 επιλογής".
- Στη συνέχεια, χρειάζεστε μία από τις επιλογές για να κάνετε το πιο παρόμοιο με το πρωτότυπο. Αφήστε να είναι μια εικόνα στα δεξιά της πηγής. Αυτό γίνεται για να εκτιμηθεί το μέγεθος του αρχείου με μέγιστη ποιότητα.
Οι ρυθμίσεις ρυθμίσεων έχουν ως εξής:
- Χρώμα Σχέδιο "Επιλεκτικό".
- "Χρώματα" - 265.
- Η "Dezering" είναι "τυχαία", 100%.
- Αφαιρέστε τα DAWS απέναντι από την παράμετρο "Interlaced", καθώς η τελική εικόνα της εικόνας θα είναι αρκετά μικρή.
- "Χρώματα ιστού" και "απώλειες" - μηδέν.
Συγκρίνετε το αποτέλεσμα με το πρωτότυπο. Στο κάτω μέρος του παραθύρου δείγματος, μπορούμε να δούμε το τρέχον μέγεθος GIF και την ταχύτητα φόρτωσης με την καθορισμένη ταχύτητα του Internet.
- Πηγαίνετε στην παρακάτω εικόνα που μόλις ρυθμίζεται. Ας προσπαθήσουμε να το βελτιστοποιήσουμε.
- Αφήστε το σχέδιο αμετάβλητο.
- Ο αριθμός των χρωμάτων μειώνουν έως και 128.
- Η τιμή Dysmering μειώθηκε στο 90%.
- Τα χρώματα Web δεν αγγίζουν, διότι σε αυτή την περίπτωση δεν θα μας βοηθήσει να διατηρήσουμε την ποιότητα.
Το μέγεθος GIF μειώθηκε από 36,59 kb σε 26,85 kb.
- Δεδομένου ότι κάποια κοκκία και μικρά ελαττώματα υπάρχουν ήδη στην εικόνα, ας προσπαθήσουμε να αυξήσουμε τις "απώλειες". Αυτή η παράμετρος ορίζει ένα επιτρεπόμενο επίπεδο απώλειας δεδομένων κατά τη συμπίεση gif. Αλλάξτε την τιμή σε 8.
Κατάφερα ακόμα να μειώσουμε το μέγεθος του αρχείου, ενώ χάνουμε λίγο στην ποιότητα. Gifs τώρα ζυγίζει 25,9 kilobytes.
Σύνολο, μπορέσαμε να μειώσουμε το μέγεθος της εικόνας περίπου 10 kb, το οποίο είναι περισσότερο από 30%. Πολύ καλό αποτέλεσμα.
- Περισσότερες ενέργειες είναι πολύ απλές. Κάντε κλικ στο κουμπί Αποθήκευση.
Επιλέγουμε ένα μέρος για να σώσουμε, δώστε το όνομα του GIF και πατήστε ξανά "Αποθήκευση" ξανά.
Παρακαλείστε να σημειώσετε ότι υπάρχει μια ευκαιρία μαζί με το GIF για να δημιουργήσετε ένα έγγραφο HTML στο οποίο θα κατασκευαστεί η εικόνα μας. Για να το κάνετε αυτό, είναι καλύτερο να επιλέξετε ένα κενό φάκελο.
Ως αποτέλεσμα, λαμβάνουμε μια σελίδα και ένα φάκελο με την εικόνα.
Συμβουλή: Κατά την ανάθεση ενός ονόματος αρχείου, προσπαθήστε να μην χρησιμοποιήσετε τους κυριλλικούς χαρακτήρες, επειδή δεν είναι σε θέση όλα τα προγράμματα περιήγησης.
Αυτό το μάθημα για την αποθήκευση της εικόνας στη μορφή GIF ολοκληρώνεται. Σε αυτό, ανακάλυψα πώς μπορείτε να βελτιστοποιήσετε το αρχείο για τοποθέτηση στο Διαδίκτυο.