Τύπος ανάμιξης και εικόνες: Πώς να διαχειριστείτε μια ελεγχόμενη σύγκρουση
Με τη ρύθμιση εικόνων σε τύπο, μπορείτε να εκφράσετε περισσότερα από λέξεις ή εικόνες μόνο.
Το αποτέλεσμα συγκεντρώνει πολλές πληροφορίες σε έναν στενό χώρο. Αλλά μπορεί να γίνει άσχημο αν το κείμενο και οι εικόνες είναι σε αντίθεση με το άλλο.
Οι σχεδιαστές μπορούν να αποφύγουν την καταστροφή, διατηρώντας το σκοπό τους στο μυαλό: η έκφραση της ιδέας θα πρέπει να οδηγήσει σαφώς στον παράγοντα "wow" της τεχνικής.
Η ρύθμιση εικόνων απευθείας σε κείμενο αναμιγνύει την απλή επικοινωνία λέξεων με το συναισθηματικό αποτέλεσμα των φωτογραφιών.
Λέξεις κατάσταση, και φωτογραφίες εκφράζουν. Αλλά όταν οι εικόνες χάνονται ή το κείμενο γίνεται μπερδεμένο, ή και τα δύο, έχουμε σύγκρουση. Οι εικόνες και το κείμενο μπορούν να εναρμονιστούν απρόσκοπτα, αλλά μόνο αν ακολουθήσουμε ορισμένες κατευθυντήριες γραμμές που εξισορροπούν την αναγνωσιμότητα και των δύο. Διαβάστε παρακάτω για να μάθετε πώς μπορείτε να συνδυάσετε αποτελεσματικά το κείμενο και τις εικόνες.
Εξισορρόπηση αναγνωσιμότητας κειμένου και εικόνας
Σκεφτείτε τις μορφές επιστολής ως πλαίσια εικόνων ... αν και ασυνήθιστα. Η ρύθμιση μιας εικόνας στο κείμενο απαιτεί την αφαίρεση των κομματιών από την εικόνα. Για να διατηρήσετε την αναγνωσιμότητα της εικόνας, θα πρέπει να αποφασίσετε ποια μέρη της εικόνας έχουν σημασία. Είναι καλύτερο οι επιστολές να μην εισχωρούν πάρα πολύ στην εικόνα.
Πάνω, δύο τρίγωνα κόβονται στη φωτογραφία από την κορυφή και τη βάση. Αυτό είναι καλό για το κείμενο, το οποίο είναι τώρα αναγνωρίσιμο "N", αλλά κακό για τη φωτογραφία, επειδή κάποια λεπτομέρεια έχει αφαιρεθεί από το σημείο εστίασης της εικόνας (δηλαδή το λουλούδι).
Για να καταλάβουμε πώς οι εικόνες και το κείμενο μπορούν (και δεν μπορούν) να αναμειχθούν, αρχίζουμε με τις μορφές επιστολών. Το προφανές σημείο εκκίνησης είναι να επιλέξετε το σωστό βάρος.
Το Myriad Pro Light είναι ευανάγνωστο στο μέγεθος σημείου που φαίνεται παραπάνω. Οι άκρες των γραμμάτων είναι σαφείς και τα περισσότερα από τα χρώματα αντιβαίνουν καλά στο φόντο. Αλλά η φωτογραφία μειώνεται σε μια αφηρημένη υφή.
Η αλλαγή της γραμματοσειράς στο Myriad Pro Black αποκαλύπτει περισσότερες φωτογραφίες. Το κείμενο είναι πιο δύσκολο να διαβαστεί επειδή υπάρχουν περισσότερες λεπτομέρειες για να πιάσει το μάτι, αλλά η λέξη "Άνοιξη" είναι ευανάγνωστη.
Η επιλογή ενός χοντρές γραμματοσειράς δεν αρκεί. Μπορούμε να βελτιώσουμε την αναγνωσιμότητα της εικόνας ένα ακόμα βήμα με την παρακολούθηση της λέξης, εφαρμόζοντας έτσι Αρχές Gestalt - συγκεκριμένα, «αναθεώρηση», ένας όρος από την ψυχολογία Gestalt που περιγράφει πώς δημιουργούμε ολόκληρες εικόνες και σχήματα με το μυαλό μας, ακόμη και όταν τα μάτια μας δίνουν μόνο κομμάτια ή συμβουλές.
Τα παραπάνω γράμματα συνοψίζονται για να δημιουργήσουν ένα πιο συνεκτικό "στάδιο" στο οποίο μπορεί να εμφανιστεί η φωτογραφία.
Με λεπτομέρεια 1, οι μορφές επιστολών επικαλύπτονται σκόπιμα για να εμφανίσουν ολόκληρα σχήματα μέσα στη φωτογραφία, αλλά όχι τόσο πολύ ώστε να καλύπτουν τη λέξη.
Με λεπτομέρεια 2, τρία γράμματα με κατακόρυφες πλευρές απέχουν αρκετά μακριά από αυτά που μπορείτε να τα αναγνωρίσετε ως γράμματα, αλλά είναι αρκετά κοντά για να αφήσετε τα πέταλα του λουλουδιού να "χτυπήσουν" στα λευκά κενά. Οι μαύρες γραμμές δείχνουν σιωπηρές γραμμές που οι άνθρωποι συνδέουν υποσυνείδητα. Τουλάχιστον μία ακόμη σειρά Gestalt βλέπει τα γράμματα στην παραπάνω λέξη. Εάν το βλέπετε, αφήστε ένα σχόλιο παρακάτω .
Η αυστηρή κλίση τείνει να δημιουργήσει συμπαγή μπλοκ, τα οποία φαίνονται ενδιαφέροντα, αλλά μπορεί να είναι δυσκίνητα. Η λύση είναι να αφήνετε κενά μεταξύ των αντιστοίχων (ή παράλληλων) γραμμών, αλλά να σφίγετε περιοχές που δεν ταιριάζουν από κοινού.
Εδώ, τα γράμματα με τις αντίστοιχες γραμμές (όπως οι κάθετες πλευρές των "r", "i" και "n") δεν είναι τόσο εύκολο να διαβαστούν όταν πατηθούν μαζί. Αυτός ο ανοιχτός χώρος είναι καλός για τις φωτογραφίες, αλλά κακός για τις επιστολές. Φυσικά, επισυνάπτοντας επιστολές των οποίων τα σχήματα ταιριάζουν δεν είναι πάντα μια κακή ιδέα, αλλά θα πρέπει να είναι όσο το δυνατόν πιο ευανάγνωστα.
Φωτογραφίες του Mo, Προβλήματα Mo
Μια φωτογραφία και μια σύντομη λέξη είναι εύκολη. Πολλές φωτογραφίες σε δύο γραμμές απαιτούν περισσότερη προσπάθεια.
Το "ενεργό καλοκαίρι" δημιουργεί ένα συγκεκριμένο είδος εικόνων. Η παραπάνω σύνθεση έχει κάποια αξία. Εμφανίζει μια ποικιλία φωτογραφιών: πορτρέτα, μακροεντολές, τοπία. Το κείμενο έχει οριστεί σε ένα ομαλό μπλοκ. Και το γραμματοσειρά είναι αρκετά παχύ για να δείξει τις περισσότερες εικόνες. Αλλά υπάρχουν προβλήματα.
Ενώ μερικά πράγματα λειτουργούν καλά, η σύνθεση είναι γεμάτη με προβλήματα. Οι επισημάνσεις επισημαίνονται στο παραπάνω διάγραμμα, αλλά οι περισσότερες έχουν την ίδια αιτία: τα γράμματα και οι φωτογραφίες αλληλεπιδρούν μεταξύ τους. Μπορούμε να επιλύσουμε τα θέματα κάνοντας μικρές αλλαγές.
Οι σημαντικότερες αλλαγές μας εδώ περιλαμβάνουν:
- Η εικόνα του ατόμου στο "S" μετακινείται στο "e" σε "ενεργό".
- Νέες εικόνες έχουν οριστεί στο "m", "e" και "r" στο "καλοκαίρι".
- Η εικόνα του ατόμου στο "e" στο "καλοκαίρι" μετακινείται στο "u".
- Η εικόνα του ποταμού μετακινείται από το "i" στο "S" το καλοκαίρι και συρρικνώνεται για να αποκαλύψει την πηγή του.
- Η καταδυτική πλατφόρμα μετακινείται στο "i" και ο δύτης είναι τοποθετημένος στην παραπάνω θέση.
Είναι καλύτερο, αλλά δεν είναι τέλειο. Το δεύτερο "m" εξακολουθεί να χάνεται στο παρασκήνιο. Επίσης, η προσθήκη φωτογραφιών με ζωντανά χρώματα διευρύνει την παλέτα χρωμάτων, η οποία μπορεί να είναι ένα πρόβλημα. Ας δοκιμάσουμε ξανά.
Μπορούμε να δώσουμε τα λεπτά σύνορα στο "e" στο "ενεργό" και το δεύτερο στο "m" στο "καλοκαίρι". Τα σύνορα εδώ παραμένουν σκοτεινά (45% αδιαφάνεια) για να μην τραβήξουν την προσοχή στον εαυτό τους. Μπορούμε επίσης να δώσουμε το "S" στο "καλοκαίρι" ένα σύνορο, αλλά μόνο όπου είναι απαραίτητο (στο whitewater). Τα όρια είναι απαραίτητα μόνο όταν τα ανοιχτόχρωμα στοιχεία συναντούν το λευκό φόντο.
Το "r" στο "καλοκαίρι" χαρακτηρίζεται από λευκά σύννεφα που αναμειγνύονται στο παρασκήνιο. Αλλά ο σχεδιαστής αποφάσισε ότι το σχήμα "r" ήταν ακόμη ευανάγνωστο, οπότε ένα περιθώριο ήταν περιττό.
Μερικές φορές εμφανίζονται λύσεις όταν ψάχνετε για προβλήματα. Κατά τη διάρκεια του τρίτου γύρου των παραπάνω αλλαγών, για παράδειγμα, ο σχεδιαστής απομόνωσε τον δύτη από το φόντο, ο οποίος δημιουργεί μια πιο άμεση αλληλεπίδραση μεταξύ της εικόνας και του κειμένου.
Η τελική πινελιά είναι να συνδυάσετε τα χρώματα. Αυτό ενοποιεί κάθε λέξη.
Από τις μικρές μετατοπίσεις της απόχρωσης σε μονότονες, κάθε λέξη παραπάνω λαμβάνει ποικίλους βαθμούς απόχρωσης. Παρά την ποικιλία των αντικειμένων, των κλιμάκων και των γωνιών, παρόμοια χρώματα βοηθούν κάθε λέξη να σταθεί μόνη της. Είναι απαραίτητο αυτό; Εξαρτάται από τους στόχους του.
Εάν ο συνδυασμός των λέξεων μαζί είναι πιο σημαντικός από το να έχουμε ρεαλιστικό χρώμα, τότε η παραπάνω τεχνική θα μπορούσε να λειτουργήσει. Αλλά η απόχρωση είναι μια λύση που πρέπει να εφαρμοστεί μόνο εάν υπάρχει ένα πρόβλημα - δηλαδή, μόνο εάν χάσει το επιδιωκόμενο νόημα.
Μείωση, επαναχρησιμοποίηση και ανακύκλωση φωτογραφιών
Ένα τελευταίο πρόβλημα με αυτή τη σύνθεση είναι ο πλήθος των εικόνων που χρησιμοποιήθηκαν. Κάθε επιστολή φαίνεται να περιέχει μια ξεχωριστή φωτογραφία. εάν αγοράζονται ως υλικό αποθέματος, 12 φωτογραφίες θα μπορούσαν να τρέξουν μια μεγάλη καρτέλα.
Στην πραγματικότητα, σε αυτή τη σύνθεση χρησιμοποιήθηκαν μόνο επτά φωτογραφίες. Δύο από τα επτά χρησιμοποιήθηκαν μόνο μία φορά. Το ένα χρησιμοποιήθηκε τρεις φορές. Ρίξε μια ματιά:
Η ρύθμιση των φωτογραφιών σε μορφές επιστολών απαιτεί πάντοτε την περικοπή, έτσι οι απασχολημένες εικόνες - όπως η φωτογραφία των τεσσάρων ατόμων - μπορούν να κοπούν με διαφορετικούς τρόπους και να επαναχρησιμοποιούνται πολλές φορές.
Αλλαγή κειμένου για προσαρμογή εικόνων
Οι δύο λέξεις που μόλις εξετάσαμε, "Ενεργό Καλοκαίρι", έχουν οριστεί στην ίδια τύχη, αλλά σε διαφορετικά μεγέθη σημείων για να διατηρήσουν τις άκρες τους συνεπείς. Όταν χρησιμοποιείτε ένα γράμμα ανά εικόνα, η απόφαση σχεδιασμού είναι αυθαίρετη. Ωστόσο, όταν πρόκειται για μία εικόνα, το σχήμα του κειμένου είναι κρίσιμο. η διατήρηση του συνολικού σχήματος κειμένου όσο το δυνατόν πιο κοντά στις αναλογίες της εικόνας είναι καλύτερο. Για παράδειγμα:
Το "Espresso House" είναι μια μακρά φράση, ελάχιστα κατάλληλη για μια εικόνα 4 × 3. Η λύση είναι να προσαρμόσετε το κείμενο ώστε να ταιριάζει στη φωτογραφία:
- Οι λέξεις στοιβάζονται για να δημιουργηθεί ένα μπλοκ.
- Η λέξη "σπίτι" διευρύνεται έτσι ώστε οι αριστερές και οι δεξιές άκρες της να ταιριάζουν με αυτές του "espresso".
- Το "H" στο "σπίτι" είναι κεφαλαία, αλλά συρρικνωμένο για να ταιριάζει με το ύψος του "ouse." Όσο μικρός χώρος γίνεται μεταξύ των δύο λέξεων.
- Παρόλο που δεν είναι πάντοτε επιθυμητό, εδώ ο descender στον "espresso" επιτρέπεται να συναντήσει το "o" στο "σπίτι".
Η αναγνωσιμότητα είναι σημαντική αλλά σε κάποιο βαθμό υποκειμενική. Ορισμένες τεχνικές ευνοούν την εικόνα και άλλοι ευνοούν το κείμενο. Αυτή η αλληλεπίδραση αφήνεται στον σχεδιαστή, ο οποίος κατανοεί τους στόχους της εργασίας.
Μπορούμε να τονίσουμε το κείμενο αυξάνοντας την αντίθεση γύρω από τις άκρες των γραμμάτων (αριστερά). Για να τονίσετε την εικόνα, εμφανίζουμε την ξεθωριασμένη εικόνα στο λευκό κενό μεταξύ των γραμμάτων (δεξιά). Το "φάντασμα" μπερδεύει το κείμενο αλλά δείχνει την εικόνα ως σύνολο.
Πώς να ορίσετε εικόνες σε κείμενο με το Photoshop
Υπάρχουν πολλοί τρόποι επικάλυψης των εικόνων σε κείμενο, αλλά αυτά τα παραδείγματα δημιουργήθηκαν με μια συνταγή που αναπτύχθηκε με δοκιμή και λάθος.
Αρχικά, ορίστε το κείμενο σε ένα έγγραφο του Photoshop. Αυτή η σύνθεση έχει πλάτος 615 pixels επειδή ταιριάζει με τις προδιαγραφές του Webdesigner Depot. Όταν δημιουργείτε τη δική σας, ταιριάζει το μέγεθος στο έργο σας.
Για να δείτε καθαρά τις άκρες των γραμμάτων, ξεκινήστε με το μαύρο κείμενο σε λευκό φόντο. Όταν τελειώσετε, ρυθμίστε την αδιαφάνεια του στρώματος κειμένου στο 20%.
Πάνω από την παλέτα στρώσεων του Photoshop στο πρώτο βήμα.
Δεύτερον, ισιώστε τη λέξη στο παρασκήνιο για να δημιουργήσετε γκρι γράμματα σε στερεά λευκά. Στη συνέχεια πληκτρολογήστε ξανά τα γράμματα, ένα ανά στρώμα, χρησιμοποιώντας το φόντο ως οδηγό.
Πάνω από την παλέτα στρώσεων του Photoshop στο δεύτερο βήμα.
Τρίτον, προσθέστε φωτογραφίες ή μέρη φωτογραφιών στη σύνθεση ως ξεχωριστά επίπεδα. Η "σκίαση" των επιπέδων (Layer → Create Mask Clipping Mask) επιτρέπει στο ανώτερο στρώμα (στην περίπτωση αυτή, κάθε φωτογραφία) να εμφανίζεται μόνο όταν εμφανίζεται το υποκείμενο στρώμα (κάθε γράμμα).
Πάνω από την παλέτα στρώσεων του Photoshop προσθέτουμε φωτογραφίες.
Επαναλάβετε όπως απαιτείται.
Προσαρμογή της ιδέας
Οποιαδήποτε φωτογραφία, εικόνα ή υφή μπορεί να λειτουργήσει με κείμενο με αυτόν τον τρόπο. Το κλειδί είναι να βρεθεί η σωστή ισορροπία της σαφήνειας μεταξύ κειμένου και εικόνων.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από Ο Ben Gremillion . Ο Ben είναι ανεξάρτητος σχεδιαστής ιστοσελίδων που επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.
Πώς αντιμετωπίζετε τη σύγκρουση του τύπου και των εικόνων; Παρακαλώ μοιραστείτε τις σκέψεις σας παρακάτω ...