Tạo một bảng màu. Cách tạo nhanh bảng màu: một thủ thuật đơn giản. Các bước tạo bộ sản phẩm của riêng bạn với tông màu yêu cầu
07.06.16 13472Lựa chọn màu sắc - một trong những những giai đoạn quan trọng nhất trong quá trình tạo ra thiết kế tốt.
Để làm cho công việc của bạn dễ dàng hơn, chúng tôi quyết định biên soạn một lựa chọn bao gồm dịch vụ tốt nhấtđể tạo ra các bảng màu. Họ sẽ giúp bạn tiết kiệm thời gian mà vẫn đạt được kết quả tốt.
01. Adobe Color CC
Adobe đã đổi tên dự án Kuler của mình thành Color
Bạn có thể quen thuộc với công cụ này với tên cũ - Adobe Kuler. Tuy nhiên, Adobe vừa mới đổi tên một trong những ứng dụng web phổ biến của mình thành Adobe Color CC.
Nó cho phép bạn chọn, tạo và lưu các bảng màu khác nhau, mỗi bảng có thể chứa tối đa năm màu. Công cụ này có sẵn ở cả phiên bản trình duyệt và máy tính để bàn. Nếu bạn đang sử dụng phiên bản dành cho máy tính để bàn, bạn sẽ có thể xuất bảng màu ngay vào Photoshop, Illustrator và InDesign.
02. Quả cầu màu Mudcube
Nếu bạn không chắc chắn về cách phối màu của mình, Mudcude có bộ sưu tập nội dung làm sẵn của riêng mình
Mudcube Color Sphere là một tài nguyên thu nhỏ rất tiện dụng dành cho các nhà thiết kế, nó không chỉ cung cấp mã hex cho các màu đã chọn mà còn cho phép bạn tạo bảng màu cho các dự án của riêng mình. Cũng cần lưu ý rằng Mudcube có bộ sưu tập tài nguyên làm sẵn riêng cũng có thể được sử dụng.
03. Kiểm tra màu sắc của tôi
Kiểm tra màu của tôi được thiết kế đặc biệt để đánh giá và chọn kết hợp màu nền và màu nền trước cho tất cả các thành phần DOM. Và cũng để tìm hiểu xem các yếu tố có đủ hài hòa với nhau hay không. Tất cả các bài kiểm tra đều dựa trên thuật toán được World khuyến nghị Web rộng Tập đoàn ( W3C).
04. Ứng dụng màu sắc
Ứng dụng sẽ giúp bạn tìm ra các giá trị RGB, HEX và HSLA của các màu đã chọn
Công cụ iOS Ứng dụng màu sắc sẽ cho phép bạn xác định màu sắc một cách dễ dàng và đơn giản bằng cách sử dụng bảng màu lớn. Nó cho phép bạn tìm hiểu các giá trị màu RGB, HEX và HSLA, cũng như tạo bảng màu của riêng bạn cho trang web.
05. Thợ săn màu sắc
Color Hunter tạo bảng màu dựa trên hình ảnh đã chọn
Đây là một công cụ rất tiện lợi, đặc biệt nếu bạn cần tìm một màu cụ thể. Chọn một hình ảnh và tải nó lên Color Hunter. Công cụ sẽ tạo bảng màu dựa trên hình ảnh đã chọn. Đây là một phương pháp tuyệt vời để tạo bảng màu của riêng bạn.
06.TinEye
Nếu bạn cần lấy một màu cụ thể, chỉ cần nhập giá trị HEX vào URL
Trang web này sử dụng cơ sở dữ liệu gồm 10 triệu hình ảnh có sẵn miễn phí. thỏa thuận cấp phép Creative Commons mà người sáng tạo đã lựa chọn cẩn thận từ Flickr. Chúng có thể được sử dụng để tạo ra các bảng màu thích hợp.
07. Màu sắc
Ứng dụng web thu nhỏ tiện lợi. Di chuột qua màn hình và chọn màu bạn muốn, sau đó cuộn một chút để chọn màu. Sau đó, công cụ sẽ tạo ra tất cả các mã HEX cần thiết mà bạn có thể sử dụng trong các dự án của riêng mình. Một trong những công cụ dễ sử dụng nhất.
08. SpyColor.com
Trình tạo lược đồ màu miễn phí cung cấp thông tin màu sắc và cũng cho phép bạn chuyển đổi nó sang bất kỳ lược đồ nào ( RGB, CMYK và những người khác ). Có sẵn ở đây định dạng khác nhau phối màu, bao gồm xử lý, đơn sắc và các màu khác.
09. Cảm hứng thiết kế
Trên Designspirst, bạn có thể chọn tối đa năm sắc thái với bảng màu toàn trang tiện lợi giúp bạn dễ dàng tìm thấy chính xác cách phối màu HTML mà bạn đang tìm kiếm. Sau đó, trang web sẽ tạo một trang có tất cả hình ảnh trong cơ sở dữ liệu sử dụng kết hợp màu tương tự. Các giá trị HEX cũng sẽ được cung cấp để bạn có thể sử dụng trong các dự án của riêng mình. Và hình ảnh có thể được lưu trong bộ sưu tập trên trang web.
10.ColorExplorer
Một trong những công cụ web phức tạp nhất cung cấp nhiều tính năng liên quan đến thiết kế, tùy chỉnh và phân tích bảng màu. Dưới đây là một số công cụ giúp bạn xác định Hiệu lực WCAG của cách phối màu và cũng có thể tạo bảng màu của riêng bạn.
11. Trình tạo lược đồ màu Hex
Một công cụ nhỏ tiện dụng để tạo sự kết hợp màu dựa trên một màu đã chọn. Chèn giá trị Hex của màu và công cụ sẽ cung cấp một tập hợp các màu phù hợp mà bạn có thể sử dụng cùng với màu chính.
12. Những người yêu thích MÀU SẮC
COLOURlovers là cộng đồng chia sẻ cách phối màu. Tại đây, bạn có thể lấy cảm hứng từ bộ màu của người dùng khác, cũng như tạo và chia sẻ bộ màu của riêng bạn.
13. Nhà thiết kế phối màu
Công cụ trực tuyến này cung cấp những cách thú vị tạo các lược đồ màu, cho phép bạn điều chỉnh độ sáng và điều chỉnh độ tương phản của chúng. Ở đây bạn có thể tạo một số phổ biến mô hình toán học phối màu, bao gồm cả đơn sắc.
14. COPASO
Một trong những công cụ từ trang web COLOURlovers. Nhưng COPASO đáng được quan tâm đặc biệt vì đây là một giải pháp tất cả trong một đáng kinh ngạc và cho phép bạn dễ dàng tạo các phối màu làm sẵn cho trang web. Có rất nhiều công cụ kết hợp màu sắc có sẵn ở đây, tất cả đều thuận tiện và dễ sử dụng. giao diện đơn giản. Ngoài ra, bạn có thể thêm ghi chú vào bảng màu, tải hình ảnh lên, v.v.
15. Màu sắc
Colourmod đại diện phần mềm, cho phép bạn chọn từng màu từ khu vực tiện ích, cho dù bạn đang sử dụng máy Mac hay Konfabulator trên Windows. Đây không phải là một công cụ quá đơn giản để làm việc với bảng màu, nhưng nó sẽ giúp bạn xác định màu sắc một cách nhanh chóng và dễ dàng mà không cần phải tải các chương trình nặng.
16. ColorZilla
ColorZilla có sẵn cho cả Chrome và Firefox
Dự án này bắt đầu như một plugin cho Firefox, nhưng ngày nay nó cũng có sẵn cho Google Chrome. ColorZilla là một tiện ích mở rộng bao gồm một số công cụ được thiết kế để hoạt động với màu sắc, bao gồm bảng màu, trình tạo độ dốc CSS và ống nhỏ mắt.
17. Màu sắc
Một công cụ trực tuyến thuận tiện để chọn cách phối màu từ những người tạo ra Colormunki. Nó cho phép bạn dễ dàng tạo các bảng màu bắt mắt từ các mẫu màu dựa trên Pantone bằng nhiều kỹ thuật.
18.colr.org
Colr.org cho phép bạn đặt dải màu của bất kỳ hình ảnh nào
Công cụ này cho phép phân tích chi tiết màu sắc hình ảnh thường được tự động hóa trong các công cụ khác. Điều này sẽ cho phép bạn chọn màu phù hợp nhất. Chúng tôi khuyên bạn nên kiểm tra công cụ này, mặc dù giao diện của nó không phức tạp như các ứng dụng khác.
19. ColorGrab
Công cụ tiện dụng này tạo bảng màu từ bất kỳ hình ảnh nào. Chèn URL của hình ảnh bạn muốn phân tích và dịch vụ sẽ tự động tạo biểu đồ 3D với thông tin về màu sắc được sử dụng. Mặc dù ứng dụng này không hoàn toàn phù hợp để chọn bảng màu cho trang web nhưng nó có thể được sử dụng để nghiên cứu hình ảnh và đặc điểm màu sắc của chúng.
20.Máy trộn màu
ColorBlender tạo một bảng màu gồm năm màu phù hợp
Một trong những công cụ đơn giản nhất cho phép bạn điều chỉnh màu sắc và có được năm màu kết hợp với nhau theo thời gian thực. Bảng màu đã tạo có thể được tải xuống trong Photoshop hoặc Illustrator dưới dạng tệp EPS.
21. GrayBit
GrayBit cho phép bạn phân tích các trang web để hiểu chúng trông như thế nào trong thang độ xám
Công cụ này sẽ giúp bạn xem trang web của bạn trông như thế nào với tông màu xám. Dịch vụ tuyệt vời, điều này sẽ cho phép bạn xác định các khu vực có vấn đề tương phản.
22. COLRD
Một công cụ có thể được sử dụng làm nguồn cảm hứng hoặc chia sẻ cách phối màu. Tất nhiên, tài nguyên này sẽ không giúp tạo ra các sơ đồ, nhưng bạn chắc chắn nên lưu ý đến nó.
23. Phổ Shutterstock
Thiết kế trang web hiệu quả là điều không thể tưởng tượng được nếu không chọn bảng màu. Nó vẫn còn để tìm ra cách để làm điều này.
Đối với một số dự án, bạn có thể đã chọn một vài màu để phù hợp với biểu tượng hoặc bảng màu thương hiệu của mình và đang xây dựng trang web của mình trong những ràng buộc đó. Những người khác vẫn chỉ là bản phác thảo. Cũng có những người cần những thay đổi nhỏ để có thể làm cho trang web đẹp hơn và thuận tiện hơn.
Cho dù bạn đang tìm cách làm cho công việc của mình dễ dàng hơn và nhanh hơn hay đang xây dựng trang web lần đầu tiên, những công cụ này sẽ giúp bạn tìm ra giải pháp.
Hãy bắt đầu với Tom lược trong lý thuyết màu sắc.
Dưới đây bạn sẽ tìm thấy 19 tài nguyên giúp bạn chọn bảng màu cho trang web của mình.
Sự chuẩn bị
Cần một chút cảm hứng?
1.
BrandColors cho thấy cách các thương hiệu hàng đầu sử dụng màu sắc để tạo sự khác biệt cho doanh nghiệp của họ, kể câu chuyện và truyền đạt giá trị của họ. Bạn có thể xem danh sách các công ty, các tổ chức phi lợi nhuận và các công ty khởi nghiệp ở thứ tự ABC hoặc thông qua tìm kiếm tìm thương hiệu bạn quan tâm.
Bạn đang tìm kiếm một bảng màu làm sẵn?
2.
Đây là diễn đàn thiết kế bảng màu với gần 2.000.000 lựa chọn do người dùng gửi. Bạn có thể tải về một bảng màu có chứa màu sắc cụ thể và đọc những gì nhà thiết kế viết. Theo quy định, đối với một sự kết hợp, một số tùy chọn có cường độ khác nhau được đưa ra.
Bảng màu đi kèm với những cái tên kể: Storm in the Whitsundays (quần đảo Thái Bình Dương ở Biển San hô), Twilight in the Whitsundays, Đảo Whitsunday
3.
Tài nguyên này cho phép người dùng tạo và tải lên bảng màu của riêng họ. Bạn có thể lọc chúng theo ngày, xếp hạng và số lượt tải xuống hoặc tìm kiếm theo từ khóa.
4.
Trong ColoRotate, bạn sẽ tìm thấy thư viện phối màu mà bạn có thể duyệt, chọn và sửa đổi. Một công cụ màu 3D đặc biệt sẽ giúp bạn tạo bảng màu của riêng mình dựa trên bảng màu bạn tìm thấy. Bảng màu bạn tạo có thể được áp dụng ngay trong PhotoShop hoặc Fireworks bằng cách cài đặt plugin ColorRotate hoặc ứng dụng iPad.
Theo yêu cầu thương hiệu
Điều gì sẽ xảy ra nếu bạn đã có các yêu cầu về hình ảnh, logo hoặc thương hiệu cần được đáp ứng?
1.
Trang web này không có nhiều tính năng như một số trang trong danh sách này, nhưng nó thực hiện rất tốt nhiệm vụ được thiết kế: nghiên cứu một màu cụ thể. Chỉ cần tải ảnh lên và Color Hunter sẽ tạo bảng màu dựa trên ảnh đó. Cái này cách tuyệt vờiđạt được sự hài hòa giữa hình ảnh và màu sắc chủ đạo của trang web. Ngoài ra, tại đây bạn có thể bố trí bảng màu của trang web mà bạn thích.
2.
Pictaculous tạo bảng màu từ ảnh. Tất cả những gì bạn phải làm là tải lên một bức ảnh để có được màu sắc đi kèm với nó. Tài nguyên cũng sẽ cung cấp các bảng màu làm sẵn phù hợp với bạn.
3.
Công cụ này được gọi là Adobe Kuler và được dùng để so sánh màu sắc. Giờ đây, nó là một hệ thống tạo bảng màu hoàn chỉnh cho phép bạn thử, so sánh và lưu các kết hợp màu. Bạn có thể chọn loại bảng màu và tạo các lược đồ năm màu một cách tự động hoặc sử dụng cài đặt thủ công.
4.
Paletton tăng tốc quá trình tạo bảng màu. Bạn cần chọn kiểu lược đồ: đơn âm, ghép, bộ ba, bộ bốn, liên quan, tương phản liên quan. Khi bạn thay đổi một màu, các màu khác sẽ tự động điều chỉnh.
5.
Color Spire cũng xây dựng bảng màu dựa trên một màu duy nhất. Bạn chọn màu gốc và nhận các tùy chọn cho các phương án đi kèm với nó. Bạn cũng có thể xem bản xem trước giao diện của bảng màu đã chọn trên trang web.
6.
Plugin Chrome này giúp bạn hài hòa màu sắc, điều chỉnh bệnh mù màu và xác định mã HEX. Bảng màu có thể được xuất trực tiếp sang Illustrator, PhotoShop và CoIRD.com.
7.
Tài nguyên này cho phép bạn thao tác bảng màu của riêng mình bằng cách chọn và thêm các sắc thái. Kết quả là bạn nhanh chóng và dễ dàng tạo sơ đồ mới dựa trên sơ đồ hiện có.
8.
Công cụ này chọn màu phù hợp với màu của bạn. Nó cơ bản hơn một chút so với các tài nguyên khác trong danh sách này. Bạn cần chèn mã HEX của màu vào dòng hoặc chọn mã đó từ quang phổ được trình bày dưới dạng bánh xe. Trình tạo tạo ra 3 màu phù hợp với màu của bạn và cung cấp cho chúng mã HEX.
Tạo màu sắc của riêng bạn
Nhiều tài nguyên trong danh sách này cho rằng bạn có màu gốc. Nếu không cần đáp ứng yêu cầu của thương hiệu và BrandColors không giúp ích gì cho việc lựa chọn, bạn có thể bắt đầu bằng bản phác thảo.
1.
Ứng dụng iOS này giúp bạn chọn từ một số màu được đặt cạnh nhau khoảng cách ngắn, thuận tiện hơn nhiều so với biểu diễn gradient, hình tròn và quang phổ. Lưới màu lớn cho phép bạn sử dụng toàn bộ màn hình (điều này đặc biệt có giá trị đối với chủ sở hữu iPad Pro). Ứng dụng cho phép bạn tạo các mẫu màu, tìm các giá trị RGB, HEX và HSLA cũng như tạo bảng màu từ bản phác thảo.
3. Màu sắc
Trong Màu từ HailPixel, bạn không thể không quyết định màu. Bạn sẽ hiểu chính xác những gì bạn muốn và nhận được mã HEX cho bóng râm.
Bạn di chuyển chuột hoặc cử chỉ và màu sắc sẽ thay đổi một chút mỗi lần. Nó trông giống như một quả cầu màu, liên tục đi kèm với các màu có mã HEX. Nếu bạn di chuyển sang trái và phải trên màn hình, màu sắc sẽ thay đổi và độ bão hòa lên xuống sẽ thay đổi.
Nhận mã màu
Nếu bạn nhìn thấy một màu ở đâu đó và muốn biết mã cũng như tên của nó thì những tài nguyên này là dành cho bạn.
1.
SpyColor sẽ cung cấp thông tin về bất kỳ màu nào, bao gồm Hex, RGB, CMYK và các mã khác, đồng thời hiển thị một loạt các mẫu cho từng màu, bao gồm bổ sung, bổ sung phân tách, xử lý, độ tương phản và tương tự.
2.
Màu HTML Codes tìm mã HEX cho màu sắc trong hình ảnh. Bạn chọn một bức ảnh, mở nó ra để xem và lấy mã màu bằng cách di chuột qua nó.
Kiểm tra bảng màu của bạn
Khi bạn đã tạo một bảng màu, bạn muốn đảm bảo rằng nó có hiệu quả.
Kiểm tra Màu sắc của tôi kiểm tra màu nền trước và màu nền để đáp ứng yêu cầu về độ tương phản đối với những người có khả năng nhìn màu bất thường. Nếu bạn muốn đảm bảo trang web của mình thân thiện với người mù màu hoặc muốn có được sự kết hợp màu sắc hiệu quả và trực quan từ góc độ UX thì tài nguyên này là không thể thiếu. Chỉ cần nhập địa chỉ trang web là đủ để làm quen với báo cáo qua hình thức của nó.
Tại đây, bạn có thể chọn tối đa 5 sắc thái từ một bảng màu khổng lồ và nhận được những hình ảnh có sự kết hợp màu tương tự và đi kèm với mã HEX. Hình ảnh có thể được lưu trên trang web hoặc tải xuống.
Phần kết luận
Tạo bảng màu cho trang web là một công việc thủ công kết hợp giữa nghệ thuật và khoa học. Những tài nguyên này sẽ giúp bạn nhanh chóng và dễ dàng có được trải nghiệm hình ảnh đẹp mắt và hoạt động tốt.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách lấy mẫu màu từ một hình ảnh và tạo các bộ mẫu màu mà bạn có thể sử dụng sau này, đặc biệt là khi bạn làm việc với khách hàng khác nhau, mỗi màu ưu tiên một số màu nhất định cho một dự án khác nhau hoặc khi bạn chỉ muốn tạo bộ sưu tập các sắc thái màu của riêng mình.
Một trong những điều tôi yêu thích nhất là chụp ảnh phong cảnh và sau đó lưu các màu riêng lẻ trong ảnh thành bộ màu. Xét cho cùng, gần như không thể đánh bại Mẹ Thiên nhiên khi nói đến sự kết hợp màu sắc hài hòa. Trong hướng dẫn này, chúng ta sẽ thực hiện mọi thứ chính xác như tôi vừa mô tả - lấy các mẫu màu từ một bức ảnh, đặt chúng vào bộ chọn màu và sau đó lưu chúng thành một tập hợp các mẫu màu riêng biệt. Chúng ta cũng sẽ xem cách khôi phục màu mặc định ban đầu của chương trình khi hoàn tất và cách tải tập hợp đã tạo khi chúng ta cần!
Dưới đây là bức ảnh mà tôi sẽ chụp các sắc thái màu riêng lẻ. Tôi muốn tạo một bộ mẫu màu có tên là "Lá mùa thu", vì vậy bức ảnh này sẽ rất hoàn hảo:
Hình ảnh lá mùa thu đầy màu sắc
Ở cuối hướng dẫn, chúng ta sẽ xem ví dụ về cách bạn có thể sử dụng các màu từ bộ màu mà chúng ta đã tạo để tạo ra một diện mạo hoàn toàn khác. Hãy bắt đầu.
Bước 1: Xóa tông màu hiện có khỏi bảng Swatches
Để tạo bộ tông màu của riêng bạn, trước tiên hãy xóa tất cả các mẫu tông màu được trình bày trong bảng Swatches. Đừng lo lắng, chúng sẽ không bị xóa vĩnh viễn vì chúng tôi sẽ trình bày sau. Chuyển sang bảng Swatches, theo mặc định được nhóm cùng với bảng Màu và Kiểu. Trừ khi trước đó bạn đã tải các bộ màu khác, bảng Swatches sẽ hiển thị các màu được đặt ban đầu trong chương trình theo mặc định:
Bảng Swatches hiển thị lựa chọn các mẫu màu mặc định
Thật không may, chương trình Photoshop Không có lệnh Remove All Color Swatches nên để loại bỏ tất cả các mẫu màu hiển thị trong bảng Swatches, chúng ta sẽ cần xóa từng mẫu màu theo cách thủ công. Để thực hiện việc này, khi nhấn Phím Alt(Win) / Option (Mac) di chuột qua mẫu màu ở bên trái góc trên cùng (« RGB đỏ"). Bạn sẽ thấy con trỏ có dạng hình chiếc kéo như thế nào:
Đã nhấn phím Alt(Thắng)/Tùy chọn(Mac) Di chuột qua mẫu màu đỏ ở góc trên cùng bên trái. con trỏchuộtTạicái nàysẽ chấp nhậnhình thứckéo
Sau đó, vẫn giữ phím Alt/Option, nhấp vào mẫu màu để xóa nó. Tiếp tục nhấn vào các mẫu màu khác để loại bỏ chúng. Bạn sẽ cần phải bấm vào tổng cộng 122 lần để xóa tất cả các mẫu, nhưng tùy thuộc vào tốc độ nhấp chuột của bạn, bạn sẽ không mất nhiều thời gian. Khi bạn hoàn tất việc xóa các mẫu màu, bảng Swatches của bạn sẽ hoàn toàn trống:
Sau khi xóa tất cả các mẫu màu mặc định, bảng Swatches trống
Bước 2: Chọn công cụ Eyedropper
Mở trong chương trình Hình ảnh Photoshop, nơi bạn muốn lấy các mẫu màu (nếu nó chưa mở), sau đó từ thanh công cụ, chọn công cụ Eyedropper hoặc nhấn I để sự lựa chọnnhanh dụng cụ:
Chọndụng cụ « Pipet»
Bước 3: Lấy mẫu màu đầu tiên từ ảnh
Sau khi chọn công cụ Eyedropper, di chuyển con trỏ chuột qua khu vực bạn muốn lấy mẫu màu, sau đó nhấp vào để lấy mẫu màu. Tôi muốn lấy mẫu màu vàng sáng từ một trong những chiếc lá ở đầu hình ảnh làm màu đầu tiên cho bộ ảnh trong tương lai của tôi:
Lấy một mẫu màu vàng tươi từ một trong những chiếc lá
Bạn có thể biết chính xác màu bạn nhận được từ hình ảnh bằng cách nhìn vào biểu tượng mẫu màu chính trên thanh công cụ:
Màu kết quả được hiển thị trên thanh công cụ dưới dạng màu chính
Lưu ý: Bạn có thể thấy việc thu thập màu dễ dàng hơn bằng cách giữ nút chuột khi di chuyển con trỏ vào bên trong hình ảnh (với Công cụ Eyedropper được chọn). Màu mà con trỏ dừng lại sẽ xuất hiện trên thanh công cụ dưới dạng màu chính và sẽ liên tục thay đổi khi bạn di chuyển chuột, cho bạn khả năng xem trước màu sắc trước khi nhận được một mẫu. Phương pháp nàyĐối với tôi, nó có vẻ thuận tiện hơn phương pháp nhấp chuột và chỉ sau đó mới xem chúng tôi nhận được mẫu gì. Nhả nút chuột khi bạn tìm thấy màu phù hợp với bộ mẫu màu của mình.
Bước 4: Thêm màu vào bảng Swatches
Khi bạn đã chọn được màu đầu tiên, hãy di chuyển con trỏ chuột đến vùng trống bên trong bảng Swatches. Bạn sẽ thấy con trỏ thay đổi thành hình thùng sơn. Nhấp vào bất kỳ vị trí nào trong vùng trống để chuyển đổi màu kết quả thành mẫu màu. Hành động này sẽ mở ra một hộp thoại yêu cầu bạn nhập tên cho mẫu màu của mình. Nếu bạn đang tạo một bộ mẫu màu cho khách hàng sử dụng và do đó yêu cầu các màu Pantone cụ thể, bạn nên đặt tên cho mẫu màu của mình một màu phù hợp với biểu đồ màu Pantone (ví dụ: Pantone Yellow 012 C). bạn đang tạo một bộ mẫu màu cho sử dụng riêng, sau đó đặt tên cho mẫu mà bạn chọn. Tôi sẽ đặt tên cho mẫu màu của mình là "Vàng":
Đặt cho mẫu màu mới của bạn một cái tên có ý nghĩa hoặc bạn có thể chọn không đặt tên cho nó.
Trên thực tế, không nhất thiết phải đặt tên cho các mẫu màu, vì vậy nếu tên của các mẫu màu không quan trọng với bạn thì hãy để tên mà chương trình đưa ra theo mặc định. Bấm OK để đóng hộp thoại sau khi bạn đã đặt tên cho mẫu màu. Nếu tôi nhìn vào bảng Swatches bây giờ, tôi có thể thấy rằng mẫu màu đầu tiên của tôi đã được thêm vào đó:
Mẫu màu Vàng được tạo của tôi xuất hiện trong bảng Swatches.
Bước 5: Tiếp tục thu thập màu sắc và tạo mẫu màu từ chúng
Tiếp tục thu thập các màu từ hình ảnh của bạn rồi nhấp vào vùng trống của bảng Swatches để lưu chúng dưới dạng các mẫu màu, đặt tên cho chúng nếu cần. Tôi đã thu thập thêm 10 màu từ hình ảnh và kết thúc với 11 mẫu màu mới trong bảng Swatches. Bạn có thể tạo bao nhiêu mẫu màu tùy thích:
Bước 6: Lưu các mẫu màu thành một bộ riêng biệt
Khi bạn hoàn tất việc thêm màu vào bảng Swatches và sẵn sàng lưu chúng dưới dạng một bộ mẫu màu riêng biệt, hãy nhấp vào mũi tên nhỏ bên phải ở góc trên bên phải của bảng Swatches để hiển thị menu bảng:
Nhấp vào mũi tên nhỏ bên phải để hiển thị menu bảng Swatches
Sau đó từ menu xuất hiện, chọn “Save Swatches”:
Nhập tên cho bộ mẫu mới
Tiếp theo, nhấp vào nút “Lưu” » (Save) để lưu một tập hợp mẫu. Chương trình sẽ mặc định lưu bộ mẫu màu vào cùng vị trí với các bộ mẫu màu khác được nạp vào chương trình nên lần sau bạn sẽ không phải tìm kiếm khắp máy tính thư mục mong muốn, bất cứ khi nào bạn muốn truy cập bất kỳ tập hợp mẫu nào đã tạo mà chúng ta sẽ xem xét tiếp theo.
Bước 7: Khôi phục mẫu màu mặc định
Chúng tôi đã lấy một số màu từ một hình ảnh, tạo các mẫu màu từ chúng và lưu các mẫu này dưới dạng riêng biệt. bộ mới mẫu. Nhưng điều gì sẽ xảy ra nếu chúng ta muốn sử dụng lại các mẫu màu mặc định mà chúng ta đã loại bỏ ở đầu hướng dẫn? Tất cả những gì chúng ta cần làm là nhấp vào mũi tên nhỏ bên phải ở góc trên bên phải của bảng Swatches một lần nữa để hiển thị lại menu bảng và chọn lệnh Khôi phục Swatches từ danh sách xuất hiện » (Đặt lại mẫu):
Để trả lại các mẫu màu mặc định cho bảng điều khiển, hãy chọn lệnh “Khôi phục các mẫu màu”
Trong hộp thoại tương ứng, chương trình sẽ hỏi bạn có cần thay thế các mẫu màu hiện tại bằng các mẫu màu mặc định hay không. Bạn có thể xác nhận rằng bạn muốn thay thế các mẫu màu hiện tại bằng các mẫu màu mặc định bằng cách nhấp vào OK hoặc bạn có thể thêm các mẫu màu mặc định vào các mẫu màu hiện tại mà không xóa chúng bằng cách nhấp vào nút Nối. Tôi sẽ nhấp vào OK và thay thế bộ mẫu màu Lá mùa thu của tôi bằng các mẫu màu mặc định:
Nhấn OK để khôi phục lại các mẫu màu mặc định
Sau hành động này, các mẫu màu mặc định lại xuất hiện trong bảng Swatches:
Các mẫu màu mặc định đã trở lại trong bảng Swatches
Bước 8: Tải lên bộ mẫu màu của riêng bạn
Lần tiếp theo bạn muốn sử dụng bộ mẫu màu mà bạn đã tạo, tất cả những gì bạn phải làm là nhấp lại vào mũi tên bên phải để hiển thị menu bảng Swatches. Nếu bạn nhìn vào cuối menu, bạn sẽ thấy một danh sách bộ bổ sung các mẫu màu có trong khoảnh khắc này có thể được tải về Hầu hết các bộ dụng cụ này đều có sẵn Photoshop, nhưng vì bộ mẫu màu của chúng tôi được lưu ở cùng nơi với các bộ dụng cụ khác nên bạn cũng có thể thấy nó trong danh sách các bộ dụng cụ. Bạn chỉ cần nhấp vào tên bộ của bạn để chọn nó. Chương trình sắp xếp các bộ mẫu màu theo thứ tự bảng chữ cái, vì vậy bộ Lá mùa thu của tôi đứng thứ hai từ trên xuống:
Bạn sẽ tìm thấy tất cả các bộ mẫu màu, bao gồm cả bộ mẫu màu của bạn, trong menu bảng Swatches. Nhấp chuộtTRÊNTêntuyển dụngVìcủa anh ấysự lựa chọn
Một lần nữa, chương trình sẽ hỏi bạn xem bạn có muốn thay thế các bộ hiện có bằng bộ mới hay thêm các mẫu màu mới vào các mẫu màu đã có trong bảng điều khiển hay không. Tôi sẽ nhấp vào OK để thay thế các mẫu màu mặc định bằng các mẫu màu đã tạo từ bộ Lá mùa thu:
Nhấp vào nút Thay thế để thay thế các mẫu màu mặc định trong bảng bằng các mẫu màu mới
Hành động này sẽ tải các mẫu màu mới của tôi từ bộ Lá mùa thu vào bảng Swatches, sẵn sàng để sử dụng tiếp:
Bộ mẫu màu của riêng tôi được tải vào bảng Swatches
Bước 9: Chọn Màu chính mới từ Bảng Swatches
Ưu điểm lớn của việc sử dụng mẫu màu là chúng có sẵn trước màu sắc nhất định. Điều này có nghĩa là đây là những màu chúng ta đã chọn (hoặc những màu mà chương trình đã chọn cho chúng ta, nếu bạn đang làm việc với các mẫu màu mặc định) và chúng ta không phải chọn những màu đó từ bộ chọn màu mỗi lần. Chúng ta cần họ. Để chọn bất kỳ màu nào trong bảng Swatches, chỉ cần di chuột qua mẫu màu mong muốn. Bạn sẽ thấy con trỏ thay đổi thành hình dạng ống nhỏ giọt. Sau đó, nhấp vào màu để chọn nó. Trong trường hợp của tôi, tôi sẽ chọn màu cam, thứ hai từ trái sang:
Để chọn màu bạn muốn, hãy nhấp vào mẫu màu của nó trong bảng Swatches.
Sau khi nhấp vào màu mong muốn, bạn có thể thấy màu này quả thực đã được chúng tôi chọn và hiển thị trên biểu tượng mẫu màu chính trên thanh công cụ:
Màu bạn đã nhấp vào trong bảng Swatches xuất hiện trong biểu tượng mẫu màu chính trên thanh công cụ
Bước 10: Chọn Màu nền mới từ Bảng Swatches
Để chọn một màu cụ thể như màu nền, nhấn và giữ phím Điều khiển(Thắng) / Yêu cầu(Mac) và đồng thời nhấp vào màu mong muốn trong bảng Swatches. Trong trường hợp của tôi, khi nhấn phím Điều khiển/Yêu cầu Mình sẽ click vào màu đỏ sẫm:
Khi nhấn phím Ctrl(Thắng)/Lệnh(Mac) Nhấp vào màu bạn muốn trong bảng Swatches để làm màu nền cho bạn
Bây giờ, nếu tôi nhìn lại thanh công cụ, tôi có thể thấy biểu tượng mẫu màu nền bây giờ có màu đỏ sẫm mà tôi vừa chọn:
Màu bạn đã chọn trong bảng Swatches xuất hiện trong biểu tượng mẫu màu nền trên thanh công cụ
Bây giờ tôi có thể sử dụng các màu trong bộ Lá mùa thu theo cách tôi muốn, bất cứ khi nào tôi muốn! Dưới đây là những dòng của bài thơ mà tôi đã tạo kiểu bằng cách sử dụng các màu từ bộ mẫu màu đã tạo và cọ Scattered Maple Leaves mặc định trong Photoshop:
Một bài thơ được thiết kế bằng cách sử dụng màu sắc từ bộ mẫu màu Lá mùa thu do tôi tạo.
Và bây giờ chúng ta đã hoàn tất! Chúng tôi đã học cách dễ dàng tạo các mẫu màu của riêng bạn và toàn bộ bộ mẫu màu trong Photoshop!
Dịch: Ksenia Rudenko
Ekaterina Malyarova
Làm việc với màu sắc thường là một quá trình khó khăn và tốn thời gian. Trở lại thời Trung cổ, các họa sĩ vĩ đại đã cố gắng tìm ra sự kết hợp màu sắc lý tưởng. Ngày nay, không chỉ các nghệ sĩ mà ngay cả các nhà thiết kế, tạo mẫu, trang điểm, nhiếp ảnh gia,… cũng làm như vậy.
Mọi người có xu hướng liên kết mỗi màu với một thứ gì đó, tạo cho nó những đặc tính không thay đổi. Ví dụ: chúng tôi nói "biển xanh", mặc dù trên thực tế, sắc thái của nó có thể thay đổi từ xanh nhạt đến xanh xám.
Việc giải thích màu sắc không chỉ phụ thuộc vào nhận thức bằng mắt của chúng ta mà còn phụ thuộc vào tâm trạng của chúng ta. Về vấn đề này, điều rất quan trọng là các màu sắc kết hợp với nhau thoạt nhìn trông hài hòa.
Có rất nhiều tài nguyên trên Internet có thể giúp bạn xác định màu nào tạo nên sự hài hòa về màu sắc. Họ đơn giản hóa rất nhiều quá trình lựa chọn bảng màu phù hợp. Chúng tôi trình bày cho bạn mười tài nguyên cần thiết để làm việc với màu sắc.
1. Bộ làm mát Adobe
Adobe Kuler là một trong những tài nguyên nổi tiếng nhất để làm việc với màu sắc. Chứa một thư viện khổng lồ các chủ đề màu sắc làm sẵn. Bạn có thể chọn bất kỳ trong số chúng hoặc bằng cách tải lên hình ảnh bạn thích, hãy tạo chủ đề màu của riêng bạn. Tất cả các chủ đề có thể được sắp xếp theo xếp hạng, mức độ phổ biến và tính mới. Mỗi chủ đề bao gồm năm màu được kết hợp với nhau theo một trong các quy tắc hài hòa màu sắc.
Công việc chính diễn ra trong bánh xe màu sắc. Sự ngăn cách giữa các màu sắc thể hiện rõ nét sự kết hợp màu sắc theo quy luật hài hòa. Bằng cách di chuyển các dải phân cách xung quanh vòng tròn theo các hướng khác nhau, bạn có thể đạt được các màu sắc, màu sắc, độ bão hòa và độ sáng khác nhau.
Một lợi thế không thể nghi ngờ của Adobe Kuler là sự hiện diện của plugin của nó trong biên tập đồ họa Adobe Photoshop. Nghĩa là, bạn có thể làm việc với Adobe Kuler trực tuyến hoặc sử dụng chương trình Adobe Photoshop trên máy tính của mình.
2.Sơ đồ màu
ColorScheme.ru là một tài nguyên thú vị khác để chọn màu và soạn chủ đề màu. Công việc chính cũng được thực hiện trong bánh xe màu sắc. Bằng cách chọn một màu, bạn có thể có sáu tùy chọn để kết hợp hài hòa với màu này: đơn sắc, tương phản, bộ ba, bộ tứ, tương tự và tương tự có điểm nhấn. Chủ đề màu kết quả có thể được điều chỉnh về độ sáng, độ bão hòa, độ tương phản, điểm sáng, bóng và các thông số khác.
Ngoài bánh xe màu, trên tài nguyên này, bạn sẽ tìm thấy rất nhiều tài liệu về lý thuyết màu sắc, công cụ chuyển đổi màu từ mô hình màu này sang mô hình màu khác và thậm chí cả một cuốn sách tham khảo độc đáo chứa tên của khoảng một nghìn sắc thái, cũng như các thông số để sử dụng trong thiết kế web.
3.BigHugeLabs
BigHugeLabs là một tài nguyên khác có dịch vụ Trình tạo bảng màu cho phép bạn chọn bảng màu từ hình ảnh. Bạn có thể tải hình ảnh lên từ máy tính hoặc trực tiếp từ mạng xã hội (Facebook, Instagram).
Sau khi tải xuống, hãy nhấp vào “Tạo bảng màu” và nhận bảng màu. Trong trường hợp này, mỗi màu trong bảng màu sẽ được gán một tên và một mã đặc biệt. Bạn có thể tải xuống bảng màu kết quả ở định dạng ASE và sử dụng nó sau để làm việc trong Adobe Photoshop.
4. Hình ảnh
Pictacificent.com là một tài nguyên cho phép bạn tải hình ảnh lên và lấy bảng màu của nó. Mặc dù dễ sử dụng nhưng làm việc trong Pictacificent rất thuận tiện vì nó tương thích với các dịch vụ màu khác: Kuler và COLORLovers. Vì vậy, ngoài sơ đồ hình ảnh chính, bạn sẽ nhận được sơ đồ do các dịch vụ này biên soạn.
5. Người yêu thích MÀU SẮC
COLOURlovers là một tài nguyên hữu ích khác để làm việc với màu sắc, được cả nhà thiết kế chuyên nghiệp và người mới bắt đầu nghiệp dư sử dụng. Thư viện COLOURlovers chứa khoảng 2 triệu bảng màu được tạo bởi người dùng từ khắp nơi trên thế giới.
Bạn cũng có thể tạo bảng màu của riêng mình bằng cách tải lên bất kỳ hình ảnh nào. Ngoài việc tạo bảng màu, bạn có thể sử dụng các mẫu và màu riêng lẻ. Bạn có thể thêm hình dạng và đường vào mẫu các loại khác nhau và kích thước, cuối cùng tô màu mẫu theo ý thích của bạn.
MÀU SẮC đã bão hòa thông tin hữu ích. Tại đây bạn có thể tìm thấy những đánh giá, tin tức mới nhất, các cộng đồng và nhóm khác nhau thảo luận về cách làm việc với màu sắc.
6. Combo màu sắc
ColorCombos là tài nguyên được tạo riêng cho các nhà thiết kế và phát triển web. Nó có thể tự tin được gọi là niết bàn màu sắc cho những ai muốn lựa chọn và thử nghiệm các cách kết hợp màu sắc khác nhau.
Bạn có thể sử dụng các chủ đề màu có sẵn trong thư viện màu. Dưới mỗi chủ đề màu sắc đều có một mã html cần thiết khi mã hóa một trang web. Nếu cần, bạn có thể tạo chủ đề màu của riêng mình bằng cách chuyển đến tab Combo Test.
Ngoài việc tạo chủ đề màu sắc, tài nguyên này còn có rất nhiều thông tin hữu ích cho những nhà thiết kế mới bắt đầu, từ ý nghĩa của các sắc thái khác nhau cho đến bánh xe màu sắc.
7.ColorExplorer
ColorExplorer là một nguồn tài nguyên đa chức năng có khả năng tuyệt vời để làm việc với màu sắc. Nó được thiết kế đặc biệt cho nhà thiết kế chuyên nghiệp. Bộ công cụ của tài nguyên này cho phép bạn không chỉ chọn màu và tạo bảng màu mà còn nghiên cứu các thư viện màu phổ biến, kết hợp thư viện, xuất bảng màu sang các chương trình như Adobe Photoshop, Illustrator, InDesign, v.v.
Để lấy được theme màu của hình ảnh ưng ý bạn nên upload qua tab Màu ảnh Nhập khẩu. Bạn sẽ thấy tất cả các màu và sắc thái (từ 3 đến 50) có sẵn trong hình ảnh này.
Thật thú vị khi làm việc trong tab Color Matching - đây là một công cụ trộn màu cho phép bạn thay đổi các thành phần màu bằng cách sử dụng các giá trị RGB và HSL. Sau khi chọn bảng màu cần thiết, bạn có thể thêm nó vào bảng màu hiện có hoặc thay thế và lưu nó vào Bảng màu của tôi như một tùy chọn.
8. ColoRotate
ColoRotate là một nguồn tài nguyên độc đáo để làm việc với màu sắc. Nó khác với những cái khác ở chỗ nó có ba chiều mô hình màuở dạng hình nón và khả năng tạo ra hơn năm màu trong một sơ đồ.
Màu sắc dường như trở nên sống động vì ở dạng thể tích, chúng ta hình dung chúng một cách khác nhau. Vì vậy, sử dụng ColoRotate, bạn có thể thấy ngay tính chất đa chiều của màu sắc và mối quan hệ giữa chúng. Bạn có thể chỉnh sửa màu sắc ở dạng 3D, trộn chúng lại với nhau, trích xuất chúng từ hình ảnh, thay đổi giá trị trong các không gian màu khác nhau và tạo ra các phối màu hài hòa.
ColoRotate tự hoạt động tốt hoặc kết hợp với Adobe Photoshop. Nó cũng có sẵn dưới dạng một ứng dụng iPad.
9. ColRD
ColRD là một nguồn tài nguyên tươi sáng và đầy màu sắc để làm việc với màu sắc. Tại đây, bạn sẽ tìm thấy một thư viện khổng lồ về màu sắc và sắc thái, bảng màu, độ dốc, bản in do những người dùng khác biên soạn. Đây là nguồn cảm hứng vô tận tạo nên một bữa tiệc thực sự cho cảm nhận về màu sắc.
Bạn có thể chuyển đến tab Tạo và tạo màu, bảng màu hoặc độ chuyển màu của riêng mình bằng cách thay đổi giá trị RGB và HSL. Hoặc bằng cách tải xuống hình ảnh đã hoàn thành, chia nó thành các màu và sắc thái, sau đó sử dụng chúng để tạo ra bảng màu mong muốn.
10. Yandex
Và cuối cùng, cách dễ nhất để làm việc với màu sắc là nhập tên của nó vào Yandex. Kết quả của quá trình tìm kiếm, ở đầu trang, bạn sẽ thấy một bảng chứa màu bạn cần và các sắc thái liền kề với nó. Ngoài ra, Yandex cho thấy mã thập lục phân màu sắc, các thông số của nó trong RGB và HSV.
Theo cách tương tự, chỉ biết mã màu, bạn có thể tìm kiếm tên của nó trong Yandex và xem nó trông như thế nào. Tất nhiên, bạn có thể xác định màu bằng mã trong bất kỳ trình chỉnh sửa đồ họa nào, nhưng đừng quên rằng việc này sẽ mất nhiều thời gian hơn.
Sự tương tác của con người với máy tính chủ yếu dựa vào các yếu tố giao diện đồ họa và màu sắc đóng vai trò quan trọng trong quá trình này. Như Pierre Bonnard đã từng nói: “Màu sắc không chỉ tạo nên một thiết kế đẹp mắt mà còn củng cố nó”.
Thiết kế Sản phẩm mới, các nhà thiết kế thường gặp khó khăn trong việc tạo ra một bảng màu vì có vô số cách kết hợp có thể có. Trong bài viết này, chúng tôi sẽ xem xét tám quy tắc cơ bản có thể giúp bạn đưa ra lựa chọn.
1. Giới hạn số lượng màu sắc
Khi thêm màu sắc vào một thiết kế, điều cần thiết là phải duy trì sự cân bằng; và càng có nhiều thì càng khó đạt được điều này. Kết quả sẽ tốt hơn nếu bạn tuân thủ quy tắc “tối đa ba màu cơ bản” khi tạo bảng màu. Trong một nghiên cứu của Đại học Toronto về cách mọi người sử dụng Adobe Color CC, phần lớn người được hỏi cho biết họ thích sự kết hợp đơn giản dựa trên hai hoặc ba màu.Nếu bạn cần thêm màu ngoài những màu đã được thêm vào bảng màu, hãy sử dụng các sắc thái khác nhau.
Cách xây dựng một bảng màu
Nhưng làm thế nào để chọn được hai hoặc ba màu này? Bánh xe màu sẽ giúp bạn ở đây.
Vòng tròn gồm 12 màu này là một trong những vật liệu chính để tạo bảng màu.
tồn tại toàn bộ dòng làm sẵn mạch tiêu chuẩn, điều này có thể giúp quá trình tạo bảng màu trở nên dễ dàng hơn, đặc biệt đối với người mới bắt đầu:
Bảng màu đơn
Phối màu đơn để lại ấn tượng rất dễ chịu (đặc biệt nếu được làm bằng các sắc thái của xanh lam hoặc xanh lục). Như bạn thấy trên Ví dụ về Facebook, bảng màu trông rất gọn gàng và trang nhã.
Bảng màu đơn là dễ sử dụng nhất: chúng chỉ chứa một màu với các biến thể khác nhau về màu sắc và độ bão hòa. Tất cả các sắc thái của màu sắc kết hợp tốt với nhau và tạo ra hiệu ứng êm dịu.
Bảng màu có liên quan
Các màu liên quan là những màu nằm cạnh nhau trên vòng tròn.
Các thang đo như vậy được xây dựng trên cơ sở các màu liên quan: một trong số chúng trở thành màu tham chiếu và phần còn lại được sử dụng để làm phong phú bảng màu. Mọi thứ ở đây cũng khá đơn giản, nhưng mẹo là hãy chọn độ sáng phù hợp của màu sắc được sử dụng - nó sẽ thiết lập tông màu cho toàn bộ gam màu. Ví dụ: Clear, tiện ích danh sách việc cần làm được điều khiển bằng cử chỉ, sử dụng màu sắc sặc sỡ để thu hút sự chú ý một cách trực quan đến các nhiệm vụ mà người dùng hiện đang thực hiện. Ngược lại, ứng dụng thiền Calm lại ưu tiên cặp màu liên quan “xanh lam + xanh lục” để tạo cảm giác bình yên và tĩnh lặng cho người dùng.
Bảng màu bổ sung
Sử dụng các màu bổ sung (đối lập), bạn có thể dễ dàng làm nổi bật một phần tử một cách trực quan.
Những giống đơn giản nhất thuộc loại này gồm hai màu tương phản rõ rệt với nhau. Đề án này cho phép bạn thu hút sự chú ý của người nhìn. Khi sử dụng bảng màu bổ sung, bạn cần quyết định màu chính và sử dụng màu phụ để làm nổi bật các yếu tố chính. Ví dụ, khi mắt người nhìn thấy một vật thể được sơn bằng các sắc thái xanh lục khác nhau, một nét màu đỏ sẽ nổi bật rất rõ ràng trên nền của nó.
Bảng màu tùy chỉnh
Những vệt màu trên nền màu xám- một cách tuyệt vời để thu hút sự chú ý. Thiết kế màu trắng và màu xám với các điểm nhấn màu xanh lam, chúng ta có thể thấy trên trang web Dropbox.
Tạo bảng màu của riêng bạn không khó như nhiều người nghĩ. Có một phương pháp rất đơn giản mà bạn có thể sử dụng để có được một lựa chọn tuyệt vời: chỉ cần thêm điểm nhấn tươi sáng theo tông màu trung tính (tức là màu thường được gọi là đen và trắng). Bảng màu kết quả sẽ trông rất ấn tượng.
2. Tìm nguồn cảm hứng từ thiên nhiên
Sự kết hợp màu sắc tốt nhất là những kết hợp chúng ta lấy từ thế giới tự nhiên. Tại sao? Bởi vì trong mắt chúng ta, chúng trông tự nhiên nhất. Chỉ cần nhìn xung quanh là đủ để có được ý tưởng. Nếu ở Cuộc sống hàng ngày bạn nhận thấy một số sắc thái đặc biệt đẹp hoặc bắt mắt, hãy thử tạo bảng màu dựa trên nó. Chỉ cần chụp ảnh phong cảnh đẹp và chọn màu sắc cho bảng màu của bạn từ chúng.
Thiên nhiên tạo ra sự kết hợp màu sắc tốt nhất. Bức ảnh này có thể tạo ra một bảng màu tuyệt vời.
3. Cố gắng tuân thủ tỷ lệ 6/3/1
Khi biên soạn bảng màu, bạn cũng sẽ thấy quy tắc luôn hữu ích từ các nhà thiết kế nội thất: tỷ lệ 6/3/1 cho phép bạn tạo cân bằng hoàn hảo hoa ở mọi không gian.Việc biến khái niệm này thành hiện thực rất đơn giản: màu chính của bạn phải là 60%, màu phụ của bạn phải là 30% và 10% nên được phân bổ cho các điểm nhấn. Ý tưởng chính là màu bổ sung sẽ đóng vai trò hỗ trợ cho màu chính, nhưng đồng thời có thể dễ dàng phân biệt với màu nền của nó. Màu sắc để làm nổi bật trực quan các khu vực riêng lẻ chiếm 10% màn hình - bạn có thể sử dụng màu này cho lời kêu gọi hành động hoặc bất kỳ yếu tố nào khác.
4. Thiết kế màu đen trắng trước tiên.
Chơi với màu sắc thật thú vị. Không có gì đáng ngạc nhiên khi công việc trong một dự án thường bắt đầu bằng việc lựa chọn bảng màu. Việc tìm ra cách phối màu hoàn hảo là bước đầu tiên của bạn thật hấp dẫn, nhưng tôi khuyến khích bạn nên từ bỏ chính mình và thiết kế giao diện của mình theo thang độ xám trước tiên. Tạo một nguyên mẫu đen trắng của ứng dụng và sử dụng nó làm đường cơ sở. Nếu không có màu sắc, bạn sẽ buộc phải tập trung vào khoảng cách và vị trí của các phần tử.Giới thiệu màu sắc cuối cùng và rất có chủ ý.
Một điểm sáng trên nền xám - đơn giản và phương pháp hiệu quả hướng ánh nhìn của bạn đến đối tượng mong muốn.
5. Tránh màu đen
Trong thực tế, màu đen thực tế không bao giờ được tìm thấy. Tất cả các vật thể “đen” mà chúng ta bắt gặp trên thế giới xung quanh đều phản chiếu một lượng ánh sáng nhất định, điều đó có nghĩa là chúng không còn màu đen nữa mà có màu xám đen. Ví dụ, nhựa đường tươi không có màu đen chút nào. Và cả những cái bóng nữa.Nếu bạn thêm màu đen vào tập hợp các màu đã được lựa chọn cẩn thận của mình, nó sẽ “đè bẹp” tất cả những màu còn lại. Nó gây ấn tượng chính xác bởi vì nó không được coi là tự nhiên. Nhiều ứng dụng chúng ta sử dụng hàng ngày thêm màu được cho là đen vào giao diện nhưng thực ra lại có màu xám đậm. Ví dụ, nhất màu tốiở thanh trên cùng của ứng dụng Asos - không phải #000000 mà là #242424. Vì vậy, đừng quên điều chỉnh độ bão hòa.
6. Xây dựng hệ thống phân cấp hình ảnh bằng độ tương phản
Màu sắc là công cụ hướng mắt đi theo con đường mong muốn. Bạn càng cần thu hút sự chú ý đến một chủ đề thì bạn càng nên dựa vào độ tương phản. Thường xuyên độ tương phản caođược lưu nhiều nhất Thông tin quan trọng hoặc các yếu tố chính. Nếu bạn muốn người dùng chú ý đến thứ gì đó hoặc nhấp vào thứ gì đó, bạn cần nó phải bắt mắt!
Độ tương phản làm cho một vùng của màn hình khác biệt rõ rệt so với phần còn lại.
7. Sử dụng màu sắc để tác động đến trạng thái cảm xúc của người dùng
Không có gì bí mật khi màu sắc thể hiện những ý tưởng nhất định và có thể ảnh hưởng đến tâm trạng của mọi người. Những ý tưởng này sẽ ảnh hưởng trực tiếp đến cách mọi người cảm nhận về sản phẩm của bạn.Khi tạo bảng màu cho giao diện, chỉ nghĩ xem mọi thứ sẽ trông như thế nào là chưa đủ - bạn còn cần phải quan tâm đến cách nhìn nhận nó. Màu sắc bạn chọn có thể hỗ trợ hoặc mâu thuẫn với hình ảnh thương hiệu bạn đang cố gắng tạo ra. Để giúp bạn bắt đầu, tôi đã đưa ra một lời nhắc nhở nhỏ cho bạn về sự liên kết cơ bản của từng màu sắc (trong văn hóa phương Tây).
Đỏ, Cam, Vàng
Màu đỏ(đam mê, quyền lực, nguy hiểm, ý nghĩa): Màu đỏ là màu rất kích thích. Nó để lại cảm giác về tốc độ, sức mạnh và gắn liền với năng lượng. Người ta đã chứng minh rằng nó ảnh hưởng đến chúng ta ngay cả ở mức độ sinh lý, đẩy nhanh quá trình trao đổi chất và lưu thông máu. Đây là lý do tại sao mọi người thậm chí còn đọc nhanh hơn và to hơn khi nhìn thấy màu đỏ. Nó rất hữu ích khi sử dụng để nhanh chóng thu hút sự chú ý của người dùng hoặc làm nổi bật một yếu tố cụ thể mà họ cần chú ý.Quả cam(nghịch ngợm, vui vẻ, hấp dẫn, rẻ tiền): Màu cam - ấm áp và màu sáng. Nó tạo ra một bầu không khí vui vẻ và mang lại cho người dùng cảm giác ấm áp và thoải mái. Một số nhà nghiên cứu cho rằng màu cam thể hiện ý tưởng về sự rẻ tiền.
Màu vàng(vui vẻ, chào đón, kích thích, thu hút sự chú ý): Màu vàng là màu cực kỳ linh hoạt khi kết hợp các sắc thái với những nghĩa khác nhau. Vì vậy, màu vàng nhạt gắn liền với mặt trời, nghĩa là với điều gì đó tích cực và thân thiện. Nhiều tông màu bão hòa hơn để lại ấn tượng về thời cổ đại và sự hoành tráng. Chúng thường được sử dụng khi bạn cần thể hiện điều gì đó không thể lay chuyển và khôn ngoan.
Xanh lục, xanh lam, tím
Màu xanh lá(tự nhiên, an toàn, trong lành): Màu xanh lá cây thể hiện ý tưởng hòa nhập với thế giới bên ngoài và gần gũi với thiên nhiên. Trong tâm trí chúng ta, nó cũng gắn liền với sự tăng trưởng, do đó nó được sử dụng rộng rãi trong kinh doanh. Màu xanh lá cây cũng có thể gắn liền với thái độ đạo đức.Màu xanh da trời(bình tĩnh, có trách nhiệm, đáng tin cậy, đáng tin cậy): Màu xanh da trời thường gắn liền với cảm giác bình yên và tĩnh lặng, cũng như sức mạnh và độ tin cậy, những điều này thường mang lại cảm giác chuyên nghiệp và truyền cảm hứng tin cậy. Blue cho chúng tôi biết rằng chúng tôi được an toàn. Vì lý do này, nó được các ngân hàng và công ty CNTT tích cực sử dụng. Nhiều gã khổng lồ trên thị trường mạng xã hội (Facebook, Twitter, LinkedIn) cũng có màu xanh lam trong giao diện của họ.
màu tím(sang trọng, huyền bí, lãng mạn, tâm linh): Màu tím từ lâu đã được coi là màu gắn liền với những người mang dòng máu hoàng gia và gợi ý rằng sản phẩm này thuộc dòng cao cấp.
Hồng, Đen, Trắng, Xám
Hồng(nữ tính, ngây thơ, tuổi trẻ): Sự liên tưởng được biết đến rộng rãi nhất với hồng- đây là nữ tính.Đen(mạnh mẽ, tinh tế, bí ẩn, thách thức): Màu đen thu hút sự chú ý nhanh hơn bất kỳ màu nào khác, kể cả màu đỏ. Theo quy định, nó chỉ được sử dụng cho văn bản và dấu.
Trắng(tinh khiết, sức khỏe, hồn nhiên, đức hạnh): Màu trắng làm nổi bật các màu xung quanh nên thường được chọn làm màu bổ sung.
Xám(trung tính, trang trọng, tinh tế, vô trùng): Màu xám để lại cảm giác trung tính và có thể mang những đặc điểm của cả màu đen và trắng. Đóng vai trò là màu chủ đạo, nó tạo ra một bầu không khí trang trọng.
Điều quan trọng cần lưu ý ở đây là ý nghĩa của màu sắc có thể khác nhau rất nhiều tùy thuộc vào hoàn cảnh và bối cảnh văn hóa. Để tìm hiểu sâu hơn về chủ đề này, hãy đọc bài viết Biểu tượng của màu sắc và ý nghĩa màu sắc trên khắp thế giới.
8. Làm cho thiết kế có thể truy cập được
Khả năng tiếp cận là một trong những yếu tố quan trọng cần cân nhắc khi sử dụng màu sắc trong thiết kế. Ngày nay, thực phẩm nên có sẵn cho bất kỳ ai và tất cả mọi người, bất kể khả năng thể chất.Đừng sử dụng màu sắc làm chỉ báo duy nhất
Khoảng 8% nam giới và 0,5% phụ nữ mắc một số dạng mù màu - tức là cứ 12 nam giới và 200 nữ giới. Có nhiều loại khác nhau, nhưng phổ biến nhất là mù đỏ và mù xanh. Người mù màu thường gặp khó khăn trong việc phân biệt sắc thái của hai màu.
Từ trái sang phải: bánh xe màu có mắt người bình thường - vòng tròn màu qua mắt của người mắc chứng mù màu loại deuteranopic - Bánh xe màu qua mắt của người mắc loại mù màu protanopic.
Bởi vì bệnh mù màu có nhiều dạng (một số người không thể phân biệt được màu đỏ và xanh lá cây, một số khác không thể phân biệt được màu vàng và xanh lam, và một số người nhìn thấy mọi thứ bằng sắc thái của màu xám), cần phải sử dụng nhiều điểm đánh dấu trực quan cùng một lúc để chỉ ra điểm mấu chốt nhất. điều kiện trong sản phẩm. Ngoài màu sắc, bạn cũng có thể sử dụng kiểu, ký hiệu, mẫu, họa tiết và văn bản để mô tả hành động hoặc nội dung.
Tránh truyền tải thông tin qua màu đỏ và xanh lá cây - điều này sẽ vô cùng bất tiện cho những người không phân biệt được giữa chúng.
Làm cho văn bản tương phản nhất có thể
Độ tương phản là một lĩnh vực của lý thuyết màu sắc rất quan trọng đối với khả năng sử dụng. Khi chọn màu cho văn bản, hãy nhớ rằng việc chồng chéo hai màu có độ tương phản thấp sẽ khiến chữ rất khó đọc.
Độ tương phản thấp có thể là một đòn chí mạng đối với khả năng sử dụng.
Theo dõi độ tương phản để đảm bảo màu văn bản đủ nổi bật so với màu nền để ngay cả người mù màu hoặc thị lực rất kém cũng có thể phân biệt được các từ. Tỷ lệ tương phản là một biểu thức toán học cho thấy màu này khác với màu khác như thế nào (thường được viết là 1:1, 21:1). Làm sao sự khác biệt hơn giữa các số thì càng có nhiều màu sắc khác nhau về độ sáng. W3C khuyến nghị các tỷ lệ sau giữa độ sáng của văn bản và hình ảnh:
- Nếu văn bản nhỏ thì tỷ lệ ít nhất phải là 4,5:1;
- Đối với văn bản lớn (tức là 14 pt trở lên đối với in đậm, 18 pt trở lên - đối với thông thường) tỷ lệ tối ưu là 3:1 trở lên.
Phần thưởng: Các công cụ cần thiết cho nhà thiết kế UX
Để giúp bạn dễ dàng hơn, tôi cũng cung cấp một danh sách Công cụ hữu íchđể chọn màu sắc.Adobe Color CC
Adobe Color CC (trước đây gọi là Kuler) là một giải pháp tuyệt vời để tìm kiếm, chỉnh sửa và tạo bảng màu. Bạn có thể sửa đổi từng màu có trong phạm vi hoặc đặt màu đó làm màu tham chiếu chỉ bằng vài cú nhấp chuột. Các bảng màu làm sẵn có thể được lưu và thêm vào thư viện; Ngoài ra, nó còn được công bố rộng rãi trên trang web một số lượng lớn phối màu được tạo bởi các thành viên khác trong cộng đồng.
Dribbble Tìm kiếm theo màu sắc
Nếu bạn muốn xem các nhà thiết kế khác sử dụng một màu cụ thể như thế nào trong thiết kế của họ, hãy truy cập dribbble.com/colors và chọn màu bạn muốn.
Vật liệu thiết kế
Hướng dẫn từ Vật liệu thiết kế cung cấp nhiều loại màu sắc mà bạn có thể sử dụng để minh họa hoặc chọn màu thương hiệu. Tất cả các màu sắc mà nó bao phủ đều được chọn sao cho chúng sẽ hài hòa với nhau trong bất kỳ sự kết hợp nào.
Colorzilla
Colorzilla - tiện ích mở rộng cho trình duyệt Google Chrome và Mozilla Firefox, bao gồm rất nhiều công cụ để làm việc với màu sắc, bao gồm ống nhỏ mắt có khả năng thu màu, máy tạo màu Độ dốc CSS và chức năng xem bảng màu.
làm mát.co
Coolors.co là một công cụ mạnh mẽ để xây dựng bảng màu gồm nhiều màu. Bạn có thể chỉ cần khóa màu bạn muốn và nhấn phím cách để có phạm vi mới. Điều đặc biệt thú vị là ở đây bạn không bị giới hạn chỉ một tùy chọn - bạn có thể tạo các bảng màu khác nhau bằng cách thay đổi các tham số ngay từ đầu.
Tôi đặc biệt thích tạo bảng màu bằng ảnh. Công cụ này cho phép bạn tải ảnh lên và xây dựng bảng màu có trong đó.
Trình mô phỏng mù màu trong Adobe Photoshop
Photoshop cho phép bạn kiểm tra mức độ phổ biến của thiết kế của bạn. Chỉ cần chuyển đến tab Xem > Thiết lập bằng chứng và chọn loại bạn quan tâm (loại Protanopia hoặc loại Deuteranopia).
Trình mô phỏng tầm nhìn NoCoffee cho Chrome
Để đảm bảo mọi người đều có thể tiếp cận thiết kế của bạn, bạn nên tự trải nghiệm chứng mù màu trong quá trình thiết kế. NoCoffee Vision Simulator cung cấp khả năng tạo mô phỏng cho bất kỳ giao diện nào hiển thị giao diện trông như thế nào đối với những người bị mù màu hoặc thị lực kém. Ví dụ: nếu bạn áp dụng bộ lọc "Deuteranopia" trong tab "Thiếu màu", bạn sẽ thấy trang web có thang độ xám. Điều này sẽ giúp bạn điều chỉnh giao diện cho phù hợp với nhu cầu của những người có vấn đề về mắt.
Màu sắc là một trong những thứ công cụ mạnh mẽ trong kho vũ khí của nhà thiết kế, nhưng để làm chủ được nó không phải là điều dễ dàng. Tôi hy vọng các quy tắc tôi đã liệt kê sẽ hữu ích cho những người mới bắt đầu đặt nền móng. Bước tiếp theo là thực hành: xét cho cùng, cách duy nhất để tạo bảng màu tốt hơn là làm điều đó càng nhiều càng tốt.
