Apa yang harus saya lakukan mengenai profil warna saat mendesain untuk web?

15

Saya telah membaca artikel ini oleh Doug Avery di mana ia menjelaskan cara menonaktifkan Manajemen Warna di Adobe Photoshop dan artikel tindak lanjut sebagai tanggapan atas keributan para komentator yang membantahnya dan mendukung sRGB, walaupun saya masih tidak yakin dengan teknik apa yang saya gunakan. harus diterapkan dalam alur kerja pribadi saya.
Dari apa yang telah saya kumpulkan saat membaca artikel (tolong perbaiki saya jika saya salah), cara yang benar untuk mengatasinya adalah dengan Photoshop mengelola warna sebagai sRGB dan menggunakan Proof Colours ketika membutuhkan lebih banyak Pratinjau "setia" dari karya Anda.

Saat ini saya memiliki seluruh proyek situs web yang telah dirancang dengan profil warna dinonaktifkan. Saya memulainya dengan cara itu karena beberapa bulan yang lalu saya perhatikan bahwa warna yang diberikan Photoshop, meskipun dilaporkan dengan benar oleh Alat Eyedropper Photoshop sendiri , tidak sesuai ketika diukur dari tangkapan layar dengan apa yang saya lihat di Google Chrome ketika membuka gambar yang diekspor sebagai PNG.
Setelah pencarian cepat saya menemukan posting yang saya kutip sebelumnya dan menerapkan sarannya secara membabi buta (tanpa memperhatikan tindak lanjut atau membaca tentang masalah dengan itu). Sejak itu, saya tidak punya masalah: Saya mengambil tangkapan layar dari pekerjaan saya di Photoshop dan saya mengunggahnya untuk digunakan oleh pengembang. Dia dapat melihat warna yang sama dengan yang saya lihat dan gunakan ketika mengembangkan desain, dan saya tidak harus melompat melewati lingkaran untuk melihat apa yang sebenarnya saya lakukan.

Pertanyaan saya:

  • Apakah benar-benar perlu untuk menggunakan sRGB dalam desain web (saya mengerti implikasi tidak menggunakannya dalam sesuatu seperti fotografi atau cetak) ketika itu hanya menambah lebih banyak pekerjaan dengan memaksa Anda untuk menggunakan Warna Bukti ? (Begitulah cara saya melihatnya, perbaiki saya jika saya salah)

  • Karena menyimpan dengan Profil ICC akan menyebabkan beberapa browser menerapkan profil dengan benar sementara yang lain mengabaikannya, artikel itu juga mengatakan bahwa itu mungkin ide terbaik untuk hanya mendesain dengan sRGB dan kemudian menyimpan tanpa Profil ICC . Bukankah itu mengalahkan tujuan menggunakan profil warna di tempat pertama? Atau apakah saya salah menafsirkan apa yang dikatakan artikel itu?

Gabriele Cirulli
sumber
1
Saya kira jawaban Marc Edwards tidak benar. Jika Anda mengatur profil warna Anda menjadi "monitor," warna Anda akan terlihat bagus hanya untuk satu orang: Anda! sRGB memungkinkan lebih banyak orang untuk melihat secara lebih konsisten. Baca tautan ini. Ini menawarkan informasi terbaik yang saya temukan mengenai masalah ini. gballard.net/psd/saveforwebshift.html

Jawaban:

5

Pendapat saya (terkadang kontroversial): Orang yang merekomendasikan penggunaan sRGB untuk antarmuka pengguna dan desain web gila. Inilah sebabnya.

Agar manajemen warna berfungsi untuk desain layar, ada tiga hal penting yang harus terjadi.

  1. Gambar harus dibuat menggunakan alur kerja yang benar.
  2. Gambar harus disimpan dengan profil warna ICC yang benar.
  3. Gambar harus ditampilkan dengan benar, mengikuti profil gambar dan lingkungannya ditampilkan (browser dan OS dll).

Jika Anda tidak memiliki ketiganya, manajemen warna tidak berfungsi sama sekali. Memiliki satu atau dua hal itu berarti seluruh rantai rusak.

Dan inilah intinya: Semua PNG dan GIF yang disimpan dari Photoshop tidak dapat memiliki profil ICC, jadi nomor 2 tidak mungkin dalam kebanyakan kasus (JPEG dapat memiliki profil sekalipun). Dan banyak browser tidak berperilaku benar, jadi nomor 3 juga keluar dalam banyak kasus.

Jika Anda menampilkan foto di web, opsi terbaik Anda adalah secara destruktif mengkonversi ke sRGB dan menyematkan profil ICC sRGB dan hanya menggunakan JPEG. Jika Anda sedang membangun elemen antarmuka pengguna web, maka pilihan terbaik Anda adalah mengatur Photoshop untuk menargetkan "perangkat RGB" (warna asli tanpa profil atau manajemen warna).

Saran Doug Avery bagus. Bagian penting dari jabatannya adalah kisi yang ia gunakan untuk membandingkan semua hasil. Apa yang dia cari adalah mencocokkan HTML, CSS, dan warna dalam gambar, yang merupakan hal yang tepat untuk dibidik. Itu hanya mungkin jika nilai warna dalam gambar dan nilai warna yang digunakan dalam HTML / CSS diperlakukan dengan cara yang sama.

Saya telah menulis lebih banyak tentang topik di sini:

Manajemen warna dan desain UI

Dan berpendapat ad nausium dengan seorang insinyur Adobe di sini:

Simpan Untuk Web, Konversi ke sRGB harus dinonaktifkan secara default untuk PNG dan GIF

Apakah benar-benar perlu untuk menggunakan sRGB dalam desain web (saya mengerti implikasi tidak menggunakannya dalam sesuatu seperti fotografi atau cetak) ketika itu hanya menambah lebih banyak pekerjaan dengan memaksa Anda untuk menggunakan Warna Bukti? (Begitulah cara saya melihatnya, perbaiki saya jika saya salah)

Tidak, itu tidak perlu. Bahkan, menganggap sRGB membantu menunjukkan kurangnya pemahaman tentang topik tersebut. Ada situasi di mana Anda harus menggunakan sRGB, tetapi itu termasuk bagian dari alur kerja foto yang lengkap: Anda harus menggunakan gambar JPEG, menggunakan sRGB dan menyematkan profil sRGB. Anda tidak dapat melakukan bagian dari itu tanpa melakukan semua dan mengharapkan manfaat dari manajemen warna.

Jika Anda menyimpan GIF atau PNG dari Photoshop, maka Anda tidak akan pernah memiliki profil ICC di gambar Anda, jadi Anda perlu memastikan alur kerja Anda diatur untuk itu dan bagaimana browser akan memperlakukan gambar.

Karena menyimpan dengan Profil ICC akan menyebabkan beberapa browser menerapkan profil dengan benar sementara yang lain mengabaikannya, artikel itu juga mengatakan bahwa itu mungkin ide terbaik untuk hanya mendesain dengan sRGB dan kemudian menyimpan tanpa Profil ICC. Bukankah itu mengalahkan tujuan menggunakan profil warna di tempat pertama? Atau apakah saya salah menafsirkan apa yang dikatakan artikel itu?

Ingatlah bahwa:

  • GIF tidak dapat memiliki profil ICC.
  • PNG yang disimpan oleh Photoshop tidak dapat memiliki profil ICC.
  • PNG dapat memiliki profil, tetapi jarang mereka disimpan dengan mereka.
  • JPEG dapat memiliki profil.
  • Perenderan peramban gambar dengan profil berbeda antara peramban.
  • Warna dalam HTML dan CSS sering dianggap sebagai perangkat RGB atau sRGB, dan Anda tidak memiliki kendali atas itu.
Marc Edwards
sumber
4
Saya memiliki 6 komputer di rumah dan dua monitor terkalibrasi di tempat kerja. Satu monitor yang dikalibrasi tidak memiliki gamut yang layak sehingga bahkan dengan kalibrasi, itu tidak dapat dipercaya. Semua enam di rumah adalah stok dari rak dan mereka semua menampilkan warna berbeda. Ini adalah pelajaran dalam penggunaan dunia nyata. Inilah Cara Saya Belajar untuk Berhenti Khawatir dan Menyukainya.
horatio
3
Ya. Tujuannya adalah konsistensi di dalam halaman untuk elemen UI, daripada konsistensi di berbagai tampilan (yang tidak mungkin dalam sebagian besar keadaan).
Marc Edwards
3

Profil pasti diperlukan jika mengembangkan / mendesain di Mac.

Jika saya bekerja pada gambar saya di Photoshop sebagai Adobe RGB, atau ProPhoto RGB, (2 profil menggunakan kamera yang baik), maka warna-warna bergeser BANYAK ketika PSD disimpan untuk web dan dilihat pada PC Windows.

Untuk pengguna Mac, menggunakan profil sRGB dalam file KERJA diperlukan untuk mempertahankan warna di seluruh platform.

File yang terakhir dipublikasikan (save for web) tidak memiliki profil, tetapi menggunakan sRGB selama pembuatannya diperlukan di Mac - setidaknya ada di tangan kami jika Anda ingin warnanya terlihat serupa di Mac dan Windows.

Bret Perry
sumber
2

Saya ingin mengkonfirmasi pernyataan paragraf ini:

Dari apa yang telah saya kumpulkan saat membaca artikel (tolong perbaiki saya jika saya salah), cara yang benar untuk mengatasinya adalah dengan menggunakan Photoshop mengelola warna sebagai sRGB dan menggunakan Proof Colours ketika membutuhkan lebih banyak Pratinjau "setia" dari karya Anda.

dan

Karena menyimpan dengan Profil ICC akan menyebabkan beberapa browser menerapkan profil dengan benar sementara yang lain mengabaikannya, artikel itu juga mengatakan bahwa itu mungkin ide terbaik untuk hanya mendesain dengan sRGB dan kemudian menyimpan tanpa Profil ICC. Bukankah itu mengalahkan tujuan menggunakan profil warna di tempat pertama? Atau apakah saya salah menafsirkan apa yang dikatakan artikel itu?

Saya membedakan antara lingkungan produksi (dikenal dan dikendalikan sendiri) dan perangkat output, dan saya mengatur alur kerja sesuai dengan apa yang terbaik untuk foto. Biarkan saya jelaskan:

Ketika saya membuka foto dari kamera digital saya, saya memiliki pilihan untuk membukanya dengan profil sRGB yang terkandung. Jika saya membukanya tanpa profil saya akan kehilangan informasi penting (warna terlihat berbeda). Jadi saya juga menyimpan profil untuk diproses lebih lanjut. Dengan profil yang terdapat Photoshop dapat mengadaptasi warna ke profil monitor saya, ke profil yang saya akses untuk warna bukti, ke profil printer saya dan ke semua profil yang rekan kerja saya bekerja dengan.

Jika Anda menggunakan foto dalam file desain Anda, maka Anda harus membuat kanvas kosong dengan profil terlampir. Dan jika Anda menyerahkan file desain dan bukan gambar final ke pengembang, ada baiknya masih memasang profil ...

Saya menyimpan file terakhir tanpa profil dan mereka terlihat seperti yang diharapkan. Kenapa begitu? Saya pikir karena gambar tanpa profil ditafsirkan seolah-olah mereka memiliki profil sRGB yang melekat padanya (mungkin seseorang tahu referensi untuk ini).

Dan saya juga akan menebak bahwa ketika Anda mengambil tangkapan layar, sistem Anda mengubah warna dari profil monitor Anda menjadi sRGB (atau Anda memiliki monitor yang sangat bagus dekat dengan ruang warna sRGB).

John
sumber
1

Jawaban untuk pertanyaan pertama Anda: Jika Anda tidak menggunakan sRGB dalam alur kerja, semua gambar yang digunakan dari ruang warna lain pada akhirnya tidak akan memiliki warna yang akurat atau bahkan terpotong di web. Sebagian besar gambar tanpa profil yang Anda impor atau gunakan akan baik-baik saja karena mereka sudah berada di ruang warna yang tepat (misalnya ruang standar di kamera).

Pertanyaan 2, ya tujuannya dikalahkan karena penggunaan profil warna belum diterapkan di web sedemikian rupa sehingga Anda dapat menggunakannya. Browser berharap 'sRGB, jadi tidak perlu melampirkannya, ini hanya meningkatkan filesize. Karena banyak browser tidak memahami profil, itu bukan ide yang baik untuk menawarkan gambar dengan profil, kata Adobe rgb 1998, karena warna akan dipotong.

CA Vuyk
sumber
"Perkiraan browser 'sRGB" - semacam. Ada perilaku beragam di browser. Sebagian besar membuat gambar yang tidak ditandai sebagai perangkat RGB (tidak ada konversi). Safari 6 pada OS X mengasumsikan (salah) bahwa gambar yang tidak ditandai adalah sRGB dan dikonversi.
Marc Edwards
0

Pembaruan untuk Adobe Photoshop CC (2017):

  1. Biarkan ruang kerja Anda ke default (Tujuan Umum Amerika Utara 2)

  2. Jangan ubah apa pun

Scott
sumber