Εφαρμόζοντας σχέδια χρωμάτων απαιτεί την προβολή τους Anew
Υπάρχουν πολλοί πόροι σε απευθείας σύνδεση για τους σχεδιαστές να διερευνήσουν, να τσίμπημα και να κατεβάσουν εξαιρετικούς χρωματικούς συνδυασμούς.
Το παιχνίδι με συμπληρωματικούς, ανάλογους, μονοχρωματικούς και άλλους συνδυασμούς μας ανοίγει σε συναρπαστικές δυνατότητες και δεν υπάρχει έλλειψη freebies.
Αλλά υπάρχει μια διαφορά μεταξύ ενός κερδοφόρου συνδυασμού χρωμάτων και ενός νικηφόρου σχεδίου που το χρησιμοποιεί.
Η επιλογή χρωμάτων είναι το πρώτο βήμα. Η προσαρμογή τους για να ταιριάζει στις απαιτήσεις σχεδιασμού σας είναι εξίσου σημαντική.
Αυτό που φαίνεται καλό σε ένα δείγμα μπορεί να μην λειτουργεί καλά σε μια ιστοσελίδα - αλλά αυτό δεν σημαίνει ότι πρέπει να επιστρέψετε στην πλατεία ένα. Θα διερευνήσουμε εδώ νέους τρόπους για να δούμε τα σχέδια χρωμάτων.
Το χρώμα παίζει σημαντικό ρόλο στον τρόπο με τον οποίο οι άνθρωποι απορροφούν περιεχόμενο. Εάν ο σχεδιασμός είναι κρατημένος ή δυνατός, φιλικός ή απειλητικός, ζεστός ή δροσερός, οι επισκέπτες σε έναν ιστότοπο επηρεάζονται άμεσα από τον τόνο που καθορίζεται από τη διάταξη, την τυπογραφία, τις εικόνες και, φυσικά, τις αποχρώσεις και τις αξίες που αποτελούν το χρωματικό σχήμα του.
Η επιλογή των χρωμάτων μπορεί να είναι η πιο υποκειμενική δουλειά στον σχεδιασμό ιστοσελίδων. Ορισμένα χρώματα λειτουργούν καλά μαζί. άλλοι, όχι τόσο. Ορισμένοι συνδυασμοί απευθύνονται σε συγκεκριμένους ανθρώπους. Περισσότερες από μία σειρά χρωμάτων μπορεί να ταιριάζει με το ίδιο σχέδιο.
Ευτυχώς, υπάρχουν πολλοί πόροι για να βοηθήσουμε. Οι γεννήτριες παλέτας χρωμάτων όπως Σχέδιο χρωμάτων , Adobe Kuler , Ελικόπτερο Toucan και Καθημερινό Πρόγραμμα Χρώματος είναι ανάμεσα στα μεγάλα μέρη για να βρει συνδυασμούς χρώματος που θέτουν αποτελεσματικά μια διάθεση. Αλλά η εύρεση μιας παλέτας είναι μόνο το πρώτο βήμα. Οποιαδήποτε πιθανή αποτελεσματικότητα χρωμάτων μπορεί να διακυβευτεί από τον τρόπο με τον οποίο εφαρμόζεται .
Ο αριθμός των χρωμάτων σε ένα σχήμα κάνει τη διαφορά
Ένα χρωματικό σχήμα είναι ένα σύνολο χρωμάτων που έχουν επιλεγεί για συνεργασία. Τα σχέδια συνήθως έχουν τουλάχιστον τέσσερα χρώματα και συχνά μπορούν να μεταφορτωθούν ως απλές εικόνες και μερικές φορές ως
Το παραπάνω σχήμα χρωμάτων είναι τυπικό για το πώς παρουσιάζονται τα περισσότερα σχήματα: ως ομοιόμορφα δείγματα επίπεδων χρωμάτων. Αυτό το σετ θα μπορούσε να επισημανθεί ως εξής:
- Χαρούμενος
- Φιλικός
- Σύγχρονος
- Ανέμελος
- Προκριματικές εκλογές κόμματος
Αλλά κάνετε ένα ή δύο χρώματα να ξεχωρίζουν και διαφορετικά επίθετα να έρχονται στο νου.
Η παραπάνω εικόνα έχει το ίδιο σχήμα που παρουσιάστηκε στο δείγμα, αλλά είναι λιγότερο απλό και πιο έρημο. Αυτή η εικόνα υπογραμμίζει τα ζεστά χρώματα. Απομονωμένα μπαλώματα μπλε και πράσινου προσελκύουν την προσοχή με την ύπαρξη πιο αραιών. Η προκύπτουσα διάθεση θα μπορούσε να περιγραφεί ως:
- Αμμώδης
- ΛΑΜΠΡΌΣ
- Ζεστός
- Χακί
- Τραχύς
Η επιλογή του κυρίαρχου χρώματος επηρεάζει τον τρόπο εμφάνισης του σχεδίου.
Και πάλι, εδώ χρησιμοποιούμε τα ίδια χρώματα, αλλά σε ένα πολύ διαφορετικό τέλος. Αυτή η εικόνα μοιάζει με έναν αφηρημένο παγκόσμιο χάρτη, με κόκκινα, πράσινα και καφέ νησιά. Η εικόνα δεν είναι μόνο πιο δροσερή - είναι ελαφρώς πιο σκούρα , αν και προέρχεται από την ίδια παλέτα.
Η ικανότητα αναγνώρισης καλών συνδυασμών χρωμάτων δεν αρκεί, επειδή τα χρώματα σπάνια εφαρμόζονται ομοιόμορφα σε ένα σχέδιο ιστοσελίδας. Η χρήση των χρωμάτων με σύνεση και με το σωστό ποσοστό είναι εξίσου σημαντική με την επιλογή των σωστών χρωμάτων.
Το φόντο ορίζει τον τόνο
Το πιο προφανές μέρος για να κάνετε μια κρούση με το χρώμα είναι στο παρασκήνιο. Αυτή η ευρεία έκταση μπορεί να προσελκύσει τόσο μεγάλη προσοχή όσο το περιεχόμενο τοποθετείται πάνω από αυτό.
Παρά το γεγονός ότι έχει το ίδιο περιεχόμενο, ο σχεδιασμός στα δεξιά είναι πολύ πιο ζεστός από αυτόν που βρίσκεται στα αριστερά. Αλλά περισσότερα συμβαίνουν εδώ από μια απλή ανταλλαγή χρωμάτων.
Οι μπάρες περιεχομένου στο πράσινο σχέδιο (δηλαδή το λευκό κείμενο σε κόκκινο χρώμα) κρατούν το δικό τους έναντι του φαρδού πράσινου φόντου. Αλλά το κόκκινο φόντο στα δεξιά ξεπλένει τις αδύναμες πράσινες ράβδους. Αυτό συμβαίνει επειδή, εκτός από το ότι είναι πιο ζεστό, αυτή η συγκεκριμένη σκιά του κόκκινου είναι πιο κορεσμένη. Στην πραγματικότητα, τα μόνα στοιχεία με αρκετό οπτικό βάρος για την αντιμετώπιση του κόκκινου φόντου είναι οι μεγάλες επικεφαλίδες. Το μικρό κείμενο του κορμού και οι πράσινες ράβδοι ξεθωριάστηκαν σε σύγκριση. Αυτό δεν είναι απαραιτήτως κακό. ένα ισχυρό υπόβαθρο δίνει στη σελίδα σημαντική παρουσία. Ο πράσινος σχεδιασμός είναι πιο δροσερός και δίνει στο περιεχόμενο πιο περιστασιακό περιβάλλον.
Ποια χρήση του χρώματος είναι καλύτερη; Εξαρτάται από την πρόθεσή σας. Πρέπει οι επισκέπτες να θεωρούν το περιεχόμενο χαλαρό ή τολμηρό; Θέλετε να παίξετε τα χρωματιστά μπαρ; Ανησυχείτε ότι το ιστορικό θα εξουδετερώσει τις πληροφορίες; Είναι ένα χρώμα σημαντικότερο από το άλλο στην επωνυμία σας; Οι απαντήσεις σε αυτές τις ερωτήσεις θα καθορίσουν ποιο χρώμα είναι "σωστό". Αυτή η ενιαία παλέτα χρωμάτων παρουσιάζει δύο διαφορετικές λύσεις.
Χρώμα πίσω από κείμενο
Η αλληλεπίδραση του κειμένου και του φόντου επηρεάζεται από το μέγεθος και την ποσότητα του καθενός. Η επίδραση του κειμένου στη σελίδα εξαρτάται τόσο από το χρώμα του ίδιου του κειμένου όσο και από το χρώμα του φόντου - παρά τη γενική τάση να ανησυχείτε περισσότερο για το φόντο.
Πάνω, το ελαφρύ κείμενο σε σκούρο φόντο λειτουργεί καλύτερα όταν ο τύπος είναι μεγάλος. Δανεισμένο από το χρωματικό σύστημα που ξεκινήσαμε με αυτόν, ο χρυσός αυτός είναι λιγότερο κατάλληλος για κείμενο κορμού (δηλαδή περίπου 13 pixel ή μικρότερο). Η λύση είναι απλή:
Πάνω, το μικρό κείμενο στις δύο τελευταίες σειρές είναι σε μια πιο χρυσή σκιά χρυσού. Δεν είναι αρκετά λευκό, αλλά πολύ πιο ευανάγνωστο από τις δύο γραμμές στην πρώτη εικόνα. Η προστιθέμενη αντίθεση κρατάει το μικρό κείμενο από το φόντο. Το κλειδί είναι να χρησιμοποιήσετε το χρωματικό σας σχήμα ως αφετηρία, όχι έναν σταθερό κανόνα. Εάν ένα χρώμα φόντου απειλεί να συντρίψει μικρότερα στοιχεία, τότε αυξήστε την αντίθεση, η οποία θα διατηρήσει την ακεραιότητα του σχεδίου και θα διατηρήσει το περιεχόμενο ευανάγνωστο.
Κείμενο σε Λευκό
Πολλές ιστοσελίδες έχουν είτε λευκό φόντο είτε περιοχές λευκού περιεχομένου. Αλλά το "λευκό" δεν σημαίνει "κενό". Μεγάλα λευκά φύλλα επηρεάζουν τον τρόπο με τον οποίο γίνεται αντιληπτό το χρώμα. Για παράδειγμα:
Τα χρώματα που ξεκινήσαμε με την εμφάνιση ελαφρύτερα όταν χρησιμοποιούνται για κείμενο.
- Το σχετικά σκούρο μπλε δημιουργεί αρκετή αντίθεση ώστε το κείμενο να είναι ευανάγνωστο από το λευκό.
- Αυτή η ιδιαίτερη απόχρωση των πράσινων μιγμάτων στο παρασκήνιο. Εάν η πρόθεση είναι αρμονία, τότε το πράσινο λειτουργεί.
- Κόκκινο + λευκό = ροζ ή ροδακινί.
- Ο χρυσός μοιάζει σχεδόν με τόνο σέπια.
Το λευκό τείνει να φωτίζει όλα όσα αγγίζει. Εάν θέλετε να ορίσετε μια ελαφριά διάθεση, τότε οποιοσδήποτε από τους παραπάνω συνδυασμούς μπορεί να λειτουργήσει. Για μεγαλύτερη πρόσκρουση, θα μπορούσατε να σκουρύνετε το χρωματικό σχέδιο.
Παίζοντας με σχέδια χρωμάτων στο Photoshop
Εάν το σχέδιό σας δεν απαιτεί να χρησιμοποιούνται ομοιόμορφα όλα τα χρώματα του σχήματος σας, θα πρέπει να δοκιμάσετε ένα ή δύο χρώματα για δεσπόζουσα θέση. Το τέχνασμα είναι να βρείτε ένα σχέδιο με χρώματα που λειτουργούν τόσο μεταξύ τους όσο και με το κυρίαρχο χρώμα.
Ευτυχώς, έχουμε μια εύκολη διαδικασία για να δοκιμάσουμε τα χρώματα. Για να δείτε πόσο διαφορετικά μέτρα χρώματος μπορούν να επηρεάσουν ένα σχέδιο, ακολουθήστε αυτά τα βήματα στο Photoshop.
1. Βρείτε ή δημιουργήστε ένα συνδυασμό χρωμάτων. Το παράδειγμά μας έχει πέντε χρώματα, αλλά οποιοσδήποτε αριθμός πάνω από έναν θα λειτουργήσει.
2. Δημιουργήστε μια νέα εικόνα στο Photoshop, 500 x 500 εικονοστοιχεία, με λευκό φόντο.
3. Δημιουργήστε τέσσερα νέα επίπεδα (το στρώμα φόντου σας θα είναι το πέμπτο). Αν το σχέδιό σας έχει περισσότερα ή λιγότερα από πέντε χρώματα, προσθέστε ή αφαιρέστε ανάλογα τα επίπεδα.
4. Συμπληρώστε κάθε στρώμα με διαφορετικό χρώμα από το σχήμα σας.
5. Προσθέστε μια μάσκα στρώματος σε κάθε στρώμα πάνω από το στρώμα φόντου. Η παλέτα των στρώσεων σας θα πρέπει να έχει την εξής μορφή:
Πάνω, η παλέτα στρώσεων του Photoshop, με ένα στρώμα ανά χρώμα και με μάσκες επιπέδων που εφαρμόζονται.
6. Εκτελέστε τη δράση "Thresholdizer" σε κάθε μάσκα στρώματος - αλλά όχι στα ίδια τα στρώματα.
Πάνω, όταν χρησιμοποιείτε τη δράση "Thresholdizer", βεβαιωθείτε ότι έχετε επιλέξει τη μάσκα επιπέδου , όχι την πραγματική στρώση. Εάν εκτελέσετε κατά λάθος τη δράση στο στρώμα, τότε χαρείτε τη λειτουργία "Αναίρεση".
Αυτή η ενέργεια δημιουργεί συνήθως ένα τυχαίο μοτίβο σε μια μάσκα στρώματος. Από εδώ, ο σχεδιαστής αναλαμβάνει τη φόρτωση: με τον έλεγχο "Threshold". Σύρετε το πλήκτρο Threshold στο αριστερό για να αποκαλύψετε περισσότερο ένα δεδομένο επίπεδο και το δικαίωμα να αποκαλύψετε λιγότερα. Εφαρμόζοντας αυτήν την ενέργεια σε κάθε μάσκα στρώματος, το ένα χρώμα θα κυριαρχεί στα υπόλοιπα με ένα τυχαίο μοτίβο.
Σε αυτήν την περίπτωση, ο έλεγχος Threshold ορίζει πόσο ένα δεδομένο επίπεδο είναι ορατό. Μια μαύρη μαύρη στρώση στρώματος κρύβει το στρώμα. κυρίως λευκό, αποκαλύπτει το στρώμα. Η εκτέλεση της ενέργειας Thresholdizer σε κάθε μάσκα στρώματος θα δημιουργήσει ένα μείγμα χρωμάτων όπως αυτό:
Αυτό το έγγραφο Photoshop δείχνει τι μπορεί να φαίνεται ένα σχέδιο αν το κίτρινο ήταν κυρίαρχο. Προσαρμογή των χρωμάτων τώρα είναι ένα στιγμιότυπο: για να δώσετε στο χρώμα περισσότερη (ή λιγότερη) αντίθεση, απλά χρησιμοποιήστε μια εντολή Photoshop (όπως Image> Adjustments> Hue Saturation ).
Για παράδειγμα, η σκιά του πράσινου που δούλεψε καλά με το μπλε νωρίτερα δεν φαίνεται πολύ καλή τώρα που το μπλε δεν κυριαρχεί. Μερικά πειράματα αποκαλύπτουν τα εξής:
Εδώ έχουμε δύο παραλλαγές του αρχικού μας σχεδίου χρωμάτων. Η παραλλαγή # 1 σκουραίνει ελαφρά το πράσινο. Λειτουργεί σχεδόν. Η παραλλαγή # 2 αλλάζει τα πάντα εκτός από το κίτρινο για να προσθέσει την αντίθεση και να ευθυγραμμίσει τις αποχρώσεις.
Τι γίνεται αν το σχέδιό μας είχε ως επί το πλείστον μπλε αντί κίτρινο; Αυτή η απόχρωση του μπλε είναι αρκετά σκούρα ώστε να έρχεται σε αντίθεση με τα άλλα χρώματα, αλλά κανένα από αυτά δεν συντονίζει - είναι όλα τα πρωταθλήματα. Επιλέγοντας μια νέα κυρίαρχη θέση δημιουργήσαμε ένα νέο πρόβλημα.
Η παραλλαγή # 1 παραπάνω αντικαθιστά το μαλακό κόκκινο με πιο σκούρο μπλε χρώμα και μετατρέπει τη σκιά του πράσινου σε ανοιχτό μέντα. Η παραλλαγή # 2 πηγαίνει με τον άλλο τρόπο, χρησιμοποιώντας περισσότερο κόκκινο (ή μπορντό) αντί για λιγότερο.
Η αξία οποιασδήποτε από αυτές τις παραλλαγές είναι υποκειμενική. Στην ιδανική περίπτωση, θα τους εφαρμόζετε στην πραγματική σχεδίαση προτού λάβετε τελική απόφαση. Το κλειδί είναι στη διαδικασία: να πάρετε μια παλέτα, να επιλέξετε ένα κυρίαρχο χρώμα και να κάνετε τους άλλους να δουλέψουν μαζί του.
Σχετικά με τη δράση "Thresholdizer"
Δεν υπάρχει κανένα μυστήριο σε αυτή τη δράση. Μπορείτε να πάρετε το ίδιο αποτέλεσμα εφαρμόζοντας Filter> Render> Clouds ή Filter> Render> Difference Clouds σε μια μάσκα επιπέδων. Αυτή η ενέργεια απλώς βελτιώνει τη διαδικασία, οργανώνοντας την εντολή Threshold σε deciles.
Παρακαλώ αισθανθείτε ελεύθερος κατεβάστε την ενέργεια "Thresholdizer" . Καλύτερα, δημιουργήστε τη δική σας και μοιραστείτε την με όλους παρέχοντας έναν σύνδεσμο στα παρακάτω σχόλια.
Αξιολόγηση χρώματος χωρίς τη δράση
Φυσικά, υπάρχουν τρόποι να κρίνουμε το χρώμα χωρίς να παίζουμε με το Threshold. Ξεκινήστε επιλέγοντας ένα κύριο χρώμα και, στη συνέχεια, κάνετε τους άλλους να δουλέψουν μαζί του.
Εδώ είναι το πρωτότυπο χρώμα μας, με καφέ ως πρωτεύον χρώμα.
Έχουμε τονίσα κάτω από το πράσινο και κορεσμένο το κόκκινο. Πιο σκληρά χρώματα στέκονται από μόνοι τους, όπως το κάνει το μπλε (το οποίο δεν έχει ρυθμιστεί).
Εδώ, έχουμε ξεθωριάσει το πράσινο, κίτρινο και κόκκινο. Αυτά τα "έντονα" χαμηλού κλειδιού συνδυάζονται με το καφέ φόντο. Σκούρο μπλε για να δημιουργήσετε αντίθεση.
Τα τρία πιο σκούρα κύρια χρώματα πηγαίνουν καλά ενάντια στο μέσο καφέ, ενώ το ανοιχτό κίτρινο χρησιμεύει ως χρώμα προφοράς.
Και πάλι, η τελική απόφαση έρχεται όταν ο σχεδιαστής εφαρμόζει αυτά τα σχέδια στην πραγματική σχεδίαση. Μέχρι τότε, αυτά είναι απλά σημεία εκκίνησης: χρήσιμα εργαλεία για την αποφυγή συγκρούσεων, εύχρηστες αναφορές για να διατηρήσουν τα σχέδια στο θέμα και ένας πολύ καλός τρόπος για να εξερευνήσετε συνδυασμούς.
Το χρώμα είναι απλώς ένα στοιχείο σχεδιασμού. Η χρήση χρώματος είναι μια δεξιότητα που πρέπει κανείς να ασκεί για να ελέγχει τη διάθεση, να καλλιεργεί τη γεύση του και να μπορεί να βλέπει τις δυνατότητες σε μερικά δείγματα.
Μόνο ένα πράγμα είναι βέβαιο: αυτό το πράσινο πρέπει να πάει.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Ben Gremillion. Ο Μπεν είναι ελεύθερος επαγγελματίας Σχεδιαστής ιστοσελίδων ο οποίος επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.
Πώς δοκιμάζετε τα χρώματα; Ποιοι είναι οι αγαπημένοι σας τρόποι για να δημιουργήσετε σχέδια χρωμάτων; Μοιραστείτε τις απόψεις σας στα παρακάτω σχόλια.