Αρκετά συχνά μπορείτε να βρείτε μια κατάλληλη εικόνα στο Διαδίκτυο, για παράδειγμα, για να την εισαγάγετε σε έναν ιστότοπο. Ή ίσως κάνετε ένα κολάζ και πρέπει να προσθέσετε άλλα σε ένα σχέδιο. Αλλά οι εικόνες που χρειάζεστε συνήθως έχουν κάποιου είδους φόντο.

Ας καταλάβουμε πώς μπορούμε δημιουργήστε ένα διαφανές φόντο για μια εικόνα χρησιμοποιώντας το πρόγραμμα επεξεργασίαςΠλίθαPhotoshop. Έχω εγκατεστημένη την αγγλική έκδοση του Adobe Photoshop CS5, οπότε θα σας δείξω σε αυτήν.

Θα προσπαθήσω να παρέχω διάφορους συνδυασμούς πλήκτρων πρόσβασης.

Εάν δεν έχετε εγκαταστήσει ακόμα το Photoshop, το χρησιμοποιείτε σπάνια ή είναι στα Αγγλικά, μπορείτε να δημιουργήσετε ένα διαφανές φόντο στο Paint.net. Αυτό είναι ένα απλό πρόγραμμα επεξεργασίας εικόνων στη ρωσική γλώσσα που δεν καταλαμβάνει πολύ χώρο στον σκληρό σας δίσκο. Κάνοντας κλικ στον σύνδεσμο, μπορείτε να διαβάσετε το αναλυτικό άρθρο. Μπορείτε να κατεβάσετε το πρόγραμμα Paint.net από την ιστοσελίδα μας.

Αρχικά, ας δούμε ένα απλό παράδειγμα. Ας υποθέσουμε ότι έχετε μια εικόνα σε απλό φόντο, μπορεί να είναι ένα λογότυπο ή το όνομα κάποιου άλλου. Ας φτιάξουμε αυτό το λογότυπο ή την επιγραφή σε διαφανές φόντο στο Photoshop.

Ανοίξτε την επιθυμητή εικόνα στο πρόγραμμα επεξεργασίας. Τώρα ας φτιάξουμε ένα διαφανές φόντο για το στρώμα. Στο παράθυρο "Επίπεδα", κάντε διπλό κλικ στο προστιθέμενο επίπεδο - θα υπάρχει ένα λουκέτο απέναντί ​​του. Θα ανοίξει το παράθυρο "New Layer", κάντε κλικ στο "OK" σε αυτό. Μετά από αυτό, η κλειδαριά θα εξαφανιστεί.

Επιλέξτε το εργαλείο «Μαγικό Ραβδί». Στη γραμμή ιδιοτήτων, καθορίστε το επίπεδο ευαισθησίας, ορίστε διαφορετικές τιμές για να κατανοήσετε πώς λειτουργεί, για παράδειγμα, 20 και 100. Για να αποεπιλέξετε την εικόνα, πατήστε "Ctrl+D".

Ρυθμίστε την ευαισθησία και κάντε κλικ στην περιοχή φόντου με το μαγικό ραβδί. Για να προσθέσετε στο επιλεγμένο φόντο εκείνα τα μέρη που δεν είναι επιλεγμένα, κρατήστε πατημένο το "Shift" και συνεχίστε την επιλογή. Για να διαγράψετε επιλεγμένες περιοχές, κάντε κλικ στο «Διαγραφή».

Τώρα αντί για φόντο υπάρχει μια σκακιέρα - αυτό σημαίνει ότι καταφέραμε να κάνουμε το λευκό φόντο διαφανές. Κατάργηση επιλογής – «Ctrl+D».

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

Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε το εργαλείο Γρήγορης επιλογής. Κάντε κλικ στο μαγικό ραβδί με το αριστερό κουμπί του ποντικιού με μια μικρή καθυστέρηση και επιλέξτε το εργαλείο που θέλετε από το μενού.

Τώρα πρέπει να επιλέξουμε το αντικείμενο που θέλουμε να αφήσουμε σε διαφανές φόντο. Στη γραμμή ιδιοτήτων, ορίστε διαφορετικά μεγέθη και κάντε κλικ στο αντικείμενο, προσθέτοντας περιοχές σε αυτό. Εάν επιλεγεί λανθασμένα ένα περιττό φόντο, πατήστε "Alt" και αφαιρέστε το.

Για να δείτε το αποτέλεσμα, πατήστε "Q". Εκείνα τα σημεία της εικόνας που θα γίνουν διαφανή θα τονιστούν με ροζ.

Αντιγράψτε τις επιλεγμένες περιοχές πατώντας «Ctrl+C». Στη συνέχεια, δημιουργήστε ένα νέο αρχείο, "Ctrl+N", με διαφανές φόντο.

Επικολλήστε τα αντιγραμμένα κομμάτια σε αυτό, "Ctrl + V". Εάν έχουν μείνει περιττά μέρη του φόντου πάνω τους, αφαιρέστε τα χρησιμοποιώντας το εργαλείο Γόμα. Αποθηκεύουμε εικόνες που λαμβάνονται σε διαφανές φόντο σε μορφή PNG ή GIF.

Κάντε το λευκό φόντο της εικόνας διαφανές ή δημιουργήστε ένα διαφανές φόντο για μεμονωμένα τμήματα μιας έγχρωμης εικόνας ή φωτογραφίας στο Photoshop. Μετά από αυτό, μπορείτε να τα χρησιμοποιήσετε όπου χρειάζεται: να τα εισάγετε σε έναν ιστότοπο, να τα προσθέσετε σε άλλο σχέδιο ή να φτιάξετε ενδιαφέροντα κολάζ.

Διαφάνεια φόντου CSS

Η διαφάνεια του φόντου στον ιστότοπο δημιουργείται μέσω ιδιοτήτων CSS. Μπορείτε να επιτύχετε διαφάνεια με δύο τρόπους: μέσω της ιδιότητας αδιαφάνειας και του φόντου:rgba(). Ας δούμε καθένα από αυτά και στη συνέχεια κάνουμε μια σύγκριση.

1. Ιδιότητα αδιαφάνειας CSS για διαφάνεια φόντου

Το CSS έχει την ιδιότητα αδιαφάνειας, η οποία μπορεί να χρησιμοποιηθεί για να ορίσετε τη διαφάνεια των εικόνων, των κειμένων, συμπεριλαμβανομένων των φόντου.

Η διαφάνεια καθορίζεται απλώς με τον καθορισμό ενός πραγματικού αριθμού από το 0,0 έως το 1,0. Όσο μικρότερος είναι ο αριθμός, τόσο λιγότερο αισθητό θα είναι το αντικείμενο.

αδιαφάνεια: 0,5; // Αδιαφάνεια διαφάνειας: 0,2; // Το αντικείμενο είναι ορατό μόνο σε 20% αδιαφάνεια: 0,8; // Το αντικείμενο είναι ορατό μόνο κατά 80%.

Ας δούμε ένα παράδειγμα με την ιδιότητα αδιαφάνειας.

Το κείμενο είναι επίσης διαφανές