Πώς δημιουργείτε έναν χάρτη εικόνων στο Adobe Illustrator;

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

Ωστόσο, μπορείτε να προετοιμάσετε την εικόνα και να ορίσετε περιοχές με δυνατότητα κλικ στο Illustrator που μπορείτε στη συνέχεια να χρησιμοποιήσετε στον κωδικό ιστού σας:

1. Προετοιμάστε την εικόνα σας στο Illustrator:

* Ανοίξτε την εικόνα σας στο Illustrator.

* Βεβαιωθείτε ότι είναι στο επιθυμητό μέγεθος και ανάλυση για τον ιστότοπό σας.

* Διανυσμαώστε την εικόνα: Αυτό το καθιστά κλιμακωτό χωρίς να χάσει την ποιότητα. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας τη λειτουργία Trace Image (παράθυρο> ίχνος εικόνας).

* Ομάδα όλα τα στοιχεία: Επιλέξτε όλα τα στοιχεία της εικόνας σας και ομαδοποιήστε τα (Object> Group) για να τα κρατήσετε μαζί.

2. Ορίστε τις περιοχές με δυνατότητα κλικ:

* Χρησιμοποιήστε το εργαλείο στυλό (P) ή τα εργαλεία σχήματος: Για να δημιουργήσετε ακριβή σχήματα για τις περιοχές που μπορείτε να κάνετε κλικ.

* Δημιουργήστε ένα νέο στρώμα: Αυτό βοηθά στην οργάνωση των στοιχείων του χάρτη της εικόνας σας.

* Σχεδιάστε τα σχήματα στην κορυφή της εικόνας σας: Βεβαιωθείτε ότι τα σχήματα είναι σαφώς καθορισμένα και αντιστοιχούν στις περιοχές που θέλετε να κάνετε κλικ.

* Ονομάστε τα σχήματα σας: Αυτό θα είναι χρήσιμο όταν γράφετε τον κωδικό HTML. Χρησιμοποιήστε σημαντικά ονόματα που περιγράφουν την περιοχή, π.χ., "Product-1", "About-Us", "Contact-Form" κ.λπ.

3. Εξαγωγή της εικόνας και των σχημάτων:

* Εξαγωγή της εικόνας ως PNG ή JPG: Αυτή θα είναι η κύρια εικόνα σας στον ιστότοπό σας.

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

4. Δημιουργήστε τον κωδικό HTML και JavaScript:

* Στο αρχείο HTML, προσθέστε την ετικέτα εικόνας για την εξαγόμενη εικόνα σας.

* Χρησιμοποιήστε τις ετικέτες `MAP 'και' Area 'για να ορίσετε τις περιοχές με δυνατότητα κλικ. Το χαρακτηριστικό `shape` ορίζει τον τύπο σχήματος (rect, circle, poly) και το χαρακτηριστικό` coords` ορίζει τις συντεταγμένες του σχήματος σας (ανατρέξτε στο αρχείο SVG για αυτές τις τιμές). Το χαρακτηριστικό `href` συνδέει την περιοχή σε μια συγκεκριμένη διεύθυνση URL.

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

Παράδειγμα html:

`` html

`` `

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

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