Transparansi di Photoshop- salah satu konsep kunci. Jika Anda baru mulai belajar Photoshop dan belum mengetahui cara membuat background foto menjadi transparan atau cara membuat bagian gambar menjadi transparan, tutorial singkat disertai ilustrasi ini akan bermanfaat bagi Anda.

Cara membuat background transparan di photoshop

Untuk membuat latar belakang transparan pada foto atau gambar, cukup membuat 2 lapisan: lapisan latar belakang transparan bawah dan lapisan atas yang terlihat, di mana Anda dapat menghapus area gambar yang tidak perlu.

1. Buka photoshop. Buka dengan gambar yang perlu ditempatkan pada latar belakang transparan ( File->Buka…).

2. Pilih seluruh gambar/foto ( Ctrl+O).

3. Salin gambar yang dipilih ( Ctrl+C).

4. Buka file baru di Photoshop ( File->Baru… atau Ctrl+N). Di jendela yang muncul, di daftar drop-down terendah, pilih nilainya Transparan- "transparansi":

Klik Memasuki dan kita melihatnya photoshop membuat file baru dengan latar belakang kotak putih dan abu-abu. Kotak-kotak di Photoshop ini menunjukkan area yang sepenuhnya transparan.

5. Tempelkan gambar yang telah disalin sebelumnya ke dalam file baru dengan latar belakang transparan. Untuk ini kami menggunakan tradisional Ctrl+V. Hasilnya, gambar yang disalin sebelumnya akan ditempelkan ke lapisan saat ini yang benar-benar kosong dan transparan.

6. Pilih area yang ingin Anda hapus menggunakan alat seleksi biasa ( M)

atau menggunakan alat “ajaib” ( W):

Tekan salah satu tombol pada keyboard Anda Menghapus dan alih-alih latar belakang atau bagian gambar yang dipilih, Anda akan melihat kotak putih dan abu-abu - area ini akan transparan. Selanjutnya, Anda dapat menyimpan gambar dengan transparansi atau terus bereksperimen dengan gambar tersebut di Photoshop.

Cara membuat teks tembus pandang dan watermark

Di Photoshop, selain status " terlihat sepenuhnya" Dan " sepenuhnya transparan» ada syaratnya visibilitas parsial atau transparansi parsial. Visibilitas sebagian suatu objek dalam gambar ditunjukkan dalam persentase.

Teks tembus pandang, logo, atau tanda tembus pandang lainnya di atas gambar asli sering kali digunakan untuk melindungi hak cipta. Biasanya diterapkan menggunakan Photoshop atau plugin khusus. Tujuan mereka adalah untuk menunjukkan sumber asli gambar tersebut, menunjukkan penulisnya, dan mempersulit hidup orang-orang yang ingin mencuri gambar tersebut.

Katakanlah kita perlu memposting foto eksklusif sebuah mobil di situs web perusahaan, yang menunjukkan tulisan tembus pandang di atas foto tersebut. Transparansi semacam ini sangat mudah dibuat di Photoshop:

1. Luncurkan Photoshop dan buka foto kita di dalamnya ( File->Buka…).

2. Pilih alat Teks ( T) dan tulis di atas foto tulisan ukuran, warna dan gaya yang diinginkan:

Dalam hal ini, teks akan secara otomatis ditempatkan di lapisan terpisah dan 100% terlihat.

3. Atur visibilitas teks putih pada foto menjadi 40%. Untuk melakukan ini, di jendela lapisan ( Lapisan) gerakkan penggeser properti Kegelapan hingga nilai 40%:

Semua. Kini gambar dengan tulisan tembus pandang dapat disimpan dalam format JPG dan diposting di website. Demikian pula, selain teks, Anda dapat menyisipkan gambar lain, misalnya logo BMW atau situs web.

Dalam format apa saya harus menyimpan gambar dengan transparansi?

Harap dicatat bahwa Anda tidak dapat menyimpan foto yang diproses di Photoshop dengan area transparan dalam format JPEG - format ini tidak mendukung transparansi. Area transparan bila disimpan sebagai JPG akan otomatis terisi warna (putih secara default). Di antara format yang digunakan di web, hanya GIF dan PNG yang ditampilkan dengan benar oleh browser dan mendukung transparansi. Format Photoshop PSD asli tidak ditampilkan oleh browser.

Sayangnya, format gambar GIF dan PNG memiliki keterbatasan. Format GIF, seperti PNG 8-bit, mampu menyimpan maksimal 256 warna, sehingga kurang cocok untuk menyimpan foto. Meskipun PNG 24-bit cocok untuk menyimpan foto dan grafik lainnya dengan gradien dan transparansi, banyak situs yang membatasi format grafik yang dapat diunggah pengunjung. Oleh karena itu, Anda hanya dapat mengunggah foto atau avatar Anda ke situs tersebut dalam format JPG atau GIF. Dalam hal ini, Anda harus menyimpan foto bukan pada latar belakang transparan, tetapi memasukkan latar belakang di Photoshop yang akan ditempatkan di situs, menyimpan hasilnya sebagai JPG dan baru kemudian mengunggahnya ke situs.

Saat ini, penggunaan balok dan bayangan tembus pandang di situs sudah menjadi mode. Jika dipadukan dengan benar, Anda dapat memperoleh desain yang cukup bergaya. Hari ini saya akan memberi tahu Anda dan menunjukkan kepada Anda bagaimana Anda dapat membuat blok menjadi tembus cahaya atau transparan, dan saya juga akan memberi tahu Anda tentang pro dan kontra dari setiap metode. Ternyata, tidak semua orang tahu bahwa selain menggunakan png tembus pandang di latar belakang sebuah blok, ada metode lain.

Metode No.1

Saya rasa semua orang tahu cara ini, untuk mengimplementasikannya kita menggunakan gambar png tembus pandang, misalnya 1 piksel kali 1 piksel, dan kalikan dengan latar belakang blok. Gambar tembus pandang dapat dibuat di editor grafis modern mana pun. Mengapa png dan bukan jpg atau gif? Jpg pada dasarnya tidak mendukung transparansi sama sekali dan, ketika disimpan dalam format ini, membuat semua bagian transparan menjadi putih. Gif - mendukung transparansi, tetapi tidak mendukung transparansi. Tapi png berisi semua properti yang kita butuhkan.

Contoh background blok tembus pandang:

Metode nomor 2

Metode kedua didasarkan pada penggunaan properti opacity css, yang tidak kompatibel lintas-browser, tetapi masalahnya diselesaikan dengan menggunakan properti serupa lainnya yang didukung langsung oleh Dinosaurus. Misalnya, untuk ie6 Anda perlu menggunakan properti css yang menggunakan filter alpha dan tampilannya seperti ini filter: alfa(opasitas=80); Angka 80 dalam hal ini adalah persentase. Untuk Mozilla Firefox versi lama, Anda dapat menggunakan properti -moz-opasitas: 0,8; di sini seperti di properti kegelapan blok buram memiliki koefisien satu, dan untuk transparansi kami menetapkan nilai desimalnya (misalnya, 0,8 berarti 80%).

Contoh background tembus pandang blok 2 :

Dalam hal ini, warna transparansi diatur oleh properti latar belakang, di mana Anda dapat mengatur warna apa pun yang Anda perlukan agar tembus cahaya. Saat menggunakan metode ini, Anda mungkin menemukan fakta bahwa semua informasi di blok akan tembus cahaya.

Metode nomor 3

Saya paling menyukai metode ini, jauh lebih sederhana, tetapi seperti metode yang saya sajikan di atas, metode ini tidak sepenuhnya kompatibel lintas-browser di browser lama. Cara ini diterapkan dengan mengatur warna blok menggunakan rgba warna yang parameter terakhirnya bertanggung jawab atas saluran alfa (untuk tembus cahaya). Tiga parameter pertama adalah corak merah, hijau dan biru yang bila dicampur akan memberikan warna tertentu. Metode ini tidak didukung oleh IE hingga versi 8, yang tentu saja cukup menyedihkan, tetapi saat ini ini juga bukan browser modern biasa, dan secara pribadi saya tidak mempedulikannya.

Contoh background tembus pandang blok 3 :

Itu saja, saya pribadi suka metode 3, cukup sederhana, dan Anda tidak perlu menghubungi server untuk mendapatkan gambarnya. Terserah Anda untuk memutuskan metode mana yang akan dipilih. Jika Anda tahu cara lain, silakan menulis.

Secara default, semua layer baru di Photoshop dibuat dengan opacity 100%. Namun tingkat transparansi lapisan dapat diubah menggunakan pengaturan Kegelapan Dan Mengisi terletak di bagian atas palet Layers.

Kegelapan(Opacity) adalah pengaturan dengan skala 100% yang memungkinkan Anda mengubah tingkat transparansi seluruh lapisan, dengan semua efek yang diterapkan. Jika nilainya berbeda dari 100%, lapisan di bawahnya akan terlihat. Tingkat transparansi 0% menunjukkan tidak adanya gambar yang terlihat.

Transparansi lapisan dapat dibandingkan dengan kertas kalkir, yang diterapkan pada gambar untuk disalin.

Mengisi(Isi) adalah pengaturan skala 100% yang memungkinkan Anda mengubah visibilitas lapisan tanpa memengaruhi overlaynya.

Seperti apa transparansi di Photoshop

Logikanya, transparansi suatu gambar digital adalah tidak adanya saturasi dan kepadatan warna. Jika Anda membayangkan warna sebagai sebuah film, maka transparansi adalah intensitas cahaya yang menyinari film tersebut. Tetapi Bagaimana cara menunjukkan tembus cahaya di komputer?

Photoshop memperkenalkan konvensi transparansi ke dunia grafik komputer - latar belakang catur.

Sekarang konvensi ini sudah menjadi standar. Banyak program dan layanan web menggunakan latar belakang kotak-kotak dalam hal transparansi. Misalnya, Yandex.Images atau Google Images menampilkan gambar dengan elemen transparan dengan latar belakang kotak-kotak.

3 cara membuat layer gambar menjadi transparan

Untuk memulainya, Anda memerlukan lapisan yang diperlukan. Teknik memilih dua atau lebih menggunakan tombol Ctrl atau Shift juga cocok di sini.

Catatan

Lapisan latar belakang (dengan ikon gembok) tidak boleh transparan. Baginya, pengaturan ini tidak aktif.

Satu catatan lagi

Thumbnail lapisan tidak akan berubah, berapa pun nilai transparansi yang Anda tetapkan.

Metode 1 Memasukkan angka

Masukkan nilai transparansi yang diperlukan dalam angka dari 0 hingga 100 di jendela pengaturan khusus pada palet. Karena kedua pengaturan memiliki efek yang hampir sama, Anda dapat menggunakan salah satunya, cukup ingat apa saja pengaturannya.

Metode 2 Kontrol penggeser

Sedikit di sebelah kanan angka tersebut terdapat tombol dengan tanda panah kecil. Jika Anda mengkliknya, sebuah slider akan muncul. Anda perlu menggerakkannya dengan mouse ke kiri atau ke kanan untuk mengurangi atau meningkatkan transparansi lapisan.

Tampilan angka akan menunjukkan nilai saat ini, dan gambar itu sendiri akan berubah seiring gerakan tangan Anda.

Metode 3 Menggunakan keyboard

Untuk sejumlah alat Photoshop, dimungkinkan untuk mengubah opacity suatu lapisan menggunakan keyboard. Pilih suatu alat, misalnya, atau (ada juga sejumlah alat lain, Anda dapat menemukannya dengan brute force).

Sekarang tekan angka di keyboard Anda:

• Angka 1 akan mengubah opacity menjadi 10%, 2 menjadi 20%, 5 menjadi 50% dan seterusnya;
• Angka 0 berarti 100%;
• Tekan 55 dan Anda mendapatkan 55%, 67 adalah 67% dan seterusnya

Untuk menggunakan teknik yang sama untuk berubah Mengisi, tahan tombol Shift beserta angkanya.

Cara membuat bagian terpisah dari suatu lapisan menjadi transparan

Dibutuhkan upaya untuk membuat tidak seluruh lapisan menjadi transparan, tetapi hanya sebagian saja. Tidak ada alat untuk tujuan ini. Namun, bergantung pada masalahnya, setidaknya ada dua solusi.

Kedua solusi tersebut disatukan oleh pekerjaan awal yang mungkin paling memakan waktu - menciptakan area khusus. Logika tindakannya sederhana - Anda perlu memilih bagian gambar yang akan digunakan untuk pekerjaan lebih lanjut.

Dalam contoh kita, katakanlah Anda perlu membuat latar belakang bulat abu-abu menjadi transparan. Untuk melakukan ini saya akan menggunakan alat ini. Pada panel pengaturan Anda perlu mengatur parameter Tambahkan ke pilihan, lalu klik semua area yang diinginkan hingga Anda memilih semuanya.

Setelah area yang dipilih muncul, Anda dapat membuat fragmen ini transparan.

Metode 1: Gunting area gambar yang diinginkan pada layer baru

Pertama, Anda perlu memastikan bahwa salah satu alat untuk membuat area yang dipilih tidak aktif. Misalnya Tongkat sihir, yang digunakan pada langkah sebelumnya.

Sekarang Anda dapat mengklik kanan pada pilihan tersebut. Menu konteks akan muncul. Kami tertarik dengan tim ini Potong ke layer baru.

Akibatnya, fragmen ini akan dipisahkan dari gambar saat ini dan dipindahkan ke layer baru. Dan kemudian Anda dapat melakukan apapun yang Anda inginkan dengan layer baru itu, termasuk mengubah transparansi.

Metode 2 Menggunakan penghapus

Metode ini cocok jika Anda tidak ingin mencapai pengurangan transparansi yang seragam, tetapi pengurangan yang mengambang, yaitu membuat efek ini lebih kuat di beberapa tempat dan lebih lemah di tempat lain.

Pilih , di bilah opsi atur nilainya Kegelapan berbeda dari 100%. Kemudian hapus area gambar yang berada di area yang dipilih. Alat ini hanya akan memengaruhi piksel yang Anda pilih.

Ubah nilainya Kegelapan, jika Anda perlu mencapai efek yang tidak merata.

Bagaimana cara menyimpan gambar dengan transparansi

Ada banyak, tapi hanya dua yang mendukung transparansi - PNG dan GIF.

GIF memiliki batasan - piksel harus transparan atau tidak, tidak ada opsi ketiga, yaitu nilai transparansi, misalnya 59%, tidak lagi didukung. Format ini juga memiliki batasan jumlah warna yang digunakan - tidak boleh lebih dari 256.

Oleh karena itu, gambar tersebut harus disimpan dalam format PNG. Hanya saja ia tidak memiliki segala kekurangan dan mampu menampilkan piksel tembus pandang.

Untuk membuat gambar PNG di Photoshop, Anda perlu menjalankan perintah: File - Simpan Sebagai. Kotak dialog akan muncul di mana Anda perlu menentukan lokasi untuk menyimpan di komputer Anda, dan juga memilih dari daftar drop-down Jenis berkas — PNG(*.PNG).

Jika Anda melihat kesalahan pada teks, pilih teks tersebut dan tekan Ctrl + Enter. Terima kasih!

Saya ingin mengabdikan pelajaran ini pada poin menarik seperti transparansi lapisan di Photoshop. Layering adalah salah satu keterampilan paling penting dalam Adobe Photoshop. Jika Anda sudah mencoba memahami operasi ini, Anda pasti menemukan definisi "opasitas lapisan". Apa itu dan dimakan dengan apa?

Lapisan manakah yang dianggap transparan?

Mari kita lihat situasi pertama. Katakanlah kita memiliki gambar asli. Katakanlah sebuah foto. Dan kita harus membuat layer baru. Katakanlah menggunakan kombinasi tombol ctrl+shift+n.

Layer baru ini akan menjadi transparan.

Situasi kedua. Anda sudah memiliki dokumen dengan dua lapisan. Keduanya buram. Ini terlihat seperti ini.

Fakta bahwa kita memiliki dua lapisan pada gambar asli dapat dilihat di jendela lapisan. Mari kita coba membuat layer Harley Quinn menjadi transparan.

Untuk melakukan ini, di jendela lapisan, pilih yang teratas dan kurangi transparansinya menjadi nol dengan menggerakkan penggeser.

Lapisan dengan Harley menjadi transparan, dan gambar Deadpool muncul di file sumber. Ternyata semuanya begitu sederhana.

Bagaimana cara membuat lapisan semi transparan?

Mari kita kembali ke sumber yang sama dengan Deadpool dan Harley. Namun kali ini kita gerakkan slidernya bukan ke nol. Biarkan saja, katakanlah, 50 persen.

Penerimaannya sangat bermanfaat. Sering digunakan dalam desain web dan saat membuat kolase.

Metode lain apa yang dapat kita gunakan untuk memengaruhi transparansi suatu lapisan?

Transparansi lapisan dapat diubah melalui opsi pencampuran. Bukan solusi yang nyaman. Meskipun, pada suatu waktu saya cukup sering menjumpainya, jadi saya akan memberitahukannya kepada Anda. Pergi ke Opsi Pencampuran.

Di jendela yang muncul, kita melihat penggeser yang sama dengan skala persentase. Tentu saja panjang dan melelahkan. Namun kenyataannya, hal seperti itu ada, dan dengan bantuannya Anda benar-benar dapat mengurangi transparansi suatu lapisan.

Efek tembus suatu elemen terlihat jelas pada gambar latar belakang dan telah tersebar luas di berbagai sistem operasi karena tampilannya yang gaya dan indah. Dalam desain web, transparansi juga digunakan dan dicapai melalui properti opacity atau format warna RGBA yang diatur untuk latar belakang.

Properti opasitas

Fitur utama dari properti ini adalah nilai transparansi mempengaruhi semua elemen anak di dalamnya, bukan hanya latar belakang. Ini berarti latar belakang dan teks akan menjadi transparan dan Anda tidak dapat meningkatkan tingkat transparansi dengan menambahkan . Dalam tabel Gambar 1 menunjukkan tampilan teks dan background dengan nilai opacity yang berbeda.

Contoh 1 menunjukkan cara membuat blok semi-transparan menggunakan opacity.

Contoh 1: Latar belakang pada halaman web

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Biasanya, berdasarkan desain, hanya latar belakang suatu elemen yang harus tembus cahaya, dan teks harus buram agar tetap mudah dibaca. Properti opacity tidak cocok di sini karena teks di dalam elemen juga sebagian transparan. Yang terbaik adalah menggunakan format RGBA, yang memiliki saluran alfa, atau dengan kata lain, nilai transparansi, sebagai bagiannya. Nilainya ditulis rgba, kemudian nilai komponen warna merah, biru, dan hijau dicantumkan dalam tanda kurung, dipisahkan dengan koma. Yang terakhir adalah transparansi, yang diatur dari 0 hingga 1 (Gbr. 1), dengan 0 berarti transparansi penuh, dan 1 opacity warna..

Beras. 1. Sintaks untuk menggunakan rgba

Contoh 2 menunjukkan penggunaan format RGBA untuk membuat latar belakang transparan.

Contoh 2. Latar belakang tembus pandang

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Hasil dari contoh ini ditunjukkan pada Gambar. 2. Opasitas latar belakang diatur ke 90%.

Beras. 2. Latar belakang tembus pandang dan teks buram