Πώς να αυξήσετε το μέγεθος των φωτογραφιών διατηρώντας την αρχική ποιότητα. Πώς να τεντώσετε μια εικόνα στο Photoshop - χωρίς απώλεια ποιότητας και αναλογικά
Εικόνες - σημαντικό μέροςελκυστική σχεδίαση ιστοσελίδων. Οι εικόνες φόντου μπορούν να προσθέσουν οπτικό ενδιαφέρον σε μια σελίδα. εικόνα φόντου Το HTML θα σας βοηθήσει να αποκτήσετε το οπτικό σχέδιο που αναζητάτε.
Όταν εργάζεστε με εικόνες φόντου, θα αντιμετωπίσετε το πρόβλημα της επέκτασης της εικόνας σε ολόκληρη τη σελίδα. Επειδή δεν ταιριάζει κάθε εικόνα στο μέγεθος του ιστότοπου. Αντί να ορίσετε ένα σταθερό μέγεθος, το τέντωμα της εικόνας σάς επιτρέπει να γεμίσετε τη σελίδα. Δεν έχει σημασία πόσο πλατύ ή στενό είναι το παράθυρο του προγράμματος περιήγησης.
Ο καλύτερος τρόπος για να τεντώσετε μια εικόνα είναι να χρησιμοποιήσετε την ιδιότητα "μέγεθος φόντου" CSS3. Εδώ είναι ένα παράδειγμα που χρησιμοποιεί εικόνα φόντουγια το σώμα της σελίδας και ορίζει το μέγεθος σε "100%". Επομένως, η εικόνα θα τεντώνεται πάντα και θα γεμίζει ολόκληρη την οθόνη.
σώμα ( φόντο: url(bgimage.jpg) χωρίς επανάληψη, μέγεθος φόντου: 100%; )
Αυτή η ιδιότητα λειτουργεί σε IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ και σε όλα τα δημοφιλή προγράμματα περιήγησης για κινητά.
Προσομοίωση τεντωμένου φόντου σε προγράμματα περιήγησης παλαιού τύπουΕίναι απίθανο τα προγράμματα περιήγησης παλαιότερα του IE9 να χρειαστεί να παρέχουν υποστήριξη εικόνας φόντου σώματος HTML. Αλλά ας υποθέσουμε ότι ανησυχείτε για το αν ο ιστότοπός σας θα εμφανίζεται σωστά στον IE8. Σε αυτήν την περίπτωση, πρέπει να προσομοιώσετε ένα τεντωμένο φόντο. Μπορείτε να χρησιμοποιήσετε προθέματα προγράμματος περιήγησης για Firefox 3.6 (-moz-background-size) και Opera 10.0 (-o-background-size).
Πλέον εύκολος τρόποςη προσομοίωση μιας τεντωμένης εικόνας φόντου είναι να την τεντώσετε σε ολόκληρη τη σελίδα. Με αυτόν τον τρόπο δεν θα μείνει επιπλέον χώρος και δεν θα χρειάζεται να ανησυχείτε μήπως το κείμενο δεν ταιριάζει στην τεντωμένη περιοχή. Δείτε πώς μπορείτε φόντο HTMLτέντωμα εικόνας:
Προσθέστε τον παρακάτω κώδικα στο φύλλο στυλ σας:
img#bg (θέση: σταθερή; επάνω: 0; αριστερά: 0; πλάτος: 100%; ύψος: 100%;)
Σημείωση: Τώρα είναι η ώρα να ρίξετε μια ματιά στη σελίδα. Η εικόνα πρέπει να φαίνεται τεντωμένη, αλλά το περιεχόμενο λείπει. Γιατί; Η εικόνα φόντου έχει ύψος 100% και η ενότητα περιεχομένου τοποθετείται στη ροή εγγράφων μετά την εικόνα - τα περισσότερα προγράμματα περιήγησης δεν θα την εμφανίσουν.
#content (θέση: σχετική; δείκτης z: 1;)
Λίγοι ιστότοποι πρέπει να υποστηρίζουν IE 7 ή 8, και ακόμη λιγότεροι χρειάζονται IE6! Ως εκ τούτου, αυτή η προσέγγιση είναι ξεπερασμένη. Το αφήνω ως ένα ενδιαφέρον παράδειγμα του πόσο δύσκολο ήταν πριν ξεκινήσουν να συνεργάζονται όλα τα προγράμματα περιήγησης!
Προσομοιώστε μια τεντωμένη εικόνα φόντου σε μικρότερο χώροΜπορείτε να χρησιμοποιήσετε μια παρόμοια τεχνική για να προσομοιώσετε μια τεντωμένη εικόνα φόντου HTML divεικόνα φόντου ή άλλο στοιχείο ιστοσελίδας. Αυτό είναι πιο δύσκολο, αφού είτε πρέπει να χρησιμοποιήσετε απόλυτη τοποθέτηση.
img#bg (πλάτος: 20em; ύψος: 30em;)
div#content (πλάτος: 20em, ύψος: 30em;)
#content (θέση: σχετική; επάνω: -30em; z-index: 1; πλάτος: 20em; ύψος: 30em;)
Οι ιδιότητες HTML μεγέθους φόντου και εικόνας φόντου υποστηρίζονται ευρέως από προγράμματα περιήγησης και αυτή η προσέγγιση είναι πιθανότατα προϊόν μιας περασμένης εποχής. Εάν θέλετε να χρησιμοποιήσετε αυτήν την προσέγγιση, φροντίστε να τη δοκιμάσετε όσο το δυνατόν περισσότερο. περισσότεροπρογράμματα περιήγησης. Και αν το περιεχόμενο αλλάξει μέγεθος, θα χρειαστεί να αλλάξετε το μέγεθος του κοντέινερ και της εικόνας φόντου.
Η μετάφραση του άρθρου “How to Stretch a Background Image to Fit a Web Page” ετοιμάστηκε από τη φιλική ομάδα του έργου.
Με την έλευση της φωτογραφίας στο πρώτο μισό του 19ου αιώνα, δεν θα μπορούσε παρά να προκύψει μια φυσική επιθυμία για μεγέθυνση της εικόνας στο μέγεθος ενός καλλιτεχνικού καμβά. Ένα από τα αληθινά και πιο αποτελεσματικούς τρόπους, που χρησιμοποιείται ακόμα μέχρι σήμερα, συνίστατο στην επανασχεδίαση κελιού προς κελί, αλλά σήμερα σπάνια δίνονται τέτοιες συμβουλές, επειδή είναι προφανές ότι όσοι θέλουν να μεγεθύνουν μια εικόνα ενδιαφέρονται για το πώς να αυξήσουν το μέγεθος των φωτογραφιών σε έναν υπολογιστή .
Μέγεθος εικόνας σε οθόνη υπολογιστήΕπειδή μιλάμε για υπολογιστή, ας πούμε ότι στην οθόνη το μέγεθος των εικόνων μειώνεται/αυξάνεται χρησιμοποιώντας το συνδυασμό πλήκτρων Ctrl (-/+) ή τον τροχό του ποντικιού με το ίδιο πάτημα Πλήκτρο Ctrl. Και αν είστε συνδεδεμένοι, μπορείτε να επηρεάσετε το μέγεθος της εικόνας αλλάζοντας την κλίμακα στην καρτέλα "Προβολή" στο μενού του προγράμματος περιήγησης. Κανείς δεν απαγορεύεται να επιλύσει), καλώντας αυτήν την εντολή κάνοντας δεξί κλικ απευθείας στην επιφάνεια εργασίας.
Τώρα, εάν ακολουθείτε την αρχή "από απλό σε σύνθετο", πρέπει να καταλάβετε πώς να αυξήσετε το μέγεθος των φωτογραφιών στο Paint, επειδή, πρώτον, είναι ένα τυπικό πρόγραμμα επεξεργασίας γραφικών (Έναρξη > Όλα τα προγράμματα > Αξεσουάρ) που συνοδεύει λειτουργικό σύστημα Windows, και δεύτερον, πολλοί δεν γνωρίζουν ορισμένες από τις ικανότητές τους, συμπεριλαμβανομένου του κουμπιού "Αλλαγή μεγέθους" στην καρτέλα "Αρχική σελίδα".
Τεντώστε την εικόνα στο PaintΣτο πλαίσιο διαλόγου "Αλλαγή μεγέθους και κλίση", συνήθως ελέγχετε το πλαίσιο ελέγχου "Διατήρηση αναλογιών" και υποδεικνύετε είτε ποσοστό, ή μια συγκεκριμένη τιμή σε pixel. Στη δεύτερη περίπτωση, αρκεί να καθορίσετε μόνο το επιθυμητό πλάτος εικόνας (αλλαγή οριζόντια) για να αλλάξει αυτόματα η δεύτερη παράμετρος.
Σε ορισμένες εκδόσεις του PaintΥπάρχει επίσης μια παράμετρος "Points" που σας επιτρέπει να εισάγετε συγκεκριμένες διαστάσεις εικόνας. Εάν όλα είναι εντάξει, πείτε το στον συντάκτη.
Όταν υπολογίζουν πώς να μεγεθύνουν, οι περισσότεροι χρήστες πιθανώς δεν θεωρούν απαραίτητο να το προσθέσουν χωρίς απώλεια ποιότητας, πιστεύοντας ότι αυτό είναι αυτονόητο. Ωστόσο, αυτή η σιωπηρή συνθήκη δεν είναι τόσο εύκολο να ικανοποιηθεί, επειδή η εικόνα μπορεί να συγκριθεί κατά προσέγγιση με ένα μωσαϊκό από πολύχρωμα pixel. Δεν είναι δύσκολο να φανταστεί κανείς πώς θα είναι η εικόνα αν απλά την τεντώσετε, επειδή ο αριθμός των ενημερωτικών pixel θα παραμείνει ίδιος, αλλά φυσικό μέγεθοςθα αυξηθεί.
Για να διατηρήσετε με κάποιο τρόπο την ποιότητα σε κάποιο βαθμό, πρέπει να γεμίσετε τα «κενά» λαμβάνοντας υπόψη το περιεχόμενο των γύρω pixel. Δυστυχώς, το παλιό καλό Paint απέχει πολύ από το καλύτερο σε αυτό, αλλά υπάρχουν πολλά προγράμματα που, χρησιμοποιώντας διάφορους αλγόριθμους για παρεμβολή δεδομένων μεταξύ τεντωμένων pixel (μέθοδοι επαναδειγματοληψίας), μπορούν να μεγεθύνουν εικόνες με πολύ αξιοπρεπή ποιότητα. Οι περισσότερες από αυτές τις υπηρεσίες, μεταξύ των οποίων το επί πληρωμή PhotoZoom Pro είναι ιδιαίτερα δημοφιλές, είναι λειτουργικά παρόμοιες και εύκολες στη χρήση, αλλά η απλή σύστασή τους σε όσους θέλουν να μάθουν πώς να αυξάνουν το μέγεθος των φωτογραφιών στο Photoshop θα ήταν μια υπεκφυγή απάντηση.
Η ικανότητα του Photoshop να αλλάζει μέγεθος φωτογραφιώνΕάν πρόκειται να μεγεθύνετε μια εικόνα, πρέπει να έχετε κατά νου ότι το αποτέλεσμα εξαρτάται άμεσα από την ποιότητα και το μέγεθος του υλικού πηγής. Αφού φορτώσετε τη φωτογραφία στο Photoshop, επιλέξτε την εντολή «Μέγεθος εικόνας» στο μενού «Εικόνα», ανοίγοντας έτσι ένα παράθυρο με το ίδιο όνομα, στο οποίο πραγματοποιείτε διάλογο με το πρόγραμμα.
Εάν εμπιστεύεστε πλήρως το πρόγραμμα, μπορείτε μόνο να καθορίσετε το πλάτος και το ύψος στα πεδία του μπλοκ "Μέγεθος εγγράφου" και να αφήσετε τις υπόλοιπες παραμέτρους επιλεγμένες από προεπιλογή, συμπεριλαμβανομένης της συνάρτησης "Παρέμβαση" (Εικόνα επαναδειγματοληψίας) και το "Δικουβικό Αυτόματο " μέθοδος επαναδειγματοληψίας (Bicubic), η οποία γενικά προτιμάται έναντι των άλλων πέντε αλγορίθμων. Στη συνέχεια, ανοίξτε το παράθυρο με το κουμπί "Auto...". Αυτόματη επιλογήανάλυση", επιλέξτε την επιθυμητή ποιότητα (η προεπιλογή είναι "Καλή") και κάντε κλικ στο OK.
Σημείωση: Η επαναδειγματοληψία είναι μια συνάρτηση που ελέγχει την ποσότητα δεδομένων σε εικόνες που αλλάζουν μέγεθος ή μέγεθος.
Μικρά κόλπαΊσως δεν γνωρίζουν όλοι μερικές γνωστές συστάσεις για το πώς να αυξήσετε το μέγεθος των φωτογραφιών με ελάχιστες απώλειεςποιότητα χρησιμοποιώντας οποιοδήποτε γραφικός επεξεργαστήςμε λειτουργίες διόρθωσης και επαναδειγματοληψίας, αλλά δεν χρειάζεται να είναι Photoshop.
Αρχικά, πρέπει να προετοιμάσετε την αρχική εικόνα μεγεθύνοντάς την ελαφρώς και εξετάζοντάς την προσεκτικά για θόρυβο, θολές περιοχές (όπου δεν πρέπει), διάφορα σημεία και άλλα πιθανά ελαττώματα. Όλες οι ελλείψεις πρέπει να εξαλειφθούν (διορθωθούν) και μόνο τότε να προχωρήσετε στην αλλαγή μεγέθους.
Στη συνέχεια, πρέπει να μεγεθύνετε τη φωτογραφία δύο φορές μεγαλύτερη από την προβλεπόμενη, να εργαστείτε με την ευκρίνεια, την αντίθεση, τον κορεσμό και μετά να επιστρέψετε στο το σωστό μέγεθοςκαι βεβαιωθείτε ότι η ποιότητα παραμένει στο σωστό επίπεδο. Εδώ είναι ένα μικρό κόλπο, αλλά δεν είναι μόνο αυτό.
Τι μπορούν να βρουν οι άνθρωποι αναζητώντας αρχική λύσηπώς να αυξήσετε το μέγεθος των φωτογραφιών.
Αποδεικνύεται ότι εάν μεγεθύνετε το μέγεθος της εικόνας κατά 10%, δεν θα υπάρξει οπτική υποβάθμιση της ποιότητας. Αυτό υποδηλώνει ένα προφανές συμπέρασμα: αυξάνοντας επανειλημμένα το μέγεθος κατά 10%, μπορείτε... λοιπόν - ποιος έχει φαντασία. Αλλά αυτή η μέθοδος δεν είναι καθολική και η αδιάκριτη χρήση της για όλες τις φωτογραφίες στη σειρά δεν θα οδηγήσει απαραίτητα σε καλά αποτελέσματα, τα οποία εξαρτώνται σε μεγάλο βαθμό από διάφορες παραμέτρους ποιότητας της εικόνας, συμπεριλαμβανομένης της μορφής. Ασπρόμαυρη φωτογραφία, για παράδειγμα, καταφέρνουν να το τεντώσουν μέχρι και 50%.
Αυτές οι «μυστικές» τεχνικές επιτρέπονται μόνο σε περιπτώσεις όπου για κάποιο λόγο δεν υπάρχουν άλλες επιλογές και, πιθανότατα, η «πονηρή παραγωγή» θα απαιτήσει πολύ σοβαρή μετα-επεξεργασία στο Photoshop.
Εξειδικευμένα προγράμματα
Εάν χρειάζεστε μια απάντηση στην ερώτηση πώς να αυξήσετε το μέγεθος των φωτογραφιών με ελάχιστους πονοκεφάλους, χρησιμοποιήστε μία από αυτές εξειδικευμένα προγράμματα, που έχουν περισσότερους αλγόριθμους παρεμβολής από το Photoshop και έχουν τις δικές τους πρωτότυπες τεχνολογίες. Εκτός από το πρόγραμμα PhotoZoom Pro που αναφέρθηκε προηγουμένως, αυτές οι υπηρεσίες είναι: Perfect Resiz, Reshade Image Enlarger, OnOne Genuine Fractals Pro v6.0, Akvis Magnifier v3.0 και άλλες.
Ας φανταστούμε ότι το ερώτημα πώς να αλλάξετε το μέγεθος μιας εικόνας χωρίς Photoshop έχει γίνει επείγον για εσάς; Ταυτόχρονα, είστε στο Διαδίκτυο και πρέπει να περικόψετε μια φωτογραφία ή μια εικόνα για το ερωτηματολόγιο. Θα κάνετε το σωστό εάν κάθεστε στον υπολογιστή σας, ή με ένα tablet ή με ένα smartphone στα χέρια σας και πηγαίνετε στον ιστότοπο.
Μετά από όλα, σε αυτόν τον πόρο μπορείτε να χρησιμοποιήσετε μια εφαρμογή για την περικοπή φωτογραφιών στο διαδίκτυο. Σημειώστε ότι η εφαρμογή υποστηρίζει μορφές gif, bmp, jpg, png. Βρίσκεται στο μπλοκ "Εργασία με εικόνες" που ονομάζεται "Περικοπή εικόνων".
Και εκτελώντας απλές λειτουργίες εδώ, αλλάζουμε το μέγεθος της εικόνας. Εξάλλου, όπως όλα τα άλλα μέσα στην υπηρεσία, αυτή η αίτησηπολύ εύκολο στη χρήση. Παρέχει την ευκαιρία να έχετε αποτελέσματα υψηλής ποιότητας πολύ γρήγορα.
Το χρησιμοποιούμε για να αλλάξουμε το μέγεθος της φωτογραφίας. Το κουρεύουμε. Και για αυτό χρειάζεται απλώς να κάνετε λήψη επιθυμητή εικόνα, επιλέξτε το θραύσμα που πρέπει να περικόψετε και πατήστε το κουμπί "Αποκοπή", έχοντας προηγουμένως λάβει πληροφορίες σχετικά με τις διαστάσεις μελλοντική εικόνα. Δηλαδή, η διαδικασία περιλαμβάνει μια ποσοστιαία αύξηση ή μείωση της εικόνας. Υπάρχει πάντα η ευκαιρία να δείτε πώς περικόψατε τη φωτογραφία και στη συνέχεια να την αποθηκεύσετε.
Ποιες άλλες δυνατότητες παρέχει η εφαρμογή;Όταν αλλάζουμε το μέγεθος μιας φωτογραφίας στο Διαδίκτυο, αυτό δεν σημαίνει ότι η όλη διαδικασία, η οποία διαρκεί λίγα δευτερόλεπτα, καταλήγει στην απλή περικοπή της εικόνας στο διαδίκτυο.
Οποιοσδήποτε εργάζεται με την εικόνα μπορεί να αφιερώσει επιπλέον (αλλά κυριολεκτικά μόνο λίγα) δευτερόλεπτα για να περιστρέψει τη φωτογραφία ή να την αναστρέψει εάν είναι απαραίτητο. Αλλά δεν είναι μόνο αυτό. Μπορείτε επίσης να προσθέσετε όμορφα εφέή πλαίσιο. Και το μόνο που χρειάζεται είναι μερικά κλικ.
Δεν αποτελεί έκπληξη το γεγονός ότι οι χρήστες του ιστότοπου είναι άτομα από τα περισσότερα διαφορετικά επαγγέλματα, ηλικία και ακόμη και χόμπι. Αυτό συμβαίνει επειδή κάποιοι προτιμούν να μην αναζητούν την εφαρμογή που χρειάζονται σε διάφορους πόρους του Διαδικτύου. Και αυτή η διαδικτυακή υπηρεσία είναι καλή για πολλούς επειδή συγκεντρώνει μια μεγάλη ποικιλία αλλά συχνά χρησιμοποιούμενων εφαρμογών.
Και πολλοί από αυτούς που περνούν πολύ χρόνο στον Παγκόσμιο Ιστό (συμπεριλαμβανομένης της αλλαγής φωτογραφιών) καταλήγουν στον ιστότοπο εντελώς φυσικά. Είτε είναι σχεδιαστής είτε webmaster, δημοσιογράφος ή αυτοκινητιστής. Εξάλλου, πολλοί σύνδεσμοι στο Διαδίκτυο οδηγούν εδώ και η υπηρεσία είναι διαθέσιμη σε όλους χωρίς εγγραφή.
Η υπηρεσία είναι επίσης δωρεάν. Μπορεί να χρησιμοποιηθεί κατά την προετοιμασία φωτογραφιών και μουσικής για ιστολόγια και ιστότοπους. Επιπλέον, δεν χρειάζεται να κάνετε λήψη αρχείων, να εγκαταστήσετε και στη συνέχεια να ενημερώσετε προγράμματα.
Αυτό εκτιμάται τόσο από εκείνους που ασχολούνται με την επαγγελματική φωτογραφία όσο και από εκείνους για τους οποίους το να περνούν χρόνο με μια φωτογραφική μηχανή είναι απλά ένα μεγάλο χόμπι. Μετά από όλα, το site έχει κάτι για αυτούς κατάλληλη εφαρμογή. Για παράδειγμα, για κάποιον που βασανίζεται από το ερώτημα πώς να αλλάξετε το μέγεθος μιας εικόνας;
Γιατί χρειάζεται μια τέτοια λειτουργία;Ο λόγος για τον οποίο ένας ή ο άλλος χρήστης του Διαδικτύου αναγκάζεται να αναζητήσει ένα ηλεκτρονικό πρόγραμμα επεξεργασίας φωτογραφιών για χρήση μπορεί να είναι διαφορετικός. Αλλά, όπως δείχνει η εμπειρία, αυτό συνήθως προκαλείται ακριβώς από την ανάγκη γρήγορης αλλαγής μεγέθους μιας φωτογραφίας.
Και αυτό συνήθως συμβαίνει. Ας υποθέσουμε ότι κάποιος πρέπει να ανεβάσει μια επεξεργάσιμη εικόνα σε έναν ιστότοπο. Για παράδειγμα, ως avatar VKontakte. Κατά κανόνα, στους περισσότερους πόρους σε παγκόσμιο δίκτυοΓια τις εικόνες που ανεβαίνουν στην υπηρεσία, υπάρχει περιορισμός στις διαστάσεις της. Και αυτό στη συγκεκριμένη περίπτωση σημαίνει ότι πρέπει να αλλάξετε το μέγεθος της φωτογραφίας online.
Δεν υπάρχει τρόπος να γίνει χωρίς αυτό. Ωστόσο, ο περιορισμός δεν αφορά μόνο τις διαστάσεις. Ο περιορισμός ισχύει και για το βάρος της εικόνας. Δηλαδή το πρόβλημα απαιτεί μια τέτοια λύση όταν πρέπει να μειώσεις τη φωτογραφία. Και αυτό είναι πολύ εύκολο να το κάνετε χρησιμοποιώντας ένα ηλεκτρονικό πρόγραμμα επεξεργασίας φωτογραφιών.
Αλλά η λειτουργία "μεγέθυνση φωτογραφίας" χρησιμοποιείται όταν είναι απαραίτητο να αυξηθεί το μέγεθος της εικόνας. Ακριβώς όπως η μείωση φωτογραφιών, αυτή η λειτουργία χρησιμοποιείται όταν κάποιος επεξεργάζεται μια εικόνα πολύ συχνά.
Για περισσότερα λεπτομερή χαρακτηριστικάδημοφιλής υπηρεσία, θα πρέπει επίσης να αναφέρουμε ένα τέτοιο «κόλπο» όπως οι φωτογραφίες σε στυλ Instagram. Δηλαδή, σε αυτή την περίπτωση, η υπηρεσία παρέχει την ευκαιρία όχι μόνο να αλλάξει το μέγεθος, αλλά και να δώσει την επιθυμητή εμφάνιση στις φωτογραφίες. Επιπλέον, μιλάμε για εκείνες τις περιπτώσεις που δεν έχετε κινητή συσκευήκαι λογαριασμός Instagram.
Σας διαβεβαιώνουμε ότι σε προσωπικός υπολογιστήςΗ επεξεργασία φωτογραφιών είναι πολύ πιο βολική και ευχάριστη. Η λειτουργία "Φωτογραφία στυλ Instagram" λειτουργεί ακριβώς όπως η ηλεκτρονική περικοπή φωτογραφιών. Αυτό σημαίνει τα εξής: πρέπει να ανεβάσετε μια φωτογραφία, να εφαρμόσετε εφέ και στη συνέχεια να την αποθηκεύσετε στον υπολογιστή σας. Έτσι, συγκεκριμένα, μπορείτε να κάνετε το αποτέλεσμα παλιά φωτογραφίααπό μια συνηθισμένη φωτογραφία.
Πρόσφατα μου ζητήθηκε να συνεχίσω το φόντο αυτής της εικόνας.
Ως εκ τούτου, αποφάσισα να γράψω για το πώς το κάνω.
Ας ξεκινήσουμε λοιπόν.
1.
Ανοίξτε την εικόνα στο Photoshop.
2.
Χρησιμοποιώντας το Rectangular Marquee Tool
Επιλέξτε την εικόνα και αντιγράψτε την επιλογή σε νέο στρώμα.
3. Διαγράψτε το μηδενικό στρώμα - δεν το χρειαζόμαστε πλέον.
Για να το κάνετε αυτό, παρακάτω μέσα
στην παλέτα στρώσεων, κάντε κλικ στο εικονίδιο του καλαθιού και στο παράθυρο που εμφανίζεται, κάντε κλικ
ΕΝΤΑΞΕΙ.
Ή κάντε κλικ στο επίπεδο μηδέν στην παλέτα στρώσεων κάντε δεξί κλικκαι στο
Στο μενού που εμφανίζεται, κάντε κλικ στο Delete layer.
4.
Επειδή αυτή η εικόνα είναι μικρή, αύξησα την προβολή στο 200%
Αυτό μπορεί να γίνει στην παλέτα Navigator.
Αν δεν το βρείτε στη δουλειά
Πίνακας Photoshop, μεταβείτε στο μενού και ανοίξτε αυτό το πλαίσιο.
Τώρα ας πάμε στο κύριο πράγμα.
Ας ξεκινήσουμε με σωστη πλευρα.
5.
Με το ίδιο εργαλείο ορθογώνια επιλογήεπιλέξτε ένα κομμάτι του φόντου και
αντιγράψτε το σε ένα νέο επίπεδο με τον ίδιο τρόπο όπως πριν.
6.
Χρησιμοποιώντας το εργαλείο Μετακίνηση, μετακινήστε το αντιγραμμένο κομμάτι και εμφανίστε το οριζόντια.
7.
Τώρα χρειαζόμαστε εργαλεία ρετουσάρισμα.
Ας χρησιμοποιήσουμε -Eraser.
Ας επιλέξουμε τις παρακάτω παραμέτρους - - Mode - Brush
Στην παράμετρο - Brush (Brush), κάντε κλικ στο βέλος και θα εμφανιστεί ένα παράθυρο με
με πινέλα. Ας πάρουμε μια τυπική μαλακή βούρτσα. Στην περίπτωσή μου είναι αρκετό
κατά 23 pixel.
Στο στιγμιότυπο οθόνης επισήμανα την παράμετρο -Σκληρότητα με κόκκινο χρώμα. Σε αυτό
Στις ρυθμίσεις, ο χρήστης καθορίζει πόσο μαλακό πρέπει να είναι το πινέλο
τις άκρες. 0% σημαίνει ότι οι άκρες θα είναι εξαιρετικά λείες. Περισσότερο %
τόσο πιο έντονες οι άκρες.
Έτσι, χρησιμοποιώντας την απαλή γόμα που μόλις ρυθμίσαμε, διαγράψτε προσεκτικά την αριστερή άκρη από το διπλό κομμάτι.
9.
Ας συγχωνεύσουμε τα στρώματα. Κάντε δεξί κλικ στο επίπεδο με το κομμάτι και επιλέξτε
ΣΥΝΔΥΑΣΤΕ ΜΕ ΠΡΟΗΓΟΥΜΕΝΕΣ
Ας κάνουμε μια άλλη ορθογώνια επιλογή και ας την αντιγράψουμε σε ένα νέο επίπεδο.
Αυτό το κομμάτι, όπως και το προηγούμενο, σύρεται και ρετουσάρεται, όπως ακριβώς περιγράφεται παραπάνω
Σύνδεση των στρωμάτων.
Συνεχίζουμε λοιπόν μέχρι πλήρης γέμισηφόντο δεξιά πλευρά
Ας πάμε στο αριστερή πλευρά.
Επαναλαμβάνουμε τις κινήσεις που κάναμε για τη δεξιά πλευρά.
Δείτε από
σχέδιο και επιλέξτε ποια κομμάτια θα αντιγράψετε για να το φτιάξετε
ρεαλιστική εικόνα.
Τοποθετήστε το ένα κομμάτι πάνω στο άλλο
χρησιμοποιήστε δωρεάν μετασχηματισμό (συντόμευση πληκτρολογίου Ctrl+T) για να αλλάξετε το μέγεθος
κομμάτια.
Γενικά, χρησιμοποιήστε τη φαντασία σας.
Η φαντασία μου με οδήγησε σε αυτό
αυτό το αποτέλεσμα.
Μπορώ επίσης να προτείνω τη χρήση εργαλείων όπως το -Blur (Blur) και το Smudge (Finger).
Δίνουν ενδιαφέροντα αποτελέσματα.
Μπορείτε επίσης να χρησιμοποιήσετε
εργαλείο -Patcn (Patch)
Είναι ένας συνδυασμός ελεύθερης επιλογής και γεμίσματος.
Είναι βολικό
χρήση για ρετούς.
Υπάρχουν πολλοί τρόποι και δυνατότητες. Αρκετά καλύτερα για σένα
εξοικειωθείτε με τα εργαλεία του προγράμματος και τις δυνατότητές τους και τέλος
τα εμπόδια μπροστά σας θα υποχωρήσουν.
Θυμάμαι ότι ψαχουλεύω πολλές πληροφορίες και δοκίμασα αρκετές μεθόδους μέχρι να βρω την ακριβή λύση που χρειαζόταν εκείνη τη στιγμή.
Παρακάτω θα δείξω 3 μεθόδους που τεντώνουν το φόντο σε όλο το πλάτος της οθόνης.
Μέθοδος Νο. 1Η πρώτη μέθοδος χρησιμοποιεί καθαρό CSS3. Όλα λειτουργούν χάρη στην ιδιότητα μεγέθους φόντου. Στην περίπτωσή μου, θα τεντώσω την εικόνα σε όλο το πλάτος της οθόνης, δηλαδή θα εκχωρήσω ιδιότητες ετικέτα σώματος. Μπορείτε να το εφαρμόσετε σε ένα μπλοκ όπως απαιτείται, για παράδειγμα.
Θα τεντώσουμε αυτήν την εικόνα με ένα χαριτωμένο κορίτσι για να γεμίσει ολόκληρη την οθόνη :)
Γενικά, ορίζουμε ένα μπλοκ στο οποίο εκχωρούμε στυλ και προσθέτουμε τον ακόλουθο κώδικα στο αρχείο στυλ για αυτό το μπλοκ:
Body( background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: κάλυμμα; )
Όπως μπορείτε να δείτε, στην παράμετρο φόντου προσθέτουμε τη διαδρομή στην εικόνα και ορίζουμε τη θέση της εικόνας σε σχέση με την οθόνη. Στις περιπτώσεις μας αυτά είναι κεντρικά και κορυφαία. Αυτό σημαίνει ότι η εικόνα θα βρίσκεται στο κέντρο της οθόνης και η κορυφή της θα πιέζεται στο επάνω μέρος της οθόνης. Αυτό είναι έτσι ώστε το πρόσωπο του κοριτσιού να είναι πάντα ορατό. Εάν, για παράδειγμα, έχετε ένα αφηρημένο φόντο ή φύση, όπου μπορείτε να δείτε τον ουρανό, το πεδίο, τον ορίζοντα, τότε μπορείτε να ορίσετε τις τιμές κέντρο και κέντρο. Σε γενικές γραμμές, αν είστε εξοικειωμένοι με το CSS, τότε νομίζω ότι θα καταλάβετε. Έχει επίσης ρυθμιστεί σε fixed , που παγώνει την εικόνα.
Η μέθοδος είναι πολύ απλή, τη χρησιμοποιώ πάντα και μου ταιριάζει 100%. Υπάρχει μόνο ένα πράγμα. Τα παλιά προγράμματα περιήγησης δεν είναι εξοικειωμένα με το CSS3, επομένως όσοι χρησιμοποιούν αρχαίες εκδόσεις δεν θα δουν το επιθυμητό αποτέλεσμα.
Μέθοδος Νο. 2Αυτή η μέθοδος χρησιμοποιεί κανονικό CSS. Στην ουσία είναι και απλό. Εμφανίζουμε μια εικόνα στο σώμα του ιστότοπου εκχωρώντας id - bg :
Και γράφουμε τα στυλ:
#bg (θέση: σταθερό; δείκτης z: -1; επάνω: 0; αριστερά: 0; ελάχ. πλάτος: 100%; ελάχ. ύψος: 100%; )
Η τοποθέτηση είναι σταθερή και εκτείνεται σε ολόκληρη την οθόνη. Είναι τόσο απλό :).
Μέθοδος Νο. 3Εδώ χρησιμοποιείται το jQuery. Επομένως, πρέπει πρώτα να συνδέσετε τη βιβλιοθήκη εάν δεν έχει συνδεθεί προηγουμένως.
Μετά τη βιβλιοθήκη, συνδέουμε το σενάριο, το οποίο θα κλιμακώσει το φόντο μας
$(window).load(function() ( var theWindow = $(παράθυρο), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); συνάρτηση resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Και στο τέλος προσθέτουμε στυλ για να λειτουργήσουν όλα. Ανοίξτε το αρχείο στυλ και προσθέστε τον ακόλουθο κώδικα σε αυτό:
#bg (θέση: σταθερό; επάνω: 0; αριστερά: 0; z-index: -1; ) .bgwidth (πλάτος: 100%; ) .bgheight (ύψος: 100%; )
Μπορείτε να δείτε από τα στυλ που προσθέσαμε τοποθέτηση. Σε αυτή την περίπτωση διορθώνεται. Η εικόνα θα παραμείνει κατά την κύλιση σταθερό φόντο, αλλά αν αλλάξετε τη θέση σε απόλυτη , τότε το φόντο μπορεί να κύλιση. Παρεμπιπτόντως, το ίδιο μπορεί να γίνει με τις δύο πρώτες μεθόδους.
Καθορίζεται επίσης η παράμετρος - z-index: -1, έτσι ώστε η εικόνα να βρίσκεται πίσω από το κείμενο. Εάν δεν έχετε κείμενο που πρέπει να είναι μπροστά, μπορείτε να καταργήσετε αυτήν την επιλογή.
Ποια μέθοδος θα χρησιμοποιήσετε εξαρτάται από εσάς. Όπως έγραψα παραπάνω, η πρώτη μέθοδος είναι πιο κοντά σε μένα. Είναι το πιο απλό και όχι χειρότερο από άλλα.
Αυτό είναι όλο, ευχαριστώ για την προσοχή σας. 🙂
