Υποενότητα 11.3: Στρώματα και εξαγωγή εικόνων

Πολλαπλά στρώματα σε κοινό υπόβαθρο

Για την εισαγωγή πολλαπλών στρωμάτων layers αρχίζουμε ανοίγοντας μια εικόνα που θα είναι η εικόνα υποβάθρου - background (freeImages/desert-2340326_1920.jpg).

Open as layer. Μέγεθος στρώματος- Layer boundary size. 

Ανοίγουμε ως στρώμα την εικόνα xsfFiles/girl_01.xcf.

Σημειώστε ότι η εικόνα βάσης έχει ύψος 1080px ενώ το στρώμα είναι 1280px. Επομένως, ξεκινάμε ρυθμίζοντας το ύψος του στρώματος να είναι το ίδιο με εκείνο της εικόνας υποβάθρου. Στη συνέχεια, θα αλλάξουμε το πλάτος του στρώματος για να το μειώσουμε. Αυτό το βήμα είναι προαπαιτούμενο εάν θέλουμε να χρησιμοποιήσουμε το εργαλείο Align.

Δουλεύουμε στο layers> Layer Boundary Size

Μετά την ολοκλήρωση των παραπάνω, μπορούμε να χρησιμοποιήσουμε το εργαλείο στοίχισης- Align tool για να στοιχίσουμε το στρώμα στην εικόνα υποβάθρου.  

Προσθήκη νέου layer

Θα προσθέσουμε ένα νέο στρώμα (xsfFiles / birds.xcf) και θα δούμε πώς μπορούμε να το αντιγράψουμε. Θα δούμε το εργαλείο που δημιουργεί κατοπτρικά αντίγραφα -  Flip tool, οριζόντια ή κατακόρυφα, εργαλείο κλίμακας - Scale tool.

Το τρίτο layer

Το εργαλείο περιστροφής - Rotate tool

Ομαδοποίηση-σύνδεση των στρωμάτων.

Εδώ θα δούμε επίσης ότι η σειρά των στρωμάτων ορίζει πώς θα εμφανίζονται στην οθόνη. Αυτό σημαίνει ότι μια εικόνα με υψηλότερη σειρά θα εμφανιστεί μποροστά από μια εικόνα που βρίσκεται σε χαμηλότερη σειρά. Στο βίντεο, χρησιμοποιούμε αυτή τη λειτουργία για να "κρύψουμε" τα πουλιά πίσω από το κορίτσι..

Θα προσθέσουμε ένα νέο στρώμα (xsfFiles / cyclist.xcf). Το εργαλείο προοπτικής - Perspective Tool χρησιμοποιείται για την αλλαγή της "προοπτικής" του επιλεγμένου περιεχομένου. 

Μπορείτε να βρείτε το αρχείο του βίντεο στη διεύθυνση: courseGimp>xcfFiles>image70.xcf

Πολλαπλά στρώματα δίπλα - δίπλα

Δημιουργούμε ένα νέο αρχείο (640X320) και ανοίγουμε τις εικόνες που θέλουμε να προσθέσουμε στο νέο αρχείο ως στρώματα.

Πρώτοlayer (freeImages/chocolate-2202123_1920.jpg)

Προσθέτουμε την ιδιότητα διαφάνειας και κάνουμε την εικόνα διαφανή. Επίσης, χρησιμοποιούμε "scale layer" για να αλλάξουμε το πλάτος σε 320px.

Δεύτερο layer (freeImages/chocolate-567234_1920.jpg)

Επαναλαμβάνουμε την ίδια διαδικασία που κάναμε για το "Πρώτο layer".

Third layer (freeImages/ballon.png)

Αυτή το στρώμα είναι ήδη διαφανέςς, επομένως αλλάζουμε μόνο το πλάτος.

Τελικές ρυθμίσεις στα layers

Εδώ βλέπουμε παραδείγματα χρήσης  των εργαλείων "autocrop", "align" και "move" tools στα στρώματα. 

Τελικές ρυθμίσεις στην εικόνα background (transparency, crop).

Μπορείτε να βρείτε το αρχείο του βίντεο στη διεύθυνση: courseGimp>xcfFiles>image80.xcf

Εξαγωγή εικόνων για το WEB

Στο WEB κυρίως χρησιμοποιούμε τα .png, .jpg και .gif formats.

Το format .jpg 

Οι συνήθεις επεκτάσεις των αρχείων  JPEG files είναι .jpg, .JPG, ή . JPEG. Αυτή η μορφή εικόνας χρησιμοποιείται ευρέως επειδή έχει το πλεονέκτημα ότι συμπιέζει τις εικόνες πιο αποτελεσματικά από οποιαδήποτε άλλη μορφή, ενώ επιτυγχάνει ελάχιστη απώλεια ποιότητας. Ωστόσο, δεν υποστηρίζει τη διαφάνεια και τα  multiple layers. Αυτό σημαίνει ότι όταν χρησιμοποιούμε αυτή τη μορφή, πρέπει να αφαιρέσουμε το κανάλι άλφα κάνοντας την εικόνα πιο "επίπεδη- flattening ". 

Μια πολύ καλή χρήση της μορφής jpeg είναι στην περίπτωση μιας φωτογραφίας με πολλαπλά χρώματα. Είναι σημαντικό να βρεθεί η σωστή ισορροπία μεταξύ ποιότητας και συμπίεσης.

Το format .png 

Η μορφή .png είναι ιδανική για εικόνες που δεν περιέχουν πολλά χρώματα. Καλό παράδειγμα είναι τα κουμπιά, τα εικονίδια, τα στιγμιότυπα οθόνης κλπ. Αυτός ο τύπος μορφής υποστηρίζει τη διαφάνεια. Όταν χρησιμοποιούμε αυτόν τον τύπο μορφής, πρέπει επίσης να "flatten " την εικόνα, όμως δεν χάνουμε τη διαφάνεια.

The .gif format

Αυτός ο τύπος μορφής εικόνας είναι ιδανικός για τη δημιουργία κινούμενων εικόνων, όπως θα δούμε στην επόμενη ενότητα. Ωστόσο, δεν υποστηρίζει ορισμένες βασικές ιδιότητες, όπως η μεγάλη ανάλυση εκτύπωσης. Επομένως, αν χρειάζεστε αυτές τις ιδιότητες πρέπει να επιλέξετε διαφορετική μορφή (π.χ. png).

Μπορείτε να βρείτε το αρχείο του βίντεο στη διεύθυνση: courseGimp>xcfFiles>image700.gif, image700.jpg, image700.png

. Η λειτουργία Flattening  είναι να συνδυάσει όλα τα στρώματα σε ένα μόνο στρώμα. Θα πρέπει να τη χρησιμοποιείτε μόνο αφού είστε βέβαιοι ότι έχετε το τελικό αποτέλεσμα, αν εφαρμόσετε Flattening,   δεν είστε πλέον σε θέση να επεξεργαστείτε τα στρώματα.

Άσκηση

Άσκηση

Τώρα είναι καιρός να κάνετε τη δική σας δημιουργία! Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις διαθέσιμες εικόνες ή να κατεβάσετε κάτι της επιλογής σας.

Ο στόχος αυτής της άσκησης είναι να δημιουργήσετε και να εξαγάγετε μια εικόνα που θα αντικαταστήσει το chocolatethings.jpg στο index.html του ιστότοπού σας!

Αποθηκεύστε το αρχείο ως exersice11.3.xcf στον φάκελο "courseGimp>exercises"