Δημιουργήστε δύο ή περισσότερες περιοχές με δυνατότητα κλικ προσθέτοντας νέα κομμάτια στο Photoshop.
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Χρησιμοποιώντας το Slice Tool στο Adobe Photoshop CC, μπορείτε να μετατρέψετε οποιαδήποτε εικόνα, ή μέρος μιας εικόνας, σε υπερσύνδεσμο με δυνατότητα κλικ. Το πλεονέκτημα αυτής της δυνατότητας είναι ότι για να λειτουργήσει η υπερ-σύνδεση, πρέπει να αποθηκεύσετε την εικόνα ως αρχείο HTML και όχι ως απλό JPG ή PNG. Ευτυχώς, αυτή είναι μια δυνατότητα που μπορεί να χρησιμοποιήσει ο καθένας, ακόμα κι αν δεν είστε ειδικός στην κωδικοποίηση. Το Photoshop δημιουργεί τον κώδικα HTML για εσάς και ενσωματώνει την εικόνα σε μορφή εικόνας φιλική στον Ιστό.
Βήμα 1
Επιλέξτε το "Εργαλείο Slice".
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Ανοίξτε οποιαδήποτε εικόνα στο Photoshop. Στην ιδανική περίπτωση, θα πρέπει να είναι κάτι αρκετά μεγάλο ώστε να εμφανίζεται καλά σε ένα πρόγραμμα περιήγησης Ιστού. Επιλέξτε το "Εργαλείο Slice" από την Εργαλειοθήκη. Εάν δεν είναι ορατό, κάντε κλικ παρατεταμένα στην κάτω δεξιά γωνία του Εργαλείου περικοπής ή άλλου εργαλείου στην ομάδα του που είναι ορατό και, στη συνέχεια, επιλέξτε το "Εργαλείο τεμαχισμού".
Το βίντεο της ημέρας
Βήμα 2
Σύρετε τον κέρσορα πάνω στην εικόνα για να δημιουργήσετε μια φέτα.
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Σύρετε τον κέρσορα πάνω από την περιοχή στην οποία θέλετε να έχετε δυνατότητα κλικ. Για να δημιουργήσετε έναν μεμονωμένο υπερσύνδεσμο σε μια εικόνα, μπορείτε να σύρετε τον κέρσορα σε ολόκληρη την εικόνα.
Βήμα 3
Δημιουργήστε όσες φέτες θέλετε.
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Σύρετε τον κέρσορα του Εργαλείου Slice μόνο σε ένα τμήμα της εικόνας εάν θέλετε περισσότερους από έναν υπερσυνδέσμους. Αφού αφήσετε το κουμπί του ποντικιού, μπορείτε στη συνέχεια να δημιουργήσετε ένα δεύτερο κομμάτι για τον επόμενο υπερσύνδεσμο. Εάν θέλετε, μπορείτε να δημιουργήσετε δώδεκα ή περισσότερους υπερσυνδέσμους σε μία μόνο εικόνα.
Βήμα 4
Κάντε διπλό κλικ σε ένα κομμάτι για να προσθέσετε μια υπερ-σύνδεση.
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Κάντε διπλό κλικ σε ένα κομμάτι με το εργαλείο Slice για να ανοίξετε το παράθυρο Επιλογές τομής. Για να δημιουργήσετε έναν υπερσύνδεσμο, πρέπει να πληκτρολογήσετε τη διεύθυνση της ιστοσελίδας στο πεδίο "URL". Ενώ τα άλλα πεδία είναι προαιρετικά, η χρήση ονόματος θα βοηθήσει στη διάκριση ενός συνδέσμου από τον άλλο. Η προσθήκη του "_blank" στο πεδίο Target προσδιορίζει ότι ο σύνδεσμος πρέπει να ανοίξει σε μια νέα καρτέλα προγράμματος περιήγησης Ιστού. Το πεδίο Alt Tag είναι το κείμενο που εμφανίζεται εάν η εικόνα σας δεν είναι ορατή σε προγράμματα περιήγησης χωρίς γραφικά ή κατά τη φόρτωση της εικόνας. Το πεδίο "Κείμενο μηνύματος" είναι αυτό που εμφανίζει το πρόγραμμα περιήγησης στη θέση της διεύθυνσης URL στη γραμμή κατάστασης.
Βήμα 5
Αποθηκεύστε το αρχείο σε μορφή HTML.
Πίστωση εικόνας: Η εικόνα είναι ευγενική προσφορά της Adobe.
Επιλέξτε "Αποθήκευση για τον Ιστό" από το μενού Αρχείο μόλις ολοκληρωθούν οι σύνδεσμοί σας. Επιλέξτε είτε "PNG-24" ή "JPG" ως προεπιλογή και, στη συνέχεια, κάντε κλικ στο κουμπί "Αποθήκευση". Κάντε κλικ στο μενού "Μορφή" και επιλέξτε "HTML και εικόνες". Αυτό αλλάζει τη μορφή αρχείου σε HTML. Αφού κάνετε κλικ στο "Αποθήκευση", το Photoshop δημιουργεί μια ενιαία σελίδα HTML χρησιμοποιώντας την εικόνα και τους συνδέσμους που δημιουργήσατε. Το ίδιο το αρχείο εικόνας αποθηκεύεται σε έναν φάκελο Εικόνες. Μεταφορτώστε τόσο το αρχείο HTML όσο και το φάκελο Images στον ίδιο κατάλογο στον ιστότοπό σας χρησιμοποιώντας τον αγαπημένο σας πρόγραμμα-πελάτη FTP.
Υπόδειξη
Με ένα βασικό πρόγραμμα επεξεργασίας κειμένου όπως το Σημειωματάριο, μπορείτε να επεξεργαστείτε τον κώδικα του αρχείου HTML όπως θα κάνατε με οποιαδήποτε ιστοσελίδα. Για παράδειγμα, εάν προτιμάτε να διατηρείτε τις εικόνες του ιστότοπού σας σε διαφορετικό φάκελο, μπορείτε να αλλάξετε τον καθορισμένο φάκελο "/images" σε οποιονδήποτε φάκελο επιλέξετε και στη συνέχεια να μετακινήσετε την εικόνα σε αυτόν τον φάκελο.
Δεν χρειάζεστε το Photoshop για να προσθέσετε έναν υπερσύνδεσμο σε μια εικόνα μέσα σε μια ιστοσελίδα ή email. Τα περισσότερα προγράμματα email περιλαμβάνουν μια δυνατότητα υπερσύνδεσης, η οποία συνήθως είναι διαθέσιμη κάνοντας δεξί κλικ στην εικόνα αφού την εισαγάγετε στο μήνυμά σας. Εάν ανεβάσετε την εικόνα στον ιστότοπό σας, μπορείτε να την προσθέσετε ως εικόνα με δυνατότητα κλικ σε οποιαδήποτε σελίδα χρησιμοποιώντας κώδικα HTML5 όπως: 
