Khi bạn lướt trên dòng News Feed, điều gì sẽ làm bạn chú ý nhất? Hẳn là các video Youtube, các hình ảnh, ảnh động, và những nội dung bắt mắt khác, đúng không nào?

Điều này không có nghĩa là phần nội dung văn bản không quan trọng. Và hơn hết, các bạn cũng đang đọc bài viết này đây.

Thế nhưng, điều cần nhấn mạnh ở đây là việc tạo ra yếu tố thị giác như là đồ họa thông tin (infographics), biểu đồ, hình ảnh động, và các hình ảnh khác, có thể gây được sự chú ý đối với người đọc và làm tăng giá trị nội dung bài viết.

Có thể bạn sẽ nghĩ rằng: “Tôi hoàn toàn không biết cách tạo ra những hình ảnh tuyệt vời vì tôi không phải là một người sáng tạo”.

Xin chào. Tôi là Bethany, và trước hết tôi hoàn toàn không phải là người có năng khiếu nghệ thuật. Thế nhưng, tôi đang làm việc tại HubSpot ở vị trí diễn họa dữ liệu, nơi mà tôi dành hầu hết thời gian vào việc sáng tạo các infographics và các hình ảnh khác cho các trang blog.

Cho nên, tôi có thể nói rằng mình không phải là người có thiên hướng nghệ thuật bẩm sinh, và tôi đã học được cách tạo ra nội dung hình ảnh. Và bạn cũng sẽ làm được thôi.

Hiện nay dù đã có rất nhiều công cụ có thể hỗ trợ những người không làm nghệ thuật như chúng ta để tạo ra những hình ảnh hấp dẫn, nhưng một số phần trong thiết kế đồ họa cũng cần phải có kiến thức nền cơ bản.

Ví dụ như là cách chọn lựa màu sắc. Có thể lúc ban đầu bạn cho rằng điều này khá dễ dàng, nhưng khi bắt tay làm việc với bánh xe màu sắc, bạn sẽ muốn mình có nhiều thông tin hơn nữa về cái mà bạn đang thấy.

Hãy xem đây như là khóa học giới thiệu về lý thuyết màu sắc. Tiếp tục theo dõi để biết về các thuật ngữ, công cụ cũng như các mẹo nhỏ để chọn được các màu sắc tốt nhất cho thiết kế của bạn.

Lý Thuyết Màu Sắc 101

Trước hết hãy quay về thời điểm bạn học mỹ thuật tại trường học để thảo luận về những điều cơ bản trong màu sắc.

Bạn vẫn còn nhớ về khái niệm màu bậc 1, màu bậc 2 và màu bậc 3 chứ? Tốt lắm. Các khái niệm này rất quan trọng nếu như bạn muốn hiểu và biết tất cả về màu sắc.

Màu bậc 1, bậc 2 và bậc 3

Màu bậc 1 bao gồm 3 màu: đỏ, vàng và xanh dương. Hãy nghĩ đến chúng nếu bạn đã từng sử dụng màu vẽ – đây là những màu không thể tạo ra bằng cách trộn hai màu khác nhau lại.

Màu bậc hai, nói cách khác, bao gồm 3 màu (xanh lá, tím, cam) được tạo ra bởi sự pha trộn của các màu bậc 1.

Màu bậc ba là sự phối hợp giữa một màu bậc 1 và một màu bậc 2.

Từ đây màu sắc trở nên phức tạp hơn so với ban đầu. Và nếu như bạn muốn trở thành một chuyên gia trong lĩnh vực chọn màu sắc cho các thiết kế, bạn chắc chắn phải hiểu về các thành phần khác trong màu sắc.

Tất cả những màu trung gian

Phía trên là những màu “chính” mà bạn cần biết, nhưng chúng ta đều biết rằng để chọn được màu sắc, đặc biệt là trên máy tính, sẽ có nhiều hơn 12 màu cơ bản.

Đó là vì màu sắc có thể được điều chỉnh sáng hơn, nhẹ hơn, mềm mại hơn hoặc là tối hơn bởi sự pha trộn màu trắng, đen, hoặc xám với màu gốc. Bạn cũng có thể sử dụng các thuật ngữ khác nhau cho các loại màu sắc  :

Hue: Sắc màu khá tương đồng với những gì chúng ta định nghĩa khi nói về “màu sắc”. Ví dụ, tất cả những màu bậc 1 và màu bậc 2 chính là “các sắc màu”.

Shade (vùng tối): Bạn có thể nhận ra khái niệm “shade” vì chúng được sử dụng khá thường xuyên khi đề cập đến các phiên bản sáng hoặc tối của sắc màu tương tự. Thật ra, một “shade” chính là màu tạo ra khi thêm màu đen vào bất cứ màu “hue” nào. Sự đa dạng của “shades” dựa trên lượng màu đen bạn thêm vào.

Tint (vùng sáng): Tint trái ngược với “shades” , nhưng một số người thường không nhận ra sự khác biệt giữa một vùng tối của màu với một vùng sáng. Bạn sẽ có vùng sáng khác nhau khi thêm màu trắng vào một màu sắc nào đó. Do đó, một màu sẽ sở hữu “shade” và “tint” rất đa dạng.

Tone (hoặc Saturation) (vùng trung gian): Bạn có thể thêm màu trắng và đen vào một màu để tạo ra một tone. Tone hoặc saturation mang cùng một nghĩa, nhưng vài người thường sử dụng saturation khi họ nói về màu sắc tạo ra để dùng cho các hình digital. Còn tone đa phần được sử dụng trong hội họa.

Màu cộng và màu trừ

Nếu đã từng dùng qua hệ màu trên bất cứ chương trình nào, bạn sẽ có thể thấy một hệ được liệt kê như RGB hoặc CMYK với vài con số viết liền với các chữ cái.

Đã bao giờ bạn thắc mắc về ý nghĩa của các con chữ đó chưa?

CMYK

CMYK viết tắt cho Cyan (xanh lơ), Magenta (hồng sẫm), Yellow (vàng), Key (đen). Chúng thường xuyên xuất hiện trong các danh sách màu mực cho máy in mà bạn thường thấy.  Điều này không phải vô tình trùng hợp đâu.

CMYK là hệ màu trừ. Chúng được gọi như vậy bởi vì bạn phải “bớt” màu đi để trở thành màu trắng. Điều đó có nghĩa là nếu bạn thêm màu vào nhiều hơn thì bạn sẽ có một màu gần giống màu đen. Khá rắc rối nhỉ?

Hãy nghĩ đến việc in ra một tờ giấy.

Đầu tiên bạn sẽ bỏ tờ giấy vào máy in, đồng nghĩa với việc in trên một tờ giấy trắng. Bằng việc thêm màu sắc, bạn đang giảm bớt phần màu trắng trên tờ giấy đó.

Sau đó, giả sử bạn cho lại tờ giấy vào máy in và thử in thêm lần nữa. Bạn sẽ thấy rằng phần giấy được in hai lần có xu hướng gần trở về màu đen.

Tôi sẽ đưa ra một ví dụ về CMYK như những con số để bạn dễ hình dung hơn. CMYK được tính trong thang từ 0 đến 100. Nếu C=100, M= 100, Y= 100 và K=100, bạn sẽ có được màu đen. Nhưng nếu cả 4 chỉ số đều bằng 0, bạn sẽ có một màu trắng.

RGB 

Hệ màu RGB, nói cách khác, được thiết kế cho các phần trình bày điện tử, bao gồm trên máy tính.

RGB viết tắt cho Red (đỏ), Green (xanh lá) và Blue (xanh dương), được dựa trên hệ màu additive của sóng ánh sáng. Đồng nghĩa với việc nếu bạn càng cho thêm màu thì càng đến gần màu trắng hơn.

Với máy tính, RGB được tạo ra trong thang từ 0 đến 255. Cho nên, màu đen chính là R= 0, G=0, và B=0. Màu trắng sẽ là R=255, G=255 và B=255.

Khi bạn tạo ra màu sắc trên máy tính, hệ màu của bạn sẽ được liệt kê trên cả chỉ số RGB và CMYK. Khi luyện tập bạn có thể sử dụng một trong hai cách để chọn lựa màu, và cách còn lại dùng để điều chỉnh cho hợp lý hơn.

Tuy nhiên, hầu hết các chương trình web sẽ giới hạn bằng chỉ số RGB hoặc mã HEX (mã ấn định cho màu sắc trong CSS và HTML). Do đó, nếu bạn đang thiết kế các hình ảnh digital, RGB hiển nhiên là sự lựa chọn tốt nhất để điều chỉnh màu sắc.

Tạo ra các cách phối màu

Bây giờ thì chúng ta đã có được những kiến thức cơ bản về màu sắc nói chung, vậy làm cách nào để sử dụng được những kiến thức mới này?

Bạn chắc hẳn đã biết rằng, trước khi các màu sắc được hòa hợp với nhau một cách đẹp mắt và một số màu khác… lại không. Các màu sắc được chọn sẽ làm tăng giá trị của thiết kế, hoặc có khi sẽ làm mất đi giá trị của chính thiết kế đó.

Trong khi bạn loay hoay tìm cách để thiết kế một đồ họa, điều quan trọng cần phải nhớ đó là cách chúng ta cảm nhận về màu sắc dựa trên nội dung đoạn văn mà chúng ta thấy được.

Color context liên quan đến cách chúng ta tiếp nhận các màu sắc tương phản với nhau.

Hãy nhìn vào các cặp vòng tròn ở ví dụ bên dưới để hình dung được cách tôi đang mô tả.

Các vòng tròn ở giữa đều cùng kích thước, hình dáng và màu sắc. Sự khác nhau nằm ở phần vòng tròn nền to hơn. Tuy nhiên, các vòng tròn nhỏ xuất hiện mềm mại hơn hoặc sáng hơn còn dựa trên màu sắc tương phản ở phía sau nó nữa. Có thể bạn còn thấy được sự thay đổi trong chuyển động hoặc độ sâu chỉ dựa trên sự thay đổi của một màu duy nhất!

Đó chính là do cách mà chúng ta sử dụng hai màu sắc với nhau sẽ thay đổi cách ta nhìn nhận nó. Thế nên khi bạn chọn màu cho thiết kế, hãy nghĩ đến việc bạn mong muốn tương phản ở mức nào trong suốt thiết kế của bạn.

Ví dụ, nếu bạn đang thiết kế một biểu đồ cột đơn giản, bạn có muốn phần nền tối đi cùng với phần cột cũng tối màu? Tất nhiên là không. Bạn chắc chắn sẽ cần phải thiết kế để có được sự tương phản giữa các cột và phần nền, và người xem sẽ dồn sự chú ý vào phần biểu đồ thay vì phần nền phía sau.

Tuy nhiên, việc chọn ra các màu sắc có sự tương phản lớn lại không khó bằng việc chọn các màu sắc có thể kết hợp với nhau sao cho hài hòa.

Cá nhân tôi cho rằng chọn lựa màu sắc là phần khó nhằn nhất. Tôi luôn dành hàng giờ để chọn màu sắc cho phần infographic, đơn giản bởi vì bạn chỉ có vài giây để cảm giác chúng có thích hợp với nhau hay không.

Trên thực tế, tôi không thường dành nhiều giờ chỉ để chọn màu sắc (Và tất nhiên đây là sự lãng phí vì tôi chỉ có vài giờ thực hiện).

Chúng ta rất may mắn vì đã có những nguyên tắc cho việc chọn các cách phối màu có thể đi cùng với nhau.

Cách phối màu tương đồng

Cách phối màu tương đồng được hình thành bằng cách sắp đặt giữa một màu chính và hai màu nằm sát cạnh nhau trên bánh xe màu sắc. Bạn có thể cho thêm 2 màu (nằm 2 bên cạnh màu đó) nếu bạn  muốn dùng cách phối tông 5 màu thay vì chỉ có 3 màu.

Cấu trúc màu tương đồng không phải để tạo giao diện bằng các màu có độ tương phản cao, nên chúng thường được dùng để tạo một hình ảnh mềm mại và ít sự tương phản hơn. Ví dụ, bạn có thể sử dụng một kiểu màu tương đồng để tạo ra cách phối màu với các màu mùa thu và mùa xuân.

Tôi thích sử dụng cách phối màu này để tạo ra một palette ấm hơn (đỏ, cam và vàng) hoặc lạnh hơn (tím, xanh dương và xanh lá) như hình bên dưới. Bạn thấy rằng dù không có sự tương phản quá lớn giữa các màu, chúng vẫn kết hợp với nhau thật tuyệt đúng không?

Tôi thường dùng bảng màu này để thiết kế các hình ảnh hơn là cho infographic hoặc biểu đồ, vì tôi muốn mọi yếu tố trong bức hình sẽ hài hòa với nhau một cách đẹp mắt hơn.

Cách phối màu đơn sắc

Cách phối màu đơn sắc cho phép bạn tạo ra một cách phối màu dựa trên nhiều shades và tints của một sắc màu. Mặc dù có vẻ như sẽ thiếu sự tương phản, chúng thường cho ra kết quả là một màu rất trong trẻo và tinh tế. Bạn cũng sẽ dễ dàng điều chỉnh được sáng, tối trong màu sắc đó.

Tôi thích sử dụng cách phối màu đơn sắc cho các biểu đồ, nhưng chỉ khi không cần quá nhiều sự tương phản. Tuy nhiên, cách phối màu này không mang tính “bùng nổ”, cho nên nếu bạn đang tìm kiếm một sự kết hợp cho ra hình ảnh bắt mắt, đây không phải là sự lựa chọn tốt nhất.

Cách phối màu bộ ba

Cách phối màu bộ ba thường sẽ cho ra độ tương phản cao nhưng vẫn giữ cùng một tông màu. Kiểu phối màu này được tạo ra bằng cách chọn ba màu đối xứng nhau trên các đường thẳng trên bánh xe màu sắc.

Cách phối màu bộ ba sẽ rất đẹp nếu như bạn muốn có một thiết kế có sự tương phản, nhưng đôi khi nó sẽ trở nên quá lố nếu tất cả các màu bạn chọn trên cùng một đường thẳng trên bánh xe màu sắc.

Để giúp cho màu sắc được dịu bớt trong cách phối màu này, bạn có thể chọn một màu chủ đạo và sử dụng hai màu còn lại một cách nhẹ nhàng, hoặc đơn giản hơn là chọn hai màu kia ở mức tint nhẹ hơn.

Cách phối màu bộ ba này thích hợp cho việc vẽ biểu đồ cột hoặc biểu đồ tròn vì chúng cần phải có sự khác biệt để dễ so sánh.

Tuy nhiên, nếu tôi phải sử dụng kiểu kết hợp này để làm một infographic, tôi thường sẽ sử dụng một màu nền như màu vàng hoặc xanh lá nhạt, và màu chủ đạo là một màu đậm hơn nhằm tạo sự tương phản. Sau đó tôi sẽ dùng ba màu khác nữa để làm điểm nhấn. Bằng cách thay đổi cường độ màu sắc trong thiết kế, tôi có thể làm bật lên những điểm quan trọng và bỏ đi những phần không cần thiết.

Cách phối màu tương phản

Bạn đã có thể đoán ra được, nhưng cách phối màu tương phản dựa trên việc sử dụng hai màu sắc trực tiếp đối diện nhau trên bánh xe màu sắc và các màu tints của chính màu đó.

Cách phối màu này sẽ mang đến số lượng màu tương phản tối đa. Do đó, bạn cần phải cẩn thận khi sử dụng các màu tương phản để tạo ra một phối màu.

Cách tốt nhất là dùng một màu chủ đạo nhất định, và một màu thứ hai để nhấn thêm cho thiết kế.

Cách phối màu này cũng khá tốt trong thiết kế biểu đồ cột. Sự tương phản lớn sẽ giúp nhấn mạnh các điểm quan trọng và bỏ đi những điểm không cần thiết.

Tuy nhiên, nếu tôi phải sử dụng các màu này để làm một infographics, tôi sẽ cần một màu sáng hơn làm màu nền. Bạn có thể hình dung ra được chọn một màu trong tông cam làm màu nền và màu xanh dương cho điểm nhấn và văn bản hay không? Nhất định là sẽ rất chói mắt và khó đọc.

Cách phối màu tam giác cân

Cách phối màu tam giác cân bao gồm một màu chủ đạo và hai màu kế cận của màu đối trực với màu chủ đạo đã chọn. Cách phối này giúp tạo ra bảng màu đa dạng sắc thái hơn so với cách phối màu tương phản, mà vẫn giữ được các lợi ích của màu tương phản.

Cách phối màu tam giác cân sẽ hơi khó để cân bằng vì không giống với cách phối màu tương đồng hay đơn sắc, các màu sử dụng đều tương phản (tương tự như cách phối màu tương phản).

Tôi có thể tưởng tượng ra nhiều cách để dùng cách phối màu này. Tôi có thể dùng cho biểu đồ vì sẽ có sự tương phản tôi cần và màu sắc vẫn giữ được hiệu ứng thị giác tốt.

Tôi cũng có thể tưởng tượng sẽ sử dụng các màu này cho infographic, cho dù tôi phải thử nghiệm với bảng màu nhiều hơn để tìm ra cặp màu nào hợp nhau.

Điểm tích cực và tiêu cực của cách phối màu này là bạn có thể dùng bất cứ 2 màu nào từ bảng phối màu thì đều đạt được hiệu ứng tương phản tốt… nhưng điều này cũng có nghĩa là sẽ rất khó để tìm sự cân bằng giữa các màu. Thế nên, bạn có thể sẽ phải thử nghiệm từng chút để tìm ra sự kết hợp tương phản phù hợp.

Cho dù bạn chọn dùng cách phối màu nào đi nữa, thì hãy cố ghi nhớ những điều cần thiết cho thiết kế của bạn. Nếu bạn cần tạo sự tương phản, thì hãy chọn cách phối màu mang đến điều đó cho bạn. Trái lại, nếu bạn chỉ cần tìm một phiên bản màu đẹp hơn, thì hãy thử dùng cách phối màu đơn sắc để tìm ra các shade và tint hoàn hảo.

Tìm ra cách hiểu đơn giản về cách xây dựng các cách phối màu đã giúp tôi chọn lựa cách phối dễ dàng hơn. Nếu tôi chỉ nghĩ đơn giản rằng: “Mục tiêu của thiết kế này là gì?”, tôi có thể bắt tay vào quyết định sẽ cần lượng tương phản nhiều (hay ít).

Hãy nhớ rằng, nếu bạn tạo ra bảng phối 5 màu, thì không có nghĩa rằng bạn phải dùng hết cả 5 màu đó. Đôi khi chỉ cần chọn ra hai màu từ một bảng phối màu lại đẹp hơn là cố nhồi nhét cả năm màu vào cùng một thiết kế.

Các công cụ màu sắc

Có hằng hà nội dung lý thuyết và thực hành để hiểu rõ các màu nào kết hợp tốt nhất và lý do tại sao. Nhưng khi bắt tay vào công việc thực tế và phải chọn màu để thiết kế, thì ý kiến tuyệt nhất là dùng các công cụ để giúp bạn hoàn thành phần việc này nhanh chóng và đơn giản hơn.

May mắn là có rất nhiều công cụ giúp bạn tìm và chọn ra màu sắc thích hợp với thiết kế của bạn.

Adobe Color

Một trong những công cụ màu sắc yêu thích của tôi khi thiết kế – dù là infographic hay chỉ là một biểu đồ trọn – chính là Adobe Color (tiền thân là Adobe Kuler).

Công cụ online miễn phí này cho phép bạn nhanh chóng xây dựng cách phối màu dựa trên cấu trúc màu sắc đã được giải thích phía trên đây. Một khi bạn đã chọn được các màu cho cách phối bạn mong muốn, bạn có thể copy và dán mã code HEX hoặc RGB vào bất kỳ chương trình nào bạn đang dùng.

Cộng cụ này cũng tích hợp hằng trăm cách phối sẵn có để bạn khám phá và sử dụng cho chính thiết kế của mình. Nếu bạn có tài khoản Adobe, bạn có thể dễ dàng lưu trữ các theme vào tài khoản của bạn.

Illustrator Color Guide

Tôi dành nhiều thời gian cho Adobe Illustrator, và một trong những tính năng thường dùng nhất chính là color guide. Color guide cho phép bạn chọn ra một màu sắc, và nó sẽ tự động tạo ra bảng phối 5 màu cho bạn. Đồng thời cũng đưa ra một loạt tint và shade của mỗi màu trong bảng màu đó.

Nếu bạn chỉnh lại màu chủ đạo, color guide sẽ chỉnh luôn các màu tương ứng trong bảng màu. Thế nên nếu bạn chọn cách phối màu tương phản với màu chủ đạo là xanh dương, thì một khi bạn đổi màu chủ đạo thành đỏ, màu tương phản cũng sẽ đổi từ cam sang xanh lá.

Cũng giống như Adobe Color, color guide có các chế độ mặc định để chọn các loại phối màu bạn mong muốn. Điều này sẽ giúp bạn chọn ra phong cách phối màu đúng từ chương trình bạn đang sử dụng.

Sau khi đã tạo được bảng màu mong muốn, bạn có thể lưu lại bảng màu trong mục “Color Themes” để dùng xuyên suốt dự án hoặc trong tương lai.

Preset Color Guides

Nếu không có tài khoản Adobe, chắc hẳn bạn cũng từng dùng sản phẩm của Microsofft Office ít nhất một lần rồi. Tất cả sản phẩm của Office đều có các màu mặc định, bạn có thể dùng và thử nghiệm để tạo ra các bảng màu. PowerPoint cũng có nhiều bảng màu mặc định bạn có thể dùng để truyền thêm cảm hứng cho các thiết kế.

Vị trí các bảng màu trong PowerPoint sẽ tùy thuộc vào phiên bản bạn dùng, nhưng khi bạn tìm được “themes” màu trong dữ liệu của bạn, bạn có thể mở mục preferences và định vị mã code RGB và HEX cho các màu đã dùng.

Sau đó bạn cũng có thể copy và dán các mã đã dùng này vào bất kỳ chương trình nào bạn đang dùng để thiết kế.

Từ lý thuyết đến thực tiễn

Có rất nhiều lý thuyết trong bài này, tôi biết chứ. Nhưng một khi liên quan đến chọn lựa màu sắc, thì việc hiểu rõ lý thuyết đứng sau màu sắc có thể làm nên điều kì diệu khi bạn chọn màu.

Nhưng trước khi để bạn bắt đầu làm ra các hình ảnh tuyệt vời để phát triển blog và các bài post của bạn, hãy để tôi gửi đến bạn một số mẹo nhỏ khi chọn màu:

• Đừng phụ thuộc vào chế độ mặc định. Hầu hết chương trình bạn dùng sẽ tự động đưa ra các màu mặc định. Hãy bỏ qua các màu này và tự khám phá các màu mới. Đừng để chương trình quyết định cách bạn dùng màu sắc cho thiết kế của chính bạn.
• Bắt đầu với một màu bạn thích. Mỗi khi tôi thiết kế thứ gì, tôi đều bắt đầu với một màu và xây dựng bảng màu từ đó. Nếu bạn muốn thử và bắt đầu với nhiều hơn một màu, bạn sẽ gặp kha khá khó khăn để tìm ra sự hòa hợp giữa các màu bạn chọn.
• Lưu trữ các bảng màu. Nếu bạn tìm ra một bảng phối màu mà bạn thích, nó chắc hẳn sẽ có ích cho bạn về sau. Tôi không gợi ý bạn sử dụng cùng một bảng màu cho mỗi thiết kế hay biểu đồ, nhưng bạn luôn có thể dùng các cách phối khác nhau bằng nhiều cách thức khác nhau.
• Có công mài sắt có ngày nên kim. Bạn càng thử nghiệm và thiết kế với màu sắc càng nhiều, bạn sẽ càng nhận lại được nhiều. Không ai tạo ra được tuyệt tác chỉ trong một lần thử cả.

Nguồn: blog.hubspot.com