Apakah benar-benar mustahil untuk memiliki gradien tanpa penjaluran?


37

Saya berjuang untuk membuat gradien tanpa garis melintang. Saya telah menonton semua video di YT dan mencoba: Mengaburkan semua jenis, Noise, Dither, bit depth, Brush dan melakukan gradient di Illustrator.

Semuanya gagal dan saya selalu bisa melihat garis banding.

Warna latar belakang yang saya gunakan di belakang gambar: 050b3c masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

Jawaban:


28

Kebisingan dan kehancuran biasanya menghasilkan hasil yang cukup baik. Ada beberapa hal yang dapat membuat "banding" menjadi lebih jelas:

  • Warna "mulai" dan "berhenti"
  • ukuran gradien (garis banding menjadi lebih jelas ketika titik "mulai" dan "berhenti" semakin jauh dari satu sama lain — gradien harus "diproyeksikan" pada lebih banyak sampel dengan jumlah konstan nilai kecerahan yang tersedia),
  • monitor yang salah dikalibrasi / kualitas buruk (sudahkah Anda mencoba melihat gradien pada monitor yang berbeda?),
  • mengurangi resolusi warna "per-saluran" dalam pengaturan sistem (tampaknya tidak mungkin saat ini karena sebagian besar sistem menggunakan pengaturan 32 bps, tetapi masih ada kemungkinan),
  • Pengaturan gamma kartu video "liar" (mis. Dalam "panel kontrol kartu video" atau pemuat gamme seperti Adobe Gamma Loader),
  • profil monitor yang terlalu “agresif” (lagi-lagi tes monitor-di-monitor lain harus memberikan beberapa petunjuk tentang hal itu),
  • mengurangi kedalaman bit suatu gambar.

Juga akan bermanfaat untuk mengetahui apa perangkat target Anda. Ada perbedaan seberapa banyak Anda dapat "menyebar" gradien Anda apakah Anda menargetkan cetak (jenis cetak apa yang juga penting misalnya: layar seperti AM, pseudo-stochastic, stochastic) monitor komputer atau tampilan perangkat seluler. Ini juga membuat perbedaan kemudian apakah Anda menggunakan grafik raster atau grafik vektor.

Intinya adalah: ini subjek yang cukup kompleks :).


1
Anda 100% benar tentang hal ini karena menjadi tanggungan monitor. Setelah membaca jawaban Anda, saya memutuskan untuk menguji gambar biru (lihat OP yang diperbarui) di iPad3 saya. Kualitas gradien pada iPad3 sempurna. Masalahnya adalah saya tidak bisa mengontrol monitor semua pengguna internet.
Pengguna Terdaftar

1
Ya pada gradien putih saya bisa melihat band tetapi pada gradien biru saya tidak melihat band
Ryan

@Ryan Ini bukan putih, itu transparan. Anda harus mengambilnya dan menambahkan layer (warna: 050b3c) di bawahnya di PS. Kemudian mulai bermain dengan opacity layer di bawahnya dan lihat bagaimana perubahan gradien banding.
Pengguna Terdaftar

@RegisteredUser Saya tidak terlalu peduli ketika jawabannya tetap sama yang tergantung pada kualitas yang disebutkan di atas bersama dengan pengaturan monitor.
Ryan

2
Jawaban komprehensif. Saya pikir mungkin ada baiknya menunjuk di mana masalah berasal, dan mengapa trik seperti dithering diperlukan: 8 bit warna tidak memberi Anda langkah yang cukup untuk memberikan ilusi gradien yang berubah dengan lancar.
e100

13

Ya, dimungkinkan untuk membuat gradien berkualitas tinggi. Ada banyak faktor yang perlu dipertimbangkan.

  • Photoshop tidak dan tidak bisa gentar di saluran alpha. Anda lebih baik menggunakan warna solid, jika memungkinkan. Juga, cobalah untuk menghindari opacity layer. Buat gradien menggunakan warna yang tepat yang Anda butuhkan. Sunting: Photoshop CC 2014.2 menambahkan dithering saluran alpha. :)

  • Mungkin ada beberapa kesalahan pembulatan kumulatif jika editor gambar Anda menggunakan 8 bit per kedalaman warna saluran. Cara kualitas terbaik untuk menghasilkan gradien yang dibuat dari beberapa lapisan (dengan blending mode dan opacity saat bermain) adalah membuat pada kedalaman bit yang lebih tinggi, kemudian gulirkan hingga 8 bit per saluran, jika memungkinkan. Photoshop dapat melakukan ini. Jika Anda ingin semua gradien solid dibuat dari satu layer, 8 bit per saluran ok (16 bit hanya berguna ketika ada layer blending yang terlibat).

  • Dithering benar-benar penting. (Lihat poin sebelumnya.)

  • Jangan gunakan Illustrator. Ini 8 bit per saluran dan tidak gentar.

  • Penskalaan gambar akan merusak pekerjaan baik yang telah dilakukan dithering, jadi Anda harus membuat gambar pada ukuran yang benar sejak awal.

  • Sebagian besar laptop memiliki tampilan 6 bit per saluran dengan beberapa trik animasi dithering untuk membuat segalanya tampak lebih baik. Jelas Anda memperjuangkan tampilan dan hasil yang mulus mungkin tidak mungkin, karena tampilan. MacBook Pro baru dengan tampilan Retina adalah pengecualian - ia memiliki layar IPS 24 bit. Sunting: Tampilan laptop telah sedikit meningkat sejak posting ini!

  • Seperti yang disarankan oleh thebodzio, pemrosesan level OS lainnya dapat mengatasi masalah juga.

  • Jika Anda menggunakan mode 16 bit di Photoshop, ujilah dengan mode 8 bit. Ada keadaan tertentu di mana mode 8 bit terlihat lebih baik dan keadaan lain di mana mode 16 bit lebih baik. Aturan dasar: Jika Anda memiliki satu gradien, gunakan 8 bit dengan dithering. Jika Anda memiliki beberapa lapisan dan gradien menggunakan opacity, gunakan mode 16 bit.


Melihat gambar Anda, sepertinya ada beberapa konversi destruktif lain yang terjadi. Apakah Anda menggunakan Save For Web? Apakah Anda telah mengaktifkan Convert to sRGB? Jika demikian, matikan (itu cara termudah untuk merusak kualitas gambar Anda, dan membuat perubahan warna yang merusak pada saat yang sama).


Memberi +1 untuk jawaban Anda yang luar biasa, tetapi saya telah pindah sejak saat itu. Pertama-tama pilihan Anda untuk menghasilkan gradien tanpa alfa tidak baik, karena gambar yang saya butuhkan harus transparan sehingga saya dapat menggunakannya pada halaman web, diletakkan di atas seluruh halaman. Juga setelah membaca jawaban yang diterima, saya telah memutuskan untuk membuang PS dan untuk membuat gradien secara terprogram menggunakan gradien radial CSS ( colorzilla.com/gradient-editor ). Sayangnya CSS tidak membantu sama sekali dan gradien terus sangat terikat.
Pengguna Terdaftar

Anda sebenarnya dapat membangun sendiri saluran alpha di Photoshop, sehingga Anda dapat memiliki alpha dithered (secara manual). CSS adalah solusi yang baik. Jika Anda menggunakan laptop, ketahuilah bahwa Anda mungkin melihat garis melintang di layar Anda, tetapi orang lain mungkin melihat gradien yang halus. Perenderan browser juga akan menjadi faktor.
Marc Edwards

5

Marc Edwards menulis bahwa "Photoshop tidak dan tidak bisa gentar di saluran alpha." Jika demikian, Anda mungkin bisa memalsukannya dengan membuat gradien bingung dari putih menjadi hitam dan kemudian membuat putih transparan. Sayangnya, sudah lama sejak saya menggunakan Photoshop, tetapi ide umumnya akan seperti ini:

  1. Buat gradien 16-bit dari hitam ke putih.
  2. Gentar hingga 8-bit.
  3. Buat layer hitam solid dan tambahkan layer mask ke dalamnya.
  4. Salin gradien ragu-ragu ke dalam layer mask (dan balikkan, jika perlu).
  5. Terapkan layer mask untuk mendapatkan gradien yang renggang dari hitam menjadi transparan.

(Ya, saya tahu ini lebih merupakan komentar daripada jawaban, tetapi terlalu lama untuk masuk ke dalam kotak komentar.)


Ya, Anda pasti dapat menggunakan gradien hitam dan putih pada saluran, lalu muat itu sebagai pilihan, lalu buat layer baru, lalu isi seleksi. Anda akan berakhir dengan gradien dengan alpha ragu-ragu. Juga, saya akan mengedit jawaban saya ... Mode 16bit agak aneh. Kualitas gradien tidak selalu lebih baik.
Marc Edwards

Terima kasih untuk jawabannya. Ternyata masalah gradien sebenarnya bukan karena PS, karena: 1) Gambar terlihat ok di iPad3. 2) Gradien CSS terlihat berpita pada monitor.
Pengguna Terdaftar

Gradien CSS tidak ragu pada sebagian besar browser. Sedih tapi benar.
aaaidan

4

Saya telah menemukan masalah serupa di Illustrator (yang bahkan tidak memiliki opsi "dither" untuk gradien). Kedengarannya agak gila, tapi saya menyiasatinya dengan menerapkan filter "kaca", yang dapat memperkirakan dithering dengan params yang tepat.

Saya menggunakan:

  • Distorsi: 2 (ini tergantung pada ukuran band Anda).
  • Kelancaran: 1
  • Tekstur: Buram (tekstur bawaan yang paling berisik)
  • Penskalaan: 50%

Di Illustrator, ini memperkenalkan bintik putih di tepi objek Anda, yang dapat Anda perbaiki dengan menggunakan kliping topeng.

Hasil? "Bimbang" satu di sebelah kanan. Memang menambah sedikit tekstur yang berisik, tapi saya pikir itu lebih baik daripada band sebagian besar waktu.

Gradien berpita Ragu


3

Perbedaan yang sangat mendasar dalam membuat gradien adalah menggunakan Gradient Layer yang memiliki opsi gentar bawaan (Layer> New Fill Layer> Gradient) dan tetap dapat disesuaikan. Dari sini Anda dapat mengonversi ke lapisan pintar dan menambahkan efek apa pun yang Anda butuhkan untuk meningkatkan lebih lanjut, tetapi itu memberi Anda titik awal yang jauh lebih baik.


Opsi gentar untuk lapisan gradien hanya merusak saluran merah, hijau dan biru, bukan alpha (sayangnya).
Marc Edwards

2
Saya tidak tahu hal itu. Transparansi juga dapat dicapai melalui layer mask. Jadi, bagaimana dengan membuat gradien hitam ke putih dan menggunakannya sebagai layer mask?
KMSTR

2

masukkan deskripsi gambar di sini

Ini adalah tiga sampel yang menunjukkan gentar. Set di bawah ini adalah set di atas dengan level yang disesuaikan untuk menyoroti efek dithering.

masukkan deskripsi gambar di sini

Dari kiri ke kanan, yang pertama terlihat paling banded; tidak ada gentar hadir. Yang kedua adalah gradien yang sama dengan dither; jauh lebih baik. Dan yang ketiga, yang di sebelah kanan, telah gentar, dan saya juga menambahkan lapisan kebisingan, pada dasarnya meningkatkan gentar. Lihat komentar untuk alasan mengapa Anda menambahkan kebisingan tambahan. Lihat "catatan tambahan" untuk cara gentar transparansi / saluran alfa.

Komentar

Saya telah membuat rendering besar gradien dengan variasi warna minimal, dan garis melintang sangat terlihat tanpa dithering, seperti pada sampel pertama. Kemudian saya mengetahui tentang gentar dan itu meningkatkan banyak hal, itu adalah sampel kedua. Tetapi pada rendering besar (kurang terlihat di sini) masih ada beberapa banding. Saya perlu gentar lebih agresif. Jadi saya menyalin layer gradien, merasternya dan menambahkan sedikit (0,1%) noise monokrom seragam. Itu meningkatkan citra skala besar secara signifikan. Itu sampel ketiga. Peningkatan dari noise tambahan (yang merupakan dasarnya pada dasarnya) kurang terlihat dalam skala kecil seperti pada contoh ini di sini, tetapi sangat penting pada rendering besar seperti yang sedang saya kerjakan.

* Saya membuat layer terpisah untuk noise karena dengan begitu saya bisa mengendalikan noise dengan opacity layer baru.

Catatan tambahan

  • Saya hanya membahas gambar yang sebenarnya. Sisi perangkat keras dan driver dapat berpengaruh juga; perangkat lain mungkin menampilkan berbagai hal secara berbeda. Jawaban lain telah dibahas dengan cukup baik.

  • Photoshop tidak gentar saluran alpha. Jika Anda perlu ragu-ragu tentang transparansi, Anda harus menggeser saluran alpha secara manual. Saya akan menggunakan layer mask untuk membuat transparansi, jadi itu hanya masalah dithering layer mask itu. Dan ketika bekerja dengan layer mask jangan lupa untuk ALT+ left clickpada layer mask untuk menampilkannya.


2

Artikel yang sangat berguna tentang topik ini: http://nomorebanding.com/cache

Inilah intinya:

Idenya adalah untuk membuat gradien dalam mode 16-bit, dan kemudian mengubahnya dalam mode 8-bit, mengikuti prosedur untuk dithering manual (menggunakan lapisan dithering kustom). Inilah prosedurnya:

1. Matikan dithering default (Edit> Pengaturan Warna hapus centang Gunakan Dithering), karena kita akan membuat dithering "engine" kita sendiri

2. Buat layer baru (harus paling atas).

3. Isi dengan abu-abu solid 50%.

4. Filter> Kebisingan> Tambah Kebisingan. (Jumlah 25%, Distribusi-Seragam, Monokromatik-diperiksa)

  1. Tekan Ctrl + F untuk mengulangi filter noise pada layer yang sama.

6. Atur layer ke Linear Light.

7.Pada palet Layers, atur Opacity menjadi 1%, Isi opacity menjadi 19%.

Penting: Anda perlu meratakan gambar (termasuk lapisan derau) saat dalam mode 16 bit dan baru kemudian mengonversi ke mode 8 bit untuk ekspor. Jika Anda melakukannya sebaliknya, Anda akan kehilangan semua informasi 16 bit terlebih dahulu, dan kemudian layer noise tidak akan melakukan apa pun dalam 8 bit. Juga, perhatikan pengaturan Gunakan Gentar Photoshop. Anda dapat menggunakan metode layer atau dithering asli, tetapi tidak menggunakan keduanya selama konversi, itu menghasilkan dua kali kebisingan yang Anda butuhkan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.