Δημιουργία και εφαρμογή φυσικών υφών
Οι υφές κάνουν μια ιστοσελίδα να αισθάνεται απτή.
Δίνουν στο περιεχόμενο μια σχέση με τον φυσικό κόσμο, μια αίσθηση τόπου και μια πραγματικότητα που μπορούν να αφορούν οι άνθρωποι.
Δυστυχώς, η προσομοίωση των φυσικών υφών δεν είναι τόσο απλή όσο η λήψη μιας φωτογραφίας ή η λειτουργία μερικών φίλτρων του Photoshop.
Κάποιος πρέπει να συνδυάζει τυχαίο θόρυβο και αναγνωρίσιμα μοτίβα, προσπαθώντας για ομοιότητες και όχι καθαρή επανάληψη.
Εδώ, θα συζητήσουμε τι δίνει υφή σε μια βιολογική ποιότητα και θα δούμε τεχνικές για τη δημιουργία και την εφαρμογή φυσικών υφαντών υφασμάτων και απλών πλακιδίων.
Αίσθηση της αφής μέσω της όρασης
Μια "υφή" είναι η επιφάνεια μιας φυσικής ουσίας ή αντικειμένου. Όπως το βλέμμα, η αίσθηση της αφής μας βοηθά να κατανοήσουμε τα αντικείμενα. Οι σκληρές, ομαλές, κηλιδωμένες και εύθρυπτες είναι υφές και λένε σε κάποιον τι είναι κατασκευασμένο ένα αντικείμενο, όπου υπήρξε και αν σχετίζεται με κάτι άλλο.
Στο διαδίκτυο, η αίσθηση της αφής ενός ατόμου περιορίζεται στη συσκευή εισόδου του. Αλλά δεν πρέπει όλοι οι ιστοχώροι να "αισθάνονται" το ίδιο. Με βάση την εμπειρία τους από το χειρισμό καθημερινών αντικειμένων, οι άνθρωποι συνδέουν ορισμένες εμφανίσεις με ορισμένες υφές. Στην ψηφιακή τέχνη, θα μπορούσε κανείς να πει ότι η υφή είναι το πώς κάτι "αισθάνεται" στα μάτια του.
Ενώ οι σύγχρονοι επεξεργαστές εικόνας καθιστούν την δημιουργία υφής εύκολη, δεν είναι κάθε υφή ένας σίγουρος νικητής. Η δημιουργία μιας φυσικής εμφάνισης υφής είναι ένα δύσκολο έργο που αναμιγνύει το μοτίβο, το χάος και τη χρήση για να δημιουργήσει χαρακτήρα.
Οι φυσικές υφές έχουν ένα μέτρο τυχαίας
Πολλές υφές πέφτουν ανάμεσα σε δύο άκρα: κανονικά μοτίβα και τυχαίο θόρυβο. Οι υφές που βασίζονται σε μοτίβα δεν προκαλούν συγνώμη για την εμφάνιση τεχνητών. Μπορούν να αποτελούνται από ένα γνωστό σύμβολο ή κείμενο και πάντα έχουν μια προβλέψιμη διάταξη.
Πάνω, δείγματα πλακιδίων.
Στο άλλο άκρο, οι υφές που βασίζονται στο θόρυβο ενσωματώνουν τυχαία στατική. Είναι εύκολο να δημιουργηθούν - το Photoshop έχει το δικό του φίλτρο "Προσθήκη θορύβου" και είναι εύκολο να δημιουργήσει κεραμίδια επειδή δεν διαθέτουν χαρακτηριστικά που φαίνονται περίεργα όταν κόβονται.
Πάνω, δείγματα θορυβώδους υφής.
Οι φυσικές υφάνσεις κάθονται κάπου ανάμεσα στα κανονικά σχέδια και τον τυχαίο θόρυβο.
Πάνω, μια ποικιλία υφασμάτων αναμιγνύει μοτίβα και θόρυβο σε διάφορους βαθμούς.
Ενώ τίποτα δεν είναι λάθος είτε με ακραίες, πολλές καλές υφές έχουν τα χαρακτηριστικά και των δύο. Σε φυσικά αναζητούμενες υφές, οι ραφές είναι απόντες ή δύσκολο να εντοπιστούν και δεν μπορούμε να εντοπίσουμε τυχόν μοτίβα σε επαναλαμβανόμενα κεραμίδια. Η εμφάνισή τους είναι τόσο ξεχωριστή και αποτελεσματική όσο κάθε κανονικό μοτίβο, αλλά λιγότερο εμφανής.
Οι "οργανικές" υφές έχουν το σωστό συνδυασμό θορύβου και σχεδίου.
Ορθολογιστικό χάος, οργισμένος θόρυβος
Στο πλαίσιο της υφής, ο "θόρυβος" αναφέρεται σε ακανόνιστες μεταβολές σε μια ομάδα εικονοστοιχείων. Οι κόκκοι του κινηματογράφου, τα τεχνουργήματα χαμηλού φωτισμού και η ακτινοβολία είναι τρεις συνήθεις τύποι θορύβου που, επιθυμητά ή όχι, απαντώνται συχνά σε πολύπλοκες εικόνες.
Ο θόρυβος της υφής είναι αυτό που κάνει τις φυσικές επιφάνειες φυσικές. Αλλά δεν είναι απλώς στατική. Αντίθετα, ο θόρυβος της υφής εξισορροπεί το χάος και την τάξη.
Πάνω, ένα και μόνο γεωμετρικό σχήμα που επαναλαμβάνεται πολλές φορές δημιουργεί ένα μοτίβο. Στα αριστερά, το σχήμα ποικίλει μόνο στην τοποθέτηση: οι σειρές δεν είναι αρκετά ομοιόμορφες.
Οι άλλες λήψεις δείχνουν αλλαγές στη γωνία, την πυκνότητα και το μέγεθος του σχήματος. Οι υφές που κατασκευάζονται από αυτές τις παραλλαγές σχήματος θα φαινόταν πιο χαοτική - αλλά όλες οι υφές θα διατηρούσαν τον μοναδικό χαρακτήρα του πρωτότυπου, επειδή οι παραλλαγές βασίζονται στο ίδιο βασικό σχήμα.
Φυσικά, το αποτέλεσμα εξακολουθεί να φαίνεται τεχνητό. Οι εμφανείς επαναλήψεις των υφασμάτων που βασίζονται στο θόρυβο καταστρέφουν την επίδραση επειδή οι άνθρωποι είναι πολύ καλοί στην αναγνώριση των μοτίβων. Οι υφές στον πραγματικό κόσμο έχουν διαφορές στο σχήμα, το χρώμα και το βάθος.
Πάνω, οι υφές του πραγματικού κόσμου εμφανίζουν τόσο θόρυβο όσο και επανάληψη. Το Burlap, το ροζ γρανίτη και το χαρτί με κερί έχουν τα δικά τους "κανονικά ακανόνιστα" σχέδια, αλλά το καθένα είναι ακόμα διαφορετικό από τα άλλα.
- Με τις προβλέψιμες οριζόντιες και κατακόρυφες γραμμές, η λωρίδα είναι η πιο κανονική. Αλλά οι γραμμές δεν είναι τέλειες. Ελαφρές μεταβολές στον τόνο και την κατεύθυνση διατηρούν το μοτίβο από το να φαίνεται τεχνητό.
- Οι μαρκαδόροι στο γρανίτη δεν κατανέμονται ομοιόμορφα. Βλέποντας την ανομοιομορφία μέχρι το κλείσιμο είναι δύσκολο. Το χαρακτηριστικό γίνεται πιο εμφανές όταν παρατηρείται σε μια ευρεία περιοχή.
- Το κερί χαρτί έχει τόσο τη μικρότερη αντίθεση όσο και τη μικρότερη προσωπικότητα. Μερικές μάζες σκούρων αποχρώσεων το κρατούν από τυχαίο θόρυβο.
Κάθε υφή έχει ορισμένα χαρακτηριστικά - είτε pockmarks, ράβδους, κηλίδες ή rills-που το καθιστούν μοναδικό. Παραλλαγές αυτών των χαρακτηριστικών το κάνουν να λειτουργήσει.
Πάνω, μια μεταλλική υφή ενσωματώνει αλληλοεπικαλυπτόμενα σχήματα χωρίς ραβδώσεις σε καμία συγκεκριμένη σειρά, αλλά διατηρεί τον ξεχωριστό της χαρακτήρα. (Ευγένεια υφής Το Design Mag .)
Βάθος και Αντίθετο Εύρος από Murmurs έως Screams
Μια βασική μεταβλητή οποιασδήποτε φυσικής υφής είναι το βάθος. Η "καμπυλότητα" μιας υφής παρέχει μια αίσθηση μαγείας περισσότερο από το χρώμα ή το μέγεθος. Αλλά το βάθος προσθέτει επίσης την αντίθεση, η οποία προσελκύει την προσοχή και μπορεί να υποβαθμίσει την αναγνωσιμότητα.
Μια ουρλιάζοντας υφή στο παρασκήνιο θα αυξήσει την ένταση του ίδιου του περιεχομένου. Σε ποιο σημείο είναι πολύ δυνατό; Αυτό εξαρτάται από τη δύναμη του περιεχομένου και τη διάθεση του κοινού.
Αν μια δυνατή υφή ταιριάζει με το θέμα, τότε συμβάλλει στη διάθεση. Αλλά αν παρεμποδίζει την αναγνωσιμότητα, τότε έχετε ένα πρόβλημα.
Ποιο από τα πιο πάνω γραπτά είναι πιο εύκολο να διαβαστεί; Ποια υφή αντανακλά καλύτερα το μήνυμα στη γραφή; Μπορεί να υπάρχουν περισσότερες από μία σωστές απαντήσεις, αλλά υπάρχει μόνο μία κατευθυντήρια γραμμή: κατά την ανάμειξη των υφασμάτων και του περιεχομένου, ιδίως του περιεχομένου κειμένου, βεβαιωθείτε ότι οι άκρες του περιεχομένου παραμένουν ορατές.
Μιλώντας για άκρες, για επιπλέον ρεαλισμό, δώστε προσοχή στο σημείο όπου τελειώνει η υφή. Για παράδειγμα, οι λεπτές ή λιμνές υφές δεν χρειάζεται να τελειώνουν σε τέλεια γραμμή. Αντ 'αυτού, αφήστε τους να εκραγούν ή να καταρρεύσουν στην επόμενη επιφάνεια. Το τέχνασμα είναι να σκεφτόμαστε τα πάντα στη σελίδα ως επιφάνεια με υφή, ακόμα κι αν είναι ένα απλό συμπαγές χρώμα.
Υφές που γίνονται εμφανείς με πηγές φωτός
Δεν είναι κάθε υφή που χρειάζεται βαθιές ρωγμές για να φανεί απτή. Εξετάστε το γυαλιστερό χρώμα. Χωρίς ράβδους ή χτυπήματα, η αίσθηση του σμάλτου από το σμάλτο προέρχεται από τη λάμψη του.
Οι παραπάνω υφές δείχνουν πως η επιφάνεια ενός αντικειμένου δεν πρέπει να είναι τραχύ. Μπορεί να μην λειτουργούν ως επαναλαμβανόμενα κεραμίδια, αλλά η γυαλάδα, η αντανάκλαση και η διαφάνεια παρέχουν οπτικές ενδείξεις για το τι μπορεί να νιώθει ένα αντικείμενο στο πραγματικό κόσμο.
Το γλυκό σημείο ανάμεσα στο χαρακτήρα και το μέγεθος του αρχείου
Ένα κοινό πρόβλημα με οποιαδήποτε φυσική υφή είναι πώς να το επαναλάβετε. Όταν οι άνθρωποι εντοπίζουν την επανάληψη, κάθε ψευδαίσθηση της πραγματικότητας καταστρέφεται. Η πιο εύκολη λύση είναι να χρησιμοποιήσετε μεγαλύτερα - και επομένως λιγότερα - κεραμίδια. Με περισσότερες παραλλαγές, η επανάληψη των κηλίδων γίνεται πιο δύσκολη.
Όπως φαίνεται παραπάνω, όσο πλατύτερα είναι τα κεραμίδια, τόσο μικρότερη είναι η πιθανότητα οι άνθρωποι να εντοπίσουν την επανάληψη. Δυστυχώς, τα μεγαλύτερα πλακίδια δημιουργούν επίσης μεγαλύτερα αρχεία, τα οποία επιβραδύνουν τη φόρτωση σελίδων. Για πολλούς ανθρώπους, ένα αιωρούμενο σημάδι φόρτωσης σκοτώνει τη διάθεση τόσο πολύ όσο βλέπει άκρη κεραμιδιού.
Μια άλλη λύση είναι να μειωθούν τα σχήματα στο επιμέρους πλακίδιο.
Όπως βλέπουμε, η επανάληψη των λεπτότερων υφών έχει λιγότερες πιθανότητες να εντοπιστούν. Όσο πιο λεπτή είναι η υφή, τόσο μικρότερος είναι ο χαρακτήρας που μπορείτε να δώσετε. Η λεπτότερη υφή θα είναι καθαρό θόρυβο - αλλά αυτό δεν σας βοηθάει. Οι φυσικές υφές προκαλούν πάντα μια γνωστή επιφάνεια.
Συνοψίζοντας, οι φυσικές υφές πρέπει:
- Έχετε αρκετή προσωπικότητα ότι δεν είναι απλά τυχαίος θόρυβος. Αυτό σημαίνει ότι τα σχήματα, ή "συστάδες" εικονοστοιχείων, θα πρέπει να είναι παρόμοια αλλά όχι ταυτόσημα.
- Έχετε αρκετή προσωπικότητα ότι μια σκηνή ή διάθεση είναι εγκατεστημένη αλλά όχι τόσο πολύ που οι χρήστες αποσπούν την προσοχή από το περιεχόμενο. Αυτό σημαίνει ότι δεν πρέπει να ξεχωρίζουν ξεχωριστές "συστάδες" ή άλλα χαρακτηριστικά όταν βλέπουμε από μακριά.
- Να είστε αρκετά τυχαίοι για να αποφύγετε την επανάληψη. Τα χαρακτηριστικά της υφής δεν πρέπει να αποτελούν ένα μοτίβο που οι άνθρωποι θα μπορούσαν να εντοπίσουν χωρίς να επικεντρωθούν.
Πώς κάνουμε όλα αυτά;
Δημιουργία υφής στο Photoshop
Πολλά προγράμματα επιτρέπουν στους σχεδιαστές να δημιουργήσουν τις δικές τους φυσικές υφές. Και ο ιστός δεν έχει έλλειψη υφής λήψης. Δημιουργώντας τη δική σας υφή μπορεί να είναι μια επιβράβευση, που δεν παραβιάζει τα πνευματικά δικαιώματα εμπειρία που συμβάλλει σε ένα πραγματικά μοναδικό σχεδιασμό.
1. Δημιουργήστε ένα νέο έγγραφο του Photoshop με λευκό φόντο. Για αυτό το παράδειγμα θα το φτιάξουμε 600 x 300 pixels.
2. Γεμίστε το φόντο με μαύρο χρώμα.
3. Τραβήξτε τυχαία λευκά κτυπήματα με την ίδια γενική κατεύθυνση. Σε αυτό το παράδειγμα, χρησιμοποιούμε μια απλή βούρτσα σκληρής ακμής. Διαφορετικές συμβουλές βουρτσών θα δημιουργήσουν διαφορετικά αποτελέσματα. 
4. Χρησιμοποιήστε το εργαλείο μουτζούρας για να κηλιδώσετε τις διαδρομές σε τυχαία θολές άκρες. Μια άκρη με ασαφή άκρα (με σκληρότητα κάτω από 30) λειτουργεί καλύτερα. Ωστόσο, παραμορφώνεται η υφή, τα καλύτερα αποτελέσματα θα έχουν πολλές αποχρώσεις του γκρι. 
5. Μεταβείτε στο στοιχείο Φίλτρο> Θόρυβος> Προσθήκη θορύβου και προσθέστε στατική ανάλογα με το γούστο σας. Στη συνέχεια, επιλέξτε Φίλτρο> Άλλα> Υψηλή διέλευση . Μαζί, αυτά προσθέτουν περισσότερους γκρίζους τόνους (ζωτικής σημασίας για το βήμα 6) και ένα κομμάτι σκουριάς. 
6. Δημιουργήστε ένα επίπεδο χάρτη κλίσης. Αυτό το ειδικό στρώμα εφαρμόζει χρώμα στα υποκείμενα στρώματα με βάση τον τόνο τους. Σε αντίθεση με τις κανονικές κλίσεις, οι οποίες σε εικονοστοιχεία με βάση την τοποθεσία, χρώματα σε pixels, ο χρωματικός χρωματικός χρωματικός χάρτης στο highlights, midtones και σκιές. Χρησιμοποιήστε χαμηλά κορεσμένα χρώματα, ειδικά πράσινα, καφέ και μπλε, για να προσομοιώσετε τα χρώματα της φύσης. 
Πάνω, το αποτέλεσμα της εφαρμογής ενός καφέ και κίτρινο κλίση χάρτη.
7. Περικοπή ενός ενδιαφέροντος μέρους της υφής. Προσπαθήστε να μην χρησιμοποιήσετε περισσότερο από το ήμισυ ολόκληρης της εικόνας. Θα χρησιμοποιήσουμε τα υπόλοιπα σύντομα. 
8. Σημαντικό: Αποθηκεύστε το κομμένο κεραμίδι ως ξεχωριστό αρχείο. Θα χρειαστείτε αργότερα το αρχικό αρχείο.
Οι λεπτομέρειες που παρουσιάζονται εδώ είναι σκόπιμα μεγάλες για να αποδείξουν την τεχνική, αλλά το αποτέλεσμα δεν είναι κακό για μια υφή. Δείτε πώς η διαδικασία λειτουργεί γενικά:
- Οποιοδήποτε μέγεθος θεωρείτε κατάλληλο θα το κάνει. Τα μεγαλύτερα κεραμίδια θα έχουν πιο ρεαλιστικά χαρακτηριστικά αλλά θα είναι μεγαλύτερα σε μέγεθος αρχείου. Πάντα αρχίζετε πολύ μεγαλύτερα από όσα χρειάζεστε, επειδή οι άκρες μιας υφής που έγιναν από το μηδέν σπάνια ταιριάζουν με τις άκρες του καμβά.
- Δημιουργήστε μια σειρά σημείων με το ίδιο εργαλείο ή εργαλεία. Η ουσία μιας υφής δημιουργείται με την ανάληψη μιας παρόμοιας τεχνικής ή δύο και τη χρήση τους πολλές φορές.
- Προσθέστε ένα μικρό χάος με τα φίλτρα του Photoshop.
- Προσθήκη χρώματος: χάρτες κλίσεων για έμφαση στο βάθος και σημεία τυχαίου χρώματος για ψεκαστήρες. Χρησιμοποιήστε χαμηλά κορεσμένα χρώματα, ειδικά πράσινα, καφέ και μπλε, για να προσομοιώσετε τα χρώματα της φύσης.
Κάντε πλακάκια χωρίς ραφή
Φυσικά ή όχι, οι περισσότερες υφές και σχέδια θα πρέπει να είναι απρόσκοπτα. Δηλαδή, οι επισκέπτες δεν θα πρέπει να βλέπουν τις άκρες του επαναλαμβανόμενου κεραμιδιού. Πώς το κάνουμε αυτό; Το ίδιο το πλακίδιο παρέχει τη λύση.
9. Επάνω, η εικόνα χωρίζεται κατά μήκος των μπλε και κόκκινων γραμμών. Επειδή τα εικονοστοιχεία κατά μήκος της διαίρεσης ταιριάζουν ήδη, μετακινώντας τα προς κάθε πλευρά εξασφαλίζει ότι τα αριστερά και τα δεξιά άκρα θα ταιριάξουν. Φυσικά, το πρόβλημα εξακολουθεί να υπάρχει, αλλά είναι ευκολότερο να διορθωθεί.
10. Αυτό το τετράγωνο κεραμίδι προέρχεται από μια μεγαλύτερη εικόνα. Πάνω, η διάσπαση κεραμιδιών γεμίζεται με υλικό από την πλήρη εικόνα. Επαναλάβετε το βήμα 8 για να στερεώσετε την οριζόντια ραφή (στο επάνω και το κάτω μέρος της εικόνας).
Η τελική ιδιότητα
Η απλή υφή που δημιουργήθηκε παραπάνω έχει ένα ελαφρύ ελάττωμα: επειδή σχεδιάστηκε για να επιδείξει τη διαδικασία, τα χαρακτηριστικά της επαναλαμβάνονται πολύ συχνά.
Τα χαρακτηριστικά της φυσικής υφής είναι συνήθως λιγότερο από το ένα δέκατο του συνολικού κεραμιδιού. Δηλαδή, για ένα κεραμίδι μέτρησης 500 x 100 εικονοστοιχεία, η μεγαλύτερη ρυτίδωση, ραβδώσεις ή άλλο σήμα θα μετρά 50 x 10 pixel ή λιγότερο.
Οι καλά σχεδιασμένες υφές απαιτούν ένα ακόμα χαρακτηριστικό: το χρόνο. Χωρίς να κατεβάσετε ένα freebie, θα πρέπει να αφιερώσετε χρόνο για να αναπτύξετε και να τελειοποιήσετε μια μεγάλη υφή. Αλλά μην το σκέφτεσαι σαν δουλειά. Είναι μέρος της διαδικασίας, φυσικά.
Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Ben Gremillion. Ο Μπεν είναι ελεύθερος επαγγελματίας Σχεδιαστής ιστοσελίδων ο οποίος επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.
Πώς δημιουργείτε φυσικές υφές; Μοιραστείτε τις ιδέες σας στα παρακάτω σχόλια.