1.4.1.jpg


Τα προγράμματα διαχείρισης γραφικών δημιουργούν, επεξεργάζονται και αποθηκεύουν ψηφιακές εικόνες δύο μορφών:
  • τις χαρτογραφικές ή ψηφιογραφικές εικόνες (bitmap graphics), όπως οι φωτογραφίες ή οι εικόνες που προέρχονται από ψηφιοποίηση μέσω σαρωτή ή που δημιουργείτε με προγράμματα ζωγραφικής (για παράδειγμα MS Paint, KolourPaint)
  • τα διανυσματικά γραφικά (vector ή draw-type graphics), όπως τα περισσότερα Clipart ή τα σχέδια που δημιουργείτε με τα εργαλεία σχεδίασης στους επεξεργαστές κειμένου.
graphics1.png
Πηγή: Φωτόδεντρο-Διανυσματικά γραφικά και ψηφιογραφικές εικόνες

static_icons.jpg
Παρουσίαση: Διανυσματικές & Ψηφιογραφικές Εικόνες

Χαρτογραφικές εικόνες (bitmap graphics)

raster_vs_vector1.jpg
Πηγή: Raster vs Vector
imageeditor.jpg
Πηγή: Image editor for editing icons and bitmaps

Οι ψηφιογραφικές ή χαρτογραφικές εικόνες οργανώνονται ως ένα ορθογώνιο πλέγμα από χρωματιστές ψηφίδες που ονομάζονται εικονοστοιχεία (pixels). Το εικονοστοιχείο (pixel, συντομογραφία του Picture Element) είναι το μικρότερο στοιχειώδες κομμάτι μιας ψηφιογραφικής εικόνας, η οποία μπορεί να αποτελείται από εκατομμύρια pixels (ένα megapixel είναι ένα εκατομμύριο pixels). Για την περιγραφή του κάθε pixel αποθηκεύονται πληροφορίες σχετικά με το χρώμα του (άσπρο, μαύρο, απόχρωση του γκρι ή έγχρωμο). Η ποιότητα μιας ψηφιογραφικής εικόνας εξαρτάται από την πυκνότητα των εικονοστοιχείων καθώς και τον αριθμό των χρωμάτων που έχουν χρησιμοποιηθεί, και επηρεάζεται από την αύξηση ή μείωση των φυσικών της διαστάσεων. Επίσης, όταν μεγεθύνεται (zoom), το ανθρώπινο μάτι αρχίζει να διακρίνει τα μεμονωμένα pixel που τη συνθέτουν.

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

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


Διανυσματικές εικόνες (vector graphics)


inkscape-0.48-moonlight-views.png
Πηγή: https://inkscape.org

Ενώ το βασικό δομικό στοιχείο μιας ψηφιογραφικής εικόνας είναι το εικονοστοιχείο, τα διανυσματικά γραφικά συντίθεται από γεωμετρικά σχήματα (σημεία, γραμμές, καμπύλες, ορθογώνια, ελλείψεις, πολύγωνα κ.α.) που περιγράφονται με μαθηματικό τρόπο, με τη βοήθεια συντεταγμένων, γωνιών και αποστάσεων. Το μέγεθος τους εξαρτάται από την πολυπλοκότητα των σχημάτων που περιγράφουν. Είναι σημαντικά μικρότερα σε σχέση με τα αντίστοιχα χαρτογραφικά αρχεία, επειδή αποθηκεύονται μόνο οι πληροφορίες που είναι απαραίτητες για τον σχεδιασμό των σχημάτων.
  • Τα διανυσματικά αρχεία παρέχουν δυνατότητες αλλαγής μεγέθους και περιστροφής των σχημάτων, χωρίς να προκαλούνται αλλοιώσεις. Τα νέα αρχεία διατηρούν αναλλοίωτα τα βασικά χαρακτηριστικά τους (σχετικές διαστάσεις και σχετική θέση).
  • Για τη δημιουργία ενός σχήματος επιτρέπεται ο προσδιορισμός ενός μόνο χρώματος ή γέμισμα με χρωματική διαβάθμιση (color gradient), αλλά δεν είναι δυνατή η ενσωμάτωση φωτορεαλιστικής ποιότητας (σε αντίθεση με τις χαρτογραφικές εικόνες όπου μπορείς να αλλάξεις το χρώμα σε κάθε pixel).
  • Τα διανυσματικά γραφικά είναι ανεξάρτητα ανάλυσης (resolution free) και προσαρμόζονται αυτόματα στο μέγεθος και την ανάλυση του μέσου που προβάλλονται ή εκτυπώνονται.


raster-vector.gif

Πηγή: Vector and digital graphics
Bitmap_VS_SVG.svg copy.png
Πηγή: Scalable Vector Graphics - Wikipedia

Δραστηριότητες
  • 1.4.1 ΦΕ-1 Επεξεργασία Διανυσματικής εικόνας, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/9tlKG7)
  • 1.4.1 ΦΕ-2 Δημιουργία διανυσματικού γραφικού, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/rvRC3d)
  • 1.4.1 ΦΕ-3 Δημιουργία Ψηφιογραφικού γραφικού, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/2XS5ya)
  • 1.4.1 ΦΕ-4 Έλεγχος χαρακτηριστικών Ψηφιογραφικής εικόνας, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/1utgIR)
  • 1.4.1 ΦΕ-5 Διαφορές Διανυσματικής - Ψηφιογραφικής εικόνας, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/abDMp7)
  • 1.4.1 ΦΕ-6 Το σταυρόλεξο του διανυσματικού γραφικού, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/ZBstJM, http://goo.gl/24ZV5x)
  • 1.4.1 ΦΕ-7 Το σταυρόλεξο της ψηφιογραφικής εικόνας, ΠΛΕΙΑΔΕΣ/Νηρηίδες-Πολυμέσα (https://goo.gl/ZsD0pY)
  • Χρησιμοποιώντας το μαθησιακό αντικείμενο Φωτόδεντρο: Διαδραστική Εφαρμογή δημιουργίας ψηφιογραφικών και διανυσματικών εικόνων (http://goo.gl/b1hhsJ), θα συγκρίνεις τις δύο μορφές εικόνας.
  • Ένας από τους πιο κοινούς μορφότυπους διανυσματικών γραφικών είναι τα κλιμακούμενα διανυσματικά γραφικά (Scalable Vector Graphics, SVG). Πως θα τα ενσωματώσεις σε σελίδες HTML; Θα αναζητήσεις πληροφορίες και θα υλοποιήσεις δραστηριότητες στο παρακάτω tutorial (http://www.w3schools.com/graphics/svg_intro.asp).



ΒΙΒΛΙΟΓΡΑΦΙΑ - ΑΝΑΦΟΡΕΣ
  • Raster vs Vector (Ανακτήθηκε 28/09/2015 από http://goo.gl/wIWfWE)
  • University of Massachusetts (2012). Basics of Digital Images, (Ανακτήθηκε 19/11/2016 από https://www.umass.edu/it/sites/it/files/2012/04/03/image_basics.pdf)
  • Wikipedia (2015) Pixel (Ανακτήθηκε 28/09/2015 από (https://goo.gl/lhgtCx)
  • Αρβανίτης, Ν., Αναστασόπουλος, Γ., Μπελεσιώτης Β., Σγούρος, Ν., Σωτήρχος, Σ., Παναγιωτόπουλος, Θ. (2000) Εφαρμογές Πολυμέσων, Παιδαγωγικό Ινστιτούτο, Αθήνα 2000
  • Βουτυράς, Γ., Αλεξίου, Ι., Γαροφαλάκης, Ι., Τζήμας, Ι. (2000) Πολυμέσα, Παιδαγωγικό Ινστιτούτο, Αθήνα 2000
  • Γεωργίου, Θ., Κάππος, Ι., Λαδιάς, Α., Μικρόπουλος, Α., Τζιμογιάννης, Α., Χαλικά, Κ. Πολυμέσα-Δίκτυα, ΟΕΔΒ, Αθήνα (Ανακτήθηκε 24/09/2015 από http://goo.gl/zVVcAe)
  • Μαλλιάρα, Π., Μπακαμήτσου, Α., Δεληγιάννης, Φ., Κωστάκης, Π., Λαγός, Δ., Λαδιάς, Α., Μικρόπουλος, Α., Μπέλλου, Ι., Ράμμος, Χ., Σαριδάκη, Α., Χαλκίδης, Α. (2008). Πολυμέσα, ΠΛΕΙΑΔΕΣ/ΝΗΡΙΗΔΕΣ, Ερευνητικό Ακαδημαϊκό Ινστιτούτο Τεχνολογίας Υπολογιστών (ΕΑ.ΙΤΥ) (Ανακτήθηκε 24/09/2015 από http://goo.gl/eiQzhc)

ΠΗΓΕΣ - ΥΛΙΚΟ ΓΙΑ ΕΠΙΠΛΕΟΝ ΜΕΛΕΤΗ