Αν υπάρχει μια πτυχή της εργασίας με το Illustrator που πραγματικά δεν το απολαμβάνω, μετατρέπει την τέχνη της γραμμής σε εικόνες για κινητά ή στον ιστό. Χρησιμοποιώντας το μενού Εξαγωγή> Εξαγωγή ως και, για να είμαστε ειλικρινά ειλικρινείς, η δυνατότητα "Αποθήκευση για Web" - Αποθήκευση για Web - δεν ήταν ακριβώς εύκολη στη χρήση.
Η μετατροπή ενός σχεδίου στη μορφή .svg ανοίγει ένα αρκετά διασκεδαστικό παράθυρο διαλόγου το οποίο, για ανθρώπους νέους σε αυτή τη ροή εργασίας, πρόσφερε μια σύγχυση με πολλές επιλογές, για να μην αναφέρουμε το γεγονός ότι υπήρχαν αρκετές μορφές .svg και μόνο ένα από αυτά ήταν το κατάλληλο μορφή. Μόλις συνηθίσετε σε αυτή τη ροή εργασίας, δεν ήταν μεγάλη υπόθεση, αλλά η καμπύλη μάθησης ήταν απότομη.
Όλα αυτά άλλαξαν με τη νέα λειτουργία Export For Screens - Εξαγωγή> Εξαγωγή για οθόνες - και με τον πίνακα Εξαγωγή περιουσιακών στοιχείων που παρουσιάστηκαν στο Illustrator CC 2015 τον Ιούνιο του 2016. Σε αυτό το "How To" θα σας δείξω πώς να χρησιμοποιήσετε και τα δύο χαρακτηριστικά. Ας αρχίσουμε.
01 από 04
Πώς να αποκτήσετε πρόσβαση στην εξαγωγή για οθόνες στο Adobe Illustrator CC 2015
Έχοντας γίνει χρήστης του Illustrator από το Illustrator 88, νομίζετε ότι μπορείτε να καταλάβετε την απροθυμία μου να θεωρήσετε το Illustrator ως ένα σοβαρό εργαλείο σχεδιασμού για διαδικτυακές και κινητές διεπαφές και έργα.
Όταν τέθηκαν πίνακες τέχνης στην έκδοση CS4 2008, νόμιζα ότι ήταν μια ενδιαφέρουσα προσθήκη στην αίτηση. Όταν ήξερα για πρώτη φορά την πλέον υποτιμημένη λειτουργία Save For Web στο Illustrator, ξαναβρήκα το ενδιαφέρον, αλλά βρήκα το ίδιο χαρακτηριστικό στο Adobe Fireworks ευθυγραμμίστηκε περισσότερο με τα γραφικά web από το Illustrator.
Με την εμφάνιση της προσέγγισης του κινητού-πρώτου σχεδιασμού και της αυξανόμενης εξάρτησης από τις εικόνες SVG για κινητά έργα, το Illustrator ήταν το εργαλείο μου για το SVG και έγινε μια σημαντική στάση στη ροή εργασίας του UI Design.
Ακόμα, αν έπρεπε να εξάγω στοιχεία ενεργητικού για κινητά, το Sketch 3 και το Photoshop CC 2015 είναι τα εργαλεία επιλογής μου. Ο εικονογράφος εισήχθη στη λίστα τον Ιούνιο του 2016 με το πραγματικά έξυπνο μενού Εξαγωγή για οθόνες.
Στο παραπάνω παράδειγμα, έχω δύο οθόνες που προορίζονται για ένα iPhone και είναι σε ξεχωριστά Artboards με το όνομα "Home" και "Places". Για να τα εξάγετε, επέλεξα Αρχείο> Εξαγωγή> Εξαγωγή για οθόνες. Ανοίγει το παράθυρο διαλόγου Εξαγωγή για οθόνες.
02 από 04
Πώς να χρησιμοποιήσετε το παράθυρο διαλόγου Εξαγωγή για οθόνες
Όταν εμφανιστεί το παράθυρο διαλόγου, κάντε κλικ σε κάθε πίνακα γραφικών που θα επιλεγεί. Στη συνέχεια, θα αθληθεί ένα σημάδι ελέγχου. Μπορείτε επίσης να κάνετε διπλό κλικ σε ένα όνομα του σχεδίου για να το επιλέξετε και να το αλλάξετε. Αυτό είναι καλό που πρέπει να γνωρίζετε εάν οι πίνακες τέχνης σας ονομάζονται "Artboard 1" και "Artboard 2" που, ειλικρινά, δεν σας λένε τίποτα.
Έχετε τρεις επιλογές στην περιοχή Επιλογή:
- Όλα: Αυτή η επιλογή εξάγει κάθε σχεδίαση στο έγγραφο ως ξεχωριστό αρχείο.
- Εύρος: Καταχωρίστε μια σειρά πινάκων για εξαγωγή. Αυτό είναι ιδιαίτερα χρήσιμο για έργα με μερικές δεκάδες πίνακες τέχνης.
- Πλήρες έγγραφο: Επιλέξτε αυτό και όλοι οι πίνακες τέχνης θα πεπλατυσθούν σε ένα ενιαίο έγγραφο.
Η περιοχή Εξαγωγή σε σας σάς επιτρέπει να επιλέξετε τον φάκελο προορισμού για την έξοδο. Ο προεπιλεγμένος φάκελος θα είναι η τρέχουσα θέση του εγγράφου του Illustrator.
Μορφές είναι εκεί όπου συμβαίνει η μαγεία. Θα παρατηρήσετε ότι υπάρχουν τρία εικονίδια - iOS. Android και ένα εργαλείο. Τα πρώτα δύο είναι αυτονόητα. Το εικονίδιο Gear ανοίγει τις Ρυθμίσεις μορφοποίησης που σας επιτρέπουν να ελέγχετε τον τρόπο βελτιστοποίησης κάθε μορφής αρχείου στη λίστα. Αυτές οι ρυθμίσεις είναι "ειδικά για τη μορφή" και αφού κάνετε τις αλλαγές σας, κάντε κλικ στο κουμπί "Αποθήκευση ρυθμίσεων" και αυτές οι αλλαγές θα εφαρμοστούν στις μορφές που θα εκδοθούν.
Αφού επιλέξετε iOS ή Android, η λίστα θα αλλάξει ώστε να περιλαμβάνει όλες τις αναλύσεις που είναι διαθέσιμες σε αυτήν την πλατφόρμα. Η λίστα iOS θα δείξει τους συντελεστές κλιμάκωσης για την οθόνη Retina και η επιλογή Android θα έχει ζυγαριές που κυμαίνονται από .75x έως 4x που φιλοξενεί σχεδόν κάθε συσκευή Android εκεί έξω.
Εάν υπάρχει μια μορφή που δείχνει ότι θέλετε να καταργήσετε, κάντε κλικ στο "x". Αν υπάρχει κάποιος που θέλετε να προσθέσετε, κάντε κλικ στο κουμπί + Προσθήκη κλίμακας.
Όταν τελειώσετε, κάντε κλικ στο κουμπί Export Artboard και μια γραμμή προόδου θα σας δείξει πότε ολοκληρώθηκε η διαδικασία.
03 του 04
Χρησιμοποιώντας τα αρχεία εξαγωγής για οθόνες από το Adobe Illustrator CC 2015.
Όταν δείτε τα αποτελέσματα της εξαγωγής για οθόνες, θα ανακαλύψετε ότι το Illustrator έχει εξάγει μια επίπεδη έκδοση κάθε οθόνης. Στην επιφάνεια, αυτό μπορεί να φαίνεται λίγο αδύναμο, ειδικά εάν περιμένατε ότι το Illustrator εξήγαγε όλα τα κομμάτια ως εικόνες.
Αν βγείτε πίσω και σκεφτείτε για λίγο, αυτό είναι ακριβώς αυτό που χρειάζεστε επειδή μπορείτε να χρησιμοποιήσετε αυτήν την έξοδο σε μια εφαρμογή prototyping όπως Adobe Experience Design , Principleformac, Atomic.io , UXPin ή άλλη εφαρμογή πρωτότυπου
Σε αυτό το παράδειγμα, χρησιμοποιώ το Adobe Experience Design (XD) για να δημιουργήσω ένα απλό click-thru. Το πρώτο βήμα στη διαδικασία ήταν να επιλέξετε το μέγεθος του iPhone 6 που ταιριάζει με τις διαστάσεις της διεπαφής του Illustrator
Όταν ανοίξατε τη διεπαφή, επέλεξα το εργαλείο Artboard και κάνοντας κλικ μία φορά πάνω στο χαρτόνι για να προσθέσετε έναν άλλο πίνακα γραφικών. Στη συνέχεια τους ονόμασα "Home" και "Places", επέλεξε κάθε artboard και εισήγαγε την εικόνα png από το Illustrator στον artboard.
Για να δημιουργήσετε τα "hotspots" για το click-thru, έλαβα ένα ορθογώνιο πάνω από το κουμπί Explore στην αρχική οθόνη και ρύθμισα τις τιμές γεμίσματος και ορίου σε καμία αποεπιλέγοντας αυτές τις ιδιότητες στον πίνακα Ιδιότητες. Έκανα το ίδιο πράγμα με το κουμπί Επιστροφή στη σελίδα "Τοποθεσίες".
Για να προσθέσω τη διαδραστικότητα, επέλεξα τη λειτουργία πρωτότυπου και έπειτα έκανα κλικ στο "hotspot". Στη συνέχεια έσυρα το βέλος που ονομάζεται σύρμα - στη σελίδα "Μέρη" και ορίσαμε το στόχο "Μετάβαση" στα Μέρη, την κίνηση "Πιέζοντας αριστερά", τη χαλάρωση και τη διάρκεια της μετάβασης σε .6 δευτερόλεπτα.
Επανέλαβα αυτό το βήμα με το hotspot στη σελίδα "Μέρη". Η μόνη διαφορά ήταν ότι η μετάβαση ορίστηκε στο Push Right. Όταν έκανα κλικ στο κουμπί "Play", εξέτασα το πρωτότυπο μου.
04 του 04
Πώς να χρησιμοποιήσετε τον πίνακα ενεργητικού εξαγωγής στο Adobe Illustrator CC 2015
Μαζί με το μενού "Αποθήκευση για οθόνες", η Adobe πρόσθεσε επίσης ένα νέο πίνακα - Εξαγωγή περιουσιακών στοιχείων - το οποίο αφαιρεί ένα τεράστιο σημείο πόνου στη ροή εργασιών του UI Design.
Το σημείο του πόνου ήταν εικόνες. Το Illustrator είναι μια μεγάλη εφαρμογή σχεδίασης διανυσμάτων, αλλά για την έξοδο, ας πούμε 10 εικονίδια, σε μια σελίδα με 40 ή 50 από αυτές που απαιτούνται, κάθε μία αποθηκεύεται ως εικόνα SVG. Αυτό αναγκαστικά απαιτούσε περισσότερο χρόνο από ό, τι συνήθως, χάρη στις διαδοχικές μετακινήσεις στον πίνακα SVG. Αυτό το σημείο πόνο είναι τώρα ένα πράγμα του παρελθόντος.
Αυτό το νέο πάνελ μπορεί να βρεθεί στο Παράθυρο> Εξαγωγή στοιχείων ενεργητικού. Όταν ανοίγει ο πίνακας, επιλέξτε το στοιχείο που θέλετε να μετατρέψετε σε μορφή SVG ή άλλη μορφή και σύρετε στον πίνακα. Όταν αφήνετε το ποντίκι, μια μικρογραφία του στοιχείου προστίθεται στον πίνακα. Ονομάστε το στοιχείο. Συνεχίστε να σύρετε αντικείμενα στον πίνακα μέχρι να τελειώσετε.
Επιλέξτε κάθε στοιχείο Στην περιοχή Ρυθμίσεις εξαγωγής ή επιλέξτε όλα αυτά κρατώντας πατημένο το πλήκτρο Shift και κάνοντας κλικ σε καθένα από αυτά. Επιλέξτε τη μορφή σας - σε αυτό το παράδειγμα, επέλεξα SVG- και κάντε κλικ στο κουμπί Εξαγωγή. Τα επιλεγμένα στοιχεία θα εξάγονται ως αρχεία SVG στην ίδια θέση με το αρχείο Illustrator.
Όπου αυτή η όλη διαδικασία γίνεται ακόμα πιο τακτοποιημένη, δεν χρειάζεται να χρησιμοποιήσετε το πάνελ Export Asset. Εάν κάνετε κλικ στο κουμπί Αποθήκευση για οθόνες στο κάτω μέρος της οθόνης, ανοίγει το παράθυρο διαλόγου.
Αντίστροφα, μπορείτε να κάνετε κλικ στην καρτέλα Στοιχεία ενεργητικού στον πίνακα "Αποθήκευση οθονών" για να αποκτήσετε πρόσβαση στον πίνακα "Εξαγωγή περιουσιακών στοιχείων". Για παράδειγμα, αν έχετε ένα προσαρμοσμένο εικονίδιο σε ένα artboard, μπορείτε να ανοίξετε τον πίνακα Εξαγωγή περιουσιακού στοιχείου στο παράθυρο διαλόγου Αποθήκευση για οθόνη και να σύρετε αυτό το στοιχείο στον πίνακα Εξαγωγή περιουσιακών στοιχείων.