Υποενότητα 12.1: Gimp για το WEB

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 12.1: Gimp για το WEB
Printed by: Guest user
Date: Saturday, 23 November 2024, 10: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!