Εκπαιδευτικά Σκετς

10 κόλπα Sketch που θα έκαναν τον Owen Wilson να πει "Wooow!" (Τόνοι GIFs!)

Εάν δεν πήρατε την αναφορά στον τίτλο, σας παρακαλώ να παρακολουθήσετε αυτό το βίντεο. Παρακαλώ :)

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

Δεν υπάρχει τύχη σε αυτό ακόμα.

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

Εδώ είναι μια γρήγορη λίστα με μερικά κόλπα που έχω αποκαλύψει ενώ πηγαίνω γύρω:

1. Η μέθοδος Scribble

Ας ξεκινήσουμε τα πράγματα μακριά με ένα κτύπημα, εμείς;

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

Ξεκινήστε με γράψιμο σαν παιδαγωγός με το εργαλείο μολυβιού (χτυπήστε το P στο πληκτρολόγιο). Για πυκνότερες περιοχές, κάντε ένα μπουκιά στο ίδιο σημείο. Μην ξεχάσετε να ξεφύγετε από τη μάζα της γραφής για να δημιουργήσετε κάποια απόκλιση.

Ρυθμίστε τα περιθώρια σας ώστε να έχουν ένα ευρύ διάκενο και καμπύλα άκρα. Γρήγορα! Δημιουργήσατε μερικά τυχαία δεδομένα σκέδασης. Βάλτε το εδώ, συνεργάτης

2. Ακτίνα ορίων σε επιμέρους κορυφές

Γνωρίζουμε λοιπόν τώρα ότι μπορείτε να ορίσετε διαφορετικές ακτίνες πλαισίου στο κιβώτιο ακτίνας ακριβείας χρησιμοποιώντας ταχαλία:

ΜΕΓΑΛΗ ΥΠΟΘΕΣΗ. Jk, πολύ δροσερό!

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

3. Χαλαρώστε τα περιστρεφόμενα σχήματα για να επαναφέρετε το πλαίσιο σύνδεσης

Φανταστείτε αυτό: Δημιουργήσατε ακριβώς ένα σχήμα rad και περιστρέφετε το πράγμα περίπου 45º. Τώρα το πράγμα είναι όλα cockeyed, η αλλαγή μεγέθους είναι κερδοφόρα, και είναι σαν να έχετε αναρροφηθεί κάτω από ένα κύμα, επειδή δεν ξέρετε ποιο τρόπο είναι πάνω.

Απλώς ισοπεδώστε το για να επαναφέρετε το κιβώτιο οριοθέτησης σε ένα ορθογώνιο ορθογώνιο:

4. Option-Drag, στη συνέχεια Command-D για την αντιγραφή σχημάτων και ενεργειών

Δημιουργία λίστας αντικειμένων; Σταματήστε να αντιγράφετε, να επικολλάτε και να μετακινείτε μορφές / ομάδες όπως ένα doofus.

Κρατήστε πατημένη την επιλογή ενώ σύρετε το σχήμα / ομάδα στην επιθυμητή θέση και, στη συνέχεια, πατήστε Command + D για να την αντιγράψετε. Δεν πρόκειται μόνο να αντιγράψετε το σχήμα, αλλά και να αντιγράψετε την απόσταση που μετακινήσατε:

Pssst ... αυτό λειτουργεί με πίνακες τέχνης, πάρα πολύ!

5. Αλλάξτε τις ρυθμίσεις Pathfinder σε συνδυασμένα σχήματα

Πόσες φορές σας έχει συμβεί αυτό όταν προσπαθείτε να συνδυάσετε μια δέσμη σχημάτων σε μία:

Πολύ ενοχλητικό, ειδικά όταν το LobsterFest βρίσκεται ακριβώς πίσω από τη γωνία και δεν έχετε τελειώσει το λογότυπο JON.

Εντάξει, ανάσα. Απλά επιλέξτε τα συνδυασμένα σχήματα αντικειμένων και τα ορίστε στο Union:

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

Ευτυχώς, το Sketch είναι έξυπνο και σας επιτρέπει να ορίσετε διαφορετικές λειτουργίες συγχώνευσης διαδρομής για κάθε υπο-σχήμα στο συνδυασμένο σχήμα, ώστε να μπορούμε εύκολα να αφαιρέσουμε αυτές τις τρύπες:

EDIT: Ενώ είναι ακόμα καλό να γνωρίζουμε ότι μπορείτε να προσαρμόσετε μεμονωμένες λειτουργίες συγχώνευσης στρώσεων, ο Steffen Karspeck είναι τρομερός και επεσήμανε ότι θα μπορούσα να αποφύγω τις τρύπες στο πρώτο βήμα, θέτοντας την προτίμησή μου Fill. Έχω δει αυτό εκατό φορές, αλλά ποτέ δεν έχω πάρει το χρόνο να διαβάσω τι σημαίνουν οι δύο επιλογές. Θα μπορούσε να σωθεί κάποιος πονοκέφαλος :)

Ευχαριστώ, Steffen!

6. Συρραφή συμβόλων για τα κράτη αντικειμένων

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

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

Ας παραιτηθούμε από το επιπλέον στρώμα χρησιμοποιώντας μια τεχνική που καλώ "Symbol Stacking":

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

Όταν τελειώσετε, κάντε όλα ένα μεγάλο σύμβολο!

Εφόσον το Σκίτσο επιτρέπει προσαρμοσμένο κείμενο σε διαφορετικές εμφανίσεις συμβόλων, μπορείτε να προσαρμόσετε το κείμενο σε κάθε επίπεδο κατάστασης. Για να απενεργοποιήσετε μια κατάσταση, απλώς πληκτρολογήστε ένα κενό για να "καθαρίσετε" την κατάσταση του στρώματος κειμένου. Στο GIF παρακάτω, θέλω να είναι επιλεγμένες οι Ρυθμίσεις και οι άλλες να είναι λευκές (η προεπιλεγμένη κατάστασή μου):

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

7. Βρείτε ένα Layer

Αν ένα στρώμα δεν βρίσκεται στην προβολή της λίστας στρώσεων όταν κάνετε Command-Click σε ένα αντικείμενο στο artboard, δεν θα το δείτε να τονίζεται. Αυτό είναι αρκετά ενοχλητικό.

Ευτυχώς υπάρχει μια ημι-κρυφή λειτουργία για να αποκαλύψει ένα στρώμα στη λίστα επιπέδων, φέρνοντάς το στην πτυσσόμενη προβολή. Χρησιμοποιήστε το Command-Shift-J:

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

Command-Κάντε κλικ σε ένα στρώμα και μετά πατήστε Command-Shift-J για να αποκαλύψετε το επίπεδο στη λίστα επιπέδων.

Συμβουλή μπόνους

Εάν δεν διαθέτετε ήδη μια προσθήκη που θα σας βοηθήσει να συμπτύξετε στρώματα, Option-Κάντε κλικ σε ένα φάκελο για να συμπτύξετε γρήγορα όλο το περιεχόμενό του:

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

8. Γρήγορη PNG - 4 τρόποι!

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

Εδώ είναι 4 τρόποι για να σκίσετε ένα PNG, στο Brilliant Technicolor GIF ™:

Μέθοδος 1: Σύρετε το Layer ArtboardΜέθοδος 2: Σύρετε το Exportboard / Slice του ArtboardΜέθοδος 3: Σύρετε μια μεμονωμένη ομάδα ή επίπεδοΜέθοδος 4: Σύρετε εκτός σκίτσου σε άλλες εφαρμογές
Γρήγορη συμβουλή: Εάν εργάζεστε σε ένα σχεδιασμό στυλ, χρησιμοποιήστε ένα PNG για το "κάτω από το στρώμα". Θα σας εξοικονομήσει από την ανάγκη να αντιγράψετε ολόκληρο το σχεδιασμό της εφαρμογής κάτω από το modal, και σας σώσει από τυχαία κλικ στρωμάτων κάτω.

Δώρο! Ο Tyler Howarth μου θύμισε ότι μπορείτε επίσης να εξάγετε PNG απλά αντιγράφοντας το ίδιο το στρώμα ή το artboard. Διαχωριζόμαστε εντελώς, βάζοντας αυτό στο άρθρο, οπότε ο Tyler παίρνει την πίστη γι 'αυτό. Εδώ είναι η προσθήκη του:

Μπορείτε επίσης να αντιγράψετε / επικολλήσετε οποιοδήποτε artboard / group / layer μέσα και έξω από το Sketch. Αντιγράψτε έναν πίνακα γραφικών, μεταβείτε στο μεσαίο / χαλαρό, επικολλήστε και αφήστε!
- Τάιλερ

Hot κοτόπουλο, μάγκα. Αυτός ο κανόνας!

9. Γεμίσματα Γρήγορου Σχεδίου

Αυτό είναι ένα είδος συμβολαίου δύο-για-ένα.

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

Συμβουλή 2: Για να γίνει αυτό γρήγορα ένα πρότυπο συμπληρώστε για ένα άλλο σχήμα, πρόκειται να χρησιμοποιήσουμε μια τεχνική που μάθαμε στο Βήμα 8.

Επιλέξτε το σχήμα που θέλετε να γεμίσετε με το μοτίβο σας, ανοίξτε το μενού "Συμπληρώστε με εικόνα" και σύρετε το σχεδιάγραμμα βάσης μοτίβου στο πλαίσιο προεπισκόπησης εικόνας:

10. Φακός Bokeh

Προφανώς θα πρέπει πάντα να σώσει το καλύτερο για το τελευταίο.

Είμαι ένας καλύτερος από ερασιτέχνης φωτογράφος-αλλά-όχι-αρκετά-επαγγελματίας φωτογράφος και ένα από τα καλύτερα φωτογραφικά εφέ είναι bokeh. Ποτέ δεν έχετε ακούσει ποτέ τη λέξη, αλλά έχετε δει δεκάδες χιλιάδες φορές.

bokeh (n): η οπτική ποιότητα των περιοχών που δεν είναι εστιασμένες σε μια φωτογραφική εικόνα, ειδικά όπως αποδίδεται από έναν συγκεκριμένο φακό.
(πηγή εικόνας)

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

Ήμουν goofing γύρω με τη μέθοδο Scribble μου, δοκιμάζοντας σε διαφορετικά μεγέθη, επικάλυψη διαφορετικών γραμμών γραμμένο, και προσθέτοντας τα αποτελέσματα σε κάθε ένα.

Η παρακάτω εικόνα είναι 100% σκίτσο, χωρίς φωτογραφία. Ακριβώς ένα λεπτό υπόβαθρο με τρεις γραμμές "γραμματικής μεθόδου" διαφορετικού χρώματος, αδιαφάνειας και θολούρας Gauss. Προσθέστε ένα στρώμα θορύβου που έχει οριστεί στην επικάλυψη και χτυπήστε μερικά υαλώδη κείμενα στην κορυφή (συμπληρώστε με κλίση με ένα άνω και κάτω εσωτερικό περίγραμμα). Θα έχετε μια αρκετά πειστική εμφάνιση bokeh effect:

Ακολουθήστε με στο Medium / Twitter, εγγραφείτε στην έκδοση UX Power Tools και ακολουθήστε μας στο Twitter για ενημερώσεις, νέο περιεχόμενο και άλλα εντυπωσιακά πράγματα. Όπως, αγάπη, και μοιραστείτε αν είστε μέχρι αυτό!

Σ 'αγαπώ τους ανθρώπους.