Σκίτσο: Μια ροή εργασίας τέλειου εικονιδίου

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

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

Η λύση μου χρησιμοποιεί μόνο ένα σύμβολο, ένα artboard και μία γραμματοσειρά εικονιδίων. Με αυτό μπορείτε:

  • Δημιουργήστε μια φορητή βιβλιοθήκη εικονιδίων για χρήση σε όλα τα έργα.
  • Περιηγηθείτε στα εικονίδια έξω από το σκίτσο και εισαγάγετε τα εικονίδια, διατηρώντας τις συνδέσεις με το πρωτότυπο έργο τέχνης.
  • Μοιραστείτε και συγχρονίστε τα εικονίδια με τα μέλη της ομάδας.

Και συνέπεια!

Γραμματοσειρές γραμμών: Γρήγορη περίληψη

Πρώτα απ 'όλα, αυτή η ροή εργασίας βασίζεται σε μια στιβαρή και καλά σχεδιασμένη γραμματοσειρά εικονιδίων, όπως η γραμματοσειρά Υλικών Icons της Google ή το Font Awesome. Ή, δημιουργήστε τη δική σας γραμματοσειρά σε Icomoon ή Fontello.

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

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

Αρχίζουμε να χρησιμοποιούμε αυτή τη ροή εργασιών στο Qumu και μας αρέσει πολύ. Ελπίζω και εσύ.

Η ροή εργασίας

Ένας πίνακας τέχνης για να τους κυβερνήσεις όλους.

Κατασκευή του συμβόλου βάσης

Ολόκληρη η βιβλιοθήκη εικονιδίων χρησιμοποιεί ένα σύμβολο βάσης.

  1. Εγκατάσταση γραμματοσειράς εικονιδίου. Επανεκκινήστε το σκίτσο.
  2. Σχεδιάστε ένα τετράγωνο artboard σε ένα αξιοπρεπές μέγεθος.
  3. Τοποθετήστε ένα πλαίσιο κειμένου μέσα του, με τις άκρες να χάνουν στα όρια του artboard.
  4. Ορίστε τη γραμματοσειρά στη γραμματοσειρά σας και εισάγετε τυχόν glyph.
  5. Αποθηκεύστε αυτόν τον πίνακα τέχνης ως ένα σύμβολο που ονομάζεται "glyphicon".

Έτσι, το σύμβολο βάσης έχει ένα πλαίσιο κειμένου σε αυτό. Αυτό περιέχει το προεπιλεγμένο glyph, το οποίο έχω ορίσει ως αστέρι. Ακριβώς για να καταστεί σαφές, αυτό δεν είναι ένα SVG ή PNG γραφικό, αυτό είναι ένα κείμενο-based glyph από μια γραμματοσειρά.

Το glyph και οι σωστές ιδιότητες κειμένου.

Οι ιδιότητες του κειμένου μου:

Ύψος x Πλάτος: 17px *
Αλλαγή μεγέθους: Τοποθετήστε το πλωτήρα στη θέση του
Μέγεθος γραμματοσειράς: 17px *
Ύψος γραμμής: 17px *
Πλάτος: Αυτόματα και
Ευθυγράμμιση: Κέντρο
Χρώμα κειμένου: Μαύρο
* Ορισμός με βάση το προτιμώμενο μέγεθος

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

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

Η κινούμενη εικόνα παραπάνω δείχνει την πρόσφατα τοποθετημένη παρουσία συμβόλου "Glyphicon". Αντιγράφω και επικολλώνω ένα νέο glyph στο πεδίο "override" στο δεξί παράθυρο. (Θα μάθετε πώς έχω glyphs σε ένα λεπτό).

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

Χρησιμοποιούμε αυτό το σύμβολο ως σύμβολο "Βάσης" για όλα τα εικονίδια. Έτσι, ένα Σύμβολο είναι απαραίτητο για όλα τα εικονίδια σας να ζουν μέσα, whatsmore τα εικονίδια σας αποθηκεύονται εξωτερικά στο έργο σας που είναι καλύτερα με πολλούς τρόπους.

Αυτό αποτελεί τη βασική αρχή της μεθόδου μου. Τα οφέλη από αυτό είναι:

  • Διαχείριση μόνο μιας βάσης Σύμβολο. Κυριολεκτικά ένα. Αυτό μπορεί να αντιγραφεί μεταξύ των έργων πολύ εύκολα.
  • Δεν χρειάζεται να εισαγάγετε SVG / PNG και τοποθετήστε τα χειροκίνητα. Είναι τέλεια τοποθετημένο στη μέση του artboard κάθε φορά.
  • Επειδή όλα τα εικονίδια αποθηκεύονται εξωτερικά στο αρχείο γραμματοσειράς, το έργο σας παραμένει πολύ καθαρό και όλοι μπορούν να μοιράζονται το ίδιο πακέτο.

Επεξεργασία: Οι παρακάμψεις έγιναν ακόμα ευκολότερες

Συμβουλή: Εάν χρησιμοποιείτε τη γραμματοσειρά Εικονίδιο υλικού, ονομάζεται κάθε glyph. Έτσι, μπορείτε πραγματικά να πληκτρολογήσετε αυτό ως override. Δείτε μερικά παραδείγματα παρακάτω.

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

'Διαγράφω''Ξεκάνω''Μερίδιο'
Εάν ένα εικονίδιο υλικού έχει πολλές λέξεις στο όνομα του (π.χ. "προσθέστε το καλάθι αγορών"), χρησιμοποιήστε τις υποσημειώσεις ("add_shopping_cart"). Τότε θα εμφανιστεί ωραία.

Fontbook: Το εύχρηστο πρόγραμμα περιήγησης glyph

Για να χρησιμοποιήσετε τη ροή εργασίας, πρέπει να είστε σε θέση να επικολλήσετε το σωστό Glyph στο πλαίσιο override του Symbol. Το Σκίτσο δεν έχει τρόπο περιήγησης των glyphs όπως άλλες εφαρμογές. Αλλά υπάρχει ένα εύχρηστο πρόγραμμα περιήγησης Glyph ενσωματωμένο σε κάθε Mac. Το λεγόμενο Fontbook του.

Το Βιβλίο γραμματοσειρών είναι το ιδανικό πρόγραμμα περιήγησης για glyphs γραμματοσειράς εικονιδίων

Ξεκινήστε το εύχρηστο πρόγραμμα περιήγησης glyph

  1. Πιέστε CMD + Space και πληκτρολογήστε Fontbook σε Spotlight.
  2. Βρείτε τη γραμματοσειρά εικονιδίων σας στο Fontbook.
  3. Μεταβείτε στην προβολή> Repertoire από τη γραμμή εργαλείων για να δείτε όλα τα glyphs.
  4. Ορίστε το μέγεθος στην επάνω δεξιά γωνία σε μια βολική κλίμακα. Χρησιμοποιώ 18-24px.
  5. Αντιγράψτε και επικολλήστε το Glyph από γραμματοσειρά στο πεδίο αντιστοίχισης συμβόλου Sketch.

Το Fontbook κάνει ένα υπέροχο πρόγραμμα περιήγησης glyph. Επειδή είναι έξω από το παράθυρο Sketch μπορείτε να περιηγηθείτε και να συγκρίνετε τα αποτελέσματα χωρίς να αλλάζετε περιβάλλοντα. Δεν έχω ακόμα βρει μια απλούστερη ή πιο βολική λύση.

Το Sketch και το Fontbook μπορεί να είναι φίλοι.

Μεγέθυνση

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

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

Ωραία και σταθερά βασικά στυλ.

Αποθήκευση

Έχω δημιουργήσει μια σελίδα που ονομάζεται "Σύμβολα / Εικονίδια". Αυτό είναι όπου ζουν όλα τα σύμβολα βάσης (δείτε το πάνω αριστερό μενού της σελίδας παραπάνω).

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

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

Επεξεργασία: Το Σκίτσο υποστηρίζει τώρα τις Βιβλιοθήκες ώστε να μπορείτε να αποθηκεύσετε τις προεπιλογές σας σε ένα εξωτερικό αρχείο!

Σύμβαση ονοματοδοσίας

μέγεθος glyphicon / χρώματος

Αυτή η ονομασία σύμβαση λειτουργεί για μένα, επειδή τα σύμβολα ταξινομούν ωραία στο μενού.

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

Μεγέθη: xs, sm, md, lg, xl, xxl, κλπ
Χρώματα: σκοτάδι, φως, μέσα, πρωτεύον, επιτυχία, κίνδυνος, προειδοποίηση.
Παράδειγμα ονόματος: glyphicon / light xl

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

Συμβουλή: Έχω ρυθμίσει το χρώμα φόντου των πινάκων τέχνης στο ίδιο με το χρώμα του εικονιδίου. Αυτό γίνεται για να διασφαλίσετε ότι τα χρώματα θα είναι ορατά στο μενού "Εισαγωγή συμβόλου". Αν δεν έχει οριστεί φόντο, η προεπισκόπηση είναι κενή. (Βεβαιωθείτε ότι έχετε απενεργοποιήσει την επιλογή "Συμπερίληψη στην εξαγωγή" εδώ!).
Ορίστε το χρώμα φόντου για γρήγορο οπτικό συμβόλαιο.Το προκύπτον μενού. Έγχρωμη κωδικοποίηση και οργάνωση.

Απενεργοποίηση χαρακτήρων, χρώματα, μεγέθη

Στη συνέχεια, μπορείτε να αλλάξετε το χρώμα ή το μέγεθος του συμβόλου βάσης χρησιμοποιώντας το αναπτυσσόμενο μενού "Αντικατάσταση συμβόλων" στην πλαϊνή γραμμή. Παρόλο που αλλάζετε το σύμβολο βάσης το glyph διατηρείται σε τακτά χρονικά διαστήματα (τα πεδία κειμένου πρέπει να φέρουν την ίδια ετικέτα).

Τα σύμβολα βάσης λειτουργούν σαν προεπιλογές.

Δοκιμαστικό αρχείο

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

Τα σύμβολα κάνουν το Sketch υπέροχο.

Κατεβάστε το αρχείο επίδειξης στο Git

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

Ευχαριστώ!

Περαιτέρω ανάγνωση

  • Μια περίπτωση για γραμματοσειρές εικονιδίων στο Sketch
  • Οικοδόμηση γραμματοσειρών εικονιδίων με το Grunt
  • Ροή εργασίας εικονιδίου γραμματοσειράς με Sketch + Grunt
  • Πώς να χρησιμοποιήσετε γραμματοσειρές εικονιδίων σε εφαρμογές για κινητά