Mark & ​​ο Τρομερός, Φρικτός, Κακός, Πολύ κακός τρόπος για να παρακάμψετε ένα σύμβολο Σκίτσο με οποιοδήποτε χρώμα RGB

Ως σχεδιαστής προϊόντων και εικονογράφος στο Circle, είναι δουλειά μου να διαχειρίζομαι και να αναπτύξω το προσαρμοσμένο σύνολο εικονιδίων. Έχω χτίσει κάθε εικονίδιο σύμφωνα με το σύστημα Steve Stone που περιγράφεται στο Icon Sets με υπέρβαση χρώματος στο Sketch.

Έχουμε σύμβολα για όλα τα επίσημα χρώματα μάρκας μας και ένα στιγμιότυπο χρώματος είναι ένθετο και καλυμμένο μέσα σε κάθε σύμβολο εικονιδίων. Όταν ένας σχεδιαστής τοποθετεί ένα εικονίδιο σε ένα artboard, μπορεί να τον αποχρωματίσει με μια απλή υπέρβαση, αντικαθιστώντας την προεπιλεγμένη απόχρωση με οποιαδήποτε άλλη στην παλέτα της επωνυμίας μας.

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

Είναι υπέροχο ... με μια προειδοποίηση.

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

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

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

Χρώματα RGB & δεκαεξαδική

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

Ένας εξαγωνικός κώδικας είναι στην πραγματικότητα μια σειρά τριών ζευγών, που αντιπροσωπεύουν την ένταση του κόκκινου, του πράσινου και του μπλε, αντίστοιχα. Κάθε ζεύγος έχει 256 πιθανά επίπεδα έντασης, από το μηδέν έως το 255. Τα επίπεδα αυτά στη συνέχεια αντιπροσωπεύονται ως δεκαεξαδικό, ένα σύστημα που είναι χτισμένο γύρω από δεκαέξι τετράγωνα.

Μετρώντας δεκαεξαδικό. Εύκολα ως 00, 01, 02!

Το καθαρό, κόκκινο πλήρους έντασης γράφεται ως # FF0000 επειδή το πρώτο ζεύγος (το κόκκινο κανάλι) είναι μέγιστο, ενώ το πράσινο και το μπλε είναι και τα δύο μηδέν. Με την ίδια λογική, το # 00FF00 είναι καθαρό πράσινο και το # 0000FF είναι καθαρό μπλε.

Κάθε καθαρό κόκκινο, πράσινο και μπλε χρώμα.

Το #FFFFFF είναι καθαρό λευκό επειδή κάθε κανάλι βρίσκεται στο μέγιστο του, ενώ το # 000000 είναι καθαρό μαύρο επειδή κάθε κανάλι βρίσκεται στο μηδέν.

Επιστροφή στο Sketch

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

Αλλά τι θα συμβεί αν θα κάνουμε σύμβολα για κάθε μέρος ενός χρώματος αντί; Αν σπάσαμε μια συνταγή RGB στα κόκκινα, πράσινα και μπλε συστατικά της, θα μπορούσαμε να τα βάλουμε πίσω;

Ώρα πειράματος!

Ας πάρουμε το χρώμα # FF88CC, ένα ωραίο πλούσιο ροζ. Η κόκκινη τιμή (FF) είναι η μέγιστη τιμή, το πράσινο (88) είναι μεσαίο εύρος και το μπλε (CC) είναι κοντά στην κορυφή.

Τώρα θα δημιουργήσουμε τρία σχήματα, καθένα από τα οποία αντιπροσωπεύει ένα μόνο κανάλι. Τα ορθογώνια μας είναι έγχρωμα # FF0000, # 008800 και # 0000CC.

Τώρα για να τα βάλουν πίσω μαζί. Δεν μπορούμε να στοιβάζουμε μόνο τα στρώματα και να φτάνουμε # FF88CC. χρειαζόμαστε μια λειτουργία ανάμειξης για να τα αναμίξουμε σωστά. Το φωτισμό κάνει το τέχνασμα! Δείτε πώς λειτουργεί, σύμφωνα με τον οδηγό χρήσης του Photoshop:

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

Όπως το ασημένιο ασήμι, το ελαφρύ παίρνει μόνο αυτό που το κάνει πιο ισχυρό. Λαμβάνει υπόψη όλα τα στοιβαγμένα στρώματα και επιλέγει μόνο την υψηλότερη τιμή σε κάθε κανάλι χρώματος. Στην περίπτωσή μας, τα FF, 88 και CC είναι όλα υψηλότερα από 00. Αυτές οι υψηλές τιμές κερδίζουν και αντικαθιστούν τα μηδενικά, με αποτέλεσμα # FF88CC! Βασικά, αυτό εξακολουθεί να λειτουργεί μόλις τα στρώματα μετατραπούν σε σύμβολα. Περισσότερα για αυτό σε λίγο ...

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

Έτσι τώρα που μπορούμε να αναδημιουργήσουμε ένα χρώμα από τα σύμβολα που αντιπροσωπεύουν τα κόκκινα, πράσινα και μπλε κανάλια του, χρειαζόμαστε απλώς αρκετά σύμβολα για να αναπαριστάμε κάθε πιθανό χρώμα!

Κάθε ... πιθανό ... χρώμα ...

Μόλις 768 απλά βήματα ...

Δημιούργησα 256 κόκκινα σύμβολα, καλύπτοντας κάθε τιμή από # 000000 έως # FF0000, κατόπιν έκαναν το ίδιο για το πράσινο και το μπλε. Όλα τα κόκκινα σύμβολα έχουν το ίδιο μέγεθος για να μπορούν να αντικατασταθούν. Τα πράσινα είναι ένα άλλο μέγεθος, και το μπλε άλλο ακόμα. Αυτά τα 768 σύμβολα ζουν σε μια αφιερωμένη βιβλιοθήκη που ονομάζεται RGB Swatch Library για να τους κρατήσει από το να κατακλύζουν την κύρια βιβλιοθήκη μας.

Τέλος, προσθέσαμε ένα σύμβολο, Colour / DIY swatch / Hex code, στη βιβλιοθήκη της μάρκας μας. Έχει ένα μαύρο γεμάτο φόντο και μια εμφάνιση του συμβόλου ΑΑ κάθε καναλιού για να χρησιμεύσει ως προεπιλογή. Αυτές οι τρεις περιπτώσεις έχουν ρυθμιστεί για να φωτίζουν.

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

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

Μπόνους: Αριθμητικά χρώματα RGB

Ω, και μόνο για shits και giggles, δημιούργησα επίσης ένα σετ δειγμάτων για την επιλογή ενός χρώματος από τις αριθμητικές τιμές RGB, σε αντίθεση με δεκαεξαδικό. Μετά από όλα, αφού έχετε κάνει 768 σύμβολα χρώματος, τι άλλο 768;

Είναι απλά αντίγραφα των δεκαεξαδικών συμβόλων, αλλάζουν σε μοναδικές διαστάσεις και μετονομάζονται 0-255 αντί 00-FF. Το # FF88CC που κάναμε πριν; Τώρα είναι 255.137.205. Διασκέδαση!

Είστε έτοιμοι να χρησιμοποιήσετε αυτήν την τρέλα;

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

  1. ️ ️ ️ Κατεβάστε τα αρχεία ️ ️ ️
  2. Ανοίξτε το ZIP για να βρείτε τη βιβλιοθήκη RGB Swatch και τα σύμβολα Swatch Swatch.
  3. Προσθέστε τη βιβλιοθήκη Swatch RGB στις βιβλιοθήκες Sketch σας, στη συνέχεια αφήστε την. Ποτέ δεν χρειάζεται να το ανοίξετε.
  4. Ανοίξτε τα σύμβολα Swatch Swatch και αντιγράψτε τα σύμβολα DIY RGB & hex στη δική σας βιβλιοθήκη εμπορικών σημάτων. Αλλάξτε το μέγεθος των συμβόλων στο ίδιο μέγεθος με τα σύμβολα των άλλων ετικετών χρώματος.
  5. Είσαι καλός για να φύγεις. Απολαμβάνω!

Πιστώσεις και πίσω από τη σκηνή:

Περίεργος για το πώς έκανα όλα αυτά τα δείγματα; Ευτυχώς, δεν ήταν εξ ολοκλήρου χειροκίνητο. Εδώ είναι το πώς πήγα γι 'αυτό:

  1. Στο Adobe Illustrator, δημιούργησα δύο τετράγωνα 10 με 10 εκατοστά, ένα έγχρωμο # 000000 και το άλλο # FF0000 και τα τοποθετήσαμε σε απόσταση 2540 εικονοστοιχείων.
  2. Χρησιμοποίησα το εργαλείο Blend για να δημιουργήσω 254 ενδιάμεσα βήματα μεταξύ τους. Αυτό έκανε όλες τις αυξήσεις χρώματος αμέσως.
  3. Έχω αντιγράψει αυτό το σετ δύο φορές, αντικαθιστώντας τα τελικά χρώματα με # 00FF00 και # 0000FF αντίστοιχα. Με όλα τα 768 βήματα χρώματος, έχω επιλέξει τις ομάδες μείγμα και τους έσπασε σε μεμονωμένα σχήματα με το αντικείμενο> Expand.
  4. Έχω αντιγράψει και επικολλήσει τους σε Sketch, στη συνέχεια, χρησιμοποίησε ένα plugin που ονομάζεται παρτίδα Δημιουργία συμβόλων για να τα μετατρέψει σε σύμβολα χύμα. Το έκανα αυτό σε κάθε κανάλι που χωριστά, για να αποφευχθεί η ανάμειξη των χρωμάτων μου.
  5. Τα σύμβολα ήταν ακόμα όλα σε μεγάλες σειρές, γι 'αυτό τα κανόνισα προσεκτικά σε πλέγματα (με 16 σύμβολα ανά σειρά και στήλη), έχοντας κατά νου να μην χρεώσω την παραγγελία μου.
  6. Έχω επιλέξει όλα τα σύμβολα στην πρώτη στήλη κάθε σειράς χρωμάτων και με το plugin "Μετονομασία" μετονομάστηκε σε "0". Ονομάσαμε τις επόμενες στήλες 1 έως 9, μετά τις τελευταίες έξι Α έως Ε.
  7. Έχω επιλέξει όλα τα σύμβολα στην πρώτη σειρά κάθε σειράς χρωμάτων. Με το Μετονομασία, πρόσθεσα "0" πριν από κάθε όνομα του συμβόλου και συνέχισα με κάθε διαδοχική σειρά μέχρι να βάλω όλα τα ζευγάρια hex, από 00 σε FF.
  8. Επιλέξαμε όλα τα σύμβολα και επιλέξατε Προσαρμογή περιεχομένου για αλλαγή μεγέθους.
  9. Έχω επιλέξει όλα τα κόκκινα σύμβολα και τα βάζω σε ένα μοναδικό μέγεθος (7x9), και να ορίσω μοναδικά μεγέθη για τα άλλα σετ χρωμάτων επίσης.

Ένα εκατομμύριο χάρη στον Steve Stone για τη μέθοδο χρωματισμού εικονιδίων του, τον Paul Demers για το Batch Create Symbols και τον Rodrigo Soares για τη μετονομασία του.

Μια έκδοση αυτού του άρθρου εμφανίζεται επίσης στον ιστότοπό μου.