Πώς να δημιουργήσετε ένα mockup οθόνης βίντεο στο Photoshop

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

Τι είναι ένα μακέτα οθόνης βίντεο;

Ένα mockup είναι ένας ψηφιακός τρόπος για να δημιουργήσετε ένα πρωτότυπο σχέδιο ή να εφαρμόσετε ένα σχέδιο στο προϊόν του σε πραγματικό χρόνο χωρίς να το δημιουργήσετε. Οι λόγοι για αυτό είναι πολλοί, αλλά ένας κύριος λόγος για να δημιουργήσετε ένα mockup είναι να κάνετε τα σχέδια, τις εικονογραφήσεις ή οτιδήποτε θέλετε να επιδείξετε να φαίνονται πιο ρεαλιστικά. Βοηθά το κοινό σας να οπτικοποιήσει πώς θα φαίνεται το κομμάτι στο τέλος.

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

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

Αυτά τα κινούμενα σχέδια μπορεί να είναι οτιδήποτε, από ένα βίντεο έως ένα πρωτότυπο σχεδίασης UX/UI ή μια εγγραφή οθόνης.

Γιατί πρέπει να χρησιμοποιήσετε ένα μακέτα κινούμενης οθόνης;

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

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

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

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

Ενώ οι περισσότεροι γνωρίζουν το Photoshop ως εργαλείο επεξεργασίας εικόνων, μπορείτε επίσης να το χρησιμοποιήσετε για να δημιουργήσετε κινούμενα σχέδια και βίντεο. Λοιπόν, εδώ είναι τα βήματα για τη δημιουργία μιας μακέτας βίντεο χρησιμοποιώντας το Photoshop.

Τι είδους βίντεο πρέπει να χρησιμοποιήσετε;

Υπάρχουν πολλές επιλογές για το mockup της κινούμενης οθόνης σας. Ένα μικρότερο αρχείο βίντεο θα λειτουργήσει καλύτερα. Ενώ μπορείτε να χρησιμοποιήσετε αυτήν την τεχνική για να εμφανίσετε πραγματικό υλικό βίντεο, το μέγεθος θα κάνει πιο δύσκολη την απόδοση στο Photoshop.

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

Χρησιμοποιήστε μια συσκευή εγγραφής οθόνης για να δημιουργήσετε ένα βίντεο της οθόνης σας. Αυτό μπορεί να γίνει σε κινητό ή επιτραπέζιο υπολογιστή, ανάλογα με το τι θέλετε να είναι το mockup σας. Θα χρησιμοποιήσουμε το Quicktime Player σε Mac και σε Νέα εγγραφή οθόνης επιλογή, αλλά υπάρχουν πολλές άλλες επιλογές Mac. Εάν έχετε iPhone, μπορείτε να δείτε πώς να εγγράψετε οθόνη σε ένα iPhone. Δεν χρειάζεστε ήχο σε αυτήν την εγγραφή.

Για το βίντεό μας, ηχογραφήσαμε τον ιστότοπο Makeuseof.com, παρουσιάζοντας μια σειρά από άρθρα σχετικά με τη γραφιστική. Μπορείτε να εγγράψετε ό, τι έχει νόημα για εσάς. Κρατήστε μια σταθερή κύλιση και βεβαιωθείτε ότι δεν είναι ούτε πολύ γρήγορη ούτε πολύ αργή.

Μόλις ολοκληρωθεί η σύντομη εγγραφή σας, αποθηκεύστε την ως MP4 και βάλτε την σε έναν φάκελο με εύκολη πρόσβαση.

Τι είδους φωτογραφία πρέπει να χρησιμοποιήσετε;

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

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

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

Πώς να φτιάξετε το μακέτα βίντεο

Ανοίξτε την εικόνα σας στο Photoshop.

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

Κάντε κλικ Εικόνα > Μέγεθος εικόνας. Οι τελικές διαστάσεις εξαρτώνται από εσάς, αλλά προτείνουμε πλάτος περίπου 1200. Διατηρήστε τους περιορισμούς της εικόνας σε αναλογία όταν αλλάζετε το μέγεθος. Κάντε κλικ Εντάξει.

Τώρα για να δημιουργήσετε τον χώρο όπου θα τοποθετηθεί το βίντεο. Βρείτε τις διαστάσεις του αρχικού σας βίντεο. εάν η οθόνη έχει εγγραφεί από ένα τηλέφωνο, βρείτε τις διαστάσεις της οθόνης του τηλεφώνου και εάν η οθόνη καταγράψατε έναν ιστότοπο, θα μπορούσατε να χρησιμοποιήσετε μια τυπική ανάλυση 1680 x 1050, εκτός εάν γνωρίζετε τις ακριβείς διαστάσεις.

Χρησιμοποιώντας το εργαλείο Ορθογώνιο (U), κάντε κλικ στον καμβά σας. Αυτό θα εμφανίσει ένα αναδυόμενο παράθυρο στο οποίο μπορείτε να καθορίσετε τις διαστάσεις. Βάλτε το πλάτος και το ύψος της εγγραφής της οθόνης σας και κάντε κλικ Εντάξει. Αφαιρέστε το κτύπημα και επιλέξτε ένα χρώμα γεμίσματος μαύρο ή σκούρο γκρι.

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

Για να μεταμορφώσετε το ορθογώνιό σας, χρησιμοποιήστε το εργαλείο Μετασχηματισμός. Μπορείτε να το βρείτε πηγαίνοντας στο Επεξεργασία > Δωρεάν Μεταμόρφωση ή χτυπώντας cmd + T (Mac) ή ctrl + T (Windows).

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

Πάλι, πηγαίνετε στο Επεξεργασία μενού, λοιπόν Μεταμορφώνω > Διαστροφέας. Αυτό θα σας επιτρέψει να σύρετε και να τεντώσετε τις γωνίες ώστε να ταιριάζουν τέλεια με την οθόνη σας. Αυτό λειτουργεί εξαιρετικά εάν η εικόνα σας έχει κάποια πρόσθετη προοπτική σε αυτήν. Κάντε διπλό κλικ στο παραλληλόγραμμο μόλις ευθυγραμμίσετε όλες τις γωνίες και τις άκρες σας. Εάν οι άκρες δεν είναι σωστά ευθυγραμμισμένες, χρησιμοποιήστε ξανά την επιλογή Transform tool and Distort μέχρι να ευθυγραμμιστούν.

Μπορείτε να εισαγάγετε το βίντεό σας στο έξυπνο αντικείμενο με σωστό μέγεθος και σχήμα. Κάντε κλικ Παράθυρο > Χρονοδιάγραμμα για να ανοίξετε τη γραμμή χρόνου κινούμενων εικόνων. Βεβαιωθείτε ότι υπάρχει στη γραμμή χρόνου του βίντεο και όχι στην κινούμενη εικόνα καρέ.

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

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

Εάν πρέπει να κόψετε κάποια άκρα, μπορείτε να το κάνετε. Ό, τι μπορείτε να δείτε είναι αυτό που θα προβληθεί στο τελικό mockup. Μόλις είστε ευχαριστημένοι, κάντε διπλό κλικ για να επιβεβαιώσετε το μέγεθος και την τοποθέτηση.

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

Κάντε κλικ στο κουμπί αναπαραγωγής για να ελέγξετε το βίντεό σας. Μπορεί να χρειαστεί λίγος χρόνος για να φορτώσει και επομένως να παίξει πιο αργά από τον πραγματικό χρόνο.

Για να κάνετε την οθόνη του βίντεο να φαίνεται πιο ρεαλιστική, αλλάξτε τη λειτουργία συνδυασμού του επιπέδου βίντεο. Μπορείτε επίσης να μειώσετε την αδιαφάνεια στο επίπεδο βίντεο). Παίξτε με διαφορετικές ρυθμίσεις ανάμειξης μέχρι να είστε ευχαριστημένοι. Εάν θέλετε να το αφήσετε χωρίς αυτό το βήμα, είναι επίσης εντάξει. Θα δώσει μια πιο καθαρή εικόνα της οθόνης.

Τώρα, για να αποθηκεύσετε το βίντεο στη μακέτα σας, απλώς αποθηκεύστε το παράθυρο του έξυπνου αντικειμένου. Μπορείτε να το κάνετε αυτό πηγαίνοντας στο Αρχείο > Αποθηκεύσετε ή χτυπώντας cmd + S (Mac) ή ctrl + S (Windows). Μόλις αποθηκευτεί, βγείτε από το παράθυρο του έξυπνου αντικειμένου.

Θα επιστρέψετε στο παράθυρο μακέτα. Θα δείτε το βίντεό σας στη θέση της οθόνης.

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

Αυτό θα έχει ως αποτέλεσμα ένα τελικό αρχείο βίντεο MP4 με το ολοκληρωμένο μοντέλο βίντεο.

Προχωρήστε τις μακέτες σας παραπέρα με μια μακέτα οθόνης βίντεο

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

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

Πώς να φτιάξετε μια μακέτα συσκευασίας κουτιού στο Photoshop

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα