Πώς να δημιουργήσετε μια κινούμενη εικόνα για τη μεσαία σας δημοσίευση

Από το CSS στο GIF

Αυτό το εκπληκτικό GIF βρέθηκε εδώ

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

Σε αυτό το άρθρο, θα σας δείξουμε πώς δημιουργήσαμε την κεφαλίδα του animated publication. Θα μοιραστώ επίσης μερικές συμβουλές και οδηγίες σχετικά με τη χρήση αρχείων GIF στο Medium.

GIF σε Μεσαίες εκδόσεις

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

Και στις δύο περιπτώσεις, υποστηρίζεται η μορφή GIF, ώστε να μπορείτε να συμπληρώσετε το εξώφυλλο δημοσίευσης με μερικά ωραία κινούμενα σχέδια.

Ακολουθούν δυο εμπνευσμένα παραδείγματα:

  • Backchannel (GIF ως εικόνα φόντου)
  • Ματζέντα (GIF ως εικόνα λογότυπου)

Από το CSS στο GIF

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

Το animation στον ιστότοπό μας έγινε με το CSS, οπότε αποφασίσαμε να τροποποιήσουμε το υπάρχον κομμάτι κώδικα και να βρούμε έναν τρόπο να το μετατρέψουμε σε GIF.

Τρέχουσα κινούμενη κάλυψη του Ραντάρ

Βήμα 1 - html και CSS

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

Εάν θέλετε να παίξετε με παρόμοια εφέ κίνησης λέξεων, μπορείτε να τακτοποιήσετε αυτό το στυλό από την Amrit Leone.

Βήμα 2 - Καταγράψτε την οθόνη

Ο Quicktime Player διαθέτει εύχρηστη λειτουργία εγγραφής οθόνης, επιτρέποντάς σας να επιλέξετε την περιοχή της οθόνης που θέλετε να εγγράψετε. Το βίντεο καταγράφεται σε περίπου 30 FPS, οπότε η κινούμενη εικόνα δεν πρέπει να υπερβαίνει τα 15 δευτερόλεπτα (15 δευτερόλεπτα = 450 καρέ).

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

Βήμα 3 - Μετατροπή .mov σε GIF

Αφού ολοκληρώσετε την εγγραφή, θα έχετε ένα αρχείο .mov.

Ανοίξτε το Photoshop και μεταβείτε στο Αρχείο> Εισαγωγή> Κορνίζες βίντεο σε επίπεδα.

Μπορείτε να επιλέξετε το τμήμα της εγγραφής που θέλετε να εισαγάγετε και να μετατρέψετε σε Επίπεδα. Μην ξεχάσετε να ελέγξετε το πλαίσιο "Make Animation Frame".

Το Photoshop θα περιορίσει τα πλαίσια στα 500 και δεν θα πρέπει να έχετε περισσότερα από αυτά, αλλιώς το αρχείο θα πάει πολύ βαρύ.

Αν ανοίξετε τον πίνακα χρόνου στο Photoshop θα δείτε όλα τα πλαίσια σας.

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

Μπορείτε να μειώσετε το μέγεθος του αρχείου περιορίζοντας τον αριθμό των χρωμάτων στο πλαίσιο διαλόγου εξαγωγής.

Είναι σημαντικό να διατηρήσετε τις διαστάσεις του GIF διπλάσιες από το μέγεθος που χρειάζεστε, επειδή το Medium θα το αλλάξει σε μισό.

"Υποθέτουμε ότι όλα τα λογότυπα είναι αμφιβληστροειδή, πράγμα που σημαίνει ότι το λογότυπο μεταφορτώνεται σε διπλάσιο μέγεθος, υποθέτουμε ότι θα εμφανιστεί. Εάν μεταφορτώσετε ένα λογότυπο ύψους 2000px πλάτος και 1000px, το Medium το ερμηνεύει ως πλάτος 1000px και ύψος 500x. "
- Μεσαίο ιστολόγιο

Το τελικό μας GIF έχει 475 καρέ και περίπου 2MB.

Βήμα 4 - Μεταφορτώστε το στο Medium

Μεταφορτώστε την εικόνα φόντου και την εικόνα του λογότυπου στη δημοσίευσή σας και αυτό είναι.

Τώρα έχετε μια κινούμενη εικόνα εξωφύλλου!

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