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

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

Τι είναι τα μακέτα και πώς λειτουργούν;

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

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

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

Σχετίζεται με: Πώς να χρησιμοποιήσετε το Adobe Camera RAW ως έξυπνο αντικείμενο στο Photoshop

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

1. Προετοιμάστε τη φωτογραφία σας

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

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

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

Μπορείτε να χρησιμοποιήσετε τις δικές σας φωτογραφίες ή ιστότοπους αναζήτησης όπως το Unsplash ή το Pixabay για ό, τι χρειάζεστε. Εάν χρειάζεται επεξεργασία, τώρα είναι η ώρα να το κάνετε.

2. Δημιουργήστε ένα Έξυπνο Αντικείμενο

Για να δημιουργήσετε το mockup σας, ξεκινήστε ανοίγοντας τη φωτογραφία της οθόνης σας στο Photoshop. Στη συνέχεια, πρέπει να δημιουργήσουμε ένα έξυπνο αντικείμενο. Για να το κάνετε αυτό, χρησιμοποιήστε το Ορθογώνιο εργαλείο (U) και σχεδιάστε ένα ακατέργαστο ορθογώνιο στην οθόνη της εικόνας. Διαλέξτε ένα χρώμα γεμίσματος για το ορθογώνιό σας και αφαιρέστε την πινελιά.

Στον πίνακα "Επίπεδα", κάντε δεξί κλικ στο επίπεδο με το ορθογώνιο και κάντε κλικ Μετατροπή σε Έξυπνο Αντικείμενο. Από εδώ, μπορούμε να μεταμορφώσουμε το έξυπνο αντικείμενο. Για να ενεργοποιήσετε το Εργαλείο μετασχηματισμού πατήστε [Cmd + Τ] σε Mac και [Ctrl + Τ] στα Windows.

Με ενεργοποιημένο το εργαλείο μετασχηματισμού, κρατήστε πατημένο το Cmd (Mac) ή Ctrl (Windows) το κουμπί προς τα κάτω και τοποθετήστε το δείκτη του ποντικιού σας σε μια γωνία του ορθογωνίου μέχρι να μετατραπεί σε λευκό βέλος. Χρησιμοποιώντας αυτό το βέλος, κάντε κλικ και σύρετε κάθε γωνία του ορθογωνίου στις γωνίες της οθόνης στη φωτογραφία.

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

3. Προσθέστε μια μάσκα εάν είναι απαραίτητο

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

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

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

4. Προσθέστε τα σχέδιά σας

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

Ανοίξτε το σχέδιο που θέλετε στο Photoshop και επιλέξτε όλα πατώντας [Cmd + ΕΝΑ] σε Mac ή [Ctrl + ΕΝΑ] στα Windows. Αντιγράψτε την επιλογή και επιστρέψτε στο παράθυρο με το σχέδιο μακέτας σας. Βρείτε το επίπεδο που συγκρατεί το έξυπνο αντικείμενο σας και κάντε διπλό κλικ στο πλαίσιο έξυπνου αντικειμένου στον πίνακα επιπέδων. Αυτό ανοίγει το έξυπνο αντικείμενο σε νέο παράθυρο.

Τώρα, μπορείτε να επικολλήσετε το σχέδιο που αντιγράψατε προηγουμένως. Μεταμορφώστε το μέγεθος έτσι ώστε να καλύπτει ολόκληρο το ορθογώνιο. Μόλις οριστεί το μέγεθος, αποθηκεύστε την εικόνα πατώντας [Cmd + μικρό] σε Mac ή [Ctrl + μικρό] στα Windows. Βγείτε από το παράθυρο μόλις αποθηκευτεί.

Επιστρέψτε στο κύριο παράθυρο. θα πρέπει να δείτε το σχέδιο της μακέτας σας να ολοκληρώνεται με τη νέα σας οθόνη.

5. Κάντε το ρεαλιστικό

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

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

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

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

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

Σχετίζεται με: Πώς να αποθηκεύσετε εικόνες υψηλής ποιότητας στο Photoshop

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

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

Behance vs. Dribbble: Ποια πλατφόρμα είναι καλύτερη για καλλιτέχνες;

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

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

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