Phần 3: tạo palettes màu cho thiết kế của bạn

Đây là bài viết của Cameron-chapman, một nhà thiết kế web design có kinh nghiệm nhiều năm trong thiết kế web và graphic design. Mình thấy cô này viết về lý thuyết màu khá hay nên dịch phần 1, phần 3 của lý thuyết màu. Phần 2 hơi đơn giản một tý, nếu rãnh thì mình dịch luôn để làm tài liệu tham khảo. Bắt đầu bài dịch nhé, hi vọng ai đó tình cờ đọc được bài này, mình mong sẽ giúp điều gì đó.
Ở phần 1, chúng ta nói về ý nghĩa của màu sắc ở những vùng văn hóa, đất nước khác nhau. Những ý nghĩa này có ảnh hưởng trực tiếp đến người dùng khi họ truy cập trang web của bạn, và hay chỉ là vô thức. Những màu sắc bạn chọn có thể làm tăng hoặc giảm đi yếu tố thương hiệu mà bạn đang cố gắng tạo ra.

Ở phần 2 nói về sắc độ màu sắc, tone độ màu, độ bão hòa màu, giá trị màu. Những yếu tố này rất quan trọng giúp chúng ta tạo ra một bảng màu riêng.

VÒNG MÀU TRUYỀN THỐNG:
Đây là một số màu được định nghĩa sẵn, đặc biệt dành cho người mới bắt đầu. Bên dưới bảng màu truyền thống này, có một số ví dụ cho từng màu.


12 màu cơ bản trong bánh xe màu.

MÀU ĐƠN SẮC:
Màu đơn sắc là màu được tạo ra từ nhiều tone độ khác nhau của duy nhất một màu. Đây là những màu bảng màu đơn sắc đơn giản nhất, chúng được lấy ra từ cùng một sắc độ màu (hue).

Một số ví dụ:
Dưới đây là những ví dụ về bảng phối màu đơn sắc. Màu đầu tiên khi chúng ta nhìn từ bên trái sang bên phải được dùng cho tiêu đề (headline). Màu thứ hai là màu bodytext. Màu thứ ba được dùng làm nền (hoặc làm bodytext, lúc này màu thứ 2 dùng làm nền). Ở đây, ít nhất có 2 màu dùng làm điểm nhấn trong mẫu thiết kế.

MÀU TƯƠNG TỰ
Bảng phối màu tương tự là những bảng màu dễ phối nhất, bảng màu tương tự được tạo ra từ 3 màu đứng liền kề nhau trong bánh xe màu. Thông thường, những màu tương tự thường có cùng một sắc độ, nhưng bằng cách sử dụng tone độ màu, các độ tối và sắc thái khác nhau, chúng ta có thể tạo ra những bảng phối màu tương tự phù hợp với nhu cầu thiết kế.

Một số ví dụ:

Đây là bảng màu phối truyền thống, bảng màu này chỉ đủ cuốn hút nhưng chưa thể hiện sự tương phản cho một trang web chuyên nghiệp.

Đây là bảng phối màu sắc tương tự bên trên. Bằng việc thay đổi sắc độ (chroma) nhiều hơn, nó đã trở nên phù hợp cho một thiết kế web.

Một ví dụ khác về bảng phối màu tương tự.

MÀU BỔ SUNG
Bảng phối màu bổ sung được tạo ra bằng việc kế hợp những màu đối nhau trong bánh xe màu. Về mặt hình thức cơ bản nhất, những bảng phối màu này chỉ bao gồm 2 màu, nhưng sẽ được mở rộng bằng việc dùng sắc độ và tone màu. Một lời cảnh báo rằng: sử dụng màu đối với sắc độ tương tự và giá trị kế tiếp cho màu đó phải gây chú ý (nó sẽ chuyển động dọc theo phần ranh giới mà nó sử dụng). Đây là điều tốt nhất cần tránh ( giữa chúng, đặt một khoảng trắng hoặc thêm màu chuyển tiếp)

Một số ví dụ:

Một loạt sắc thái màu đậm nhạt làm cho bảng màu trở nên sống động

Màu Beige và brown là những tone đậm và nhạt của màu cam.


Một bảng màu đối với các dãy màu đơn sắc

MÀU BỔ SUNG TỪNG PHẦN
Màu từng phần là việc kết hợp một màu với hai màu bên cạnh của màu đối.

Triadic:
Hệ màu lấy từ ba nhóm màu trong vòng tròn màu.

CÁCH TẠO BẢNG MÀU RIÊNG CHO BẠN
Tạo một bảng màu từ vòng tròn màu có vẻ hơi đáng sợ. Nhưng nó không phức tạp như nhiều người nghĩ. Và ở đây có một vài thủ thuật mà bạn có thể tạo ra bảng màu yêu thích cho riêng bạn.
Chúng ta đã xem qua những loại màu khác nhau bên trên. Bây giờ, chúng ta cố gắng tạo ra những bảng màu riêng. Có rất nhiều công cụ hỗ trợ online giúp bạn tạo ra một bảng màu, nhưng bây giờ hãy quên những bảng màu đó và bắt đầu với Photoshop.
Bạn hãy thử phá cách từ cách loại phối màu bên trên, thử tạo ra những bản màu tùy thích. Điều quan trọng là phải biết cách mà những màu sắc khác nhau có thể tương tác và cách mà nhũng bảng màu thông thường được tạo ra. Trong hầu hết các dự án thiết kế của bạn, bạn sẽ tạo ra những nhóm màu mà ko tuân theo một quy luật nào xác định.
Vì vậy, mục đích của dự án này là chúng tôi tạo ra ba nhóm màu mà mỗi nhóm màu này dùng trên 2 websites khác nhau. Giả sử khách hàng của chúng ta thuộc nhóm thiết kế kiến trúc hiện đại và là những nhóm bán hàng cao cấp (có ảnh hưởng đến biểu tượng thời trang Victoria) cho dành cho phụ nữ.
Chúng ta bắt đầu với màu đơn sắc cơ bản, lấy một màu bất kỳ ra và cảm nhận. Như đã đề cập bên trên nhóm màu truyền thống thường không được sử dụng trong thiết kế, nhưng màu đơn sắc là một ngoại lệ. Bạn sẽ thấy mình có khả năng sử dụng màu đơn sắc thường xuyên hơn.


Đối với những của hàng may mặc, thường thì người ta hay dùng nhóm màu đơn sắc, kết hợp với màu trắng như màu trung lập.


Đối với các website blog, chúng tôi dùng nhóm màu tối kết hợp với màu xám.


Điều này gần như là dùng nhóm màu tương tự, nhưng chúng tôi loại ra một màu. Vì thế trang web được tạo thành từ các tone độ đậm của màu đỏ và màu tím. Hai màu này nằm kế cận nhau trên bánh xe màu, và kết hợp rất hiệu của đặc biệt là khi thay đổi màu và mức độ bão hòa.


Thêm tone đỏ đậm và màu xám sẽ tạo nên một thiết kế thú vị và là tiềm năng cho việc tạo thêm sự nhấn mạnh trong những phần thiết kế của bạn.


Ở đây, chúng tôi đã thoát khỏi màu tím và chuyển sang màu đỏ. Một lần nữa, đây là một màu kế màu tím đỏ trong vòng màu. Chúng tôi cũng dùng màu vàng rất nhạt (màu đối của màu tím).


Khi nhóm màu này trông giống như nhóm màu xám đỏ, nhưng nếu bạn nhìn kỹ bạn sẽ thấy màu xám thực ra là xám xanh, xanh và đỏ chiếm 2/3 nhóm màu tetradic, nhưng nó hòa hợp với mà không dùng màu vàng. Đặc biệt là khi màu đỏ được giữ nguyên còn màu xanh thì giảm bớt gần đến mức như màu xám.

TẠI SAO SẮC ĐỘ MÀU, ĐỘ ĐẬM NHẠT RẤT QUAN TRỌNG TRONG THIẾT KẾ?
Như bạn đã thấy những nhóm màu bên trên sử dụng màu nhạt, sắc độ màu và tone độ đậm là rất quan trọng. Điều này dẫn đến đôi khi những nhóm màu được tạo ra quá mức hoặc là quá nhàm chán tại cùng một thời điểm.
Khi bạn kết hợp các sắc độ màu, độ đậm nhạt, bạn sẽ mở rộng bánh xe màu nói trên. Một trong những cách đơn giản nhất là tạo ra những nhóm màu chuyên nghiệp để có cùng sắc độ, độ đậm nhạt nhất định (tránh những màu đậm nguyên thủy), và sau đó thêm nhưng màu nguyên thủ khác (gần với màu nguyên thủy) để tạo ra ít nhất ba màu từ vòng màu (một phần của nhóm 3 màu đối, 4 màu, hoặc nhóm màu bổ sung từng phần) như là một điểm nhấn. Điều này tạo ra những hiệu quả khá thú vị nhưng vẫn duy trì được cảm giác cân bằng màu.

THÊM VÀO MỘT SỐ MÀU TRUNG TÍNH
Các màu trung tính cũng là một phần quan trọng của việc tạo ra một bảng màu. Màu xám, đen, trắng, nâu, nâu thường được coi là màu sắc trung tính. Màu nâu, tans, off-white có khuynh hướng làm cho bảng màu trở nên ấm hơn (tất cả mà chúng có chỉ là tone độ màu, độ đậm nhạt của màu cam và vàng). Màu xám sẽ mang lại cảm giác ấm hơn hay lạnh hơn khi nó kết hợp với những màu quanh nó. Màu đen và trắng cũng được cho là màu nóng hoặc lạnh khi kết hợp với những nhóm màu quanh nó.

Trắng, đen là màu trung lập dễ dàng kết hợp với bất cứ màu sắc nào. Nó cũng tăng tính trực quan khi sử dụng tông màu xám.
Thêm màu nâu, tans và off-white hơi phức tạp, nhưng với một vài bài thực hành, bạn sẽ thấy việc kết hợp các màu sắc lại với nhau đơn giản hơn nhiều. Ví dụ, màu nâu được xem là màu rất tối, đậm đặt trong nền màu đen. và màu nhạt off-white được đặt trong những nền xám trắng. Màu tan được dùng trong những thiết kế xám.

SỬ DỤNG HÌNH ẢNH ĐỂ TẠO NHÓM MÀU
Sử dung Kuler, bạn có thể tìm bất kỳ hình nào trên flickr, hoặc bạn up nguồn hình của bạn. Nếu bạn đang bối rối không biết phải sử dụng màu nào trong một thiết kế web, hãy thử tìm kiếm các từ liên quan trên flickr. Đôi khi điều này có thể dẫn đến việc tìm kiếm các màu mà mà bạn có thể không suy nghĩ đến.

Hãy thử dùng phương pháp này, theo hai cách, Kuler và photoshop. Tìm một bức hình mà bạn thích trên Flickr, hình mà bạn nghĩ có thể khơi gợi cảm xúc trong thiết kế mà bạn muốn tạo ra.
Tôi chọn một hình:
Mở lược đồ màu của Kuler, up hình lên Kuler để có được nhóm màu yêu thích, chọn một hình bất kỳ.


Một trong những tính năng thú vị nhất của Kuler là tạo màu từ hình ảnh của họ. Chọn một tâm trạng vừa ý, bao gồm màu sắc tươi sáng, trung tính, đậm nhạt. Đây là những nhóm màu chúng tôi có được sau khi sử dụng các mood màu.

Tạo màu trong photoshop, bạn có thể tùy chọn những màu yêu thích ở những điểm khác nhau trên hình cho đến khi thấy chúng hòa hợp với nhau.


Việc tạo những nhóm màu bằng hình ảnh trong Photoshop là cách dễ nhất và thường được bắt đầu từ những màu đơn sắc.

CÁCH DỄ NHẤT ĐỂ TẠO MỘT NHÓM MÀU:
Bằng cách thêm một màu sáng làm điểm nhấn vào nhóm màu trung tính là cách dễ nhất để tạo ra một nhóm màu. Cách này cũng làm cho thiết kế của bạn nổi bật và trực quan. Nếu bạn không chắc chắn những kỹ năng trong việc tạo ra những nhóm màu, hãy thử dùng cách kết hợp này.



Bạn có thể thấy cách mà màu nâu thay màu xám làm cho toàn bộ thiết kế trở nên ấm hơn, thậm chí là với điểm nhấn màu xanh dương.

Bạn cũng có thể sử dụng bất cứ màu sắc nào thay vì dùng màu xám hoặc nâu trong nhóm này, chỉ nên nhớ là nên giữ những màu này gần nằm trong tone xám. Thông thường, những màu xám lạnh và màu xám trung tính (chỉ có thành phần màu đen) là giải pháp tối ưu nhất cho thiết kế hiện đại. Đối với kiểu thiết kế truyền thống, màu xám ấm và màu nâu thường được sử dụng hiệu quả hơn.

NÊN SỬ DỤNG BAO NHIÊU MÀU TRONG TRANG WEB CỦA BẠN?
Bạn có thể thấy rằng trong bài viết này chúng tôi tạo ra nhóm màu với 5 màu khác biệt. Bạn cũng có thể thêm hoặc bớt số lượng màu mà bạn mong muốn.

Có nhiều website chỉ dùng 3 màu cho thiết kế của họ. Có những trang chỉ dùng 2 màu. Một vài trang dùng 8 đến 10 màu. Cách dễ nhất là bắt đầu từ những nhóm màu đã được định nghĩa trước, những nhóm màu chuẩn, truyền thống. Sau đó khi bạn đã có những bước cơ bản, bạn sẽ dùng màu linh hoạt và hiệu quả hơn.

10 WEBSITE CÓ NHỮNG NHÓM MÀU ĐẸP
Nhằm giúp bạn có cảm hứng hơn trong việc lựa chọn màu, dưới đây là 10 trang web có những nhóm màu tuyệt vời. Một vài nhóm màu mới nhìn trong hơi cũ nhưng chúng nhưng chúng được dùng cho thấy có những khả năng phối các nhóm màu.

Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:


Nhóm màu:

KẾT LUẬN
Cách tốt nhất để có những nhóm màu đẹp là thực tập, tạo những nhóm màu mà bạn thấy hằng ngày. Bạn có thể dùng những công cụ có sẵn trước, hoặc mở Photoshop và bắt đầu thực tập. Nếu bạn tìm thấy được thứ gì đó đẹp và nổi bật trong đời sống hằng ngày, hãy dùng chúng vào trong trang web của bạn. Điều này làm cho những nhóm màu này thực tế hơn và dễ dàng hơn trong tương lai.

CÁC NGUỒN NGHIÊN CỨU THÊM:
http://webdesignledger.com/tools/10-super-useful-tools-for-choosing-the-right-color-palette
Trang web này có 10 công cụ tìm và tạo màu.


Trang này sẽ load 100 màu ngẫu nhiên, đây là một trang web mà bạn có thể tìm được những cảm hứng về màu.


Trang này nghiên cứu chi tiết về những nhóm màu truyền thống.


Những nhóm màu khác, thư viện màu đặc biệt rất hữu dụng trong việc tìm và tạo những nhóm màu đơn sắc.


Một thư viện màu với công cụ online miễn phí.


Một cộng đồng màu bao gồm các trang bao gồm các bảng màu, những chức năng cũng như các công cụ tạo màu.

Theo nguồn:
http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/
Được viết bởi: Cameron-chapman. smashingmagazine

Advertisements
Comments
2 Responses to “Phần 3: tạo palettes màu cho thiết kế của bạn”
  1. sinhchung says:

    Cảm ơn tài liệu bạn đã viết nhe. hay lắm

    • nkanhtra says:

      hi, bài này của cô Cameron-chapman. Mình thấy rất hay, nên thử dịch để làm tài liệu tham khảo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: