Συμβουλές για την εργασία με το Illustrator. Για σχεδιαστές ιστοσελίδων που προτιμούν το Photoshop

Συμβουλές για την εργασία με το Illustrator. Εδώ είναι μια τρελή ιδέα - σχεδιάστε το επόμενο web project σας στο Illustrator. Εάν είστε κύριος σχεδιαστής ιστοσελίδων, το πιθανότερο είναι ότι δεν θα ανταποκριθείτε πολύ καλά σε αυτήν την πρόταση. Το Illustrator απλά δεν μπορεί να κάνει όλα όσα μπορεί να κάνει το Photoshop, σωστά;

Όχι σίγουρα με αυτόν τον τρόπο.

αν και Το Photoshop έχει γίνει το de facto εργαλείο σχεδιασμός ιστοσελίδων, το Illustrator είναι κάτι παραπάνω από ικανό να καλύψει τις ανάγκες σας. Χάρη στα εργαλεία διάταξης του, είναι συχνά ένα καλύτερο και πιο κατάλληλο πρόγραμμα για το σχεδιασμό ιστοσελίδων.

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

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

1. Πρώτα πρώτα: ορίστε όλες τις μονάδες σε Pixels. Συμβουλές για την εργασία με το Illustrator

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

Για να ορίσετε τις μονάδες σε pixel:

1. Ανοίξτε στο μενού Επεξεργασία
2. Επιλέξτε μονάδες μέτρησης από το υπομενού ρυθμίσεων.
3. Ορίστε όλες τις επιλογές σε "pixels"

2. Δημιουργήστε έγγραφα χρησιμοποιώντας ένα προφίλ εγγράφου web.

 

Όταν θέλετε να ξεκινήσετε να εργάζεστε σε ένα νέο σχέδιο, μετακινηθείτε εύκολα στο παράθυρο Νέο έγγραφο και παραλείψτε ορισμένες σημαντικές λεπτομέρειες—όπως πείτε στο Illustrator ότι σκοπεύετε να εργαστείτε σε ένα σχέδιο ιστού, ώστε να μην χρησιμοποιείτε χρώματα CMYK. και θολές άκρες του αντικειμένου. Απλώς θυμηθείτε να επιλέξετε τη ρύθμιση προφίλ Internet στο παράθυρο Νέο έγγραφο και θα είστε εντάξει.

3. Ενεργοποιήστε τη στοίχιση πλέγματος pixel για αντικείμενα. Συμβουλές για την εργασία με το Illustrator

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

Το Pixel Grid Alignment θα προσαρμόσει τα ευθύγραμμα οριζόντια και κάθετα τμήματα ενός αντικειμένου ώστε να ταιριάζουν απόλυτα στο πλέγμα pixel, διατηρώντας παράλληλα ομαλά τα καμπύλα και λοξά τμήματα. Το αποτέλεσμα είναι καθαρά σχήματα τέλεια για pixel—κάτι που σίγουρα θέλετε στον σχεδιασμό ιστοσελίδων.

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

Για να ενεργοποιήσετε τη στοίχιση πλέγματος pixel σε επίπεδο αντικειμένου:

1. Επιλέξτε αντικείμενο
2. Ανοίξτε τον πίνακα Μετασχηματισμός (Παράθυρο > Μετασχηματισμός).
3. Επιλέξτε το πλαίσιο ελέγχου "Στοίχιση στο πλέγμα pixel" στο κάτω μέρος του πίνακα (εάν δεν το βλέπετε, κάντε διπλό κλικ στον πίνακα για να εμφανιστούν οι επιλογές)

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

4. Ενεργοποιήστε την προεπισκόπηση pixel.

Η λειτουργία Pixel-Preview θα κάνει το Illustrator να συμπεριφέρεται ακριβώς όπως το Photoshop όταν κλιμακώνει την εικόνα σας πάνω από 100%—αντί να λαμβάνετε τέλεια διανύσματα κάθε φορά, θα βλέπετε πραγματικά τα pixel σαν να δουλεύετε με μια εικόνα ράστερ.

Η ενεργοποίηση της προεπισκόπησης pixel θα σας κάνει να νιώσετε σαν να βρίσκεστε στο Photoshop.

Σκεφτείτε πόσο ωραίο είναι - έχετε όλη τη δύναμη των διανυσματικών γραφικών στα χέρια σας και μπορείτε να δείτε πώς φαίνεται το αποτέλεσμα σε επίπεδο pixel.

Προσεγμένο, έτσι δεν είναι;

Ενεργοποίηση ή απενεργοποίηση της προεπισκόπησης pixel

1. Άνοιγμα μενού προβολής
2. Επιλέξτε Προβολή Pixel.

5. Χρησιμοποιήστε τα παράθυρα Artwork. Συμβουλές για την εργασία με το Illustrator

Φανταστείτε ότι δύο βιντεοκάμερες είναι στραμμένες στο έργο σας.

Μία κάμερα έχει κανονικό επίπεδο ζουμ, που δείχνει το 100% της δουλειάς σας. Η άλλη κάμερα έχει επίπεδο ζουμ 400% και στοχεύει σε ένα συγκεκριμένο εικονίδιο στο οποίο δουλεύατε.

Όπως ένας χειρουργός, χρησιμοποιείτε την κάμερα ζουμ για να κάνετε μικροσκοπικές αλλαγές σε επίπεδο pixel στο εικονίδιο, ρίχνοντας περιστασιακά μια ματιά στην κάμερα 100% ζουμ για να δείτε πώς είναι πραγματικά στο πραγματικό της μέγεθος.

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

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

Για να χρησιμοποιήσετε τα παράθυρα Artwork:

1. Ανοίξτε το μενού Παράθυρο και, στη συνέχεια, επιλέξτε Νέο παράθυρο. Το Illustrator θα δημιουργήσει μια νέα καρτέλα με το ίδιο έγγραφο στην προβολή.
2. Μεταβείτε ξανά στο μενού Παράθυρο, επιλέξτε Τακτοποίηση > Μετακίνηση όλων στο παράθυρο. Αυτό θα σας επιτρέψει να αλλάξετε μέγεθος και τοποθέτηση παραθύρων το ένα δίπλα στο άλλο όπως σας ταιριάζει.
3. Πειραματιστείτε με διαφορετικά επίπεδα ζουμ στα παράθυρα και ξεκινήστε να κάνετε κάποιες αλλαγές για να δείτε πώς λειτουργεί. Συμβουλές για την εργασία με το Illustrator

6. Χρησιμοποιήστε σύμβολα για να δημιουργήσετε γρήγορα κουμπιά, εικονίδια και άλλα.

Πόσες φορές έχετε δημιουργήσει το ίδιο (ή σχεδόν το ίδιο) κουμπί, εικονίδιο ή γραφικό στοιχείο στο Photoshop; Εάν ασχολείστε με το σχεδιασμό ιστοσελίδων, πιθανότατα το κάνετε κάθε μέρα.

Το Illustrator μπορεί να σας βοηθήσει να εξοικονομήσετε χρόνο και να αποφύγετε αυτήν την επαναλαμβανόμενη εργασία με σύμβολα.

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

Αλλά υπάρχει ένας άλλος λόγος για τον οποίο τα σύμβολα είναι ισχυρά, και ονομάζεται instantiation.

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

 

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

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

Ακολουθεί ένα καλό βίντεο που εξηγεί πώς να χρησιμοποιείτε και να χειρίζεστε σύμβολα:

Χρήση συμβόλων στο Adobe Illustrator του Adobe TV .

Για να χρησιμοποιήσετε ένα υπάρχον σύμβολο:

1. Ανοίξτε τον πίνακα Σύμβολα από το μενού Παράθυρο.
2. Σύρετε το επιλεγμένο σύμβολο στην εργασία σας

Δημιουργήστε ένα νέο σύμβολο:

1. Δημιουργήστε μια εικόνα συμβόλου
2. Ανοίξτε τον πίνακα Σύμβολα από το μενού Παράθυρο.
3. Σύρετε μια εικόνα στον πίνακα
4. Κάντε κλικ στο OK στο παράθυρο διαλόγου για επιβεβαίωση.

Για να επεξεργαστείτε ένα σύμβολο:

1. Ανοίξτε τον πίνακα Σύμβολα από το μενού Παράθυρο.
2. Κάντε διπλό κλικ σε ένα σύμβολο για να μεταβείτε στη λειτουργία επεξεργασίας.
3. Όταν τελειώσετε, κάντε διπλό κλικ οπουδήποτε έξω από την εικόνα συμβόλων για έξοδο από τη λειτουργία επεξεργασίας.

7. Επεκτείνετε εύκολα αντικείμενα με κλιμάκωση 9 τμημάτων. Συμβουλές για την εργασία με το Illustrator

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

Αριστερά: Ένα παράδειγμα τεντωμένου κουμπιού με και χωρίς τη ρύθμιση ζουμ 9 τμημάτων. Δεξιά: Η ρύθμιση κλιμάκωσης 9 τμημάτων περιλαμβάνει τη μετακίνηση 4 οδηγών που λένε στον Illustrator ποια μέρη του αντικειμένου προστατεύονται και ποια μέρη μπορούν να κλιμακωθούν.

 

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

Για να καταλάβετε πραγματικά πώς λειτουργεί, ακούστε αυτό το υπέροχο εκπαιδευτικό βίντεο από το Adobe TV για να αναβαθμίσετε γρήγορα:

Χρήση κλιμάκωσης 9 τμημάτων με σύμβολα του Adobe TV .

8. Στρογγυλεμένες γωνίες παντού!

Μπορείτε να δημιουργήσετε ένα στρογγυλεμένο ορθογώνιο στο Photoshop, αλλά το Illustrator σάς επιτρέπει να εφαρμόσετε ένα μη καταστροφικό εφέ στρογγυλεμένης γωνίας σε σχεδόν οποιοδήποτε αντικείμενο. Τι είναι το μη καταστροφικό αποτέλεσμα; Αυτό σημαίνει ότι μπορείτε να το ενεργοποιήσετε, να απενεργοποιήσετε ή να αλλάξετε τις ρυθμίσεις του χωρίς να επηρεαστεί το υποκείμενο αρχικό αντικείμενο.

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

Για να εφαρμόσετε το εφέ στρογγυλεμένης γωνίας:

1. Δημιουργήστε ένα ορθογώνιο ή οποιοδήποτε άλλο αντικείμενο με αιχμηρές γωνίες
2. Από το μενού Εφέ, επιλέξτε Στυλιζέ > Στρογγυλεμένες γωνίες.
3. Εισαγάγετε μια γωνιακή ακτίνα και κάντε κλικ στην Προεπισκόπηση για να δείτε πώς φαίνεται.
4. Κάντε κλικ στο OK για να εφαρμόσετε το εφέ.

Για να αλλάξετε το εφέ στρογγυλεμένης γωνίας:

1. Επιλέξτε ένα αντικείμενο με στρογγυλεμένες γωνίες
2. Ανοίξτε τον πίνακα Εμφάνιση από το μενού Παράθυρο.
3. Βρείτε το εφέ Rounded Corners και κάντε διπλό κλικ σε αυτό για να αλλάξετε τις ρυθμίσεις του ή κάντε κλικ στο εικονίδιο του ματιού για να το ενεργοποιήσετε ή να το απενεργοποιήσετε.

9. Δημιουργία γρήγορου γεμίσματος με μοτίβο ράστερ. Συμβουλές για την εργασία με το Illustrator

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

Οφείλω να ομολογήσω, δεν είναι διαισθητικό, αλλά η λύση είναι απλή.

Για να δημιουργήσετε ένα μοτίβο bitmap:

1. Τοποθετήστε μια εικόνα του μοτίβου στο κομμάτι σας
2. Κάντε κλικ στο "Εισαγωγή" στην επάνω κορδέλα (σημαντικό - δεν θα λειτουργήσει χωρίς αυτό!)
3. Σύρετε ένα μοτίβο στην παλέτα Swatches
4. Εφαρμόστε ένα δείγμα σε οποιοδήποτε αντικείμενο για να το γεμίσετε με ένα σχέδιο

10. Αυτόματη τοποθέτηση κειμένου γύρω από εικόνες και αντικείμενα.

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

Ευτυχώς, το Illustrator σας καλύπτει.

Για να τυλίξετε κείμενο γύρω από μια εικόνα:

1. Επιλέξτε την εικόνα ή το αντικείμενο γύρω από το οποίο θέλετε να τυλίξετε κείμενο
2. Ανοίξτε το μενού Αντικείμενο, επιλέξτε Αναδίπλωση κειμένου > Νέο.
3. Για να ορίσετε την απόσταση αναδίπλωσης, ανοίξτε ξανά το μενού Αναδίπλωση κειμένου και επιλέξτε Επιλογές αναδίπλωσης κειμένου.
4. Μετακινήστε την εικόνα πάνω από το κείμενο για να δείτε το εφέ αναδίπλωσης

11. Δημιουργήστε πλούσια οπτικά εφέ με ρυθμίσεις εμφάνισης αντικειμένων. Συμβουλές για την εργασία με το Illustrator

Στο Illustrator, ο πίνακας εμφάνισης ενός αντικειμένου λειτουργεί σαν εφέ επιπέδου στο Photoshop—μπορείτε να προσθέσετε πολλαπλά γεμίσματα και πινελιές σε ένα αντικείμενο και, στη συνέχεια, να παίξετε με τους τρόπους μεταφοράς, την αδιαφάνεια και τα εφέ για να έχετε ενδιαφέροντα αποτελέσματα.

Αυτό το κείμενο είναι απλώς ένα μεμονωμένο διανυσματικό αντικείμενο, με στυλ χρησιμοποιώντας τον πίνακα "Εμφάνιση και εφέ".

Η παιδική χαρά είναι αρκετά μεγάλη - από σκιές, θόλωση και λάμψη έως υφή, παραμόρφωση και 3D. Με αυτόν τον τρόπο μπορείτε να αναδημιουργήσετε τα περισσότερα από τα εφέ από το Photoshop ενώ εξακολουθείτε να εργάζεστε με διανυσματικά γραφικά.

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

Mastering the Appearance Panel του Adobe TV .

Είστε έτοιμοι να αρχίσετε να πειραματίζεστε με το Illustrator;

Η δημιουργία ιστοσελίδων και διεπαφών χρήστη με χρήση του Photoshop έχει γίνει πλέον ο κανόνας και οι περισσότεροι σχεδιαστές είναι ευχαριστημένοι με αυτή τη λύση. Συμβουλές για την εργασία με το Illustrator

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

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