Θεωρία των χρωμάτων [Μέρος 2ο] : Κατανόηση των εννοιών και της ορολογίας

11 Σεπ 2010 | Γενικά

Δεν επιτρέπονται τα σχόλια.


Θεωρία των χρωμάτων [Μέρος 2ο] : Κατανόηση των εννοιών και της ορολογίας

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

Απόχρωση

Η απόχρωση είναι η βασικότερη έννοια των χρωμάτων και στην ουσία δηλώνει ποιο είναι το χρώμα ενός αντικειμένου. Όταν για παράδειγμα λέμε “μπλε”, “πράσινο” ή “κόκκινο” στην πραγματικότητα μιλάμε για την απόχρωση. Οι αποχρώσεις που χρησιμοποιείτε στα σχέδια σας μεταφέρουν σημαντικά μηνύματα στους επισκέπτες της ιστοσελίδας σας. Διαβάστε το πρώτο μέρος της θεωρίας των χρωμάτων για να δείτε σχετικά με αυτά τα μηνύματα.

Παραδείγματα

Happy Twitmas
Η βασική απόχρωση του φόντου καθώς επίσης και μερικών γραμματοσειρών στο Happy Twitmas είναι το ανοικτό κόκκινο.

Chapolito Creative Web Design
Η χρήση πολλών ανοιχτόχρωμων αποχρώσεων μπορεί να προσθέσει στην ιστοσελίδα ένα χαρούμενο ύφος, όπως για παράδειγμα στην εικόνα μας, στην περιοχή της επικεφαλίδας και σε άλλα σημεία έχουν χρησιμοποιηθεί πάρα πολλές ανοιχτόχρωμες αποχρώσεις.

estilorama
Το ανοικτό κόκκινο είναι πολύ δημοφιλής απόχρωση στο σχεδιασμό ιστοσελίδων

MIX Online
Το MIX χρησιμοποιεί ένα σύνολο από ανοικτές αποχρώσεις στην επικεφαλίδα και στο λογότυπο

Steve Ottenad
Οι ποιο καθαρές μορφές του πράσινου συναντιόνται σπάνια και έτσι όπου τις υπάρχουν ξεχωρίζουν

Χρώμα

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

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

Παραδείγματα

the Movie title stills collection
Το κυανό έχει μεγάλο βαθμό χρώματος και έτσι ξεχωρίζει από το μαύρο και το λευκό

Canal Connection
Ακόμα μια ιστοσελίδα με μπλε που έχει μεγάλο βαθμό χρώματος, επίσης έχει μερικές αποχρώσεις και σκιές με μικρότερο βαθμό χρώματος.

Philipp Doms
Ο συνδυασμός υψηλού και χαμηλού βαθμού χρώματος της ίδιας απόχρωσης μπορεί να προκαλέσει ένα κομψό σχέδιο

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

Panelfly
Οι μικρές διαφορές στο βαθμό χρώματος μπορούν να δημιουργήσουν υπέροχες διαβαθμίσεις.

Κορεσμός

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

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

Παραδείγματα

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

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

Disfruta San Juan
Οι αποχρώσεις με μικρότερο βαθμό κορεσμού δεν είναι απαραίτητα ποιο φωτεινές, όπως φαίνεται και στη σελίδα παραπάνω.

Craft-Sale.co.uk
Ένα τέλειο παράδειγμα για το πως η χρήση αποχρώσεων με υψηλό βαθμό κορεσμού σε αντίθεση με το φόντο που έχει μικρό βαθμό κορεσμού μπορεί να κάνει τη σελίδα να ξεχωρίζει.

Sunrise Soya
Ακόμα ένα καλό παράδειγμα για το πως οι αποχρώσεις με χαμηλό βαθμό κορεσμού κάνουν τα χρώματα με υψηλό δείκτη κορεσμού να ξεχωρίζουν καλύτερα.

Τιμή

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

Παραδείγματα

Graphic & Web Design Manchester
Ο υψηλός βαθμός τιμής του κίτρινου που έχει αυτό το σχέδιο, κάνει τις ποιο σκούρες αποχρώσεις του μαύρου και του γκρι να ξεχωρίζουν.

Oyster Design
Αυτή η ιστοσελίδα χρησιμοποιεί το μπλε με δυο διαφορετικές τιμές. Επειδή οι διαφορετικές τιμές του μπλε έχουν αρκετά μεγάλη αντίθεση κάνουν όλο το σχέδιο οπτικά ελκυστικό.

Copimaj Interactive * Agentie Interactiva
Η χρήση χρωμάτων με μικρή απόκλιση στην τιμή στο φόντο αυτής της σελίδας έχουν μετατρέψει το φόντο σε ζωντανή εικόνα γεμάτη κίνηση (σε συνδυασμό πάντα με το συνολικό σχέδιο).

Welcome to Whoseview.com
Το κόκκινο σε αυτή τη σελίδα έχει μικρότερη τιμή από το ανοικτό μπλε, που με τι σειρά του έχει μικρότερη τιμή από το λευκό.

Colourpixel
Το ανθρώπινο μάτι έχει τη δυνατότητα να εντοπίσει τις διαφορετικές τιμές ακόμα και στις πολύ κοντινές αποχρώσεις

Τόνοι

Οι τόνοι δημιουργούνται όταν προσθέτουμε γκρι σε μια απόχρωση.

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

Παραδείγματα

Lakeside Heritage Society
Οι τόνοι σε αυτή τη σελίδα την κάνουν να μοιάζει πεπαλαιωμένη

brightkite.com
Αυτή η ιστοσελίδα είναι σχεδιασμένη με συνδυασμούς διάφορων τόνων, σκιών και αποχρώσεων του μπλε.

Marcel Müller blog
Οι τόνοι μπορούν να αναδειχτούν καλύτερα πλαισιώνοντας τους με γκρι.

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

Web Design and Development in Greenville
Ένα υπέροχο παράδειγμα για το πως οι καθαρές αποχρώσεις μπορούν να ξεχωρίσουν σε αντίθεση με ένα φόντο που έχει πολλούς όμοιους τόνους.

MetaLab: We make interfaces
Ορισμένα χρώματα που θα θεωρούμε γκρι, στην πραγματικότητα είναι τόνοι άλλων χρωμάτων. Στο παράδειγμα μας το φόντο είναι μπλε αλλά με πάρα πολύ γκρι μέσα.

Σκιές

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

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

Παραδείγματα

Jonathan Moore
Η ιστοσελίδα του Jonathan Moore έχει μεγάλη ποικιλία από μοβ σκιές στο φόντο.

David Vuu
Μερικές φορές ο συνδυασμός πολλών σκιών μαζί παράγει πολύ ωραία αποτελέσματα

Alilot.co.il
Ένας αποτελεσματικός συνδυασμός σκιών και tints, ειδικά στην περιοχή της επικεφαλίδας

Skipvine
Ακόμα ένα φόντο που συνδυάζει αρκετές σκιές (και tints) για τη δημιουργία του gradient

Stuff and Nonsense
Ο συνδυασμός των σκιών μέσα στο texture κάνει αυτή τη σχεδίαση λίγο ποιο ενδιαφέρουσα.

Tints

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

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

Παραδείγματα

Caio Cardoso
Η ιστοσελίδα Caio Cardoso έχει μια μεγάλη ποικιλία από πράσινα tints στο φόντο και σε άλλα στοιχεία της σχεδίασης

Fernando Silanes
Τα μπλε tints από αυτή την ιστοσελίδα δημιουργούν ένα απαλό σχέδιο.

Création de site sur mesure
Τα μπλε tints είναι επίσης δημοφιλή στη σχεδίαση του ουρανού και μοτίβα που έχουν ως θέμα τη φύση.

Small White Bear
Τα tints είναι επίσης δημοφιλή σε σχέδια που μοιάζουν με νερομπογιές

I am Garth
Η ανάμιξη των tints μπορεί να δώσει πολύ ωραία gradients

Σύνοψη

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

  • Απόχρωση : είναι το χρώμα (μπλε, πράσινο, κόκκινο, κα.)
  • Χρώμα : είναι η καθαρότητα του χρώματος (Μια απόχρωση με το μέγιστο βαθμό χρώματος δεν έχει καθόλου μαύρο, λευκό ή γκρι μέσα)
  • Κορεσμός : αυτός ο όρος αναφαίρετε στο πόσο δυνατό ή αχνό είναι ένα χρώμα (ο υψηλός βαθμός κορεσμού είναι ένα έντονο χρώμα)
  • Τιμή : Αναφέρετε στο πόσο ανοιχτόχρωμη ή σκουρόχρωμη είναι μια απόχρωση (τα ανοιχτά χρώματα έχουν υψηλή τιμή)
  • Τόνος : οι τόνοι δημιουργούνται με την ανάμιξη γκρι στα χρώματα.
  • Σκιές : οι σκιές δημιουργούνται με την ανάμιξη μαύρου στα χρώματα.
  • Tints : τα tints δημιουργούνται με την ανάμιξη λευκού στα χρώματα.

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



11 Σεπτεμβρίου 2010

[…] This post was mentioned on Twitter by Web Resoures.eu, Web Resoures.eu. Web Resoures.eu said: Θεωρία των χρωμάτων [Μέρος 2ο] : Κατανόηση των εννοιών και της ορολογίας : http://j.mp/918Czw […]




7 Σεπτεμβρίου 2011

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




8 Σεπτεμβρίου 2011

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


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php