Tôi nên làm gì liên quan đến hồ sơ màu khi thiết kế cho web?


15

Tôi đã đọc bài viết này của Doug Avery, nơi anh ấy giải thích cách vô hiệu hóa Quản lý màu trong Adobe Photoshop và bài viết tiếp theo để đáp lại sự phẫn nộ của những người bình luận tranh luận về nó và hỗ trợ sRGB, mặc dù tôi vẫn không tin về kỹ thuật nào của tôi nên áp dụng trong quy trình làm việc cá nhân của tôi.
Từ những gì tôi đã thu thập được khi đọc bài viết (vui lòng sửa lại cho tôi nếu tôi sai), cách chính xác để giải quyết vấn đề này là để Photoshop quản lý các màu như sRGB và sử dụng Proof Colors khi cần thêm Xem trước "trung thành" công việc của bạn.

Hiện tại tôi có toàn bộ dự án trang web đã được thiết kế với các cấu hình màu bị tắt. Tôi đã bắt đầu theo cách đó bởi vì nhiều tháng trước tôi đã nhận thấy rằng màu sắc mà Photoshop thể hiện, mặc dù được báo cáo chính xác bởi Công cụ Eyedropper của Photoshop , không tương ứng khi được đo từ ảnh chụp màn hình với những gì tôi thấy trong Google Chrome khi mở hình ảnh được xuất dưới dạng PNG.
Sau khi tìm kiếm nhanh, tôi đã xem qua bài đăng mà tôi đã trích dẫn trước đó và áp dụng các đề xuất của nó một cách mù quáng (thậm chí không nhận thấy việc theo dõi cũng như không đọc về các vấn đề với nó). Kể từ đó, tôi không gặp vấn đề gì: Tôi chụp ảnh màn hình công việc của mình bằng Photoshop và tôi tải chúng lên cho nhà phát triển sử dụng. Anh ấy được nhìn thấy những màu giống như tôi thấy và sử dụng khi phát triển thiết kế, và tôi không phải nhảy qua các vòng để xem những gì tôi đang làm.

Những câu hỏi của tôi:

  • Có thực sự cần thiết phải sử dụng sRGB trong thiết kế web (tôi hiểu ý nghĩa của việc không sử dụng nó trong một cái gì đó như chụp ảnh hoặc in) khi nó chỉ thêm nhiều công việc hơn bằng cách buộc bạn sử dụng Proof Colors ? (Đó chỉ là cách tôi nhìn thấy nó, xin vui lòng sửa cho tôi nếu tôi sai)

  • Vì việc lưu với Hồ sơ ICC sẽ dẫn đến một số trình duyệt áp dụng chính xác hồ sơ trong khi những người khác bỏ qua nó, bài viết cũng nói rằng có lẽ đó là ý tưởng tốt nhất để chỉ thiết kế với sRGB và sau đó lưu mà không cần Hồ sơ ICC . Không phải điều đó đánh bại mục đích sử dụng cấu hình màu ở vị trí đầu tiên sao? Hay tôi đang hiểu sai những gì bài báo nói?


1
Tôi không nghĩ câu trả lời của Marc Edwards là đúng. Nếu bạn đặt cấu hình màu của mình thành "màn hình", màu của bạn sẽ trông tuyệt vời chỉ với một người: bạn! sRGB cho phép nhiều người xem ổn định hơn. Đọc liên kết này. Nó cung cấp thông tin tốt nhất mà tôi đã tìm thấy về vấn đề này. gballard.net/sheet/saveforwebshift.html

Câu trả lời:


5

Ý kiến ​​của tôi (đôi khi gây tranh cãi): Những người khuyên dùng sRGB cho giao diện người dùng và thiết kế web là điên rồ. Đây là lý do tại sao.

Để quản lý màu hoạt động cho thiết kế màn hình, có ba điều quan trọng phải xảy ra.

  1. Hình ảnh phải được tạo bằng quy trình làm việc chính xác.
  2. Hình ảnh phải được lưu với cấu hình màu ICC chính xác.
  3. Hình ảnh phải được hiển thị chính xác, tuân thủ cấu hình của hình ảnh và môi trường mà nó được hiển thị trong (trình duyệt và HĐH, v.v.).

Nếu bạn không có cả ba, quản lý màu hoàn toàn không hoạt động. Có một hoặc hai trong số những điều đó có nghĩa là toàn bộ chuỗi bị hỏng.

Và đây là vấn đề: Tất cả các PNG và GIF được lưu từ Photoshop không thể có hồ sơ ICC, do đó, số 2 không thể có trong hầu hết các trường hợp (mặc dù JPEG có thể có cấu hình). Và rất nhiều trình duyệt không hoạt động chính xác, vì vậy số 3 cũng xuất hiện trong rất nhiều trường hợp.

Nếu bạn đang hiển thị ảnh trên web, tùy chọn tốt nhất của bạn là chuyển đổi triệt để sang sRGB nhúng hồ sơ ICC sRGB chỉ sử dụng JPEG. Nếu bạn đang xây dựng các yếu tố giao diện người dùng web, thì tùy chọn tốt nhất của bạn là thiết lập Photoshop để nhắm mục tiêu "thiết bị RGB" (màu gốc không có quản lý cấu hình hoặc màu).

Lời khuyên của Doug Avery là tốt. Phần quan trọng của bài viết của anh ấy là lưới anh ấy sử dụng để so sánh tất cả các kết quả. Những gì anh ấy theo sau là phù hợp với HTML, CSS và màu sắc trong hình ảnh, đó là điều phù hợp để hướng tới. Điều đó chỉ có thể nếu các giá trị màu trong hình ảnh và giá trị màu được sử dụng trong HTML / CSS được xử lý theo cùng một cách.

Tôi đã viết nhiều hơn về chủ đề ở đây:

Quản lý màu sắc và thiết kế giao diện người dùng

Và tranh luận về quảng cáo với một kỹ sư Adobe ở đây:

Lưu cho Web, Chuyển đổi sang sRGB theo mặc định sẽ bị tắt cho PNG và GIF

Có thực sự cần thiết phải sử dụng sRGB trong thiết kế web (tôi hiểu ý nghĩa của việc không sử dụng nó trong một cái gì đó như chụp ảnh hoặc in) khi nó chỉ thêm nhiều công việc hơn bằng cách buộc bạn sử dụng Proof Colors? (Đó chỉ là cách tôi nhìn thấy nó, vui lòng sửa lại cho tôi nếu tôi sai)

Không, nó không cần thiết. Trong thực tế, giả sử sRGB đang giúp thể hiện sự thiếu hiểu biết về chủ đề này. Có những tình huống bạn chắc chắn nên sử dụng sRGB, nhưng nó là một phần của quy trình xử lý ảnh hoàn chỉnh: Bạn cần sử dụng hình ảnh JPEG, sử dụng sRGB và nhúng hồ sơ sRGB. Bạn không thể làm một phần trong đó mà không làm tất cả và mong đợi bất kỳ lợi ích nào từ quản lý màu sắc.

Nếu bạn đang lưu GIF hoặc PNG từ Photoshop, thì bạn sẽ không bao giờ có hồ sơ ICC trong hình ảnh của mình, vì vậy bạn cần đảm bảo quy trình làm việc của mình được thiết lập cho điều đó và cách trình duyệt sẽ xử lý hình ảnh.

Vì việc lưu với Hồ sơ ICC sẽ dẫn đến một số trình duyệt áp dụng chính xác hồ sơ trong khi những người khác bỏ qua nó, bài viết cũng nói rằng có lẽ đó là ý tưởng tốt nhất để chỉ thiết kế với sRGB và sau đó lưu mà không cần Hồ sơ ICC. Không phải điều đó đánh bại mục đích sử dụng cấu hình màu ở vị trí đầu tiên sao? Hay tôi đang hiểu sai những gì bài báo nói?

Hãy ghi nhớ rằng:

  • GIF không thể có hồ sơ ICC.
  • PNG được lưu bởi Photoshop không thể có hồ sơ ICC.
  • PNG có thể có hồ sơ, nhưng hiếm khi chúng được lưu cùng với chúng.
  • JPEG có thể có hồ sơ.
  • Trình duyệt hiển thị hình ảnh với hồ sơ khác nhau giữa các trình duyệt.
  • Màu sắc trong HTML và CSS thường được coi là RGB hoặc sRGB của thiết bị và bạn không kiểm soát được điều đó.

4
Tôi có 6 máy tính ở nhà và hai màn hình hiệu chỉnh tại nơi làm việc. Một màn hình được hiệu chỉnh chỉ không có một giao diện tốt nên ngay cả khi hiệu chuẩn, nó cũng không đáng tin cậy. Tất cả sáu ở nhà đều có sẵn trong kệ và tất cả chúng hiển thị màu sắc khác nhau. Đây là một bài học trong việc sử dụng thế giới thực. Đây là cách tôi học cách ngừng lo lắng và yêu nó.
horatio

3
Vâng. Mục tiêu là tính nhất quán trong trang cho các thành phần UI, thay vì tính nhất quán trên các màn hình khác nhau (điều này là không thể trong hầu hết các trường hợp).
Marc Edwards

3

Hồ sơ chắc chắn là cần thiết nếu phát triển / thiết kế trên Mac.

Nếu tôi làm việc với các hình ảnh của mình trong Photoshop như Adobe RGB hoặc ProPhoto RGB, (2 cấu hình mà một máy ảnh tốt sử dụng), thì màu sắc sẽ thay đổi RẤT NHIỀU khi PSD được lưu cho web và được xem trên PC Windows.

Đối với người dùng Mac, sử dụng cấu hình sRGB trong các tệp LÀM VIỆC là cần thiết để duy trì màu sắc trên các nền tảng.

Tệp được xuất bản cuối cùng (lưu cho web) không có hồ sơ, nhưng sử dụng sRGB trong quá trình tạo nó là cần thiết trên Mac - ít nhất là trên chúng tôi nếu bạn muốn màu sắc trông giống với Mac và Windows.


2

Tôi muốn xác nhận các tuyên bố của các đoạn này:

Từ những gì tôi đã thu thập được khi đọc bài viết (vui lòng sửa lại cho tôi nếu tôi sai), cách chính xác để giải quyết vấn đề này là để Photoshop quản lý các màu như sRGB và sử dụng Proof Colors khi cần thêm "trung thành" xem trước công việc của bạn.

Vì việc lưu với Hồ sơ ICC sẽ dẫn đến một số trình duyệt áp dụng chính xác hồ sơ trong khi những người khác bỏ qua nó, bài viết cũng nói rằng có lẽ đó là ý tưởng tốt nhất để chỉ thiết kế với sRGB và sau đó lưu mà không cần Hồ sơ ICC. Không phải điều đó đánh bại mục đích sử dụng cấu hình màu ở vị trí đầu tiên sao? Hay tôi đang hiểu sai những gì bài báo nói?

Tôi phân biệt giữa môi trường sản xuất (đã biết và tự kiểm soát) và thiết bị đầu ra và tôi sắp xếp quy trình làm việc theo những gì tốt nhất cho ảnh. Hãy để tôi giải thích:

Khi tôi mở ảnh từ máy ảnh kỹ thuật số của mình, tôi có tùy chọn mở chúng với hồ sơ sRGB có trong đó. Nếu tôi mở chúng mà không có hồ sơ, tôi sẽ mất thông tin quan trọng (màu sắc trông khác). Vì vậy, tôi cũng giữ hồ sơ để xử lý thêm. Với cấu hình chứa, Photoshop có thể điều chỉnh màu cho cấu hình màn hình của tôi, với các cấu hình tôi truy cập để lấy màu chứng minh, cho cấu hình máy in của tôi và cho tất cả các cấu hình mà đồng nghiệp của tôi đang làm việc.

Nếu bạn sử dụng ảnh trong các tệp thiết kế của mình, thì bạn nên tạo khung vẽ trống có hồ sơ đính kèm. Và nếu bạn bàn giao tệp thiết kế và không phải là đồ họa cuối cùng cho nhà phát triển thì vẫn tốt nếu vẫn có hồ sơ đính kèm ...

Tôi lưu các tập tin cuối cùng mà không có hồ sơ và chúng trông như mong đợi. Tại sao lại như vậy? Tôi nghĩ bởi vì đồ họa không có hồ sơ được diễn giải như thể chúng có hồ sơ sRGB được đính kèm với chúng (có thể ai đó biết một tài liệu tham khảo cho việc này).

Và tôi cũng đoán rằng khi bạn chụp ảnh màn hình, hệ thống của bạn sẽ chuyển đổi màu từ cấu hình màn hình của bạn thành sRGB (hoặc bạn có một màn hình rất tốt gần với không gian màu sRGB).


1

Câu trả lời cho câu hỏi đầu tiên của bạn: Nếu bạn không sử dụng sRGB trong quy trình làm việc, tất cả các hình ảnh được sử dụng từ các không gian màu khác cuối cùng sẽ không có màu chính xác hoặc thậm chí bị cắt trên web. Hầu hết các hình ảnh không có hồ sơ bạn nhập hoặc sử dụng sẽ hoạt động tốt vì chúng đã ở trong không gian màu phù hợp (ví dụ: không gian tiêu chuẩn trong máy ảnh).

Câu hỏi thứ 2, đúng là mục đích bị đánh bại vì việc sử dụng các cấu hình màu chưa được triển khai trên web theo cách bạn có thể sử dụng chúng. Trình duyệt 'mong đợi' sRGB, vì vậy không cần phải đính kèm chúng, điều này chỉ làm tăng kích thước tệp. Vì nhiều trình duyệt không hiểu hồ sơ, nên không nên cung cấp hình ảnh có hồ sơ, Adobe rgb 1998, vì màu sắc sẽ bị cắt.


"Trình duyệt 'mong đợi' sRGB" - loại. Có nhiều hành vi hỗn hợp trên các trình duyệt. Hầu hết kết xuất hình ảnh không được đánh dấu là RGB thiết bị (không chuyển đổi). Safari 6 trên OS X giả định (sai) rằng hình ảnh không được đánh dấu là sRGB và chuyển đổi.
Marc Edwards

0

Cập nhật cho Adobe Photoshop CC (2017):

  1. Để không gian làm việc của bạn về mặc định (Mục đích chung 2 của Bắc Mỹ)

  2. Đừng thay đổi bất cứ điều gì khác

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.