el:school:lessons:html:ergastirio:joomla:askisi9


Gimp - Άσκηση 9 - Εικόνες - Εύρεση και Επεξεργασία

Δοκιμασμένο σε Gimp 2.8.14, εκτύπωση σε firefox

  • Νέα : Επεξεργασία διαστάσεων με Gimp

  • Για να εισάγουμε εικόνες στο joomla θα περάσουμε από τα παρακάτω στάδια. Εύρεση εικόνων στο διαδίκτυο, τροποποίηση διαστάσεων εικόνων με Gimp, μεταφόρτωση (upload) μέσω joomla ή μέσω ftp και τέλος εισαγωγή εικόνων σε άρθρο στο joomla.


ΕΙΚΟΝΕΣ


  1. ΕΥΡΕΣΗ ΕΙΚΟΝΩΝ στο διαδίκτυο
    • Θα βρούμε εικόνες για να τοποθετήσουμε στα 2 άρθρα, Κέρκυρα και Παρίσι
    1. Πηγαίνουμε στην αρχική διεύθυνση του google και κάνουμε κλικ στο Εικόνες. Κάνουμε αναζήτηση για Κέρκυρα. Στα αποτελέσματα της αναζήτησης, πατάμε στον σύνδεσμο Εργαλεία Αναζήτησης και αλλάζουμε το φίλτρο Όλα τα μεγέθη σε Μεγάλες. Αυτό θα μας επιστρέψει εικόνες μεγάλου μεγέθους.
      1. Κάνουμε δεξί κλικ πάνω σε κάποια που μας αρέσει και πηγαίνουμε Προβολή Εικόνας
    2. Ενώ βλέπουμε την εικόνα στο μεγάλο της μέγεθος (καλύπτει όλο το παράθυρο), πατάμε Αποθήκευση εικόνας ως και αποθηκεύουμε μέσα στον φάκελο mathimata/html/joomla/eikones (αν δεν υπάρχει τον δημιουργούμε) με όνομα kerkyra1.jpg
    3. Με όμοιο τρόπο βρίσκουμε και αποθηκεύουμε στον ίδιο φάκελο, τουλάχιστον άλλες 2 εικόνες ως kerkyra2.jpg και kerkyra3.jpg
    4. Αφού βρήκαμε εικόνες από την Κέρκυρα, θα ψάξουμε και για εικόνες από το Παρίσι πάντα στο Μεγάλο μέγεθος. Με όμοιο τρόπο λοιπόν, βρίσκουμε 3 εικόνες για Παρίσι και αποθηκεύουμε στον ίδιο φάκελο ως paris1.jpg, paris2.jpg και paris3.jpg
  2. ΑΛΛΑΓΗ ΔΙΑΣΤΑΣΕΩΝ ΕΙΚΟΝΩΝ μέσω Gimp
    • Οι εικόνες που βρήκαμε μπορεί να είναι αρκετά καλής ποιότητας αλλά είναι υπερβολικά μεγάλες, αφού ξεπερνούν σε ανάλυση (μέγεθος) όλο το παράθυρο του περιηγητή μας. Παράλληλα είναι αρκετά μεγάλα ως αρχεία, οπότε η ιστοσελίδα μας θα καθυστερήσει να εμφανιστεί στον επισκέπτη. Εμείς θα θέλαμε να τις εμφανίσουμε σε μικρότερο μέγεθος μαζί με κείμενο. Πάμε λοιπόν να τις επεξεργαστούμε με το Gimp.
    1. Ξεκινάμε το Gimp και πηγαίνουμε Αρχείο/Άνοιγμα, βρίσκουμε την εικόνα kerkyra1.jpg και την φορτώνουμε.
    2. Πηγαίνουμε Εικόνα / Κλιμάκωση Εικόνας και αλλάζουμε μόνο το Πλάτος σε 400. Κάνουμε κλικ στο Ύψος (ή πατάμε ΤΑΒ) και παρατηρούμε ότι άλλαξε και αυτό. Αυτό συμβαίνει γιατί οι αναλογίες ύψους-πλάτους είναι κλειδωμένες. Αυτό φαίνεται και από την αλυσίδα δεξιά τους που είναι ενωμένη. Πατάμε στο κουμπί Κλιμάκωση για να ολοκληρώσουμε την αλλαγή.
    3. Πηγαίνουμε Προβολή / Εστίαση και επιλέγουμε 1:1 (100%). Σε αυτό το μέγεθος θα εμφανιστεί η εικόνα μας.
    4. Πηγαίνουμε Αρχείο / Εξαγωγή ως. ΠΡΟΣΟΧΗ! Αποθηκεύουμε με άλλο όνομα : kerkyra1-small.jpg. Θα κρατάμε δηλαδή και τις μεγάλες εικόνες και θα αποθηκεύουμε τις μικρές προσθέτοντας -small.
    5. Πηγαίνουμε Αρχείο / Κλείσιμο και ξανά Αρχείο / Άνοιγμα και ψάχνουμε την επόμενη εικόνα kerkyra2.jpg. Όπως προηγουμένως αλλάζουμε το Πλάτος σε 400 και αποθηκεύουμε ως kerkyra2-small.jpg
    6. Με όμοιο τρόπο δημιουργούμε τις : kerkyra3-small.jpg, paris1-small.jpg, paris2-small.jpg και paris3-small.jpg.
    7. Έχουμε τροποποιήσει 6 εικόνες, σε μικρότερο μέγεθος εμφάνισης. Πάμε όμως να δούμε και τι αλλαγή έγινε στο μέγεθος αρχείου, που μας ενδιαφέρει ώστε η ιστοσελίδα μας να εμφανίζεται γρήγορα. Πηγαίνουμε από τον περιηγητή αρχείων στον φάκελο mathimata/joomla/eikones και πατάμε στην Προβολή ως Λίστα ή ως Λεπτομέρειες για να μας εμφανιστούν τα μεγέθη αρχείων.
    • Παρατηρούμε ότι τα μεγέθη των εικόνων με μικρές διαστάσεις (τα αρχεία -small) είναι τουλάχιστον 10 φορές μικρότερα. Αυτό σημαίνει ότι η ιστοσελίδα μας θα εμφανίζεται τουλάχιστον 10 φορές πιο γρήγορα. Είμαστε έτοιμοι να ανεβάσουμε τις φωτογραφίες μας στο site.
google : εύρεση μεγάλων εικόνωνGimp : kerkyra1.jpg - πλάτος 400px


el/school/lessons/html/ergastirio/joomla/askisi9.txt · Last modified: Y/m/d H:i (external edit)