Quản lý Màu sắc trên Photoshop

Hầu hết designer đều cố gắng để tìm điểm chung về màu sắc giữa  HTML, CSS or lập trình và bảng thiết kế trên photoshop. Bài này sẽ giải quyết những vấn đề đó.

Quản lý màu sắc giúp lựa chọn màu sắc phù hợp qua các thiết bị

Trong thế giới in ấn, quản lý màu sắc thường liên quan đến việc đo đạc toàn bộ quy trình làm việc của bạn, từ máy quét hoặc máy ảnh kỹ thuật số để hiển thị máy tính để chứng minh khó khăn với sản lượng báo chí cuối cùng. Điều này có thể là một trật tự cao, đặc biệt là khi các thiết bị sử dụng không gian màu khác nhau phù hợp với các thiết bị RGB và CMYK là điều rất khó.

Trong những hoàn cảnh khác nhau, quản lý màu sắc cung cấp nhiều lợi ích và rất khuyến khích.

 

Khi xây dựng web và các giao diện ứng dụng, tình hình là có một chút khác nhau. Kết quả cuối cùng là các thiết bị tương tự mà bạn đang sử dụng để tạo ra các tác phẩm nghệ thuật – một màn hình máy tính. (Xin vui lòng bỏ qua sự khác biệt trong gamma giữa Windows, OS X trước 10.6 và iPhone cho bây giờ, như được diễn tả sau này.)

Có một nắm bắt. Mặc dù bạn đang tạo ra giao diện web của bạn hoặc ứng dụng trên cùng một thiết bị sản phẩm cuối cùng sẽ được hiển thị trên, có nhiều nguồn khác nhau của màu sắc: hình ảnh (thường PNG, GIF và JPEG), phong cách đánh dấu (CSS) và mã (JavaScript, HTML Mục tiêu-C vv).

Mục đích cuối cùng

Khi thiết kế các trang web hoặc các giao diện ứng dụng, chúng tôi muốn hoàn toàn phù hợp với màu sắc hiển thị trên màn hình trong Photoshop và lưu lại trong các tập tin với những gì đang hiển thị trong các ứng dụng khác, bao gồm cả Firefox, Safari và mô phỏng các IOS.Chúng tôi muốn màu sắc không chỉ trông giống nhau, nhưng giá trị thực tế được lưu vào các tập tin để phù hợp với màu sắc chúng ta định nghĩa trong Photoshop hoàn hảo.

Màu sắc có thể thay đổi hoặc xuất hiện để thay đổi trong bất kỳ cách nào, dưới bất kỳ hoàn cảnh nào.

 

colorsmatch Quản lý Màu sắc trên Photoshop

 

Tại sao đây là điều khó khăn?

Photoshop áp dụng quản lý màu sắc hình ảnh hiển thị trong cửa sổ của nó và cũng để các tập tin nó tiết kiệm. Đây là một điều xấu nếu bạn đang làm việc riêng với các hình ảnh RGB cho web hoặc giao diện người dùng trên màn hình. Với Photoshop mặc định cài đặt, # FF0000 có thể hiển thị như FB0018 và BB95FF # BA98FD. Các giá trị chính xác sẽ phụ thuộc vào màn hình và cấu hình bạn đang sử dụng, nhưng sự khác biệt chắc chắn tồn tại với các thiết lập mặc định của Photoshop.

Làm thế nào để quản lý màu sắc của Photoshop?

digitalcolormeter Quản lý Màu sắc trên PhotoshopQuản lý màu sắc của OS X được áp dụng cho toàn bộ màn hình hiển thị ở cuối của chuỗi chế biến, sau khi bộ đệm chính trong ram video. Điều này có nghĩa rằng mặc dù quản lý màu sắc đang được áp dụng, phần mềm tiện ích mà màu sắc biện pháp trên màn hình (giống như / Utilities / DigitalColor Meter) vẫn sẽ báo cáo các giá trị tương tự như bạn đã lưu trong tập tin hoặc nhập vào mã của bạn. Tôi tin rằng việc quản lý màu sắc trong Windows Vista và Windows 7 (Windows Hệ màu) hoạt động trong một thời trang tương tự.

Quản lý màu sắc của Photoshop được áp dụng chỉ phần hình ảnh của các cửa sổ của nó và các tập tin nó tiết kiệm. Hiệu chỉnh màu sắc sẽ xảy ra như Photoshop vẽ hình ảnh trên màn hình, do đó, phần mềm tiện ích mà màu sắc biện pháp trên màn hình thường xuyên báo cáo màu sắc khác nhau cho những người mà bạn chỉ định. Nó có giá trị lưu ý rằng việc quản lý màu sắc của OS X được áp dụng trên đầu trang của Photoshop.

Giải pháp tốt nhất tôi đã tìm thấy để vô hiệu hóa quản lý màu sắc của Photoshop cho RGB tài liệu càng nhiều càng tốt. Làm như vậy lực lượng RGB màu sắc trên màn hình và lưu vào file để phù hợp với giá trị màu sắc thực tế. Nếu bạn cần màn hình của bạn để được kiểm định một cách cụ thể, sau đó bạn sẽ được phục vụ tốt nhất bằng cách thay đổi nó ở cấp độ hệ điều hành cho các trang web và công việc thiết kế ứng dụng.

Vô hiệu hóa quản lý màu sắc được sử dụng khá dễ dàng trong Photoshop CS2 và tất cả các phiên bản trước, nhưng bây giờ đòi hỏi kỹ năng nhiều hơn một chút.

Vô hiệu hóa quản lý màu sắc Photoshop của RGB

Những hướng dẫn này là dành cho Photoshop CS4 & CS5 trên máy Mac và Windows. Thiết lập CS3 là rất giống nhau.

Bước 1 – Chọn Edit > Color Setting và thiết lập không gian làm việc RGB Màn hình RGB như sau:

 

editcoloursettings Quản lý Màu sắc trên Photoshop

 

Bước 2 – Nếu bạn đang sử dụng Photoshop CS6, nhấn vào Options và tắt màu sắc văn bản Blend Sử dụng Gamma, bởi vì nó thay đổi như thế nào là ra văn bản không đục. Nó đã được tắt, nhưng nếu nó không phải là, tắt Blend màu RGB sử dụng Gamma cũng

 

editcoloursettings advanced Quản lý Màu sắc trên Photoshop

 

Bước 3 – Mở một tài liệu và chọn Edit > Assign Profile, chọn “Don’t Color Manage this document”.

assignprofile Quản lý Màu sắc trên Photoshop

Bước 4 — Chắn chắn View > Proof Colors is turned off.

Bước 5 — Khi lưu các tập tin với Save For Web, đảm bảo * Chuyển đổi sang sRGB được tắt. Nếu bạn đang tiết kiệm một tập tin JPEG, sau đó cũng tắt hồ sơ màu Embed (có một số trường hợp, nơi bạn có thể muốn điều này cho hình ảnh, nhưng có thể là bạn sẽ muốn nó cho các phần tử giao diện và các biểu tượng).

Sự khác biệt giữa  “Assign Profile” and “Convert to Profile”

Mỗi tài liệu Photoshop có chứa một cấu hình màu sắc riêng biệt để các dữ liệu màu sắc thực tế được lưu trữ cho mỗi điểm ảnh. “Chỉ định hồ sơ” chỉ đơn giản là thay đổi hồ sơ cá nhân trong tài liệu, mà không ảnh hưởng đến bất kỳ dữ liệu màu sắc. Đó là một hành động không phá hủy – bạn có thể gán một cấu hình màu sắc mới cho tài liệu của bạn thường xuyên như bạn muốn mà không sợ làm thiệt hại. Phân công một hồ sơ mới có thể thay đổi cách thức tài liệu của bạn xuất hiện trên màn hình, nhưng các dữ liệu chứa trong tập tin sẽ không thay đổi gì.

“Convert to Profile” thì khá khác biệt. Nó không chỉ giao cho một cấu hình màu sắc cho một tài liệu, nhưng nó sẽ cố gắng để giữ hình ảnh của bạn trên màn hình. Nó làm điều này bằng cách xử lý các dữ liệu màu sắc trong các tập tin cho mỗi điểm ảnh. Chuyển đổi một hồ sơ mới có nhiều khả năng để duy trì tài liệu của bạn xuất hiện trên màn hình, nhưng các dữ liệu chứa trong tập tin sẽ được thay đổi vĩnh viễn. Sử dụng cẩn thận.

Nếu bạn đang sao chép các lớp từ một tài liệu Photoshop khác, đó là một ý tưởng tốt để đảm bảo cả hai tài liệu đã được chỉ định cấu hình màu sắc.

Illustrator giống Photoshop

Nếu bạn muốn hình ảnh được lưu từ Illustrator, nhập khẩu từ Illustrator, bạn cần làm theo các bước dưới đây. Những hướng dẫn này là dành cho Illustrator CS4 & CS5 trên máy Mac và Windows. Thiết lập Illustrator CS3 là rất giống nhau.

Bước 1 — Choose Edit > Color Settings và cài đặt RGB to Monitor RGB.

 

editcoloursettings ill Quản lý Màu sắc trên Photoshop

Bước 2 — Open a document and choose Edit > Assign Profile, then set it to Don’t Color Manage This Document. This must be done for every single document you work on.

assignprofile ill Quản lý Màu sắc trên Photoshop

Bước 3— Ensure View > Proof Colors is turned off.

Bước 4 — When saving files with Save For Web & Devices, ensure Convert to sRGB is turned off. If you’re saving a JPEG file, then also turn off Embed Color Profile (there are some cases where you might want this on for photos, but chances are you’ll want it off for interface elements and icons).

saveforweb ill Quản lý Màu sắc trên Photoshop

Gamma differences

Windows đã sử dụng một gamma là 2,2 kể từ khi được giới thiệu của nó. OS X đã sử dụng một gamma là 1,8 cho tất cả các phiên bản trước Snow Leopard. Snow Leopard, Lion và Mountain Lion tất cả đều sử dụng một gamma là 2,2. Điều này có nghĩa là gì? Trước khi Snow Leopard, các trang web trông tối hơn trên Windows. Rất may, cả hai hệ thống hoạt động được đồng bộ, do đó, trang web cùng một thiết kế trông rất giống nhau trên một máy Mac và PC được sử dụng cùng một màn hình.

Thông tin về gamma của iOS là một ít khó khăn để đi qua, nhưng tôi tin rằng nó là 2,2. Đây là một trong những lý do tại sao nó cũng là một ý tưởng tốt để kiểm tra giao diện của bạn trên một chiếc iPhone hoặc iPad.

Kiểm thử thiết bị

Có một cơ hội tốt mà iPod, iPhone của bạn hoặc màn hình của iPad sẽ trông khác nhau để hiển thị của máy tính của bạn. Loại màn hình, ấm áp của màu sắc và thậm chí cả mô hình phân điểm ảnh khác nhau rất nhiều, vì vậy bạn có thể sẽ muốn tinh chỉnh các thiết kế sau khi nhìn thấy tất cả mọi thứ tại chỗ. Một số loại màn hình hiển thị, chẳng hạn như AMOLED, có thể xuất hiện bão hòa và với độ tương phản cao hơn nhiều so với màn hình LCD máy tính điển hình. Không đề cập đến, nhìn thấy thiết kế của bạn trên điện thoại là thú vị.

Có nhiều cách để có được mockup cuối cùng của bạn vào một thiết bị di động. Chúng tôi không hài lòng với các tùy chọn có sẵn, vì vậy chúng tôi xây dựng công cụ riêng của mình cho công việc. Skala Preview cho phép bạn xem xem trước thiết kế thời gian thực trên thiết bị của bạn, khi bạn chỉnh sửa trong Photoshop. Xem trước thiết kế của bạn tại chỗ cho phép bạn kiểm tra kích thước máy, kích cỡ chữ, màu sắc, độ tương phản và thái, tất cả tại một thời gian mà thay đổi này có thể dễ dàng thực hiện trong quá trình thiết kế. Nó đóng cửa vòng lặp, có nghĩa là bạn có thể lặp nhanh hơn để thiết kế cuối cùng tốt hơn.

Công cụ tiện dụng cho người dùng Mac

Trên máy Mac, màu sắc di chuyển giữa Photoshop và mã có thể được thực hiện dễ dàng hơn với Developer PickerHex Color Picker and Colors (all free).

Kết luận

Bây giờ bạn sẽ có thể di chuyển hình ảnh bitmap và vector giữa Photoshop và Illustrator mà không có bất kỳ thay đổi màu sắc ở tất cả, bằng cách sử dụng bất kỳ phương pháp. Bạn cũng sẽ có thể sử dụng hộp thoại chọn màu sắc trong Photoshop để lấy màu, sau đó sử dụng cùng một giá trị HEX màu trong CSS, HTML, Javascript, Flash hoặc mã Objective-C và nó sẽ phù hợp với hình ảnh của bạn một cách hoàn hảo.

Goldmouse dịch từ Biango