Ο οδηγός του σχεδιαστή για συμβολισμό Pixel
Τα Pixel-τέλεια εικονίδια και η τυπογραφία ξεχωρίζουν στο πλήθος online. Προφανώς όλοι θέλουμε να αγωνιστούμε για τέτοιες εκλεπτυσμένες εργασίες, αλλά μερικές φορές ακόμη και μετά από την προσπάθεια καταλήγουμε ακόμα με κάτι λίγο ... λιγότερο. Το Pixel Hinting είναι μια από τις δεξιότητες που παίρνει ένα αυτόματο χαρακτηριστικό και βελτιώνει τα αποτελέσματά του. Παρά την εξαιρετικά υψηλή ανάλυση των οθονών εμφάνισης του αμφιβληστροειδούς της Apple - πρέπει ακόμα να "ψεύδουμε" τις λεπτές καμπύλες, ώστε να μην καταλήξουμε σε ένα pixelated χάος.
Πολλοί σχεδιαστές και προγραμματιστές κινούνται περισσότερο προς τις προσεγγίσεις που βασίζονται στον SVG και στον φορέα, τώρα. με την υποστήριξη να βελτιώνεται μόνο την ημέρα. Ακόμα κι έτσι, οι λύσεις που βασίζονται σε διανύσματα έχουν πολύ δρόμο να διανύσουν πριν είναι αρκετά ώριμες για χρήση στην παραγωγή. Το SVG είναι ιδανικό για την εμφάνιση διανυσματικών σχημάτων, αλλά όχι τόσο ζεστό για την αλλαγή μεγέθους αυτών των σχημάτων. Έτσι, όπως όλα τα άλλα εκεί έξω, υπάρχει ένας χρόνος και τόπος για κάθε λύση.
Τι είναι τα διανύσματα;
Οι φορείς διαδραματίζουν ουσιαστικά τα αποτελέσματα της μαθηματικής αναπαράστασης ενός σχήματος. Όταν βλέπετε κάτι στην οθόνη σας, αυτό οφείλεται στο γεγονός ότι ο υπολογιστής σας αποδίδει τα αντικείμενα αυτά και τα συνδέει με τα εικονοστοιχεία στην οθόνη σας. Με αυτόν τον τρόπο, ο υπολογιστής σας έχει επίσης λάβει αποφάσεις σχετικά με το τι πρέπει και δεν πρέπει να εμφανίζεται ως ολόκληρα εικονοστοιχεία. Για παράδειγμα, το κεφαλαίο γράμμα "D" έχει μια απόλυτα ευθεία γραμμή και μια κυρτή.
Όπως μπορείτε να δείτε, χωρίς να έχετε αλλοιώσεις, η καμπύλη γραμμή στο "D" είναι αρκετά εικονογραφημένη. Επομένως, για να αντισταθμίσουμε, όταν διανέμονται τα σχήματα διανυσμάτων, είναι συνήθως αντι-αλλιώς για να παρέχουν μια πιο ... στιβαρή εμφάνιση. Αντί να εμφανίζονται μόνο εικονοστοιχεία που εμπίπτουν πλήρως στο περίγραμμα του διανύσματος, τα εικονοστοιχεία βαθμιαία σκιάζονται. Αυτό περιπλέκει τον εγκέφαλό σας να βλέπει μια ομαλότερη γραμμή σε καμπύλα σχήματα που δεν κουμπώνουν τέλεια στο πλέγμα πίξελ.
Πάνω μπορείτε να δείτε πώς δίνεται η απόδοση του "D" που ονομάζεται ημι-εικονοστοιχεία για να βοηθήσει να αφαιρέσετε την οδοντωτή pixelation. Ωστόσο, αυτό το ίδιο χαρακτηριστικό παρουσιάζει επίσης ένα πρόβλημα: οι υπολογιστές είναι φοβεροί στο να διαπιστώσουν τι είναι ελκυστικό. Έτσι, προσθέτοντας αυτά τα μισά pixel κάνει τις στρογγυλεμένες γωνίες να φαίνονται φανταστικές, κάνει επίσης την εσωτερική γραμμή επάνω / κάτω να φαίνεται θολή. Η αυτόματη αντι-ψευδαίσθηση που εμφανίζεται όταν διαμορφώνεται ένα σχήμα φορέα καταλήγει να κάνει τα περισσότερα μέρη των σχημάτων και της τυπογραφίας να φαίνονται εξαιρετικά, αλλά αφήνει τους άλλους σε ακόμη χειρότερη ποιότητα από ό, τι ξεκίνησε με.
Γεια σας, υπαινιγμός εικονοστοιχείων.
Τώρα που έχετε ένα σύντομο υπόβαθρο για τα σχήματα διανυσμάτων και πώς λειτουργούν, ας πηδήξουμε στην πραγματική δουλειά. Ο συμβολισμός των pixel περιλαμβάνει τη μετακίνηση των σημείων αγκύρωσης του φορέα ώστε να στηρίζεται στα σύνορα των εικονοστοιχείων με έναν πιο αισθητικό τρόπο. Κάνοντας αυτές τις ευθείες γραμμές πιο τέλειες, αφήνοντας ακόμα τα μισά-pixels στις καμπύλες. Συνηθέστερα, η χρήση εικονοστοιχείων χρησιμοποιείται για την τυπογραφία και τα σχήματα για εικόνες ράστερ (λογότυπα, εικονίδια, επωνυμία κ.λπ.). Τώρα, το πιο σημαντικό, για να ρυθμίσετε σωστά το φορέα σας πρέπει να είναι στο μέγεθος και το σχήμα που θέλετε. Μόλις το εικονοστοιχείο σας υποδείξει το έργο σας, περιστρέφοντας ή αλλάζοντας το μέγεθος, θα μπορούσε - και μάλλον θα έπρεπε - να πετάξει όλα αυτά που λειτουργούν μακριά με αυτόματη αντι-αλλιάζοντας πάλι. Πριν ξεκινήσουμε βεβαιωθείτε ότι έχετε προσαρμόσει τις παρακάτω ρυθμίσεις (θα χρησιμοποιήσω το Photoshop για αυτή την εργασία):
- Ενεργοποιήστε το πλέγμα των εικονοστοιχείων (Προβολή> Εμφάνιση> Πλέγμα, επίσης βεβαιωθείτε ότι τα Έξτρα ελέγχονται πάνω από το μενού Εμφάνιση)
- Βεβαιωθείτε ότι το πλέγμα σας έχει γραμμή κάθε 10 pixel, με 10 υποδιαιρέσεις. Ή κάτι παρόμοιο, ώστε να υπάρχει μια γραμμή μεταξύ κάθε εικονοστοιχείου.
- Απενεργοποιήστε την προσθήκη (προβολή> απενεργοποίηση επαφής). Δεν θέλουμε τα σημεία αγκυροβόλησης να χτυπάνε με αυξήσεις 1px, θέλουμε να μετακινήσουμε σημεία μέσα σε εικονοστοιχεία.
Pixel υπονοώντας τυπογραφία
Η διαδικασία για να κάνεις σχήματα εναντίον τυπογραφίας είναι ελαφρώς διαφορετική, γι 'αυτό θα σε οδηγήσω και στα δύο. Στην ιδανική περίπτωση με την τυπογραφία, θέλετε να διαγράψετε τον τύπο σας πριν ή κατά τη διάρκεια της διαδικασίας υπονόμευσης. Ανεξάρτητα από αυτό, ο εικονοστοιχείο θα πρέπει να είναι ένα από τα τελευταία πράγματα που κάνετε.
Κατ 'αρχάς, επιλέξτε την τυπογραφία που θέλετε να υποδείξετε εικονοστοιχεία και δημιουργήστε ένα αντίγραφο του στρώματος και στη συνέχεια μετατρέψτε το στρώμα σε σχήμα.
Μπορείτε να δείτε ότι το κείμενο πέφτει αδέξια από το πλέγμα, τόσο στον οριζόντιο όσο και στον κατακόρυφο άξονα. Για να επιδιορθώσουμε αυτό το πρόβλημα, θα πιάσουμε απαλά τα σημεία αγκύρωσης κάθε γράμματος μέχρι να ευθυγραμμιστούν πιο κοντά με το πλέγμα πίξελ που έχει σχεδιαστεί. Ο στόχος είναι να βρεθούν οι γραμμές σχήματος κοντά, αν όχι άμεσα, στις γραμμές πλέγματος. Μεγέθυνση για να ωθήσετε τα σημεία αγκύρωσης με μεγαλύτερη ακρίβεια. Κάνοντας αυτό, συχνά σμίκρυνση για να εξασφαλίσετε ότι οι ρυθμίσεις σας φαίνονται εντάξει.
Δεν θέλετε να εναρμονίζεστε με ακρίβεια στο πλέγμα, καθώς αυτό απομακρύνει τα πλεονεκτήματα της κατά της αλλοιώσεως. Αντ 'αυτού, προσπαθήστε απλά να κρατήσετε τα πράγματα συνεπή - επιτρέψτε μόνο τα μισά εικονοκύτταρα στη μία πλευρά του κάθε άξονα. Για παράδειγμα, επιτρέπω πάντα τα μισά εικονοστοιχεία στη δεξιά και την κορυφή των γραμμάτων, ενώ αναγκάζετε τα αριστερά και τα κάτω άκρα να ξεκαθαρίσουν με το πλέγμα.
Όπως μπορείτε να δείτε, το "get in" έχει προσαρμοστεί περίπου, ενώ το "touch" παραμένει όπως είναι. Ακριβώς όπως η πυκνότητα, ο εικονοστοιχείο είναι πολύ περισσότερο από ένα σκάφος παρά από μια επιστήμη. Παίρνει έντονο μάτι για να δούμε και να διακρίνει αν η εργασία φαίνεται καλύτερα ή χειρότερη μετά την προσαρμογή. Μην αποθαρρύνεστε αν βρείτε τυπογραφικά εικονοστοιχεία που υποδηλώνουν τραχύ, επαναληπτικό και συνεχίστε να εργάζεστε με αυτό. Αν το αποτέλεσμά σας εξακολουθεί να έχει υπο-par, μπορείτε πάντα να διαγράψετε το στρώμα και να αντιγράψετε φρέσκο από το πρωτότυπο ξανά. Χρειάζεται λίγος χρόνος για να πάρετε την τυπογραφία, ιδίως για να φανεί μεγάλη, απλά συνεχίστε και αργά ή γρήγορα η σκληρή δουλειά σας θα αποδώσει.
Pixel υποδηλώνει διανυσματικά σχήματα
Γενικά, τα σχήματα συμβολής εικονοστοιχείων προορίζονται για εικονίδια ή λογότυπα. Και πάλι, θέλετε να βεβαιωθείτε ότι το σχήμα σας έχει το μέγεθος και την περιστροφή που θέλετε πριν ξεκινήσετε καθώς η προσαρμογή αργότερα θα μπορούσε να πετάξει όλη τη σκληρή δουλειά σας. Η ρύθμιση των σχημάτων είναι πολύ ευκολότερη και απαιτεί λιγότερη προσοχή για τις εγγενείς λεπτομέρειες. Τούτου λεχθέντος, τα πιο σύνθετα σχήματα χρειάζονται περισσότερο χρόνο και είναι πιο δύσκολο να προσαρμοστούν, οπότε είναι καλύτερο να ξεκινήσετε με κάτι απλό.
Πάνω, μπορείτε να δείτε ότι το βέλος και ο κύκλος μας κάθονται λίγο μακριά, όπου θα τους θέλαμε. Τα ημι-εικονοστοιχεία που δημιουργούνται από την αντι-αλίευση προκαλούν ολόκληρο το σχήμα να φαίνεται θολή ως αποτέλεσμα. Ας ρίξουμε λοιπόν τα πάντα για να πέσουμε στο πλέγμα λίγο καλύτερα.
Εκεί πηγαίνουμε! Ρυθμίζοντας τα σημεία αγκύρωσης ώστε να ευθυγραμμιστούν με το πλέγμα, καταλήγουμε με μια πολύ πιο έντονη εικόνα. Είναι σημαντικό να αναφέρουμε ότι επειδή αυτή η εικόνα είναι ένας κύκλος, οι προσαρμογές στο πλάτος έπρεπε επίσης να αντικατοπτρίζονται στο ύψος. Επίσης, μην ξεχάσετε να βεβαιωθείτε ότι το εσωτερικό του σχήματος φαίνεται καλό και συνεκτικό επίσης. Εάν κοιτάξετε την προηγούμενη εικόνα, θα παρατηρήσετε ότι οι εσωτερικές πλευρές του κύκλου δεν είναι αντι-αλλιώς ίδιες.
Συμπερασματικά
Με την παραπάνω εργασία, το αποτέλεσμα είναι μια εικόνα που φαίνεται πιο έντονη και πιο επαγγελματική. Φυσικά, μπορείτε να εφαρμόσετε αυτές τις τεχνικές σε πολύ πιο σημαντικά πράγματα από ένα κουμπί.
Ενώ η αυτόματη αντι-αλίευση που γίνεται από τον υπολογιστή σας φαίνεται αποδεκτή, θα μπορούσε να είναι καλύτερη. Έτσι, όταν πρόκειται για το λογότυπό σας ή για σημαντικά εικονίδια / τυπογραφία σε μορφή ράστερ, η συμβουλή εικονοστοιχείων είναι κάτι περισσότερο από μια εξειδικευμένη εξειδίκευση. μέχρι την ημέρα που χρησιμοποιούμε όλες τις οθόνες υψηλής πυκνότητας, είναι απαραίτητο.