Πώς να κρατήσετε gif στο Photoshop

Anonim

Πώς να κρατήσετε gif στο Photoshop

Μετά τη δημιουργία ενός κινουμένων σχεδίων στο Photoshop, πρέπει να αποθηκευτεί σε μία από τις διαθέσιμες μορφές, ένα από τα οποία είναι gif. Ένα χαρακτηριστικό αυτής της μορφής είναι ότι προορίζεται να εμφανιστεί (παιχνίδι) στο πρόγραμμα περιήγησης.

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

Μάθημα: Πώς να αποθηκεύσετε το βίντεο στο Photoshop

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

Μάθημα: Δημιουργήστε μια απλή κινούμενη εικόνα στο Photoshop

Εξοικονόμηση GIF.

Για να ξεκινήσετε, επαναλαμβάνουμε το υλικό και διαβάστε το παράθυρο Save Settings. Ανοίγει κάνοντας κλικ στο στοιχείο "Αποθήκευση για web" στο μενού Αρχείο.

Σημείο Αποθήκευση για web στο μενού Αρχείο για να αποθηκεύσετε τα gifs στο Photoshop

Το παράθυρο αποτελείται από δύο μέρη: ένα μπλοκ προεπισκόπησης

Μια αντίστροφη μονάδα στις ρυθμίσεις των παραμέτρων της διατήρησης των gifs στο Photoshop

και μπλοκ ρυθμίσεων.

Τοποθετήστε τις ρυθμίσεις στο παράθυρο ρυθμίσεων συντήρησης Gifki στο Photoshop

Μπλοκ προεπισκόπηση

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

Επιλογή επιλογών προβολής στο παράθυρο ρυθμίσεων διατήρησης GIFKI στο Photoshop

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

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

Εργαλεία χειρός και κλίμακας στο παράθυρο ρυθμίσεων διατήρησης Gifki στο Photoshop

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

Κλίμακα εικόνας στο παράθυρο ρυθμίσεων διατήρησης GIFKI στο Photoshop

Χαμηλό κάτω είναι το κουμπί με την επιγραφή "Προβολή". Ανοίγει την επιλεγμένη επιλογή στο προεπιλεγμένο πρόγραμμα περιήγησης.

Εικόνα προβολής εικόνας στο πρόγραμμα περιήγησης στο παράθυρο Ρυθμίσεις των παραμέτρων Gifting στο Photoshop

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

Προεπισκόπηση της εικόνας στο προεπιλεγμένο πρόγραμμα περιήγησης διατηρώντας παράλληλα τα gifs στο Photoshop

Μπλοκ ρυθμίσεις

Σε αυτό το μπλοκ, οι παράμετροι της εικόνας διαμορφώνονται, θεωρούν περισσότερο.

  1. Χρώμα σχήματος. Αυτή η ρύθμιση καθορίζει ποιος πίνακας ευρετηρίων χρωμάτων θα εφαρμοστεί στην εικόνα κατά τη βελτιστοποίηση.

    Επιλογή του σχήματος ευρετηρίου χρώματος διατηρώντας παράλληλα gifs στο Photoshop

    • Αντιληπτή, και απλά "Σχέδιο αντίληψης". Όταν χρησιμοποιείται, το Photoshop δημιουργεί ένα τραπέζι χρωμάτων, καθοδηγούμενη από τις τρέχουσες αποχρώσεις της εικόνας. Σύμφωνα με τους προγραμματιστές, ο πίνακας αυτός είναι όσο το δυνατόν πιο κοντά στο πώς το ανθρώπινο μάτι βλέπει το χρώμα. Επιπλέον - η εικόνα είναι η πιο κοντά στο πρωτότυπο, τα χρώματα αποθηκεύονται μέγιστα.
    • Το επιλεκτικό σχήμα είναι παρόμοιο με το προηγούμενο, αλλά τα χρώματα που σχετίζονται με τον ιστό για τον ιστό χρησιμοποιούνται κατά κύριο λόγο σε αυτό. Επίσης, εστιάστηκε στην εμφάνιση των αποχρώσεων κατά προσέγγιση στην αρχική.
    • Προσαρμοστικό. Σε αυτή την περίπτωση, ο πίνακας δημιουργείται από τα χρώματα που είναι πιο κοινά στην εικόνα.
    • Περιορισμένος. Αποτελείται από 77 χρώματα, μερικά από τα δείγματα των οποίων αντικαθίστανται από λευκές με τη μορφή ενός σημείου (κόκκων).
    • Εθιμο. Κατά την επιλογή αυτού του συστήματος, είναι δυνατό να δημιουργήσετε τη δική σας παλέτα.
    • Μαύρο και άσπρο. Αυτός ο πίνακας χρησιμοποιεί μόνο δύο χρώματα (μαύρο και άσπρο), χρησιμοποιώντας επίσης κόκκους.
    • Σε βαθμούς γκρι. Υπάρχουν διάφορα 84 επίπεδα αποχρώσεων του γκρι.
    • Μακός και παράθυρα. Τα δεδομένα πίνακα καταρτίζονται με βάση τα χαρακτηριστικά των εικόνων χαρτογράφησης σε προγράμματα περιήγησης που εκτελούν αυτά τα λειτουργικά συστήματα.

    Ακολουθούν ορισμένα παραδείγματα εφαρμογών συστημάτων.

    Δείγματα εικόνας χρησιμοποιώντας διάφορα τραπέζια ευρετηρίασης χρώματος ενώ διατηρούν gifs στο Photoshop

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

  2. Μέγιστος αριθμός χρωμάτων στον πίνακα χρωμάτων.

    Ρύθμιση του μέγιστου αριθμού των χρωμάτων στον πίνακα ευρετηρίου διατηρώντας παράλληλα τις gifs στο Photoshop

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

    Παραδείγματα ρυθμίσεων για τον μέγιστο αριθμό χρωμάτων στον πίνακα ευρετηρίου διατηρώντας παράλληλα τις gifs στο Photoshop

  3. Χρώματα ιστού. Αυτή η ρύθμιση καθιερώνει την ανοχή με την οποία οι αποχρώσεις μετατρέπονται ισοδύναμες από μια ασφαλή παλέτα ιστού. Το πεδίο του αρχείου προσδιορίζεται από την τιμή που ορίζεται από το ρυθμιστικό: Η τιμή είναι υψηλότερη - το αρχείο είναι μικρότερο. Κατά τη δημιουργία χρώματος Web δεν πρέπει επίσης να ξεχάσετε την ποιότητα.

    Ρύθμιση της ανοχής μετατροπής εικόνας σε χρώματα Web διατηρώντας παράλληλα gifs στο Photoshop

    Παράδειγμα:

    Παραδείγματα ρύθμισης της μετατροπής χρώματος σε WEEB διατηρώντας παράλληλα gifs στο Photoshop

  4. Το Dysrying σάς επιτρέπει να εξομαλύνετε τις μεταβάσεις μεταξύ των χρωμάτων αναμειγνύοντας τις αποχρώσεις που περιέχονται στον επιλεγμένο πίνακα ευρετηρίου.

    Dystering ρύθμιση διατηρώντας τα gifs στο Photoshop

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

    Παράδειγμα:

    Παραδείγματα εφαρμογής ρυθμίσεων δυσλειτουργίας διατηρώντας παράλληλα gifs στο Photoshop

  5. Διαφάνεια. Η μορφή GIF υποστηρίζει μόνο απολύτως διαφανούς ή απολύτως αδιαφανή εικονοστοιχεία.

    Ρύθμιση της διαφάνειας του φόντου διατηρώντας παράλληλα gifs στο Photoshop

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

    Παραδείγματα χρήσης ματ ρύθμισης διατηρώντας παράλληλα τα gifs στο Photoshop

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

    Ρύθμιση της ανάμιξης εικόνων εικονοστοιχείων με φόντο τις σελίδες τύπου Press στο Photoshop

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

    Ρύθμιση του Interlaced διατηρώντας παράλληλα gifs στο Photoshop

  7. Η μετατροπή SRGB βοηθά στην αποθήκευση των μέγιστων πρωτότυπων χρωμάτων εικόνας κατά την αποταμίευση.

    Ρύθμιση της μετατροπής των χρωμάτων στο SRGB διατηρώντας παράλληλα gifs στο Photoshop

Η ρύθμιση της "διαφάνειας δυσάρεσης" επιδεινώνει σημαντικά την ποιότητα της εικόνας και θα μιλήσουμε για την παράμετρο "απώλειας" στο πρακτικό μέρος του μαθήματος.

Δυσικές ρυθμίσεις για διαφάνεια και απώλεια δεδομένων διατηρώντας παράλληλα gifs στο Photoshop

Για την καλύτερη κατανόηση της διαδικασίας δημιουργίας της διατήρησης των gifs στο Photoshop, πρέπει να εξασκηθείτε.

Πρακτική

Ο στόχος της βελτιστοποίησης των εικόνων για το Διαδίκτυο είναι η μέγιστη μείωση του βάρους του αρχείου διατηρώντας ταυτόχρονα την ποιότητα.

  1. Μετά την επεξεργασία της εικόνας, μεταβείτε στο μενού "Αποθήκευση για web".
  2. Εκθέστε τη λειτουργία προβολής "4 επιλογής".

    Επιλέγοντας τον αριθμό των επιλογών για την προβολή των αποτελεσμάτων διατηρώντας παράλληλα gifs στο Photoshop

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

    Οι ρυθμίσεις ρυθμίσεων έχουν ως εξής:

    • Χρώμα Σχέδιο "Επιλεκτικό".
    • "Χρώματα" - 265.
    • Η "Dezering" είναι "τυχαία", 100%.
    • Αφαιρέστε τα DAWS απέναντι από την παράμετρο "Interlaced", καθώς η τελική εικόνα της εικόνας θα είναι αρκετά μικρή.
    • "Χρώματα ιστού" και "απώλειες" - μηδέν.

      Ρύθμιση των παραμέτρων της εικόνας αναφοράς διατηρώντας ταυτόχρονα τα gifs στο Photoshop

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

    Σύγκριση του αποτελέσματος βελτιστοποίησης της εικόνας με το πρωτότυπο διατηρώντας παράλληλα τα gifs στο Photoshop

  4. Πηγαίνετε στην παρακάτω εικόνα που μόλις ρυθμίζεται. Ας προσπαθήσουμε να το βελτιστοποιήσουμε.
    • Αφήστε το σχέδιο αμετάβλητο.
    • Ο αριθμός των χρωμάτων μειώνουν έως και 128.
    • Η τιμή Dysmering μειώθηκε στο 90%.
    • Τα χρώματα Web δεν αγγίζουν, διότι σε αυτή την περίπτωση δεν θα μας βοηθήσει να διατηρήσουμε την ποιότητα.

      Ρύθμιση των παραμέτρων της εικόνας στόχου διατηρώντας παράλληλα τις gifs στο Photoshop

    Το μέγεθος GIF μειώθηκε από 36,59 kb σε 26,85 kb.

    Μειωμένο μέγεθος εικόνας μετά τη βελτιστοποίηση διατηρώντας παράλληλα gifs στο Photoshop

  5. Δεδομένου ότι κάποια κοκκία και μικρά ελαττώματα υπάρχουν ήδη στην εικόνα, ας προσπαθήσουμε να αυξήσουμε τις "απώλειες". Αυτή η παράμετρος ορίζει ένα επιτρεπόμενο επίπεδο απώλειας δεδομένων κατά τη συμπίεση gif. Αλλάξτε την τιμή σε 8.

    Ορίζοντας το επίπεδο της επιτρεπόμενης απώλειας δεδομένων κατά τη συμπίεση gif για να αποθηκεύσετε τα gifs στο Photoshop

    Κατάφερα ακόμα να μειώσουμε το μέγεθος του αρχείου, ενώ χάνουμε λίγο στην ποιότητα. Gifs τώρα ζυγίζει 25,9 kilobytes.

    Μέγεθος εικόνας μετά τη ρύθμιση της απώλειας διατηρώντας παράλληλα gifs στο Photoshop

    Σύνολο, μπορέσαμε να μειώσουμε το μέγεθος της εικόνας περίπου 10 kb, το οποίο είναι περισσότερο από 30%. Πολύ καλό αποτέλεσμα.

  6. Περισσότερες ενέργειες είναι πολύ απλές. Κάντε κλικ στο κουμπί Αποθήκευση.

    Αποθήκευση του κουμπιού στο παράθυρο ρυθμίσεων διατήρησης GIFKI στο Photoshop

    Επιλέγουμε ένα μέρος για να σώσουμε, δώστε το όνομα του GIF και πατήστε ξανά "Αποθήκευση" ξανά.

    Επιλέγοντας ένα μέρος και το όνομα της διατήρησης των gifs στο Photoshop

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

    Εξοικονόμηση Gifs μαζί με το έγγραφο HTML στο Photoshop

    Ως αποτέλεσμα, λαμβάνουμε μια σελίδα και ένα φάκελο με την εικόνα.

    Φάκελος με αποθηκευμένο GIF στο Photoshop

Συμβουλή: Κατά την ανάθεση ενός ονόματος αρχείου, προσπαθήστε να μην χρησιμοποιήσετε τους κυριλλικούς χαρακτήρες, επειδή δεν είναι σε θέση όλα τα προγράμματα περιήγησης.

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

Διαβάστε περισσότερα