Advertisement
  1. Design & Illustration
  2. GIF

10 Τρόποι για να Βελτιστοποιήσετε ένα κινούμενο αρχείο GIF

Scroll to top
Read Time: 5 min
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

() translation by (you can also view the original English article)

To GIF είναι η βασική μορφή για τη συμπίεση εικόνων που έχουν μεγάλες περιοχές με στερεά χρώματα και ευκρινείς λεπτομέρειες όπως αυτές στο γραμμικό σχέδιο, λογότυπα ή τυπογραφία. Μιας που είναι ένας μορφότυπος εικόνας βάθους 8 bit θα είχε εξαφανιστεί από το διαδίκτυο, μετά την εισαγωγή των μορφών αρχείων JPEG και PNG, αλλά το GIF εξακολουθεί να είναι μια μορφή αρχείου που προτιμάται στο διαδίκτυο χάρη στο χαρακτηριστικό της κίνησης καρέ (frame animation). Σε αυτό το tutorial, θα ρίξουμε μια ματιά σε όλες τις διαθέσιμες επιλογές για να μετατρέψετε ένα βίντεο σε μια κινούμενη εικόνα GIF, και πώς να βελτιστοποιήσετε το μέγεθος του αρχείου. Ας ξεκινήσουμε!

Επίσης, εάν εργάζεστε συχνά με κινούμενα GIFs, ίσως θελήσετε να δείτε μια αυτοματοποιημένη λύση: η ενέργεια Photoshop, Gift Export που είναι διαθέσιμη στο Envato Market, η οποία σας επιτρέπει να πάρετε πολλές εικόνες, να τις ανεβάσετε αυτόματα στο Photoshop, και να τις εξάγετε ως GIF.


1. Κόψιμο του Animation

Πρώτα από όλα θα πρέπει να ανοίξετε το αρχείο βίντεο με το Photoshop. Τις περισσότερες φορές δεν θα χρειαστείτε όλη τη σεκάνς για το GIF, οπότε μπορείτε να ψαλιδίσετε το βίντεο στο Timeline Panel. Ενεργοποιήστε την επιλογή Loop και προσπαθήστε να βρείτε ένα καλό σημείο για να κόψετε το βίντεό σας.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

2. Μείωση Μεγέθους Εικόνας

Μπορείτε είτε να μειώσετε το μέγεθος της εικόνας από το μενού Image ή να το κάνετε αργότερα στο παράθυρο διαλόγου Save for Web. Προτιμώ να το κάνω στην αρχή με το πλαίσιο διαλόγου Image Size καθώς μπορεί να εξοικονομήσει αρκετό χρόνο κατά την φόρτωση του παραθύρου διαλόγου Save for Web. Το layer του βίντεο θα πρέπει να μετατραπεί σε ένα Smart Object, εάν αλλάξετε το μέγεθος της εικόνας, αλλά μην ανησυχείτε για αυτό, δεν θα επηρεάσει καθόλου τη ροή εργασίας μας.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

3. Αποθήκευση για το Web

Το αγαπημένο μου σχετικά με αυτή η ροή εργασίας είναι ότι δεν έχουμε να κάνουμε οποιαδήποτε μετατροπή στο Timeline Panel για να μπορέσουμε να σώσουμε κάποιο frame animation, αφού το παράθυρο διαλόγου Save for Web θα κάνει τη δουλειά για μας μόλις επιλέξουμε τη μορφή αρχείου GIF ως έξοδο. Σημειώστε ότι οι επιλογές Animation θα εμφανιστούν στην κάτω δεξιά γωνία του παραθύρου διαλόγου. Σε περίπτωση που αποφασίσετε να μειώσετε περαιτέρω το μέγεθος της εικόνας σας, μπορείτε ακόμα να το κάνετε εδώ.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

4. Μειώστε τον Αριθμό των Καρέ

Μπορείτε να μειώσετε περαιτέρω, το μέγεθος του GIF animation, εάν ανοίξετε ξανά το εξαγόμενο GIF στο Photoshop και διαγράψετε κάθε δεύτερο ή τρίτο καρέ από τον πίνακα Timeline Panel. Στη συνέχεια θα πρέπει να επιλέξετε όλα τα καρέ που απέμειναν και να αυξήσετε τη διάρκεια τους για να αντισταθμίσετε την απώλεια των καρέ. Αν δεν κάνετε αυτήν την αντιστάθμιση το animation σας θα παίξει πιο γρήγορα από ό, τι το πρωτότυπο. Μόλις είστε έτοιμοι, μπορείτε να αποθηκεύσετε τη νέα έκδοση, η οποία πρέπει να είναι πολύ μικρότερη από το αρχικό.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

5. Αριθμός Χρωμάτων

Η πιο σχετική επιλογή για τη βελτιστοποίηση του μεγέθους ενός αρχείου GIF είναι ο αριθμός των χρωμάτων που χρησιμοποιούνται στον πίνακα χρωμάτων Color Table. Ο μέγιστος αριθμός χρωμάτων είναι 256, η οποία προέρχεται από τον περιορισμό του 8-bit βάθους. Σε γενικές γραμμές είναι καλό να παραμείνετε στα 64 χρώματα ή λιγότερο, αλλά ανάλογα με το αρχικό βίντεο ίσως χρειαστεί να αυξήσετε τον αριθμό των χρωμάτων για να έχετε ένα καλύτερο αποτέλεσμα.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

6. Ποιον Αλγόριθμο Μείωσης Χρωμάτων να Επιλέξετε;

  • Perceptual για να δημιουργήσετε ένα προσαρμοσμένο πίνακα χρωμάτων, δίνοντας προτεραιότητα στα χρώματα στα όποια έχει μεγαλύτερη ευαισθησία το ανθρώπινο μάτι
  • Selective για να δημιουργήσετε έναν πίνακα χρωμάτων παρόμοιο με τον Perceptual πίνακα χρωμάτων, αλλά δίνοντας έμφαση σε μεγάλες περιοχές χρώματος και τη διατήρηση των Web colors. Αυτός ο πίνακας χρωμάτων συνήθως παράγει εικόνες με τη μεγαλύτερη ακεραιότητα χρωμάτων. (Το selective είναι η προεπιλεγμένη επιλογή.)
  • Adaptive για να δημιουργήσετε ένα προσαρμοσμένο πίνακα χρωμάτων με δειγματοληψία από χρώματα από το φάσμα που εμφανίζεται πιο συχνά στην εικόνα. Για παράδειγμα, μια εικόνα με μόνο αποχρώσεις του πράσινου και του μπλε, παράγει ένα πίνακα χρωμάτων που είναι αποτελείται κυρίως από πράσινα και μπλε. Οι περισσότερες εικόνες συγκεντρώνουν χρώματα σε συγκεκριμένες περιοχές του φάσματος.
  • H Restrictive χρησιμοποιεί τον πρότυπο, 216‑χρωμάτων, πίνακα web-safe χρωμάτων κοινά στα 8‑bit πάνελ (256‑χρώματα) των Windows και Mac OS. Η επιλογή αυτή εξασφαλίζει ότι δεν εφαρμόζεται browser dither σε χρώματα, όταν προβάλλεται η εικόνα χρησιμοποιώντας 8‑bit χρώμα. Εάν η εικόνα σας έχει λιγότερα από 216 χρώματα, τα αχρησιμοποίητα χρώματα αφαιρούνται από τον πίνακα.
10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

7. Πρόσμειξη (Dithering)

Δεδομένου ότι τα αρχεία GIF περιέχουν έναν περιορισμένο αριθμό χρωμάτων, μπορεί να θέλουμε να μιμηθούμε χρώματα που λείπουν με αυτά που είναι διαθέσιμα, χρησιμοποιώντας το dithering. Από το μενού 'Dither', μπορούμε να επιλέξουμε έναν από τους αλγόριθμους για μια τέτοια απομίμηση. Η μέθοδος «Diffusion» μας επιτρέπει να ρυθμίσουμε την ποσότητα πρόσμειξης. Με τους αλγορίθμους «Pattern» και «Noise» δεν υπάρχει τίποτα για να ρυθμίσετε. Όσο περισσότερη πρόσμειξη γίνεται σε μια εικόνα, τόσο μεγαλύτερο το μέγεθος του αρχείου. Το dithering προσθέτει pixel διαφορετικού χρώματος σε κοντινή απόσταση μεταξύ τους για να προσομοιώσει δευτερεύοντα χρώματα ή ομαλές διαβαθμίσεις στο χρώμα. Ορισμένες εικόνες πρέπει να περιέχουν dithering για να δείχνουν σωστές, αλλά είναι καλύτερο να χρησιμοποιήσετε το ελάχιστο δυνατό ποσό dithering για να διατηρήσετε το μικρότερο δυνατό μέγεθος αρχείου.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

8. Web Snap, Lossy, Transparency and Interlaced

  • Το Web Snap χρησιμοποιείται για να αποφύγετε την πρόσμειξη σε ένα πρόγραμμα περιήγησης. Αυτό γίνεται μετατρέποντας μερικά από τα χρώματα σε χρώματα ασφαλή για το Web. Όσο περισσότερα χρώματα ασφαλή για το διαδίκτυο υπάρχουν σε ένα GIF τόσο λιγότερο browser dithering θα υπάρξει. Μια τιμή του 0% δεν θα αλλάξει κανενα χρώμα, ενώ η τιμή 100% θα αλλάξει όλα τα χρώματα στην εικόνα σε ασφαλή για το Web.
  • Η Lossy συμπίεση απορρίπτει οπτικές πληροφορίες, που μπορούν να μειώσουν το μέγεθος του αρχείου.
  • Εάν η εικόνα περιέχει Transparency, επιλέξτε Transparency για να διατηρήσετε τα διαφανή pixel. Καταργήστε την επιλογή Transparency για να γεμίσετε πλήρως και μερικώς τα διαφανή pixel με το χρώμα φόντου.
  • Τα Interlaced GIF αρχεία φορτώνονται σε ένα πρόγραμμα περιήγησης σε λίγα περάσματα (όπως γίνεται στο progressive JPEG).


9. Συγκρίνετε την Πρωτότυπη με τη Βελτιστοποιημένη Έκδοση

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

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

10. Preview, Save Preset and Optimize to File Size

Εάν είστε ικανοποιημένοι με τις ρυθμίσεις σας, ρίξτε μια ματιά στο τελικό GIF σας με την επιλογή προεπισκόπησης Preview σε ένα πρόγραμμα περιήγησης και μην ξεχάσετε να αποθηκεύσετε τις ρυθμίσεις σας ως προκαθορισμένο preset. Μπορείτε επίσης να καθορίσετε ένα όριο μεγέθους αρχείου με αυτήν την επιπλέον επιλογή από το μενού Optimize Menu και μόλις αυτή εφαρμοστεί, το Photoshop θα προσπαθήσει να προσαρμοστεί στο μέγεθος με τη βέλτιστη ποιότητα εικόνας.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
One subscription. Unlimited Downloads.
Get unlimited downloads