Προετοιμασία και εξαγωγή εικονιδίων SVG στο σκίτσο

Αυτό το άρθρο πρόκειται να υποθέσει ότι καταλαβαίνετε ήδη τις βασικές αρχές του σχεδιασμού των εικονιδίων. Και εστιάστε στον τρόπο προετοιμασίας και εξαγωγής τους για χρήση στο Web, στο iOS και στο Android. Θα χρησιμοποιήσουμε το Sketch για να οργανώσουμε, να διαχειριστούμε και να εξάγουμε τα εικονίδια.

Θα επικεντρωθούμε επίσης σε μονόχρωμα εικονίδια που μπορούν να χρωματιστούν δυναμικά σε όλες τις πλατφόρμες.

Σκίτσο 42

Άρχισα να γράφω αυτό το άρθρο πριν από την απελευθέρωση του Sketch 42. Φαίνεται ότι έχουν σημειώσει κάποιες σημαντικές βελτιώσεις. Αυτό έχει πράγματι αλλάξει τη ροή εργασίας μου.
1. Επικόλληση από τον εικονογράφο, ασφαλίζει πολύ πιο σταθερά στο πλέγμα pixel.
2. Αλλαγή του κανόνα πλήρωσης είναι πολύ πιο εύκολη τώρα. (περισσότερα για αυτό αργότερα)

🖋 Ξεκινώντας με το Illustrator

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

Λόγοι για τη μη χρήση του εικονογράφου για ολόκληρη τη διαδικασία:

1. Τα αρχεία του εικονογράφου περιορίζονται σε 100 πίνακες τέχνης. Εάν έχετε ένα μεγάλο εικονίδιο, δεν μπορείτε να τα διατηρήσετε σε ένα αρχείο.

2. Η μαζική εξαγωγή είναι περιορισμένη.

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

Ας ξεκινήσουμε

Θα σχεδιάσω τις εικόνες σε 24x24. Μου αρέσει να δημιουργώ ένα 24x24 artboard για κάθε εικονίδιο.

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

Διαδρομές περιγράμματος

Θα θελήσετε να μετατρέψετε οποιεσδήποτε διαδρομές σε σχήματα.

Δημιούργησα μια προσαρμοσμένη συντόμευση ⌥⌘O

Συγχώνευση σχήματα

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

Μετακίνηση στο Sketch

Ας ξεκινήσουμε δημιουργώντας ένα 24x24 artboard για το εικονίδιο μας. Και προσθέστε ένα τετράγωνο 24x24.

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

Αφήνει να ομαδοποιήσει αυτό το σχήμα και ονομάστε το "Οδηγοί", στη συνέχεια, ομαδοποιήστε το ξανά.

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

Τώρα θα ήταν μια καλή στιγμή να σκεφτείτε μια σύμβαση ονομασίας για όλα τα εικονίδια σας καθώς και τα σύμβολα.

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

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

Εισαγωγή από το Illustrator

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

Εντάξει, κάποιος φαίνεται καλός, αλλά αφήνει να ρίξετε μια ματιά σε ένα πιο περίπλοκο σχήμα

Λοιπόν αυτό δεν είναι αυτό που περιμέναμε, αφήστε να ρίξετε μια ματιά στη λίστα των επιπέδων.

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

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

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

Τι στο διάολο είναι ο κανόνας συμπλήρωσης;

Σκέφτηκα το ίδιο πράγμα όταν ο Android μου είπε ότι τα εικονίδια μου δεν δούλευαν. Η πρώτη μου αντίδραση ήταν να ανοίξω το svg σε έναν επεξεργαστή κειμένου και να διαγράψω το χαρακτηριστικό. Αλλά αυτό δεν λειτούργησε, οπότε έπρεπε να κάνω κάποια έρευνα.

Ο κανόνας πλήρωσης είναι μια ιδιότητα SVG που ορίζει βασικά τον τρόπο προσδιορισμού των μορφών που πληρούνται ή αφαιρούνται από το σχήμα. Η προεπιλεγμένη τιμή svg είναι "nonzero", και αυτό απαιτεί το Android. Δυστυχώς το Sketch χρησιμοποιεί "evenodd". Ευτυχώς το Σκίτσο παρέχει όλα τα χαρακτηριστικά που πρέπει να μετατρέψουμε τα σχήματα μας από "evenodd" σε "nonzero". Και τώρα ακόμα πιο εύκολο στο Sketch 42

Ας πάρουμε ένα λεπτό για να καταλάβουμε πώς λειτουργεί ο κανόνας γεμίσματος.

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

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

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

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

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

Ας επιστρέψουμε στο εικονίδιο "ειδήσεων" και αλλάξουμε τον κανόνα πλήρωσης σε μη μηδέν.

Μεγάλη, ακόμα σπασμένη! Αυτή είναι μια άλλη αλλαγή που έχω παρατηρήσει στα 42. Πρέπει να βεβαιωθούμε ότι τα στρώματα είναι στη σωστή σειρά. Έτσι, έβαλα το πιο πάνω στρώμα προς τα κάτω. Και άλλαξε τους τύπους boolean. Βεβαιωθείτε ότι οι αφαιρεθείσες περιοχές έχουν οριστεί για να αφαιρεθούν και οι περιοχές που είναι γεμάτες είναι συνένωση.

🗒 Ως πλάγια σημείωση φαίνεται ότι το Sketch 42 καθορίζει την κατεύθυνση της διαδρομής για εμάς. Στο παρελθόν αυτό δεν συνέβαινε, θα έπρεπε είτε να χρησιμοποιήσουμε το οριζόντιο εργαλείο περιστροφής, σε συμμετρικά αντικείμενα. Ή υπάρχει στην πραγματικότητα μια αντίστροφη επιλογή διαδρομής κάτω από το Layer> Paths> Reverse Order.

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

Επειδή το προεπιλεγμένο μαύρο δεν είναι # 000000 στο Illustrator και πάντα ξεχνώ να το αλλάξω. Μου αρέσει να εφαρμόζω ένα στυλ μαύρου στρώματος το οποίο ονόμασα 'εικονίδιο μαύρο.

Τέλος, μπορείτε να δημιουργήσετε ένα σύμβολο

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

Τώρα μπορείτε να εξαγάγετε απλώς PDF για iOS και SVG για το Web και το Android στο 1x για να αποφύγετε όλες τις παραλλαγές πυκνότητας οθόνης.

Περιμένετε πριν εξαγάγουμε οποιοδήποτε SVG του

Βεβαιωθείτε ότι έχετε εγκαταστήσει το πρόσθετο συμπίεσης SVGO με Bohemian Coding. Αυτό είναι ένα πολύ σημαντικό βήμα και θα καθορίσει το 90% των ζητημάτων SVG σας.

https://github.com/BohemianCoding/svgo-compressor

Εντάξει αυτό είναι αυτό

Έτσι, εκεί έχουμε! Ένα πανέμορφο εικονοστοιχείο που τοποθετείται σε εικονίδιο SVG με 24x24 πλαίσια. Μονόχρωμη με διαφάνεια ώστε να μπορούν να χρωματιστούν δυναμικά στο Web, στο iOS, στο Android και ακόμα και στο Sketch (Kind of ).

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

Μερικές τελευταίες σημειώσεις για την εφαρμογή των εικονιδίων σας

Ιστός

Επειδή δεν έχουμε εγκεφαλικά επεισόδια στα εικονίδια μας, μπορούμε να τα βάψουμε απλά αλλάζοντας το fill in CSS. Αυτό λειτουργεί επίσης καλά με svg sprites.

Android

Μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να ελέγξετε τα svg εικονίδια http://inloop.github.io/svg2android/

iOS

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

Σε αυτό το παράδειγμα το σκίτσο θα δημιουργούσε 3 pdf.

1x = 24x24, 2x = 48x48, 64w = 64x64. Αυτά θα ήταν τα 1x μεγέθη σας και το xcode θα δημιουργούσε τις παραλλαγές σας @ 2x και @ 3x.

Υπάρχει επίσης μια βιβλιοθήκη που σας επιτρέπει να χρησιμοποιήσετε ένα μόνο 1x pdf.

https://github.com/mindbrix/UIImage-PDF

Ευχαριστώ για την ανάγνωση

Όπως πάντα, όπως εγώ ξέρω τι σκέφτεστε ή μοιραστείτε τη ροή εργασίας σας. Μπορείτε επίσης να με βρείτε στο Twitter @CheckYourVector