Ένα γυάλινο κείμενο γεμάτο νερό συνδυάζει τη διαφάνεια και την κίνηση για ένα εντυπωσιακό αποτέλεσμα. Ιδανικό για ψηφιακά έργα, όπως διαφημιστικά πανό ή γραφικά στα μέσα κοινωνικής δικτύωσης, μπορείτε να δημιουργήσετε και να ζωντανέψετε αυτή την εμφάνιση στο Photoshop. Χρησιμοποιώντας στυλ στρώσεων, μάσκες και κινούμενα σχέδια χρονογραμμής, το κείμενό σας θα γίνει πόλος έλξης με ρεαλιστικό γέμισμα νερού και ρέουσα κίνηση. Σε αυτό το σεμινάριο, θα σας δείξω βήμα προς βήμα πώς να δημιουργήσετε κινούμενο, γεμάτο νερό γυάλινο κείμενο. Ας ξεκινήσουμε και ας δώσουμε ζωή στο κείμενό σας!
1. Νέο έγγραφο
Ας ξεκινήσουμε δημιουργώντας ένα νέο έγγραφο με διαστάσεις 2090 x 1000 Px.
Στη συνέχεια, πηγαίνουμε στο sxc.hu για να βρούμε την εικόνα φόντου μας. Απλώς εισάγουμε τον ακόλουθο αριθμό εικόνας στη μάσκα αναζήτησης: 1327434.
Στη συνέχεια, κάνουμε κλικ στην εικόνα και τη σύρουμε στο έγγραφό μας στο Photoshop.
Ίσως χρειαστεί να μεγεθύνουμε λίγο περισσότερο την εικόνα (Ctrl+T ) ώστε να χωρέσει στο χώρο εργασίας μας.
2. Δημιουργία κειμένου
Τώρα γράφουμε το κείμενο στο οποίο θέλουμε να δημιουργήσουμε το εφέ. Χρησιμοποιούμε το χρώμα #dbdbdb, μέγεθος 300 Px και τη γραμματοσειρά "FutonCondensed" σε Bold. Μια άλλη έντονη γραμματοσειρά θα ήταν επίσης μια χαρά. Απλώς χρειαζόμαστε πολύ χώρο για να ξεχωρίζει καθαρά το νερό.
Διπλασιάζουμε το επίπεδο κειμένου και μετονομάζουμε και τα δύο επίπεδα. Ονομάζουμε το κάτω επίπεδο "κάτω" και το πάνω επίπεδο "πάνω".
3. εφέ στρώματος για το στρώμα "κάτω"
Κάνουμε διπλό κλικ στη στρώση "κάτω" και προσθέτουμε τα ακόλουθα στυλ στρώσης:
- Σκιά πτώσης:
| Χρώμα | #707070 |
| Γωνία | 120°, απενεργοποιήστε το "Global light". |
| Απόσταση | 1 Px |
| Μέγεθος | 10 Px |
- Σκιά προς τα μέσα:
| Γωνία | Απενεργοποίηση "Παγκόσμιος φωτισμός" |
| Απόσταση | 0 Px |
| Μέγεθος | 10 Px |
| Περίγραμμα | Φορτώστε το "Water 1" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε "water-1.shc" |
- Επίπεδη άκρη και ανάγλυφο:
| Μέγεθος | 10 Px |
| Θόλωση | 3 Px |
| Σκίαση | 120°, απενεργοποίηση "Παγκόσμιος φωτισμός", 11° ύψος |
| Περίγραμμα | Φορτώστε το "Water 2" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε το "water-2.shc" |
Ενδιάμεσο αποτέλεσμα:
- Πεπλατυσμένη ακμή και ανάγλυφο περίγραμμα:
| Ομαλή | Τσεκάρετε το πλαίσιο |
| Contour | Φορτώστε το "Water 3" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε "water-3.shc" |
| Εύρος | 100% |
Ενδιάμεσο αποτέλεσμα (το στρώμα "top" πρέπει να απενεργοποιηθεί προηγουμένως):
Ρυθμίζουμε την αδιαφάνεια της "πάνω" στρώσης στο 0%, ώστε να φαίνονται αργότερα μόνο τα εφέ της στρώσης.
Στη συνέχεια, κάνουμε διπλό κλικ στο επίπεδο κειμένου "top" λίγο πιο δεξιά και ορίζουμε τα ακόλουθα εφέ επιπέδου:
- Σκιά προς τα μέσα:
| Γωνία | Απενεργοποιήστε το "Παγκόσμιο φως". |
| Απόσταση | 0 Px |
| Μέγεθος | 7 Px |
| Ομαλή | Σημειώστε το πλαίσιο |
| Περίγραμμα | Φορτώστε το "Water 4" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε το "water-4.shc". |
Ενδιάμεσο αποτέλεσμα:
- Επίπεδη άκρη και ανάγλυφο:
| Μέγεθος | 12 Px (αργότερα μπορείτε να πειραματιστείτε με 24 Px για ακόμη μεγαλύτερη πλαστικότητα) |
| Θολούρα | 2 Px |
| Σκίαση: | 120° "Παγκόσμιος φωτισμός", 16° ύψος |
| Περίγραμμα | Φορτώστε το "Water 5" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε "water-5.shc" |
Ενδιάμεσο αποτέλεσμα:
- Πεπλατυσμένη ακμή και ανάγλυφο περίγραμμα:
| Contour | Φορτώστε το "Water 6" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε "water-6.shc" |
| Εύρος | 100% |
Ενδιάμεσο αποτέλεσμα:
5. γεμίστε το κείμενο με νερό
Τώρα παίρνουμε το εργαλείο ορθογωνίου...
... και σχεδιάζουμε ένα ορθογώνιο σχήμα που καλύπτει το κάτω μισό του κειμένου.
Το χρώμα θα πρέπει να είναι #4594ab. Αυτό το νέο επίπεδο θα πρέπει να βρίσκεται μεταξύ των δύο επιπέδων κειμένου "κάτω" και "πάνω".
6. ορίστε τα πρώτα σημεία αγκύρωσης
Τώρα παίρνουμε το εργαλείο προσθήκης σημείου αγκύρωσης...
... και ορίζουμε σημεία αγκύρωσης στις εξωτερικές άκρες κάθε χαρακτήρα.
7. Δημιουργία κύματος
Αφού το κάνουμε αυτό, ορίζουμε περισσότερα σημεία αγκύρωσης στο εσωτερικό των χαρακτήρων.
Χρησιμοποιώντας το εργαλείο άμεσης επιλογής, τα μετακινούμε λίγο πάνω και κάτω για να δημιουργήσουμε ένα κύμα. Αν υπάρχουν πάρα πολλά σημεία, μπορούμε να τα αφαιρέσουμε ξανά με το εργαλείο delete anchor point (διαγραφή σημείου αγκύρωσης ).
Ενδιάμεσο αποτέλεσμα:
8. αφαίρεση περιγραμμάτων
Στη συνέχεια, ραστεροποιούμε το επίπεδο ορθογωνίου, οπότε πρώτα το αντιγράφουμε, αποκρύπτουμε το κάτω επίπεδο και στη συνέχεια κάνουμε δεξί κλικ στο αντίγραφο και επιλέγουμε Rasterise layer.
Πατάμε το πλήκτρο Ctrl και ενώ το πατάμε, κάνουμε κλικ στο εικονίδιο στην παλέτα στρώσεων της "κάτω" στρώσης κειμένου για να δημιουργήσουμε μια επιλογή γύρω από το κείμενο.
Στη συνέχεια, πατάμε Ctrl+Shift+I για να αντιστρέψουμε την επιλογή, επιλέγουμε ξανά το αντίγραφο του σχήματος νερού και πατάμε Del. Στη συνέχεια, αποκρύπτουμε το κάτω επίπεδο σχήματος νερού.
9. Προσθέτουμε εφέ επιπέδου για το νερό
Στη συνέχεια, κάνουμε διπλό κλικ στη στρώση νερού για τα εφέ στρώσης για να δώσουμε στο νερό μια υφή πραγματικού νερού.
- Σκιά πτώσης:
| Λειτουργία ανάμειξης | Πολλαπλασιασμός, #4494ab |
| Απενεργοποιήστε το παγκόσμιο φως | Απενεργοποίηση |
| Απόσταση | 3 Px |
| Παγίδευση | 12 % |
| Μέγεθος πλήρωσης | 3 Px |
Ενδιάμεσο αποτέλεσμα:
- Σκιά προς τα μέσα:
| Μέθοδος πλήρωσης | Πολλαπλασιασμός, #4494ab |
| Γωνία | -75° |
| Απόσταση | 0 Px |
| Μέγεθος | 16 Px |
Ενδιάμεσο αποτέλεσμα:
- Ισοπεδωμένη άκρη και ανάγλυφο:
| Μέγεθος | 9 Px |
| Θολούρα | 3 Px |
| Γωνία | 120°, απενεργοποίηση "Παγκόσμιος φωτισμός", ύψος 42° |
| Περίγραμμα | Φορτώστε το "Water 7" κάνοντας κλικ στο βέλος δίπλα στο περίγραμμα και στη συνέχεια στο μικρό βέλος στα δεξιά, στη συνέχεια στο Load contours και επιλέξτε "water-7.shc" |
| Λειτουργία βάθους | Έγχρωμο μετά την έκθεση, #4295ac |
Ενδιάμεσο αποτέλεσμα:
Οι επόμενες ρυθμίσεις δημιουργούν την υφή του νερού:
- Δομή:
| Δομή: Μοτίβο | 9 Px |
| Κλίμακα | 101 % |
| Βάθος | +356 % |
- Γυαλάδα:
| Μέθοδος πλήρωσης | Πολλαπλασιασμός, #4293aa |
| Μέγεθος | 10 Px |
| Περίγραμμα | ευρύ κωνικό σχήμα, βλέπε παρακάτω. |
Ενδιάμεσο αποτέλεσμα:
Τώρα το νερό είναι λίγο σκοτεινό, οπότε θα προσθέσουμε μια χρωματική επικάλυψη. Και για να μην φαίνεται πολύ επίπεδο το ανοιχτότερο χρώμα, θα αλλάξουμε επίσης τη μέθοδο γεμίσματος. Οι προδιαγραφές έχουν ως εξής: Η μέθοδος γεμίσματος θα είναι η εξής: Η μέθοδος γεμίσματος θα είναι η εξής:
- Χρωματική επικάλυψη:
| Τρόπος ανάμειξης | Σκληρό φως, #24bce1 |
Ενδιάμεσο αποτέλεσμα:
- Επικάλυψη κλίσης:
| Τρόπος ανάμειξης | Μαλακό φως |
Ενδιάμεσο αποτέλεσμα:
Ενδιάμεσο αποτέλεσμα σε μεγέθυνση:
Για να κάνουμε το υπόλοιπο κείμενο να μοιάζει με γυάλινο βάζο και όχι απλά με γκρι, απλά πηγαίνουμε στο επίπεδο "κάτω" και ρυθμίζουμε την αδιαφάνεια στο 0%.
Τελικό αποτέλεσμα:
10 παραλλαγές: Αλλαγή της απόχρωσης του μπλε
Εδώ θα ήθελα να σας δείξω τι άλλο μπορούμε να κάνουμε με το κείμενο χρησιμοποιώντας μερικές μικρές βελτιστοποιήσεις. Μεταξύ άλλων, μπορούμε να αλλάξουμε τον μπλε τόνο του νερού προσθέτοντας ένα επίπεδο προσαρμογής Hue/Saturation στην παλέτα επιπέδων...,
μετακινήστε το πάνω από το επίπεδο του σχήματος του νερού και δημιουργήστε μια μάσκα αποκοπής κρατώντας πατημένο το πλήκτρο Alt και κάνοντας κλικ, ώστε τα εφέ να επηρεάσουν μόνο αυτό το χαμηλότερο επίπεδο.
Μπορείτε να δώσετε στο νερό λίγο περισσότερο βάθος κάνοντας μερικές προσαρμογές στα ρυθμιστικά.
11 Παραλλαγές: Κίνηση νερού
Μια άλλη επιλογή θα ήταν να διπλασιάσετε το επίπεδο νερού (εφαρμόζοντας πρώτα τη μάσκα αποκοπής κάνοντας ξανά κλικ πάνω του με Alt+κλικ ) και στη συνέχεια να κάνετε διπλό κλικ στο Flatten Edge and Relief για να αποκτήσετε πρόσβαση στις ρυθμίσεις του στυλ του επιπέδου.
Στη συνέχεια, μεταβείτε στη δομή και μεταβάλλετε το βάθος σε 280 %. Αυτό αλλάζει λίγο την κίνηση του νερού.
Στη συνέχεια, διπλασιάζουμε ξανά το στρώμα νερού για να αλλάξουμε τη δομή για δεύτερη φορά...
... και ρυθμίζουμε την τιμή του βάθους στο 470 %.
Στη συνέχεια, πηγαίνουμε στο Window>Animation για να καλέσουμε το πάνελ animation.
Στη συνέχεια, κάνουμε κλικ στο παρακάτω σύμβολο στο κάτω μέρος για να αποκτήσουμε πρόσβαση στην προβολή καρέ:
Τώρα κάνουμε κλικ 2x στο παρακάτω εικονίδιο για να δημιουργήσουμε 2 ακόμη καρέ.
Στη συνέχεια, επιλέγουμε το πρώτο καρέ κάνοντας κλικ πάνω του:
Στη συνέχεια αποκρύπτουμε τα δύο χαμηλότερα επίπεδα νερού. Μόνο το ανώτερο με τη μάσκα αποκοπής θα πρέπει να είναι ορατό.
Στη συνέχεια, κάνουμε κλικ στο δεύτερο καρέ στο κάτω μέρος, αποκρύπτουμε το πάνω και το κάτω στρώμα νερού και εμφανίζουμε μόνο το μεσαίο. Προσθέτουμε το επίπεδοπροσαρμογής απόχρωσης-κορεσμού.
Τώρα κάνουμε το ίδιο με το τρίτο καρέ, ώστε να εμφανίζεται μόνο το κάτω στρώμα νερού. Στη συνέχεια, επιλέγουμε και τα 3 καρέ και ρυθμίζουμε τα δευτερόλεπτα στο 0,2.
Στα αριστερά, κάντε κλικ στο τρίγωνο δίπλα στο Once και επιλέξτε Unlimited, ώστε το animation να μην παίζει μόνο μία φορά, αλλά να επαναλαμβάνεται ξανά και ξανά.
Κάντε κλικ στο κουμπί αναπαραγωγής για να δείτε πώς κινείται το νερό. Μπορούμε τώρα να το αποθηκεύσουμε αυτό ως αρχείο GIF πηγαίνοντας στο File>Save for Web and Devices (Αρχείο>Αποθήκευση για Web και συσκευές ).
Εκεί επιλέγουμε GIF και κάνουμε κλικ στο Save (Αποθήκευση).
Για να δείτε το όλο πράγμα, είναι καλύτερα να σύρετε το αρχείο σε ένα πρόγραμμα περιήγησης. Στη συνέχεια, θα αναπαραχθεί εκεί.
Έτσι, είμαστε έτοιμοι τώρα. Ελπίζω να σας άρεσε αυτό το εργαστήριο. Παρακάτω μπορείτε να δείτε το τελικό αποτέλεσμα της κινούμενης εικόνας μας:
