Δημιουργία πλαισίου παλέτας χρωμάτων

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

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

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

"Τα συστήματα σχεδιασμού παρέχουν έναν βολικό, συγκεντρωτικό και εξελισσόμενο χάρτη των γνωστών εδαφών ενός εμπορικού σήματος με κατευθυντήριες γραμμές για να σας βοηθήσουν να εξερευνήσετε νέες περιοχές." ~ Chris Messina, ex-Uber

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

Ας αρχίσουμε

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

  • Το χρώμα είναι χρωματικό (μπλε, πράσινο, κόκκινο, κλπ.).
  • Χρώμα είναι η καθαρότητα ενός χρώματος (ένα υψηλό χρώμα δεν έχει προστεθεί μαύρο, λευκό ή γκρι).
  • Ο κορεσμός είναι το ποσοστό μιας δεδομένης απόχρωσης (χαμηλότερος κορεσμός που έχει λιγότερη απόχρωση και πιο κοντά σε λευκό).
  • Η φωτεινότητα / τιμή αναφέρεται στο φως ή στο σκοτάδι ενός χρώματος (σκουρόχρωμο με χαμηλή φωτεινότητα / τιμή).
  • Η αδιαφάνεια αναφέρεται στο πόσο διαφανές ή αδιαφανές είναι το χρώμα (υψηλή διαφάνεια με χαμηλή αδιαφάνεια).
  • Οι ήχοι δημιουργούνται προσθέτοντας γκρι χρώμα σε ένα χρώμα, καθιστώντας το πιο γκρίζο από το πρωτότυπο.
  • Οι αποχρώσεις δημιουργούνται με την προσθήκη μαύρου χρώματος, καθιστώντας το πιο σκούρο από το πρωτότυπο.
  • Οι αποχρώσεις δημιουργούνται με την προσθήκη λευκού χρώματος, καθιστώντας τον ελαφρύτερο από το πρωτότυπο.
Περίληψη των ιδιοτήτων χρώματος. Θα χρησιμοποιήσουμε ένα συνδυασμό αυτών των ιδιοτήτων για τη δημιουργία παραλλαγών χρώματος. Κάντε λήψη της έκδοσης εκτύπωσηςΠλέγμα πλαισίου κλίμακας 10 σημείων για την κατανόηση των ιδιοτήτων χρώματος

Το Πλαίσιο Πλαίσιο

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

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

Έχω χρησιμοποιήσει το Sketch App για να δημιουργήσω το πλέγμα πλαισίου αλλά μπορούμε να το δημιουργήσουμε και σε άλλα εργαλεία σχεδίασης όπως το Photoshop / Illustrator / Figma / Gimp / etc. Θα χρησιμοποιούμε το δημοφιλές σύστημα HSB Color σε όλο το μήκος του.

️ Ανατρέξτε στην παρακάτω εικόνα ενώ ακολουθείτε τα παρακάτω βήματα:

Βήμα 1. Επιλέξτε μια απόχρωση βάσης. Δημιουργήστε ένα τετράγωνο 50 x 50 px με αυτήν την Απόχρωση. Εδώ για παράδειγμα, επέλεξα ένα μπλε Hue (H 212, S 67, B 89).

Βήμα 2. Δημιουργήστε ένα λευκό τετράγωνο κεραμίδι 10 x 10 px (H 0, S 0, B 100).

Βήμα 3. Διπλασιάστε αυτά τα λευκά κεραμίδια (5 σειρές, 5 στήλες) έτσι ώστε να καλύπτει όλο το τετράγωνο βάσης του Βήματος 1.

Βήμα 4. Μειώστε την αδιαφάνεια κάθε στήλης λευκών πλακιδίων κατά 25% από αριστερά προς τα δεξιά.

Βήμα 5. Μειώστε τη Φωτεινότητα κάθε σειρά λευκών πλακιδίων κατά 25% από πάνω προς τα κάτω.

Εδώ είναι το αρχείο Σκίτσο των παραπάνω βημάτων

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

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

1. Μέθοδος σκίασης απόχρωσης-απόχρωσης

Κάντε λήψη του αρχείου Σκίτσο

Αυτή η μέθοδος είναι η πιο συχνά χρησιμοποιούμενη, λόγω της απλότητας της. Το Πλέγμα Πλαίσιο Βάσης που δημιουργήσατε παραπάνω δημιουργήθηκε χρησιμοποιώντας αυτήν τη μέθοδο. Η Αδιαφάνεια και η Φωτεινότητα των λευκών πλακιδίων πάνω από τη βασική απόχρωση σας, κυμαίνονται από 100% έως 0% (αριστερά προς τα δεξιά) και 0% έως 100% (από κάτω προς τα πάνω) αντίστοιχα.

Το θέμα Χρώμα στη δεξιά πλευρά δημιουργήθηκε χρησιμοποιώντας τις 3 βασικές αποχρώσεις μας (αναφέρθηκαν παραπάνω) και επιλέγοντας τις τιμές Opacity & Brightness από την κεντρική στήλη στην αριστερή πλευρά (που υποδεικνύεται από το βέλος).

2. Μέθοδος συγχώνευσης επικάλυψης

Κάντε λήψη του αρχείου Σκίτσο

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

3. Μέθοδος ανάμειξης με μαλακό φως

Κάντε λήψη του αρχείου Σκίτσο

Παρόμοια με τη μέθοδο # 2 Overlay Blending, εδώ αλλάζουμε τη λειτουργία Blending των λευκών πλακιδίων σε Soft-Light. Αυτό δημιουργεί μια όμορφη διαφορά κορεσμού στο δίκτυο. Στη συνέχεια, επιλέγουμε όλα αυτά τα λευκά πλακάκια και τα αντιγράψουμε δύο φορές. Αυτό δημιουργεί μια ισχυρότερη διαφορά κορεσμού και επομένως καλύτερη ζωντάνια χρώματος.

4. Cool μέθοδος επικάλυψης επικάλυψης χρωμάτων

Κάντε λήψη του αρχείου Σκίτσο

Αυτή η μέθοδος χρησιμοποιεί το πλαίσιο πλέγματος που δημιουργήσαμε στη μέθοδο # 2 Overlay Blending. Στη συνέχεια, επιλέγουμε οποιοδήποτε χρώμα Cool (μπλε, για παράδειγμα). Δημιουργήστε ένα ορθογώνιο από αυτό το χρώμα και τοποθετήστε το σε ολόκληρο το πλέγμα. Αλλάξτε τη λειτουργία Μείγμα στην επικάλυψη. Το προκύπτον χρωματικό πλέγμα έχει ένα έντονο δροσερό αποτέλεσμα σε αυτό.

5. Μέθοδος ανάμειξης θερμής έγχρωμης επικάλυψης

Κάντε λήψη του αρχείου Σκίτσο

Πολύ παρόμοια με τη μέθοδο # 4 Cool Color Overlay Blending, εδώ επιλέξαμε οποιοδήποτε θερμό χρώμα (πορτοκαλί, για παράδειγμα). Δημιουργήστε ένα ορθογώνιο από αυτό το χρώμα και τοποθετήστε το σε ολόκληρο το πλέγμα. Αλλάξτε τη λειτουργία Μείγμα στην επικάλυψη. Το προκύπτον χρωματικό πλέγμα έχει ένα δραματικό ζεστό αποτέλεσμα σε αυτό.

6. Μέθοδος Tweak Φωτεινότητας

Κάντε λήψη του αρχείου Σκίτσο

Αυτή η μέθοδος είναι λίγο διαφορετική και ευκολότερη από τις παραπάνω μεθόδους. Τα λευκά κεραμίδια πάνω από την Απόχρωση βάσης δεν υπάρχουν σε αυτό το πλέγμα. Αντ 'αυτού, δημιουργούμε κεραμίδια του βασικού χρώματος (όπως φαίνεται στην εικόνα παρακάτω) και δημιουργούμε μια σειρά από χρώμα Light & Dark, αυξάνοντας και μειώνοντας την τιμή Brightness αντίστοιχα.

Το θέμα Χρώμα στη δεξιά πλευρά δημιουργήθηκε χρησιμοποιώντας τα 3 βασικά χρώματα και απλά αυξάνοντας & μειώνοντας τις τιμές φωτεινότητας για να δημιουργήσετε παραλλαγές Light & Dark αντίστοιχα.

7. Φωτεινότητα + Μέθοδος τσίμπησης κορεσμού

Κάντε λήψη του αρχείου Σκίτσο

Αυτή η μέθοδος χρησιμοποιεί το ίδιο πλέγμα της μεθόδου # 6 Brightness Tweak. Εδώ, ταιριάζουμε τις τιμές Κορεσμού μαζί με τις τιμές Φωτεινότητας. Δημιουργούμε μια ποικιλία χρωμάτων Light & Dark αυξάνοντας και μειώνοντας την τιμή Φωτεινότητας και ταυτόχρονα μειώνοντας και αυξάνοντας τις τιμές κορεσμού αντίστοιχα.

Κανόνας 1: Αναπτήρας Διακύμανση χρώματος = Κάτω Κορεσμός + Υψηλότερη Φωτεινότητα.

Κανόνας 2: Σκοτεινότερη παραλλαγή χρώματος = Υψηλότερος κορεσμός + Κατώτερη φωτεινότητα.

Υβριδικό παράδειγμα

Κάντε λήψη του αρχείου Σκίτσο

Ακολουθεί ένα υβριδικό παράδειγμα που συνδυάζει τη μέθοδο # 1, # 3, # 4 και # 5 για να δημιουργήσει μια όμορφη παλέτα χρωμάτων. Αυτό ήταν εμπνευσμένο από ένα από τα άρθρα σχετικά με τα Sketch Tricks για την κατασκευή ενός συστήματος χρωμάτων γρήγορα στο Sketch App.

συμπέρασμα

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

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

Μπορείτε επίσης να χρησιμοποιήσετε τη μέθοδο προσαρμογής Layers της Justin Mezzell για να δημιουργήσετε σύνολα χρωμάτων Vintage.

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

Σχετικά με μένα

Γεια σας, είμαι ο Rahul Chakraborty, οικοδομώντας εμπειρίες και λύσεις χειροτεχνίας στη μεγαλύτερη πλατφόρμα ηλεκτρονικού εμπορίου της Ινδίας, Flipkart.

I Tweet σχεδιασμό και την τεχνολογία που σχετίζονται με τα πράγματα τακτικά, και η εργασία μου σε εξέλιξη στο Dribbble. Μπορείτε να βρείτε την άλλη πλευρά μου στο Instagram.

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

Ευχαριστώ για την ανάγνωση!

Twitter
Dribbble
Instagram