Cinemagraphs στο Web Design
Εάν διαβάσετε κάποια από τις αμέτρητες αναφορές τάσεων σχεδιασμού ιστοσελίδων που εμφανίστηκαν νωρίτερα αυτό το έτος, πιθανότατα να διαβάσετε σχετικά με την υπόσχεση των μεγάλων κινηματογραφικών ταινιών μεγέθους ήρωας που τοποθετούνται σε όλες τις σελίδες. Πού είναι λοιπόν;
Ενώ μερικές εταιρίες μόδας-προώθησης τις χρησιμοποιούν στις ιστοσελίδες τους, ο κινηματογράφος έχει σε μεγάλο βαθμό υποβιβαστεί για να παρουσιάσει στρογγυλά άρθρα και reddit σελίδες.
Λοιπόν λέω ότι αρκεί. Ήρθε η ώρα οι κινηματογράφοι να ανέβουν και να πάρουν την κατάλληλη θέση τους ως ήρωες ιστοσελίδων που προορίζονταν να γίνουν.
Γιατί λειτουργούν οι κινηματογράφοι
Η ιδέα να ακολουθήσει μια τάση σχεδιασμού ιστοσελίδων απλώς και μόνο επειδή είχε προβλεφθεί ποτέ δεν με ενθουσιάστηκε πραγματικά. Αλλά τι θα ήταν αν θα μπορούσατε να πρωτοπορήσετε μια τέτοια τάση; Και τι θα ήταν αν είχε πράγματι σκοπό και λύσει ταυτόχρονα ένα πρόβλημα;
Το ανθρώπινο μάτι αγαπά την κίνηση.
Όσον αφορά τους κινηματογράφους, όλες οι παραπάνω δηλώσεις είναι αληθείς. Αν και σίγουρα συζητήθηκε (και μάλιστα προβλεπόταν ως τάση στον σχεδιασμό ιστοσελίδων), πολύ λίγες ιστοσελίδες τις χρησιμοποιούν. Ως αποτέλεσμα, δεν έχουν φτάσει ακόμη και να φτάσουν σε μια κρίσιμη μάζα, γι 'αυτό εξακολουθούν να γοητεύουν τους περισσότερους χρήστες του διαδικτύου.
Δεν είναι αρκετά μια φωτογραφία, όχι ένα βίντεο, οι κινηματογραφικές ταινίες είναι έμφυτες καραμέλες μάτι, επειδή ξεγελάσουν τον θεατή για αρκετό καιρό για να τους κάνουν μια δεύτερη ματιά. Στην εποχή ADD που ζούμε σήμερα, οτιδήποτε μπορείτε να χρησιμοποιήσετε για να κάνετε μια παύση χρήστη - ακόμα και για μια στιγμή - μετράει ως μικρή νίκη για έναν πολύ σημαντικό λόγο:
Έχετε την προσοχή τους.
Ένας ιδιαίτερα αποτελεσματικός τρόπος για να προσελκύσετε μια μικρή προσοχή σε έναν ιστότοπο ήταν πάντα βίντεο. Το ανθρώπινο μάτι αγαπά την κίνηση. Αλλά ένα μεγάλο βίντεο ήρωα (ακόμα και ένα σύντομο) είναι τόσο ογκώδες . Σίγουρα μπορείτε να το συμπιέσετε μέσα σε μια ίντσα της ζωής του, αλλά στη συνέχεια φαίνεται απλά ... συμπιεσμένο. Ή μπορείτε να το αφήσετε μόνο του και να υποστείτε τις συνέπειες μιας αργής φόρτωσης ιστοσελίδας.
Αλλά με τη χρήση ενός cinemagraph, μπορείτε να εξοικονομήσετε πολύ εύρος ζώνης, ενώ εξακολουθεί να ικανοποιεί την ανάγκη για κίνηση. Στην πραγματικότητα, ανεβάζετε το ante, επειδή μπορείτε να επωφεληθείτε από την καινοτομία ενός κινηματογράφου - Οι άνθρωποι απλά δεν τις βλέπουν πολύ συχνά και εντυπωσιάζονται όταν το κάνουν.
Τώρα που ξέρετε γιατί οι κινηματογράφοι αξίζουν ένα σημαντικό σημείο στο διαδίκτυο, ας πάρουμε μια άποψη υψηλού επιπέδου για το πώς να φέρει κάποιος στη ζωή.
Glendevon Motors χρησιμοποιεί έναν κινηματογράφο στην περιοχή ήρωάς του για να μεταφέρει μια διάθεση και να ξεχωρίζει ως «premium brand» μεταξύ των ανταγωνιστών του.
Επιλογή 1: Χρησιμοποιήστε έναν προϋπάρχον κινηματογράφο
Υπάρχουν πολλές περιπτώσεις κατά τις οποίες η προμήθεια ενός έτοιμου CG είναι αποδεκτή, ή ακόμα και προτιμάτε να φτιάξετε τη δική σας. Θα έλεγα ότι εάν μπορείτε να βρείτε αυτό που χρειάζεστε και είναι στον προϋπολογισμό σας για να πάρετε τα δικαιώματα σε αυτό, τότε αυτός είναι ο τρόπος να πάτε. Το μόνο ερώτημα είναι: πού το βρίσκετε;
Τα καλά νέα είναι ότι έχετε επιλογές. Θα καθορίζονται σε μεγάλο βαθμό από τον προϋπολογισμό σας (ή τον πελάτη σας,) αλλά υπάρχουν πολλές πηγές εκεί έξω. Υπάρχουν ακόμη και μερικές δωρεάν να διαλέξεις από. Ωστόσο, εάν έχετε ογδόντα δολάρια για να περάσετε, το Shutterstock έχει μια αρκετά αξιοπρεπή επιλογή CG υψηλής ευκρίνειας.
(Συμβουλή: Δεν διαθέτουν αυτόνομο τμήμα καρέ, επομένως απλά πρέπει να αναζητήσετε τον όρο "cinemagraph", συν τους άλλους όρους αναζήτησης στο τμήμα "footage".)
Εάν καταφέρετε να βρείτε αυτό που οραματίζεστε, ίσως θέλετε ακόμα να συμπιέσετε το αρχείο σε κάποιο βαθμό. Περισσότερα για αυτό σε λίγο.
Επιλογή 2: Δημιουργήστε τη δική σας
Το όλο σημείο της χρήσης ενός CG αντί ενός βίντεο είναι ότι πρόκειται να είναι ένα κομμάτι ενός μυαλού-τέχνασμα.
Ίσως δεν θα μπορούσατε να βρείτε αυτό που είχατε απεικονίσει. Ή ίσως είσαι απλώς ένας σκληρός DIY'er, και σε σε σέβομαι. Πώς λοιπόν κάποιος κάνει έναν κινηματογράφο από το μηδέν;
Κατ 'αρχάς, βοηθά να έχετε τον σωστό εξοπλισμό και ένα σχέδιο. Εδώ προτείνουμε να ξεκινήσετε:
- Μια φωτογραφική μηχανή που μπορεί να τραβήξει βίντεο
- Ένα τρίποδο
- Ένα μοντέλο ή / και οποιαδήποτε αναγκαία στηρίγματα
- Ενας υπολογιστής
- Πρόσβαση σε πρόγραμμα επεξεργασίας βίντεο (προαιρετικό)
- Πρόσβαση στο Adobe Photoshop ή σε ένα πιο εξειδικευμένο λογισμικό επεξεργασίας ταινιών, όπως το flixel
Αυτός είναι ο λόγος που θα χρειαστείτε για να κάνετε μια ταινία. Αλλά για να το καταστήσετε αποτελεσματικό, θα χρειαστείτε μια πολύ καλή ιδέα.
Τι κάνει ένα μεγάλο ηρώο Cinemagraph;
Ενώ το γενικό θέμα του CG σας θα υπαγορεύεται σε μεγάλο βαθμό από την εξειδικευμένη τοποθεσία του ιστότοπου, υπάρχουν ορισμένα γενικά σημεία που πρέπει να θυμάστε κατά τη ρύθμιση της σκηνής. Βεβαιωθείτε ότι:
- Κρατήστε το λεπτό: Το όλο σημείο της χρήσης ενός CG αντί ενός βίντεο είναι ότι πρόκειται να είναι ένα κομμάτι ενός μυαλού-τέχνασμα. Ορισμένες από τις καλύτερες CG φαίνονται πολύ ακίνητες, τότε εκπλήσσουν τον θεατή με μια λεπτή κίνηση. Μιλώντας για την λεπτότητα, βεβαιωθείτε ότι η συνολική σύνθεση δεν είναι υπερβολικά απασχολημένη ή έντονα χρωματισμένη εάν κάνετε στρώση κειμένου και CTA επάνω της. Θυμηθείτε ότι η CG πρέπει να παίξει τα στοιχεία αυτά, να μην αποσπάσει την προσοχή από αυτά. Μιλώντας εκ των οποίων…
- Αφήστε χώρο για τον πραγματικό ήρωα: Βεβαιωθείτε ότι γνωρίζετε πού θέλετε ο τίτλος σας, ο υπότιτλος και το κουμπί CTA να μπουν μέσα στον κινηματογράφο. Αυτό θα επηρεάσει το πού τοποθετείτε την κύρια δράση στη σύνθεση.
- Κρατήστε το αγκυροβολημένο: Φυσικά, ένα CG έχει κάποια κίνηση, αλλά η συνολική σκηνή πρέπει να είναι πολύ μακριά για να συγκρουστεί σωστά η κίνηση. Ένα τρίποδο θα πρέπει να βοηθήσει στην κίνηση του φόντου και στη σταθερότητα της κάμερας. Εάν τα μάτια του μοντέλου σας προορίζονται να κινούνται από τη μια πλευρά στην άλλη, βεβαιωθείτε ότι κρατάει το κεφάλι πολύ ακίνητο ταυτόχρονα.
- Κάντε το βρόχο: Επειδή θέλετε το αρχείο να είναι σχετικά μικρό, θα χρειαστεί να επαναφέρετε τη δράση έτσι ώστε να επαναλαμβάνεται όσο το δυνατόν πιο απλά. Προγραμματίστε αυτό κατά τη ρύθμιση της σκηνής. Στην ιδανική περίπτωση, η πρώτη θέση πρέπει να ταιριάζει πολύ καλά με την τελική θέση, κλείνοντας τον βρόχο.
- Χρησιμοποιήστε ένα άτομο αν είναι δυνατόν: Μελέτες έχουν δείξει ότι οι εικόνες με τους ανθρώπους τους κρατούν την προσοχή των ανθρώπων πολύ περισσότερο από εκείνες που δεν το κάνουν. Αυτό ισχύει και για τα CG. Επιπλέον βαθμοί αν μπορείτε να καταφέρετε να δείτε το μοντέλο σας προς την κατεύθυνση του CTA. Αυτό έχει αποδειχθεί να τραβήξει και το μάτι του χρήστη εκεί.
Μόλις έχετε όλα τα στοιχεία σας στη θέση τους, προσπαθήστε να πυροβολήσετε περίπου 20-30 δευτερόλεπτα βίντεο, επαναλαμβάνοντας την επιθυμητή κίνηση αρκετές φορές, με περίπου 5 δευτερόλεπτα να κρατάτε τα πράγματα τελείως ενδιάμεσα. Αυτό θα πρέπει να σας δώσει αρκετές ακατέργαστες φωτογραφίες για να μετατραπεί σε ένα εντυπωσιακό cinemagraph.
Συνδυάζοντας
Ενώ δεν θα πάω στη βήμα-προς-βήμα διαδικασία μετατροπής ενός βίντεο σε ένα cinemagraph, υπάρχουν αρκετές επιλογές που είναι διαθέσιμες σε σας. Μπορείτε να πληρώσετε $ 299 για να χρησιμοποιήσετε ένα ειδικό πρόγραμμα σχεδιασμού cinemagraph, αλλά μπορείτε να βάλετε ένα συμπαθητικό CG μαζί χρησιμοποιώντας το Photoshop , (που υποθέτω ότι χρησιμοποιείτε ήδη.)
Συμπίεση του αρχείου
Είτε κάνατε το CG από την αρχή είτε προμήθετε ένα υπάρχον, θέλετε να βεβαιωθείτε ότι φορτώνεται γρήγορα. Αν το τελικό αρχείο εξόδου σας είναι ένα gif ή ένα βίντεο (το οποίο σας προτείνω), η συμπίεσή σας θα βασίζεται σε δύο ξεχωριστούς παράγοντες:
- Ποιότητα
- Μήκος
Προσωπικά, προσπαθώ να φτάσω για την υψηλότερη δυνατή ποιότητα σε οποιαδήποτε εικόνα ή βίντεο μεγάλου μεγέθους ήχου. Κατά τη γνώμη μου, θυσιάζοντας την ποιότητα οποιουδήποτε φακέλου που προορίζεται να κάνει μια τέτοια οπτική επίδραση είναι ντροπή. Για να το εξισορροπώ, προσπαθώ να κάνω τον βρόγχο του σινεμά όσο το δυνατόν πιο ανθρώπινο.
Η δράση θα επηρεάσει το πόσο σύντομα μπορεί να είναι ο βρόχος - το τρένο που τρέμει μπορεί να είναι πολύ μικρότερο από μια αργή, σκόπιμη ματιά, η οποία μπορεί να φανεί κάπως σπαστική εάν επαναληφθεί πολύ γρήγορα. Πάρτε το παρακάτω παράδειγμα από το διαδικτυακό πρακτορείο Το βαθύ τέλος . Δεδομένου ότι το μόνο που χρειάζεται εδώ είναι ένα τραίνο αυτοκίνητο να ταιριάζει με το επόμενο για μια όμορφη απρόσκοπτη βρόχο, κατάφερα να το κόψει σε περίπου ένα δευτερόλεπτο.
Παρόλο που κατάφερα να κρατήσω τη δράση εξαιρετικά σύντομη, ήξερα ότι το μέγεθος του αρχείου θα μπορούσε να μειωθεί για ακόμα πιο γρήγορο φορτίο. Καταλήξαμε χρησιμοποιώντας ένα δωρεάν ηλεκτρονικό συμπιεστή βίντεο που ονομάζεται ClipChamp . Ήμουν σε θέση να συμπιέσω το βίντεο κάτω από αρκετά megabytes σε ένα svelte 319 KB. Θυμηθείτε, οι περισσότεροι χρήστες θα αναπηδήσουν από τον ιστότοπό σας μετά από μόλις τρία δευτερόλεπτα αναμονής, οπότε πληρώνει για να είναι γρήγορος.
Και αν το τελικό αποτέλεσμα σας παραμείνει με αντικείμενα από εξαιρετική συμπίεση, μπορείτε πάντα να χρησιμοποιήσετε ένα δοκιμασμένο και αληθινό τέχνασμα που χρησιμοποιείται σε ατελή βίντεο ήρωας - μάσκα με ένα ημιδιαφανές επικάλυψη με μοτίβο .
Ενδιαφέρεστε να δείτε πώς άλλοι χρησιμοποίησαν cinemagraphs ως εικόνες ήρωας; Έχω καλά νέα και κακά - Δεν υπάρχουν πάρα πολλά άλλα για να δείξω, ποια είναι τα κακά νέα. Αλλά τα καλά νέα είναι ότι, εάν βάλατε αυτό το σχέδιο, θα είστε στην πρωτοπορία του τι υπόσχεται να είναι μια αρκετά μεγάλη τάση.
Εδώ είναι ένα ζευγάρι που κατάφερα να βρω στον ιστό:
Gilt Gust [Σημείωση του συντάκτη: Ο ιστότοπος είναι κλειστός.]
Τελικές σκέψεις
Ένας κινηματογράφος μπορεί όχι μόνο να κλωτσήσει ένα αλλιώς βαρετό σχέδιο ιστοτόπου μέχρι μερικές εγκοπές, αλλά μπορεί πραγματικά να επηρεάσει την επιτυχία του επίσης. Αν το συνδυάσετε με τίτλο δολοφόνου και συναρπαστική παρότρυνση για δράση, μπορείτε πραγματικά να τραβήξετε την προσοχή των χρηστών σας. Αυτό που κάνετε με αυτή την προσοχή εξαρτάται από εσάς.