Υποενότητα 12.1: Gimp για το WEB
Site: | ΕΛ/ΛΑΚ Moodle |
Course: | Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου |
Book: | Υποενότητα 12.1: Gimp για το WEB |
Printed by: | Guest user |
Date: | Thursday, 21 November 2024, 5:17 PM |
Description
- Χάρτης εικόνων - Image maps
- Κινούμενες εικόνες - Animated Gifs
Image map
Image map iείναι μια διαδικασία με την οποία μπορούμε να δημιουργήσουμε πεδία με δυνατότητα κλικ σε μια εικόνα και να τις συνδέσουμε σε διαφορετικούς προορισμούς.
Δημιουργία χάρτη εικόνων
Χρησιμοποιώντας το Gimp θα δημιουργήσουμε ένα ξεχωριστό αρχείο .map
Δημιουργία αρχείου HTML
Θα πάρουμε το αρχείο .map και θα το χρησιμοποιήσουμε για να δημιουργήσουμε ένα αρχείο HTML.
Προσέξτε αν το Gimp εξήγαγε αυτόματα τους σωστούς υπερσυνδέσμους στο αρχείο .map!
Εάν όχι, διορθώστε τις στο αρχείο HTML.
Ας δούμε το αρχείο HTML:
Μπορείτε να βρείτε το αρχείο του βίντεο στη διεύθυνση: courseGimp>imagemap
Animated Gifs
Το κινούμενο gif (Graphics Interchange Format) είναι ένα σύνολο εικόνων που έχουν τις ίδιες διαστάσεις και εμφανίζονται με συγκεκριμένη σειρά.
Μερικά σημαντικά βήματα κατά τη δημιουργία κινούμενων gif είναι:
- Οι εικόνες θα πρέπει να ανοίξουν ως layers.
- Οι εικόνες πρέπει να εξάγονται ως .gif
- Κατά την εξαγωγή μιας εικόνας, από τις επιλογές που θα πρέπει να ελέγξετε το πλαίσιο "As animation", ορίστε τη διάρκεια - time και επιλέξτε το "One frame per layer". Ο λόγος για τον τελευταίο είναι ότι επιτρέπουμε να είναι ορατό κάθε φορά μόνο ένα στρώμα.
Ας δημιουργήσουμε ένα animated gif
Ας δούμε το αρχείο:
Αυτή η μορφή αρχείου μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία μικρών animations.
Μπορείτε να βρείτε το αρχείο του βίντεο στη διεύθυνση: courseGimp>animated.gif
Άσκηση
Άσκηση
Τώρα είναι καιρός να κάνετε τη δική σας δημιουργία! Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις διαθέσιμες εικόνες ή να κατεβάσετε κάτι της επιλογής σας.
Ο στόχος αυτής της άσκησης είναι η δημιουργία ενός κινούμενου gif ή ενός χάρτη εικόνων.
Αποθηκεύστε το αρχείο ως exersice12.1.xcf
στον φάκελο "courseGimp>exercises"
Θα το χρησιμοποιήσετε στην υποενότητα 12.3!