Bagaimana cara menghapus piksel putih di sekitar tepinya saat mengekspor GIF transparan?

11

Saya mengambil loader dari xooplate.com lalu mengekspornya dengan bantuan tindakan yang disertakan ke GIF. Tapi saya punya beberapa piksel putih di sekitar loader yang benar-benar menjengkelkan ketika ditampilkan pada latar belakang yang gelap. Anda dapat melihatnya di sini, dalam bingkai yang saya ekstrak dari gif:

masukkan deskripsi gambar di sini

Bagaimana saya mencegah piksel putih itu dan mempertahankan latar belakang transparan?

adobe-photoshop background transparency gif Ryan
sumber
Anda mungkin ingin menyebutkan perangkat lunak apa yang Anda gunakan. Saya dapat mengasumsikan Photoshop, tetapi tidak ada salahnya untuk menandai pertanyaan Anda dengan benar dan menyebutkan perangkat lunak yang Anda gunakan.
Scott
itu adalah photoshop. Saya tertarik untuk menghapus piksel putih itu, bukan transparansi (KMSTR)
Ryan
1
kontur benar tentang alasan kekasaran (yaitu keadaan transparansi biner hidup / mati). Bergantung pada konteksnya, orang mungkin sedikit curang dengan membuat gambar yang sedikit lebih besar, hampir identik disimpan sebagai PNG dengan transparansi alfa dan menempatkannya sebagai gambar latar belakang statis dengan gif animasi warna-rendah yang berpusat di atasnya. Dengan cara ini Anda dapat memastikan warna matte (seperti yang dijelaskan dalam jawaban kontur) dapat diketahui dengan tingkat kepastian yang lebih tinggi.
horatio

Jawaban:

19

Cara transparansi bekerja dengan 8-bit gifs / pngs adalah bahwa pikselnya sepenuhnya transparan atau sepenuhnya buram .

Di sudut-sudut lingkaran di mana lingkaran memadukan secara transparan ke latar belakang, biasanya ada piksel yang semi-transparan untuk memperlancar transisi. Transisi yang mulus ini tidak dapat sepenuhnya direproduksi dengan 8-bit gif / pngs.

Salah satu cara memalsukan ini adalah dengan memilih latar belakang matte untuk semua piksel semi-transparan. Ini berarti piksel yang tidak sepenuhnya transparan mendapatkan warna yang dihitung seolah-olah berada di atas warna matte.

Pixel putih di gif lingkaran Anda akan seperti ini, karena gif dibuat untuk digunakan dengan latar belakang putih. Pixel semi-transparan dari lingkaran asli mendapat rastered terhadap warna matte putih, menghasilkan hampir putih tapi piksel sepenuhnya buram di sudut-sudut.

Cara untuk memperbaiki ini jika Anda memiliki lingkaran asli dan sepenuhnya transparan adalah dengan save for web & devicesdan memilih warna matte yang sesuai dengan latar belakang Anda. Dengan begitu, piksel yang berpotensi semi-transparan akan digabungkan menjadi piksel yang sepenuhnya buram terhadap warna matte, dan dilihat di situs web Anda dengan warna latar yang serupa, itu akan tampak sepenuhnya mulus. Perhatikan bahwa a) grafik dengan rentang kecil area semi-transparan (dalam piksel) berfungsi paling baik, dan b) ini mensyaratkan bahwa latar belakang gif ditunjukkan adalah sebagian dari apa yang dalam warna konsisten yang Anda pilih untuk matte Anda.

masukkan deskripsi gambar di sini

Dalam gambar ini:

  • Kiri atas adalah grafik bulat asli dengan anti aliased, yaitu smoothed, corner.
  • Hasil yang sama Anda dapatkan dengan png-24, seperti yang terlihat di kanan atas - tetapi ini tidak berfungsi untuk animasi.
  • Tampilan kiri bawah menunjukkan kepada Anda bagaimana piksel semi-transparan grafik dialihkan ke warna matte merah yang dipilih. Perhatikan juga bagaimana piksel-piksel itu, yang sepenuhnya transparan, tetap sepenuhnya transparan. Sedangkan hanya piksel yang memiliki sedikit transparansi di dalamnya "underlayed" dengan warna matte, dan piksel sepenuhnya buram tetap sama sekali tidak terpengaruh oleh pengaturan transparansi (namun, mereka dipengaruhi dari pilihan pada jenis dan warna dithering).
  • Bagian kanan bawah menyerupai jenis opsi ekspor yang digunakan untuk contoh gambar Anda. Dengan matte putih dipilih, piksel yang sama yang menunjukkan merah di gambar kiri bawah, akan menunjukkan putih di gambar kanan bawah. Ini bisa diterima jika Anda menunjukkan latar belakang putih. Dengan latar belakang lain yang lebih gelap, piksel putih muncul karena menggunakan warna matte yang salah untuk membuat piksel yang sepenuhnya buram untuk piksel yang tidak sepenuhnya transparan.

Lihat kedua gif yang diekspor dengan matte merah dan putih pada gambar ini, dengan latar belakang berbeda. Ini menunjukkan bagaimana matte merah berpadu dengan baik dengan latar belakang merah, tetapi juga bagaimana mengganggu matte putih menunjukkan latar belakang hitam.

masukkan deskripsi gambar di sini

Jika Anda berada dalam situasi yang tidak menguntungkan, bahwa Anda tidak memiliki file asli dengan alias anti-alias penuh (yaitu Anda hanya memiliki 8-bit gif), sulit untuk membalikkan matte rastering ini - piksel demi piksel yang harus Anda hapus warna matte dari piksel semi-transparan dan kemudian mengekspornya kembali dengan pengaturan yang lebih tepat.

kontur
sumber
5

Dalam dialog Simpan untuk Web, pastikan untuk mengatur warna Matte di sebelah kanan jendela ke warna latar belakang halaman web Anda.

GIF tidak mendukung transparansi 8bit penuh, mereka hanya mendukung transparansi 1bit. Yang terbaik yang dapat Anda lakukan adalah menggunakan warna yang cocok dengan latar belakang halaman web sehingga gambar menyatu dengan warna itu dengan mudah.

Scott
sumber