Mengganti warna putih dengan photoshop transparan. Bagaimana cara membuat warna transparan di Photoshop? Atur transparansi untuk latar belakang css

Hal utama adalah menentukan gambar di komputer atau ponsel Anda, lalu klik tombol OK di bagian bawah halaman ini. Secara default, latar belakang gambar yang polos diganti dengan yang transparan. Warna latar belakang gambar asli ditentukan secara otomatis, Anda hanya perlu menentukan dalam pengaturan warna apa yang akan diganti. Parameter utama yang mempengaruhi kualitas penggantian adalah "Intensitas penggantian" dan bisa berbeda untuk setiap gambar.

Contoh foto mawar merah muda tanpa perubahan dan setelah mengganti background solid dengan transparan, putih dan hijau:

Contoh pertama dengan bunga mawar di latar belakang transparan dibuat dengan pengaturan sebagai berikut:
1) Intensitas penggantian - 38;
2) Menghaluskan di sekitar tepi - 5;
3) Ganti latar belakang yang solid dengan yang transparan;
4) Pemotongan (<0) или Добавление (>0) di sepanjang tepi - "-70";
5) Balikkan - dinonaktifkan (centang tidak dicentang).

Untuk membuat contoh kedua, dengan latar belakang putih, pengaturan yang sama digunakan seperti pada contoh pertama, kecuali untuk parameter: "Ganti latar belakang biasa dengan" - putih. DI DALAM contoh ketiga, dengan latar belakang hijau, pengaturan juga digunakan, seperti pada contoh pertama, kecuali untuk parameter: "warna dalam format hex" - #245a2d.

Gambar asli tidak diubah dengan cara apa pun. Anda akan diberikan gambar olahan lain dengan background transparan atau background yang Anda tentukan.

Dalam beberapa kasus, misalnya, saat mendesain situs, Anda mungkin menghadapi situasi di mana latar belakang gambar sama sekali tidak cocok dengan warna situs itu sendiri. Solusi yang jelas adalah membuat latar belakang ini transparan.

Anda akan perlu

- Adobe Photoshop.

Petunjuk

Buka gambar yang diinginkan di Adobe Photoshop (item menu "File" (File) -> "Open" (Buka) atau tombol pintas Ctrl + O). Klik item menu "Pilih" (Pilih) -\u003e "Rentang Warna" (Rentang Warna). Jendela Rentang warna akan muncul.

Temukan item "Pilih", yang terletak di bagian paling atas jendela. Klik di atasnya. Di menu yang terbuka, Anda dapat memilih grup warna atau nada, yang nantinya dapat dibuat transparan. Itu. hanya merah, hanya hijau, biru, atau hanya nada tengah, bayangan, dll. Jika Anda perlu menunjuk untuk memilih satu warna, tentukan dalam paragraf ini "Berdasarkan sampel".

Temukan item "Scatter" (Kekaburan) - dengannya Anda dapat memperluas rentang warna yang dapat dipilih. Di bawah ini adalah item "Area yang dipilih" dan "Gambar". Jika Anda memilih yang pertama, area yang dipilih akan ditampilkan di jendela pratinjau program. Jika yang kedua, maka gambar akan ditampilkan secara keseluruhan.

Di bagian kanan jendela ada tiga tombol dengan gambar pipet. Yang pertama hanya ada pipet, yang kedua - pipet dengan plus, dan yang ketiga - dengan minus. Klik yang pertama dan klik di jendela pratinjau atau pada dokumen itu sendiri dengan warna yang ingin Anda jadikan transparan. Pilih "Area Terpilih" untuk melihat bagian mana dari gambar yang dipilih.

Jika Anda ingin menambahkan warna lain ke warna yang dipilih, klik "Pipet +", lalu klik warna ini. Jika Anda menguranginya, lanjutkan dengan cara yang sama, hanya dengan bantuan "Pipet-". Setelah memilih warna (atau warna) yang diinginkan, klik OK. Seperti yang Anda lihat, warna yang dipilih telah disorot dalam dokumen.

Di daftar layer (jika tidak ada, tekan F7) klik klik kanan klik pada latar belakang, di menu yang muncul, pilih "Dari latar belakang", dan di jendela berikutnya - langsung OK. Latar belakang akan berubah menjadi lapisan. Tekan Hapus di keyboard Anda. Area yang dipilih akan menjadi transparan.

Bagaimana cara mengatur warna transparan di css? Saat ini ada 3 cara untuk melakukan ini.

Metode 1 - nilai transparan

Jika Anda menyetel warna teks atau latar belakang ke transparent , warnanya akan benar-benar transparan, yaitu tidak terlihat. Contoh:

warna: transparan;

Teks seperti itu tidak akan terlihat di halaman.

Metode 2 - mode warna rgba

Dan ini sudah merupakan inovasi css3. Sebelumnya, tidak ada mode seperti itu dalam pengembangan web, hanya ada rgb. Tentunya Anda tahu cara menulis warna dalam format ini. Untuk melakukan ini, Anda perlu menentukan tiga nilai dalam tanda kurung dari 0 hingga 255, yang menunjukkan saturasi dari salah satu dari tiga warna primer (merah, hijau, biru). Misalnya:

Latar belakang: rgb(230, 121, 156);

Format rgba tidak berbeda, hanya nilai keempat yang ditambahkan - tingkat transparansi elemen dari 0 hingga 1. Secara umum, format notasi ini terutama digunakan untuk menyetel warna semi transparan, dan tidak sepenuhnya transparan. Untuk mencapai transparansi penuh, Anda hanya perlu menulis 0 sebagai nilai keempat.

Latar belakang: rgba(0, 0, 0, 0);

Dalam hal ini, 3 digit yang tersisa tidak memainkan peran khusus.

Warna transparan dapat diatur jika parameter keempat diatur ke nilai dari 0,01 hingga 0,99. O sudah menulis sedikit tentang pengaturan tembus untuk latar belakang di , Anda dapat membacanya jika Anda tertarik.

Metode 3 - opasitas

Properti lain dari teknologi css3. Tetapi saya ingin segera memperingatkan Anda bahwa cara kerjanya sedikit berbeda. Dengan opacity, transparansi diatur ke seluruh blok yang diterapkan. Dengan demikian, keterbacaan teks dan persepsi gambar memburuk. Jadi saya mengerti gunanya menggunakan properti hanya untuk blok yang tidak ada teks dan beberapa informasi lainnya. Nilai dapat diatur dari 0 hingga 1, seperti pada parameter keempat saat menentukan warna dalam format rgba.

Secara umum, aktif saat ini ini semua cara yang saya tahu tentang mengatur warna transparan di css. Mengapa ini perlu adalah pertanyaan lain. Melalui latar belakang transparan Anda dapat melihat apa yang ada di bawahnya. Terkadang perlu dilakukan seperti itu berdasarkan desain. Secara umum, teknik tembus cahaya sangat umum saat ini.

Latar belakang transparan (latar belakang)

Seperti yang Anda ketahui, latar belakang adalah properti CSS yang memungkinkan Anda mengatur warna latar belakang atau mengunggah gambar untuk bertindak sebagai latar belakang.

Atur transparansi untuk latar belakang css

Jadi, semua ini dilakukan dengan sangat sederhana berkat format perekaman berwarna seperti rgba . Jika Anda bekerja dengan editor grafis, maka Anda mungkin tahu bahwa mode warna rgb adalah singkatan dari: proporsi merah (merah), proporsi hijau (hijau) dan biru (biru). Jadi, rgba hampir sama, hanya ditambahkan satu parameter lagi - transparansi. Itu tertulis seperti ini:

Warna latar belakang: rgba(173, 57, 22, 0,5)

Pertama, kami secara eksplisit menunjukkan bahwa kami menyetel warna dalam mode rgba. Kemudian kami menunjukkan nilai saturasi tiga warna primer dari 0 hingga 255, di mana 255 adalah saturasi tertinggi. Parameter keempat adalah transparansi kami. Di sini nilainya ditulis dari 0 hingga satu. 1 adalah elemen yang sepenuhnya buram, dan 0 adalah elemen yang sepenuhnya transparan. Karenanya, jika Anda menyetelnya ke 0, warna latar belakang tidak akan terlihat sama sekali.

Sekarang Anda tahu cara mengatur transparansi untuk properti latar belakang di css. Untuk melakukan ini, Anda perlu menggunakan mode warna rgba. Ada juga properti opacity, tetapi berlaku untuk seluruh elemen secara keseluruhan. Artinya, saat menerapkan opasitas, transparansi juga dapat diterapkan pada teks, yang membuatnya tidak dapat dibaca.

Contoh background transparan

Keuntungan latar belakang tembus pandang mudah ditunjukkan dengan contoh. Misalnya, kami memiliki latar belakang halaman umum. Seperti inilah tampilan blok jika diberi warna hitam pekat:

Dan sekarang mari kita atur warna hitam yang sama ke blok, tetapi tentukan menggunakan format warna rgba, tentukan nilai terakhir sebagai 0,7, misalnya. Ini akan menjadi seperti ini:

Sekarang latar belakang blok tembus cahaya dan gambar latar belakang terlihat melaluinya. Gambar dan latar belakang ini hanya untuk tujuan ilustrasi. Seperti yang Anda pahami, transparansi latar belakang css dapat berguna saat Anda membutuhkan latar belakang elemen bersarang untuk ditampilkan tanpa mengaburkan latar belakang lain yang terletak di lapisan lain.

Warnanya sendiri tidak sulit diatur menggunakan rgba. Seperti yang telah disebutkan, tiga huruf pertama berarti tiga warna primer: merah, hijau dan biru, atau lebih tepatnya bagiannya (dari 0 hingga 255). Dengan menulis nilai yang berbeda, Anda bisa mendapatkan jutaan warna berbeda, dan tembus cahaya akan memungkinkan Anda menghasilkan lebih banyak efek yang indah untuk situs, jika diperlukan.