Πώς να βαθμολογήσετε το χρώμα για τον ιστό
Πότε είναι πορτοκαλί περισσότερο σαν κόκκινο; Οι σχεδιαστές ιστοσελίδων, ακόμη και επιλεκτικοί, μερικές φορές αγνοούν τη μετατόπιση χρώματος σε οθόνες.
Πώς είναι ένας σχεδιαστής ιστοσελίδων να διαχειρίζεται το χρώμα όταν οι οθόνες των χρηστών τους μπορούν να είναι οποιουδήποτε μεγέθους ή χρώματος ή θα μπορούσαν να προβληθούν σε συνθήκες φωτισμού;
Σε αντίθεση με τον καθορισμό των σφαλμάτων HTML, τα οποία επηρεάζουν τα προγράμματα περιήγησης καθώς φορτώνεται η σελίδα, η λήψη ακριβούς χρώματος είναι μέρος της εργασίας του σχεδιαστή.
Η διατήρηση των χρωμάτων στα έργα είναι εφικτή όταν κατανοηθούν τα προβλήματα. Διαβάστε παρακάτω για τις προκλήσεις-και τις λύσεις-για να αποκτήσετε σταθερό χρώμα στο διαδίκτυο.
Μπορείτε να εντοπίσετε τη διαφορά μεταξύ των παρακάτω φωτογραφιών;
Μια από τις εικόνες είναι ελαφρώς πιο μπλε από την άλλη. Αυτή η "μετατόπιση χρώματος", ή η συνολική απόχρωση μιας συγκεκριμένης απόχρωσης, μπορεί να περάσει απαρατήρητη από τον απλό παρατηρητή. Μετά από όλα, μια μικρή αλλαγή στο χρώμα δεν κάνει αυτό το λιγότερο από ένα λουλούδι ή να μειώσει τις λεπτομέρειες της δροσιάς. Είναι μια σωρευτική αλλαγή.
Με την πάροδο του χρόνου, οι εικόνες JPEG μέγιστης ποιότητας και τα εικονίδια PNG 256 χρωμάτων τρώνε πολύτιμο εύρος ζώνης. Η πολυπλοκότητα της HTML αυξάνει το φόρτο εργασίας του προγράμματος περιήγησης με κάθε φόρτωση σελίδας. Σε αντίθεση με αυτά τα προβλήματα, τα οποία προστίθενται καθώς οι επισκέπτες περιηγούνται στον ιστότοπο, η διαχείριση χρώματος είναι ένα πρόβλημα με τη διαδικασία σχεδιασμού . Οι εικόνες που έχουν δημιουργηθεί σε μια μη βαθμονομημένη οθόνη δεν είναι συνεπείς με την πάροδο του χρόνου.
Η αλλαγή χρώματος μπορεί να γίνει με ένα άλλο όνομα: απροσεξία.
Πότε μπορούμε να πούμε ότι το χρώμα ενός γραφικού αντιστοιχεί στη σελίδα αρκετά κοντά; Σε ποιο σημείο είναι πολύ ανακριβές το χρώμα μιας φωτογραφίας; Ποιες λεπτομέρειες δεν έχουν σημασία για το έργο ως σύνολο; Ο καθένας μπορεί να έχει διαφορετικές απαντήσεις, αλλά κανείς που δεν λαμβάνει ψηφιακές εικόνες σοβαρά μπορεί να αγνοήσει τη βαθμονόμηση χρώματος.
Η βιομηχανία εκτύπωσης έχει αγωνιστεί για να πάρει ακριβές χρώμα για δεκαετίες. Η διασφάλιση ότι τα ίδια χρώματα εμφανίζονται σε όλα τα στάδια της παραγωγής - συμπεριλαμβανομένων των διαφόρων οθονών, των εκτυπωτών γραφείου και των εκτυπωτών υψηλής τεχνολογίας - έχει δημιουργήσει τη δική της βιομηχανία συσκευών βαθμονόμησης, λύσεων λογισμικού και ακόμη και προτύπων ISO.
Η κοινότητα σχεδιασμού ιστοσελίδων γενικά δεν ανησυχεί για τους ελέγχους τύπου. Αλλά ίσως πρέπει.
Ο ιστός είχε προβλήματα χρώματος αφού είχε χρώμα
Στη δεκαετία του 1990, η επίτευξη ακριβούς χρώματος στο διαδίκτυο σήμαινε τη χρήση μιας παλέτα 216 χρωμάτων "ασφαλούς διαδικτύου". Αυτές οι αποχρώσεις και οι αποχρώσεις ήταν (ως επί το πλείστον) εγγυημένες να μην αποσυντίθενται όταν εμφανίζονται σε οθόνες που δεν μπορούσαν να χειριστούν περισσότερο από 8-bit χρώμα.
Πάνω είναι μια κλίση με και χωρίς dithering. Σήμερα, η συντριπτική πλειοψηφία των υπολογιστών μπορεί να παρουσιάσει χρώμα 24 bit ή καλύτερα (σύμφωνα με το αυτές τις στατιστικές εμφάνισης του προγράμματος περιήγησης και παρακολούθηση ιστοτόπων από το Google Analytics, συμπεριλαμβανομένου του Webdesigner Depot). Δηλαδή, κάθε εικονοστοιχείο μπορεί να παρουσιάσει ένα από τα εκατομμύρια των χρωμάτων, κάνοντας τη βαθμονόμηση τόσο πολύπλοκη όσο και πιο κρίσιμη.
Ο ιστός έχει βασιστεί εδώ και καιρό σε δεκαεξαδικούς κώδικες, όπως το # F35C23, για τον ορισμό των χρωμάτων. Αυτές οι χορδές έξι χαρακτήρων μπορούν να εμφανίσουν μεγάλη ποικιλία αποχρώσεων και αξιών με μεγάλη ακρίβεια. Μια εικόνα που έχει # F35C23 και ένα φόντο CSS στο # F35C23 θα ταιριάζει απόλυτα.
Το πρόβλημα είναι ότι ο κώδικας ορίζει έναν συνδυασμό κόκκινου, πράσινου και μπλε, αλλά δεν οδηγεί πάντοτε σε σταθερό χρώμα. Οι οθόνες εμφανίζουν τη διαφορά.
Το λευκό είναι λευκό, εκτός από το πότε δεν είναι
Πολλοί παράγοντες επηρεάζουν την ακρίβεια των χρωμάτων κατά τη δημιουργία και την επεξεργασία ψηφιακών εικόνων. Όπως και με την εκτύπωση, το χρώμα στο διαδίκτυο εξαρτάται από το περιβάλλον στο οποίο δημιουργείται η εικόνα. Σε αντίθεση με την εκτύπωση, οι εικόνες που βασίζονται στον ιστό μπορούν να αλλάζουν κάθε φορά που εμφανίζονται, επειδή οι οθόνες των χρηστών ποικίλλουν και κανένας έλεγχος τύπου δεν μπορεί να εντοπίσει προβλήματα που προκύπτουν.
Παρόλο που πολλά σύγχρονα προγράμματα περιήγησης ιστού μπορούν να εμφανιστούν
Αλλά δεν είναι όλες οι οθόνες κατασκευασμένες το ίδιο, και έτσι μια συγκεκριμένη απόχρωση πορτοκαλί θα μπορούσε να είναι ασυνεπής σε διάφορες οθόνες. Εδώ είναι μερικές από τις αιτίες της αλλαγής χρώματος:
- Οι μικρές αλλαγές μεταξύ των κατασκευαστών και των μοντέλων καταδεικνύουν ελαφρές ανακρίβειες στη σκιά και την απόχρωση.
- Πολλές οθόνες (ειδικά οι οθόνες CRT ) αλλάζουν χρώμα κατά τη διάρκεια των ετών και ακόμη και καθώς θερμαίνονται πάνω από μια ημέρα.
- Μέχρι πρόσφατα, τα Mac OS X και τα Windows χρησιμοποίησαν δύο διαφορετικά "gammas", πράγμα που σήμαινε ότι οι εικόνες σε υπολογιστές Mac ήταν πιο φωτεινές από αυτές των PC. Το Mac OS X 10.6 (Snow Leopard) χρησιμοποιεί τη συνηθέστερη γάμμα των 2.2 , το οποίο είναι το ίδιο με τα Windows και πολλές τηλεοράσεις και βιντεοκάμερες.
- Οι χρήστες περιηγούνται στο διαδίκτυο από πολλές διαφορετικές τοποθεσίες και σε πολλές διαφορετικές συνθήκες φωτισμού. Η επίδραση των φωτεινών φώτων και η ποσότητα και το χρώμα του φυσικού φωτός επηρεάζουν την εμφάνιση χρώματος στην οθόνη.
Πάνω, η διαφορετική βαθμονόμηση δείχνει ότι το "λευκό" είναι συχνά ένα υποτιθέμενο χρώμα:
- Η αρχική εικόνα, πυροβόλησε κάτω από φως φθορισμού με μια φωτογραφική μηχανή.
- Κατά προσέγγιση αλλαγή χρώματος σε Mac πριν από Snow Leopard.
- Κατά προσέγγιση χρωματική μετατόπιση σε οθόνη γήρανσης CRT.
- Κοντά στο πραγματικό χρώμα, όπως φαίνεται στον φορητό υπολογιστή στον οποίο έγινε επεξεργασία της φωτογραφίας.
Μια ελαφρώς κόκκινη οθόνη μπορεί να δείχνει μια τελείως μπλε ή ελαφρώς πορφυρή ή να δείχνει πράσινο με κίτρινη απόχρωση. Οι οθόνες που είναι πολύ φωτεινοί θα ξεπλύνουν τις σκιές και τις φωτεινές ενδείξεις. οι οθόνες που είναι πολύ σκοτεινές θα προκαλούν λασπώδη σκιές και θα αυξήσουν την πιθανότητα μετατόπισης των χρωμάτων στα κυριώτερα σημεία. Για τους σχεδιαστές που ενδιαφέρονται για αυτές τις λεπτομέρειες, ο ποιοτικός έλεγχος είναι σίγουρα μια πρόκληση.
Μετατόπιση χρώματος PNG
Με απλά λόγια, η τιμή γάμμα αλλάζει τη φωτεινότητα μιας εμφανιζόμενης εικόνας. Σχεδιασμένο για ψηφιακή απεικόνιση, η μορφή εικόνας PNG επιτρέπει στους σχεδιαστές να προσθέτουν γάμμα διόρθωση σε κάθε εικόνα. Αλλά χωρίς να γνωρίζει τη φωτεινότητα της συσκευής εξόδου (δηλαδή, χωρίς να γνωρίζει τον τύπο της οθόνης που θα εμφανιστεί η εικόνα), οι σχεδιαστές δυσκολεύονται να προσθέσουν ακριβή διόρθωση γ.
Αυτό το χαρακτηριστικό έχει γίνει το πιο διαβόητο πρόβλημα του PNG. Στο διαδίκτυο, μια εικόνα θα ταιριάζει μερικές φορές με τα εξαγωνικά χρώματα που καθορίζονται στο CSS και άλλες φορές δεν θα - ακόμα κι αν δημιουργήθηκε με το σωστό χρώμα.
Προγράμματα όπως το PNGCrush (Windows) και PNGenie (Mac) μπορεί να αφαιρέσει επιπλέον πληροφορίες από τα αρχεία PNG, συμπεριλαμβανομένης της ρύθμισης γάμμα, που καθιστά το χρώμα πιο αξιόπιστο.
Αλλα θέματα
Η πρόληψη της μετατόπισης χρώματος μπορεί να απαιτήσει αλλαγές στον τρόπο με τον οποίο εργάζονται οι σχεδιαστές. Η κακή βαθμονόμηση χρώματος θα ξεχωρίσει με την πάροδο του χρόνου. Είναι μία από εκείνες τις λεπτομέρειες σχεδίασης που δεν μιλάμε και δεν πρέπει να παρατηρήσουμε.
Βιομηχανικές λύσεις
Διάφορες λύσεις έχουν πάρει μεγάλο μέρος της εικασίας από τη διαχείριση του χρώματος και την παρεμπόδιση της μετατόπισης χρώματος.
ο Διεθνής Κοινοπραξία Χρωμάτων (
Τα προφίλ ICC είναι αρχεία που περιέχουν πληροφορίες για το πώς εμφανίζονται χρώματα σε διάφορες συσκευές. Οι εκτυπωτές και οι περισσότεροι υπολογιστές διαθέτουν ενσωματωμένα προφίλ ICC, επειδή οι κατασκευαστές τους γνωρίζουν ακριβώς πώς λειτουργούν. Αλλά τα προσαρμοσμένα προφίλ ICC μπορούν να προσαρμόσουν μια συγκεκριμένη συσκευή σε ορισμένες συνθήκες-ας πούμε, όταν χρησιμοποιείται μια οθόνη κάτω από φώτα φθορισμού, σε αντίθεση με δίπλα σε ένα μεγάλο παράθυρο.
Εκτός από τα αντίστοιχα χρώματα σε οθόνες (και σε έντυπη μορφή), το Adobe Flash Player 10 υποστηρίζει τα προφίλ ICC , επιτρέποντας τη διαχείριση χρώματος μεταξύ του Flash και των εκτυπωτών (υποθέτοντας ότι ο εκτυπωτής του τελικού χρήστη χρησιμοποιεί ένα προφίλ ICC).
Το 1996, η Hewlett-Packard και η Microsoft καθόρισαν το πρότυπο κόκκινο, πράσινο, μπλε (
Αυτές οι τεχνικές λύσεις είναι απαντήσεις σε επίπεδο βιομηχανίας από επαγγελματικές οργανώσεις. Αλλά οι σχεδιαστές μπορούν επίσης να λάβουν μέτρα για να διατηρήσουν τη δουλειά τους συνεπή με την πάροδο του χρόνου.
Συμβουλές για την προετοιμασία ενός δωματίου για εργασία με χρώμα
Τι φωτισμό χρησιμοποιείτε αυτή τη στιγμή; Εάν διαβάζετε αυτό στον κύριο χώρο εργασίας σας και εάν το ακριβές χρώμα είναι σημαντικό για εσάς, τότε μπορείτε να λάβετε μέτρα για να βελτιώσετε το χώρο εργασίας σας τώρα.
- Δέκα δευτερόλεπτα ανά μισή ώρα
Κάντε ένα γρήγορο διάλειμμα και κοιτάξτε μια γκρι κάρτα 18% . Κοιτάζοντας την ίδια κάρτα υπό τις ίδιες συνθήκες φωτισμού είναι ένας καλός τρόπος να "επαναφέρετε" τα μάτια σας. (Σημείωση: οι ντόπιοι προτείνουν 12% γκρι κάρτες, είναι επίσης καλές, εφ 'όσον χρησιμοποιείτε την ίδια κάρτα κάθε φορά.) Το θέμα είναι να δούμε κάτι σταθερό και ουδέτερο.) - Δέκα λεπτά
Μετακινήστε την οθόνη σας έξω από το άμεσο φως. Ποτέ μην αφήνετε μια πηγή φωτός να έρθει απευθείας στην οθόνη. - Δεκαπέντε λεπτά
Αφαιρέστε τα χρωματιστά αξεσουάρ γραφείου (ημερολόγια, δείκτες, φωτογραφίες, φακέλους - οτιδήποτε δεν είναι γκρίζο) από την οπτική σας όψη. Εάν η οθόνη σας είναι αντανακλαστική, μην κρατάτε πολύχρωμα αντικείμενα ακριβώς πίσω σας. - Δέκα λεπτά την ημέρα
Αφήστε τα μάτια σας να προσαρμοστούν στο περιβάλλον πριν ξεκινήσετε την εργασία. Δώστε στα μάτια σας το χρόνο να προσαρμοστούν στον χώρο εργασίας, ειδικά αν έχετε μόλις έρθει από το φως του ήλιου ή το εξωτερικό νυχτερινό φωτισμό. Εάν είναι απαραίτητο, χρησιμοποιήστε ένα χρονοδιακόπτη. - Δέκα λεπτά την εβδομάδα
Καθαρίστε την οθόνη σας. Χρησιμοποίησε ένα πανί χωρίς χνούδι για να αφαιρέσετε απαλά τα μουτζούρα σκόνης και δακτυλικών αποτυπωμάτων ή ανατρέξτε στο εγχειρίδιο του κατόχου σας για οδηγίες καθαρισμού. Κάνετε το ίδιο με τα γυαλιά σας, αν τα φορέσετε. - Μια μέρα ή έτσι
Καλύψτε τα κοντινά παράθυρα με χοντρές οθόνες ή κουρτίνες. Τα βασικά οφέλη του φυσικού φωτός είναι η ακρίβεια - είναι δύσκολο να γίνει πιο φυσικό από το φως του ήλιου - και η διαθεσιμότητα. Αλλά το φυσικό φως ποικίλλει. Αλλάζει όλη την ημέρα, με τον καιρό και τις εποχές. - Ενα Σαββατοκύριακο
Περιβάλλετε το χώρο εργασίας σας με ουδέτερο γκρι χρώμα. Βάλτε τα τείχη και αντικαταστήστε τα σκούρα έπιπλα με κάτι απαλό. Στην ιδανική περίπτωση, η επιφάνεια εργασίας σας θα πρέπει να αντικατοπτρίζει μόνο το 60% περίπου του φωτός που το χτυπά. GTI Munsell ουδέτερη γκρι βαφή είναι δημοφιλής μεταξύ των φωτογράφων για τη δημιουργία ουδέτερου υποβάθρου. - Σαββατοκύριακο ή ώρα αποστολής
Αν δεν μπορείτε να προσαρμόσετε τον φωτισμό του γραφείου σας, αγοράστε ή συναρμολογήστε μια καλύπτρα οθόνης για να αποφευχθεί η λάμψη και οι μεταβαλλόμενες συνθήκες.
Συμβουλές για την βαθμονόμηση της οθόνης σας
Ο σκοπός της βαθμονόμησης είναι να εξαλείψει τις μεταβολές χρώματος και να βελτιστοποιήσει την περιοχή τόνων της οθόνης σας. Οι σκιές πρέπει να είναι πλούσιες, αλλά να δείχνουν ακόμα λεπτομέρειες. Τα φωτεινότερα σημεία δεν πρέπει να είναι ούτε ζεστά ούτε πολύ δροσερά. Μακροπρόθεσμα, αυτό κάνει για ακριβές, σταθερό χρώμα.
Ακολουθούν τα γενικά βήματα:
- Ζεστάνετε την οθόνη σας για τουλάχιστον 30 λεπτά.
- Επιλέξτε γάμμα (5000-9500 ° K, γάμμα 1,8-2,2).
- Βρείτε τα καλύτερα λευκά και μαύρα σημεία.
- Ισορροπίστε κόκκινο, πράσινο και μπλε για να αποφύγετε τα χρωματικά χρώματα.
- Επαναλάβετε τη διαδικασία αυτή κάθε μήνα.
Πολλά προγράμματα θα σας οδηγήσουν σε αυτή τη διαδικασία. Το Adobe Gamma είναι μια δημοφιλής γρήγορη λύση για τη βαθμονόμηση των οθονών CRT. Εκτός από την εύκολη χρήση, είναι δωρεάν με την αγορά του Photoshop ή του Photoshop Elements. Άλλες λύσεις είναι QuickGamma (Windows) και Spyder του Datacolor υλικό βαθμονόμησης υλικού.
Χρωματίζω εμένα
Το ακριβές, συνεπές χρώμα είναι μία από τις ελάχιστες λεπτομέρειες που οι περισσότεροι άνθρωποι - συμπεριλαμβανομένων των σχεδιαστών ιστοσελίδων - επιλέγουν να αγνοήσουν ενόψει των ανακριβών σφαλμάτων, των προτύπων διαδικτύου, της παραπληροφόρησης του πελάτη και της καλής πίεσης της προθεσμίας.
Αλλά είναι επίσης ένα από τα στοιχεία που κάνουν για μια καλύτερη συνολική εμπειρία. Μόλις οι σχεδιαστές αρχίσουν να παρατηρούν αποκλίσεις στην απόχρωση και τις λασπώδεις σκιές, δεν θέλουν να κάνουν καλύτερη δουλειά θα γίνουν ασυνήθιστες.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Ben Gremillion. Ο Μπεν είναι ελεύθερος επαγγελματίας Σχεδιαστής ιστοσελίδων ο οποίος επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.