• How To: Ευκρινή GUI captures μικρού μεγέθους

    Προσωπικά όταν κάποιος έχει ένα πρόβλημα και επειδή δεν ξέρει ή βαριέται να κάνει ένα μικρό, ευκρινές και κατατοπιστικό capture του σημείου που έχει πρόβλημα, δεν κάνω τον κόπο καν να το διαβάσω.
    Όταν τα captures μας είναι καθαρά (ευκρινή), μικρά και σαφή (σε ακριβώς το σημείο που έχουμε το πρόβλημα) κερδίζουμε πολλαπλά διότι:

    - είναι μικρά σε μέγεθος -> θα κατέβουν αμέσως-γρήγορα (δεν έχουν όλοι οι χρήστες σύνδεση μπουρί ώστε να κατεβάζουν ολόκληρο το desktop μας 2048x1536 32-bit χρώμα για ένα μικρό παραθυράκι)

    - είναι ευκρινή -> τα fonts των διαφόρων controls που έχουν επάνω τους διαβάζονται εύκολα και καταννοούν οι άλλοι το πρόβλημά μας

    - είναι σαφή -> έχουμε απομονώσει ΜΟΝΟ το σημείο όπου βρίσκεται το πρόβλημα και θα καταλάβουν πολύ καλύτερα οι άλλοι ποιό είναι αυτό

    Τί χρειαζόμαστε:

    ===( SOFTWARE )===

    Οποιοδήποτε απλό πρόγραμμα επεξεργασίας εικόνας που να υποστηρίζει τις παρακάτω λειτουργίες:

    - μείωση βάθους χρώματος σε 8-bit (256) και 4-bit (16)
    - αποθήκευση σε φόρματ PNG
    - δυνατότητα capture παραθύρων ή και μεμονωμένων controls από αυτά

    π.χ. ένα από αυτά - που χρησιμοποιώ και παρακάτω - είναι οποιαδήποτε έκδοση του PaintShopPro από την 4.14 και μετά.

    Δύο συνδυασμοί πλήκτρων που ισχύουν στα Windows και κάνουν capture:

    PrintScreen -> κάνει capture όλη την οθόνη

    ΝΑ ΑΠΟΦΕΓΕΥΤΑΙ ΔΙΑ ΡΟΠΑΛΟΥ

    Alt+PrintScreen -> κάνει capture ΜΟΝΟ το ενεργό παράθυρο

    ΝΑ ΠΡΟΤΙΜΑΤΑΙ ΑΝΕΠΙΦΥΛΑΚΤΑ


    Ας δούμε τί επιπλέον - και χρησιμότατες-αναντικατάστατες - δυνατότητες capture έχουμε με το PaintShopPro.

    Το ανοίγουμε και πάμε στο μενού Capture -> Setup.

    Βγαίνει το παρακάτω:



    Εδώ πρέπει να ρυθμίσουμε μία φορά κάποιες παραμέτρους.

    Στο Activate Capture Using ορίζουμε με ποιό τρόπο θα γίνει το capture.

    Εδώ πρέπει να προσέξουμε τα εξής 2 πράγματα:

    1. Να μην ορίσουμε capture με το ποντίκι διότι αυτό θα μας δέσει κυριολεκτικά χειροπόδαρα καθώς το ποντίκι μεταβάλλει και το control ή παράθυρο που έχει το λεγόμενο focus.

    2. Να ορίσουμε συνδυασμό πλήκτρων αλλά να προσέξουμε πολύ να μην κάποιος γενικός συνδυασμός πλήκτρων των Windows ή κάποιος που χρησιμοποιείται συχνά από διάφορα προγράμματα. π.χ. πολύ καλός συνδυασμός είναι ο εικονιζόμενος Shift+F12 διότι είναι το τελευταίο Function Key και χρησιμοποιείται πολύ σπάνια, αλλά και το Shift που χρησιμοποιείται πολύ σπάνια (πολύ πιο συχνά τα Ctrl + Alt).

    Τέλος στα Options ορίζουμε να μην φαίνεται το ποντίκι και μας χαλά την εικόνα (εκτός εάν θέλουμε να φαίνεται για συγκεκριμένο λόγο) καθώς και να γίνουν πολλαπλά captures (και ένα να θέλουμε να κάνουμε δεν έχουμε και πάλι πρόβλημα).

    Πατάμε ΟΚ και βγαίνουμε από το παράθυρο.

    Τώρα, κάθε φορά που θέλουμε να κάνουμε ένα ή περισσότερα captures πάμε στο μενού Capture -> Setup και από το γνωστό μας παραθύρι:



    θα πειράζουμε ΜΟΝΟ τις επιλογές αριστερά:

    Capture

    που ορίζουν τί ακριβώς θέλουμε να κάνουμε capture.

    Τις εξηγώ αναλυτικά:

    - Full Screen
    Προφανής. Ό,τι ακριβώς κάνει και το PrintScreen των Windows. Θα κάνει capture ολόκληρη την οθόνη.

    - Window
    Προφανής. Ό,τι ακριβώς κάνει και το Alt+PrintScreen των Windows. Θα κάνει capture ολόκληρο το ενεργό παράθυρο - αυτό δηλαδή που θα έχει το focus τη στιγμή που θα πατήσετε Shift+F12.

    Μέχρι εδώ αυτές τις δυνατότητες τις είχαμε και απλά από τα Windows. Από εδώ και πέρα αρχίζει το "ζουμί" της υπόθεσης.

    - Client Area
    Θα κάνει capture από το ενεργό παράθυρο - αυτό δηλαδή που θα έχει το focus τη στιγμή που θα πατήσετε Shift+F12 - ΜΟΝΟ ο,τιδήποτε βρίσκεται εντός του περιθωρίου του. Δηλαδή ολόκληρο το παράθυρο εκτός από τη μπάρα τίτλου του και το περιθώριό του.

    - Area
    Με το που θα πατήσετε Shift+F12 ο κέρσορας θα μετατραπεί σε σταυρόνημα που θα σας επιτρέψει να επιλέξετε μία οποιαδήποτε ορθογώνια περιοχή της οθόνης θέλετε. Με το 1ο κλικ ξεκινάτε να επιλέγετε και με το 2ο σταματάτε.

    Και τώρα το χρησιμότερο όλων:

    - Object
    Με το που θα πατήσετε Shift+F12 αρχίστε να κουνάτε το ποντίκι - χωρίς να κάνετε κλικ - πάνω από το παράθυρο που σας ενδιαφέρει. Αναλόγως με το σε ποιό σημείο βρίσκεστε από πάνω, βλέπετε να σχηματίζεται στην οθόνη ένα παραλληλόγραμμο που σας δείχνει τί θα γίνει capture εάν κάνετε κλικ εκείνη τη στιγμή. Μπορεί να είναι οποιοδήποτε control του παραθύρου, οσοδήποτε μερικό (π.χ. ένα checkbox) ή γενικότερο (π.χ. ένα frame με όλα τα περιεχόμενά του), οσοδήποτε μεγάλο ή μικρό, και είτε κλειστό είτε ανοικτό (π.χ. εάν πριν πατήσετε το Shift+F12 έχετε ανοίξει μία dropdown list, θα γίνει capture αυτή ανοιχτή και μάλιστα με επιλεγμένη την επιλογή πάνω από την οποία βρισκόταν το ποντίκι τη στιγμή που πατήσατε Shift+F12).

    Όταν αποφασίσετε ποιό είδος capture από τα 5 θέλετε να κάνετε, πατάτε τη σχετική επιλογή και Capture Now.

    Θα δείτε το παράθυρο του PaintShopPro να γίνεται minimize.

    Από εδώ και πέρα, οποτεδήποτε πατάτε Shift+F12 γίνεται το είδος του capture που έχετε επιλέξει και όποτε χρειάζεται σας παρέχεται και η δυνατότητα των επιπλέον επιλογών (π.χ. με το Area και το Object).

    Μόλις τελειώσετε τα captures σας, όσα κι αν είναι αυτά, μπορείτε να ξαναπάτε πάλι στο PaintShopPro όπου θα δείτε όλα τα captures να έχουν γίνει καινούριες εικόνες με όνομα Image1, Image2 ... Image1002 κλπ.

    ΠΡΟΣΟΧΗ

    Δεν έχουν σωθεί στο δίσκο σας γι' αυτό μην το κλείσετε το πρόγραμμα.

    Ευνόητο είναι ότι σας συμφέρει να ομαδοποιήσετε τα captures που θέλετε να κάνετε από τις 5 κατηγορίες, ώστε να μην πηγαίνετε πολλές φορές στο παράθυρο του Capture και να αλλάζετε συνεχώς κατηγορία capture.

    Τώρα για κάθε capture από αυτά που κάναμε, και θέλουμε να κρατήσουμε - μπορεί μερικά να μη μας βγήκαν καλά ή να κρίναμε εκ των υστέρων ότι είναι άχρηστα - κάνουμε κατά σειρά τα εξής:

    α. Μειώνουμε το βάθος χρώματος σε 16 ή 256 χρώματα

    β. Το σώζουμε ως PNG αρχείο

    α. Θα μειώσουμε το βάθος χρώματος

    Δοκιμάζουμε καταρχήν σε 16 χρώματα.

    Πάμε από το μενού Colors -> Decrease Color Depth -> 16 Colors (4-bit)....

    Βγαίνει το παράθυρο:



    Βάζουμε τις επιλογές όπως τις βλέπουμε στην εικόνα και πατάμε ΟΚ.

    Βλέπουμε τώρα να έχει αλλάξει η εικόνα μας και τα χρώματα να έχουν μειωθεί στα 16.

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

    Εάν όμως είτε είναι πολύ αντιαισθητική, είτε κάποια controls ή fonts ή άλλα απαραίτητα στοιχεία του interface δεν φαίνονται ευκρινώς τότε θα μειώσουμε λιγότερο το χρώμα.

    Πάμε στο toolbar και πατάμε Undo (το κουμπί με το βελάκι προς τα αριστερά).

    Αμέσως βλέπουμε η εικόνα να επανέρχεται στην αρχική της μορφή.

    Τώρα θα δοκιμάσουμε να την μειώσουμε στα 256 χρώματα.

    Πάμε από το μενού Colors -> Decrease Color Depth -> 256 Colors (8-bit)....

    Βγαίνει το παράθυρο:



    Βάζουμε τις επιλογές όπως τις βλέπουμε στην εικόνα και πατάμε ΟΚ.

    Βλέπουμε τώρα να έχει αλλάξει η εικόνα μας και τα χρώματα να έχουν μειωθεί στα 256.

    Στην τεράστια πλειονότητα των περιπτώσεων τώρα η εικόνα μας θα είναι αρκετά ευκρινής.

    Eάν λοιπόν κρίνουμε με το μάτι μας ότι είναι εντάξει την αφήνουμε όπως έχει και πάμε στο βήμα β της αποθήκευσης.

    Εάν όμως είτε είναι πολύ αντιαισθητική, είτε κάποια controls ή fonts ή άλλα απαραίτητα στοιχεία του interface δεν φαίνονται ευκρινώς τότε θα αναγκαστούμε να μην μειώσουμε καθόλου το χρώμα.

    Πάμε στο toolbar και πατάμε Undo (το κουμπί με το βελάκι προς τα αριστερά).

    Αμέσως βλέπουμε η εικόνα να επανέρχεται στην αρχική της μορφή.

    Τώρα η εικόνα μας είναι έτοιμη προς αποθήκευση.

    Τώρα πάμε να αποθηκεύσουμε την εικόνα μας.

    Πατάμε το κουμπί του Save από το toolbar (αυτό με τη δισκέτα) και επιλέγουμε ΟΠΩΣΔΗΠΟΤΕ φόρματ αρχείου PNG - Portable Network Graphics.

    Δίνουμε ένα όνομα της αρεσκείας μας και πατάμε ΟΚ.

    Επαναλαμβάνουμε τα 2 παραπάνω βήματα που περιγράφονται στα 2 παραπάνω ποστ, για καθεμιά από τις εικόνες που κάναμε capture.

    Τέλος - ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ

    Πώς ανεβάζουμε τις εικόνες στο φόρουμ:

    α. Δεν τις κάνουμε εξωτερικά links.

    β. Τις κάνουμε attachments.

    γ. Δεν χρησιμοποιούμε το "IMG" tag.

    δ. Χρησιμοποιούμε το "attach" tag.

    Με τα παραπάνω βοηθάμε ώστε το φόρουμ να είναι καλαίσθητο και ευανάγνωστο. Άρα βοηθάμε καί τον εαυτό μας. Επίσης σεβόμαστε τα υπόλοιπα μέλη.
    Αυτό το άρθρο δημοσιεύθηκε πρώτα στο forum με θέμα: How To: Ευκρινή GUI captures μικρού μεγέθους Δημοσιεύθηκε από WAntilles Δείτε την αρχική δημοσίευση
    Σχόλια 4 Σχόλια
    1. Το avatar του μέλους EvilHawk
      EvilHawk -
      Bέλτιστης ευκρίνειας GUI captures ("screenshot" ή screen capture) με την χρήση του PhotoShop CS της Adobe Software.

      Βήμα 1

      Ανοίξτε το παράθυρο που θέλετε να κάνετε capture. Πατήστε το πλήκτρο Print Screen ( Prnt Scrn) που βρίκσεται στο πάνω δεξιό μέρος του πληκτρολογίου σας.


      Tip: Windows users, για να κάνετε capture μόνο το ενεργό παράθυρο πατήστε Alt + Print Screen ( Prnt Scrn).

      Mac users πατήστε Command + Shift + 3.


      Δεν θα δείτε τίποτα ακόμα, αλλά να είστε σίγουροι ότι όντως έχετε πάρει ένα screen capture στο "clipboard" σας που περιμένει να γίνει επικόλληση (paste).

      Βήμα 2

      Ανοίγουμε το PhotoShop. Απο το File Menu, διαλέγουμε New. Ανοίγει το New dialog box. Δώστε άν θέλετε στο γραφικό σας ένα όνομα. Επιλέξτε την επιλογή Clipboard στο Preset menu (άν πατήσετε το βέλος θα δείτε όλες τίς επιλογές). Οι διαστάσεις του γραφικού (Width και Height boxes) θα πάρουν αυτόματα τίς διαστάσεις της οθόνης σας και θα έχουν την ανάλυση του monitor σας (εκτός άν έχετε πατήσει το Alt + Print Screen που σημαίνει ότι θα εχουν τίς διαστάσεις του ενεργού παραθύρου).

      Πατήστε Ok.


      Βήμα 3

      Τώρα στην επιφάνεια εργασίας του PhotoShop θα έχετε ένα λευκό canva. Είμαστε έτοιμοι να επικολλήσουμε τα περιεχόμενα του clipboard (screenshot) στο νέο γραφικό που μόλις δημιουργήσαμε.


      Απο το Edit Menu, διαλέγουμε την επιλογή Paste για να επικολλήσουμε το περιεχόμενο του clipboard στον νεό canva (ή εναλλακτικά απλά να χρησιμοποιήσουμε την συντόμευση Cntrl + V ή για τους Mac users Cmd + V).

      Edit-Paste ή Cntrl + V
      Συνημμένο Αρχείο 8426

      Θα δείτε τώρα το screenshot στο PhotoShop. Στο Layers Palette μπορείτε να δείτε το ξεχωριστό layer που δημιουργήθηκε στο PhotoShop όταν κάνατε την επικόλληση.


      Μπορείτε να κάνετε στο γραφικό σας ότι θέλετε πχ. crop, resize ή edit. Επειδή το γραφικό θα εχει κρατήσει τίς διαστάσεις της οθόνης σας μάλλον θα χρειαστεί να το κάνετε resize για να το στείλετε με email ή να το ανεβάσετε σε κάποια σελίδα web.
    1. Το avatar του μέλους WAntilles
      WAntilles -
      Επίσης ένα ακόμα tip για PNG αρχεία:

      Εάν τα περάσουμε στο GIMP και απλά κάνουμε:

      Image -> Flatten Image

      και ξανασώσουμε (πάντα σε PNG), συνήθως το αρχείο μας, χωρίς να πειραχτεί καθόλου, θα μικρύνει σε μέγεθος μεταξύ 5%-10%.
    1. Το avatar του μέλους parsifal
      parsifal -
      Ας δώσω κι εγώ ένα link για όσους προτιμούν το PNG format για τα screen captures τους:
      OptiPNG: Advanced PNG Optimizer
    1. Το avatar του μέλους AgentWolf
      AgentWolf -
      Και ένα ετοιματζίδικο εργαλείο για όσους βαριούνται τα advanced προγράμματα επεξεργασίας εικόνας:
      PrtScr