Τι νέο υπάρχει για τους σχεδιαστές ιστού στο Illustrator CC
Στις 6 Μαΐου η Adobe ανακοίνωσε τις τελευταίες ενημερώσεις για το δημιουργικό της λογισμικό. Ορισμένες από αυτές τις ενημερώσεις έχουν μεγάλες επιπτώσεις στον τρόπο με τον οποίο συνεργάζονται οι χρήστες με τα εργαλεία τους. Σε αυτό το άρθρο, θα ήθελα να εξετάσω τι άλλαξε η Adobe στο Illustrator και συγκεκριμένα πώς επηρεάζει τους σχεδιαστές ιστοσελίδων.
Φυσικά, υπάρχουν πολλά νέα χαρακτηριστικά, όπως οι βιβλιοθήκες AutoCAD, εναλλαγή πληκτρολογίου, συμπλήρωση και συμπλήρωση μεσολάβησης για κείμενο, αυτόματη δημιουργία γωνιών, υποστήριξη υποδείξεων, αρχεία πακέτων, μη ενσωματωμένες εικόνες, πολλαπλές θέσεις αρχείων, εργαλεία τύπου αφής, δωρεάν εργαλεία μετασχηματισμού εικόνες σε βούρτσες. Εάν είστε τραγουδιστής του Illustrator, αυτά είναι όλα τα αξιόλογα χαρακτηριστικά, αλλά αυτό που θέλω να επικεντρωθώ ειδικά είναι οι βασικές βελτιώσεις που θα βοηθήσουν τον καθένα να δημιουργήσει έργα τέχνης για προβολή στην οθόνη.
Υποστήριξη HiDPI
Με την εμφάνιση οθονών υψηλής ανάλυσης (όπως η οθόνη Macbook Pro με οθόνη Retina), το Illustrator CS6 και νωρίτερα έμοιαζε θολή. Τα έργα τέχνης και τα εικονίδια έμοιαζαν pixelated και το κείμενο φαινόταν αντι-αλλιώς. Η ίδια η φύση του Illustrator παρέχει τραγανό πλούσιο έργο τέχνης, οπότε αυτή η εμπειρία ήταν λιγότερο από επιθυμητή. Ευτυχώς, η Adobe έχει βελτιώσει το Illustrator CC για να εκμεταλλευτεί αυτές τις οθόνες υψηλής ανάλυσης. Το έργο τέχνης θα φαίνεται καλύτερα, το κείμενο θα φαίνεται καθαρό, τα στοιχεία UI (εικονίδια, δρομείς κ.λπ.) θα φαίνονται πιο ομαλά. Έκαναν επίσης κάποιες βελτιώσεις στη διαδικασία απόδοσης. Τώρα εκμεταλλεύεται τις μηχανές πολλαπλών πυρήνων και χρησιμοποιεί σπειροειδές rendering για να δημιουργήσει έργα τέχνης. Θα πρέπει να δείτε κάποια βελτίωση σε εργασίες όπως το ζουμ, το panning, η επικόλληση αντιγράφων, η μεταφορά και απόθεση κ.λπ.
Βελτιώσεις οδηγών
Οι οδηγοί χρησιμοποιούνται ευρέως κατά τον σχεδιασμό και τη διαμόρφωση σελίδων. Η δημιουργία μοτίβων στο Illustrator χρησιμοποιώντας τους οδηγούς σας επιτρέπει να τοποθετήσετε περιεχόμενο με συγκεκριμένο τρόπο. Στο Illustrator CC, υπάρχουν τέσσερις βελτιώσεις στους οδηγούς:
- Κάνοντας διπλό κλικ σε έναν χάρακα δημιουργείται ένας οδηγός στη συγκεκριμένη θέση στον χάρακα.
- Όταν κρατάτε πατημένο το πλήκτρο Shift και, στη συνέχεια, κάντε διπλό κλικ σε μια συγκεκριμένη θέση σε έναν χάρακα, ο οδηγός που δημιουργείται στο σημείο αυτόματα σπρώχνει στο πλησιέστερο σήμα (διαίρεση) στον χάρακα.
- Εάν αποκρύψετε τους οδηγούς (Ctrl / Cmd +;) και στη συνέχεια επιλέξτε να τις εμφανίσετε, οι οδηγοί δεν κλειδώνονται αυτόματα όπως και σε προηγούμενες εκδόσεις.
- Δημιουργήστε οριζόντιους και κάθετους οδηγούς σε μία ενέργεια. Δείτε πώς: Στην επάνω αριστερή γωνία του παραθύρου του Illustrator, κάντε κλικ στη διασταύρωση των γραμμών και πατήστε Ctrl (ή Cmd σε Mac) και σύρετε το δείκτη του ποντικιού σε οποιαδήποτε θέση στο παράθυρο του Illustrator. ο δείκτης του ποντικιού γίνεται σταυρωτός στα μαλλιά για να υποδεικνύει πού μπορεί να δημιουργηθεί ένας οριζόντιος και κάθετος οδηγός. αφήστε το δείκτη του ποντικιού για να δημιουργήσετε τους οδηγούς.
Βελτιώσεις αναζήτησης γραμματοσειρών
Η τυπική αναζήτηση τύπου προς τα εμπρός αναζητά μόνο την πρώτη λέξη στο όνομα γραμματοσειράς, η οποία γενικά δεν αποφέρει τα καλύτερα αποτελέσματα αμέσως. Επίσης, η αναζήτηση και η περιήγηση σε μεγάλο αριθμό γραμματοσειρών μπορεί να είναι δύσκολη. Μια νέα επιλογή λειτουργίας αναζήτησης "Αναζήτηση πλήρους γραμματοσειράς" έχει προστεθεί στους πίνακες ελέγχου και χαρακτήρων. Επιπλέον, η ενσωμάτωση TypeKit για γραμματοσειρές επιφάνειας εργασίας ανακοινώθηκε πρόσφατα στο MAX. Αυτό σημαίνει ότι μπορείτε εύκολα να σχεδιάσετε μακέτες χρησιμοποιώντας τις ίδιες γραμματοσειρές που σκοπεύετε να χρησιμοποιήσετε στο διαδίκτυο.
Βελτιώσεις αναζήτησης χρωμάτων
Η εύρεση ενός συγκεκριμένου χρώματος από μια σειρά από πολλά χρώματα μπορεί να είναι χρονοβόρα και απογοητευτική. Στο Illustrator CC, έγιναν αλλαγές για να γίνει πολύ πιο εύκολη η αναζήτηση και η εύρεση ενός χρώματος. Το παράθυρο διαλόγου "Επιλογή χρωμάτων" (κάντε διπλό κλικ στο πλήκτρο "Πληρωμή διακομιστή μεσολάβησης" στη γραμμή εργαλείων) διαθέτει τώρα ένα widget αναζήτησης στο παράθυρο "Χρωματικά δείγματα". Όταν κάνετε κλικ στο στοιχείο Έγχρωμες εικόνες, εμφανίζεται μια γραμμή αναζήτησης κάτω από την προκαθορισμένη λίστα χρωμάτων. Πληκτρολογήστε το όνομα ενός χρώματος ή μιας τιμής RGB (ή CMYK για εκτύπωση). Εάν πληκτρολογήσετε "μπλε", εμφανίζονται όλα τα κουμπιά χρώματος με τη λέξη μπλε στο όνομά τους. Η πληκτρολόγηση R = 77 θα εμφανίσει όλα τα δείγματα χρώματος που έχουν κόκκινο χρώμα με τιμή 77 στην κλίμακα RGB. Το γραφικό στοιχείο αναζήτησης είναι ενεργοποιημένο από προεπιλογή.
Επίσης, βελτιώθηκε η επιλογή αναζήτησης στον Πίνακα δειγμάτων. Το πεδίο δεν επιβάλλει την αυτόματη συμπλήρωση. Οι χαρακτήρες που πληκτρολογείτε δεν αντικαθίστανται αυτόματα με την κοντινότερη αντιστοιχία χρώματος που βρέθηκε. Μπορείτε να πληκτρολογήσετε ένα όνομα ενός χρώματος ή απλά να πληκτρολογήσετε τιμές χρωμάτων RGB (ή CMYK για εκτύπωση) για να αναζητήσετε εάν υπάρχει τέτοιος συνδυασμός χρωμάτων. Το πεδίο Εύρεση δεν είναι ενεργοποιημένο από προεπιλογή και πρέπει να ενεργοποιηθεί για πρώτη φορά από το δευτερεύον μενού του πίνακα.
Αξίζει επίσης να σημειωθεί ότι ο Kuler έχει ψηθεί στο Illustrator. Επομένως, αν χρησιμοποιείτε αυτήν την υπηρεσία Adobe για να δημιουργήσετε έγχρωμα θέματα και ομάδες, μπορείτε εύκολα να έχετε πρόσβαση σε αυτό το περιεχόμενο απευθείας στο Illustrator CC.
Πίνακας ιδιοτήτων CSS
Φυσικά, το μεγαλύτερο χαρακτηριστικό του ιστού είναι οι βελτιώσεις που έγιναν στις ροές εργασίας CSS και SVG. Τώρα, αν είστε χρήστης σκληρού λογισμικού Illustrator, ίσως έχετε χρησιμοποιήσει κάτι στο CS5 που ονομάζεται πακέτο HTML5, το οποίο ήταν διαθέσιμο από το AdobeLabs. Για οποιονδήποτε λόγο δεν εμφανίστηκε ποτέ στο CS6, αλλά πολλά από αυτά τα χαρακτηριστικά επέστρεψαν με αυτήν την ενημέρωση CC. Αυτά τα χαρακτηριστικά θυμίζουν αυτά που έχουν ήδη διατεθεί στο Photoshop CS6 μέσω των ενημερώσεων του Creative Cloud και των λειτουργιών που υπάρχουν στο Fireworks CS6.
Ο πίνακας ιδιοτήτων CSS είναι ο τρόπος με τον οποίο θα εξαγάγετε το CSS από το έγγραφο του Illustrator και θα έχετε αρκετούς τρόπους για να το κάνετε αυτό. Το βασικό βήμα για την πραγματοποίηση όλων αυτών των εργασιών είναι όμως η ονομασία των επιπέδων σας μέσα στο πλαίσιο των επιπέδων. Είναι βέβαιο ότι το Illustrator μπορεί να δημιουργήσει CSS χωρίς το αντικείμενο να έχει ένα όνομα μέσα στον πίνακα των επιπέδων, αλλά ανοίγετε τον εαυτό σας σε έναν αποδιοργανωμένο και ενδεχομένως αδύνατο τρόπο δημιουργίας κώδικα. Αυτό είναι ουσιαστικά το πώς το Illustrator θα ονομάσει τους κανόνες κλάσης που δημιουργεί για εσάς. Το CSS που δημιουργείται μπορεί να έχει προθέματα του προγράμματος περιήγησης για Webkit, Firefox, Opera και Internet Explorer. Μπορεί να συλλάβει εμφανίσεις υποστηριζόμενες από το CSS όπως κλίσεις και στρογγυλεμένες γωνίες.
Μπορείτε να ελέγξετε τον τρόπο δημιουργίας του CSS με την πρόσβαση στο παράθυρο διαλόγου Επιλογές εξαγωγής CSS. Μπορείτε να μεταβείτε στο παράθυρο διαλόγου κάνοντας κλικ στο κουμπί Επιλογές εξαγωγής CSS, το οποίο είναι το πρώτο από τα τέσσερα κουμπιά προς τα κάτω στο δεξί μέρος του πίνακα. Ο πίνακας παρέχει πολλές λειτουργίες για τις ροές εργασίας CSS:
- Προβολή του CSS για ένα επιλεγμένο αντικείμενο
- Αντιγράψτε τον κώδικα CSS για ένα επιλεγμένο αντικείμενο
- Εξαγωγή επιλεγμένου αντικειμένου σε αρχείο CSS μαζί με εικόνες που χρησιμοποιούνται στο CSS
- Εξαγωγή κωδικού CSS για όλα τα αντικείμενα του εγγράφου σε ένα αρχείο CSS
Επιπλέον, μπορείτε να εξαγάγετε τον κώδικα CSS για όλα τα αντικείμενα μέσα στο έγγραφο, μεταβαίνοντας στο μενού Αρχείο και επιλέγοντας Εξαγωγή. Αυτό θα ανοίξει ένα παράθυρο διαλόγου και από εκεί μπορείτε να επιλέξετε το CSS από το μενού μορφοποίησης.
Αν έχετε ένα αντικείμενο, επιλέξτε το και βεβαιωθείτε ότι ονομάστηκε σωστά στον πίνακα επιπέδων. Με την επιλογή αυτή θα δείτε το CSS που απαιτείται για τη δημιουργία του έργου σε ένα πρόγραμμα περιήγησης στον πίνακα ιδιοτήτων CSS.
Κώδικα SVG
Σε παλαιότερες εκδόσεις του Illustrator, θα πρέπει να αποθηκεύσετε ένα έγγραφο ως SVG. Εδώ στην ενημερωμένη έκδοση CC έχετε τη δυνατότητα να αντιγράψετε κάτι μέσα στο έγγραφο, μετά πηγαίνετε στον αγαπημένο σας επεξεργαστή HTML και απλά εκτελέστε μια επικόλληση. όλος ο κώδικας SVG θα τοποθετηθεί μέσα στο έγγραφο. Είναι μια εκπληκτικά ωραία ροή εργασίας. Εάν αυτό δεν σας κόβει για σας, η πιο παραδοσιακή μέθοδος αποθήκευσης του εγγράφου ως SVG είναι ακόμα διαθέσιμη.
Επιπλέον, η Adobe έχει προσθέσει υποστήριξη για την εξαγωγή αχρησιμοποίητων στυλ. Κατά το σχεδιασμό, συχνά δημιουργείτε πολλαπλά στυλ γραφικών ενώ δημιουργείτε έργα τέχνης. Δεν μπορείτε να χρησιμοποιήσετε όλα τα διαθέσιμα στυλ. Όταν εξάγετε έργα τέχνης σε μορφή SVG, τα στυλ που δεν χρησιμοποιούνται δεν εξάγονται. Επίσης, στον εξαγόμενο κώδικα CSS, τα γραφικά στυλ δεν έχουν ονόματα που να συνδέονται με αυτά και μπορεί να είναι δύσκολο να προσδιοριστεί το σωστό στυλ γραφικών.
Το Illustrator CC προσφέρει δύο λειτουργίες που έχουν προστεθεί για να βελτιώσουν την εμπειρία της εργασίας με στυλ σε μορφή SVG που αντιμετωπίζουν αυτά τα θέματα:
- Όνομα γραφικού στυλ. Όταν επιλέγετε να εξάγετε μορφές γραφικών, το όνομα κάθε στυλ εξάγεται με τον ορισμό του στυλ στην ονοματολογία CSS.
- Εξαγωγή αχρησιμοποίητων στυλ. Όταν εξάγετε έργα τέχνης σε μορφή SVG, μπορείτε τώρα να επιλέξετε να εξάγετε αχρησιμοποίητα στυλ. Αυτό επιτρέπει σε έναν άλλο σχεδιαστή ή προγραμματιστή που εισάγει τα στυλ να χρησιμοποιεί τα αχρησιμοποίητα γραφικά στυλ σε άλλα έργα τέχνης.
Πώς θα το χρησιμοποιήσετε
Αυτό σίγουρα δεν είναι ένα εργαλείο για τον κωδικό πλήρεις ιστοσελίδες. Αυτό που βλέπω είναι να χρησιμοποιώ το Illustrator για να δημιουργήσω μακέτες, στη συνέχεια να κάνω κώδικα με τη δομή σε HTML και τον κώδικα διάταξης στο CSS. Όταν απαιτείται σκιά, κλίση, μοτίβο ή ακόμα και λογότυπο, η χρήση αυτών των νέων εξαιρέσεων CSS και των επιλογών SVG θα είναι πολύ χρήσιμη και θα είναι μεγάλη εξοικονόμηση χρόνου.
Αν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τις νέες λειτουργίες του Illustrator CC, επισκεφθείτε τη σελίδα του προϊόντος του Illustrator.
Είστε λάτρης του Illustrator; Τι χαρακτηριστικά του Illustrator CC είστε πιο ενθουσιασμένοι; Ενημερώστε μας στα σχόλια.