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

01 από 10

Κατανόηση των χρωμάτων και των χρωμάτων Web

Χρώμα βάσης - μουστάρδα κίτρινο. Εικόνα από τον J Kyrnin

Υπάρχουν τέσσερα βασικά σχέδια χρωμάτων που μπορείτε να χρησιμοποιήσετε για μια τοποθεσία Web. Κάθε σελίδα αυτού του άρθρου παρουσιάζει μια εικόνα του συνδυασμού χρωμάτων και πώς μπορείτε να δημιουργήσετε ένα παρόμοιο σχήμα στο Photoshop.

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

02 από 10

Μονοχρωματικό σχέδιο χρώματος στο Web

Μονοχρωματικό σχέδιο χρώματος στο Web. Εικόνα από τον J Kyrnin

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

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

03 από 10

Περισσότερα Μονοχρωματικό Πρόγραμμα Χρώματος Ιστού

Μονοχρωματικό σχέδιο χρώματος στο Web. Εικόνα από τον J Kyrnin

Προστέθηκε ένα τετράγωνο 20% μαύρο για να πάρει περισσότερα χρώματα στο σχέδιο. Η προσθήκη ασπρόμαυρου χρώματος στα χρώματα σας μπορεί να δημιουργήσει ένα νέο χρώμα στην παλέτα σας χωρίς να ανατρέψει τον τόνο της σελίδας.

04 από 10

Αναλογικός χρωματικός κώδικας Ιστού

Αναλογικός χρωματικός κώδικας Ιστού. Εικόνα από τον J Kyrnin

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

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

05 από 10

Περισσότερες αναλογικές χρωμάτων στο Web

Αναλογικός χρωματικός κώδικας Ιστού. Εικόνα από τον J Kyrnin

Προστέθηκε ένα τετράγωνο 20% μαύρο για να πάρει περισσότερα χρώματα στο σχέδιο.

06 από 10

Συμπληρωματικό πρόγραμμα χρωμάτων Web

Συμπληρωματικό πρόγραμμα χρωμάτων Web. Εικόνα από τον J Kyrnin

Συμπληρωματικά σχέδια χρωμάτων, σε αντίθεση με άλλα σχέδια χρωμάτων, έχουν μόνο δύο χρώματα. Το βασικό χρώμα και είναι αντίθετο στον τροχό χρώματος. Το Photoshop καθιστά εύκολο το συμπληρωματικό χρώμα - απλά επιλέξτε την περιοχή χρώματος που θέλετε να συμπληρώσετε και πατήστε Ctrl-I. Το Photoshop θα το μετατρέψει για σας. Βεβαιωθείτε ότι έχετε κάνει αυτό σε ένα διπλότυπο στρώμα, έτσι ώστε να μην χάσετε το χρώμα βάσης σας.

Συμπληρωματικά σχέδια χρωμάτων είναι συχνά πολύ πιο εντυπωσιακά από άλλα σχέδια χρωμάτων, οπότε τα χρησιμοποιείτε με προσοχή. Συχνά χρησιμοποιούνται σε κομμάτια που πρέπει να ξεχωρίζουν.

07 από 10

Περισσότερο Συμπληρωματικό Πρόγραμμα Χρώματος Ιστού

Συμπληρωματικό πρόγραμμα χρωμάτων Web. Εικόνα από τον J Kyrnin

Για να λάβετε αυτήν την έκδοση, πρόσθεσα 50% λευκό στο κάτω μισό των χρωμάτων και 30% μαύρο στο κεντρικό τετράγωνο. Όπως μπορείτε να δείτε, σας δίνει μερικές ακόμα επιλογές αλλά εξακολουθεί να είναι ένα συμπληρωματικό σχέδιο χρωμάτων.

08 από 10

Τρισδιάστατο πρόγραμμα χρώματος στο Web

Τρισδιάστατο πρόγραμμα χρώματος στο Web. Εικόνα από τον J Kyrnin

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

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

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

09 από 10

Περισσότερες πληροφορίες σχετικά με το Triadic Web Color Scheme

Τρισδιάστατο πρόγραμμα χρώματος στο Web. Εικόνα από τον J Kyrnin

Όπως και με τα άλλα παραδείγματα, πρόσθεσα 30% μαύρο τετράγωνο στα χρώματα για να πάρω τις πρόσθετες αποχρώσεις.

10 από 10

Διαφορετικά σχέδια χρωμάτων Web

Διαφορετικά σχέδια χρωμάτων Web. Εικόνα από τον J Kyrnin

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

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