Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách phối màu sáng và tối chuẩn trong thiết kế

Chủ đề thuộc danh mục 'Kinh nghiệm / Kiến thức dành cho designer' được đăng bởi Người Chia Sẻ, 26/3/16.

Lượt xem: 18,233

  1. Người Chia Sẻ Share to be shared!

    Bạn làm thiết kế và đang gặp rắc rối trong việc phối màu? Phối màu như nào mới đúng chuẩn? Bài viết dưới đây chắc chắn sẽ giúp ích rất nhiều cho bạn.

    Chọn đúng màu là một bước quan trọng để tạo nên một tác phẩm đẹp. Màu sắc phù hợp sẽ giúp cho thiết kế của bạn trở nên sinh động và thu hút hơn. Để làm được điều này trước hết bạn phải nắm vững được những điều sau:

    1. Mẹo nhanh chọn đúng màu

    Để chọn đúng màu, trước hết bạn nên chọn đúng 2 màu:
    - Màu trung tính (neutral color): bao gồm màu xám, đen, trắng hoặc nhóm màu be/nâu
    - Màu nhấn (accent color): những màu mà bạn thích, từ aquamarine tới màu xanh zucchini.
    Từ 2 sự lựa chọn này, bạn có thể tha hồ sáng tạo nên hàng chục màu sắc chỉ đơn giản bằng cách pha trộn thêm màu trắng hoặc màu đen.

    2. Hiểu thế nào về sắc độ sáng(tint) và sắc độ tối (shade)?

    Sắc độ sáng và sắc độ tối là những thuật ngữ mĩ thuật trong việc điều chỉnh độ sáng và độ tối của một màu sắc bằng việc thêm màu trắng hoặc màu đen vào một màu cơ bản.

    dmO1MQA.jpg
    Cách phối màu sáng và tối

    Lợi ích của nó là gì?

    Trước hết, nó giúp đơn giản hơn trong việc chọn màu của bạn. Bạn tối giản sự lựa chọn hơn và không lo về việc thiết kế của bạn sẽ bị rối mắt.

    Một lợi ích khác đó là việc dụng sắc màu sáng và sắc màu tối sẽ làm cho bảng màu của bạn rõ ràng và đồng bộ hơn.
    Để hiểu hơn, bạn có thể xem ví dụ từ việc branding của Whitenet Black. Bằng việc dùng bảng màu xanh và xám (chú ý độ trắng và đen cho mỗi màu tạo ra để tạo sự tương phản) đã cho ra một bảng màu mới linh hoạt hơn.

    GgmujE2.jpg
    Bảng màu mới từ việc branding của Whitenet Black

    Tuy nhiên, nếu chỉ sử dụng mắt thường thì sẽ thật khó để chọn độ sáng và tối cho bảng màu. Dù vậy, hiện nay có rất nhiều công cụ có thể hỗ trợ, dưới đây là một số gợi ý tốt nhất cho bạn:

    Colour code

    Đơn giản nhất là tạo bảng màu với Colour Code. Bạn chỉ cần chọn một cách phối màu trên (monochrome, monochrome & xám nhạt hoặc monochrome & xám đậm đây là lựa chọn chuẩn nhất khi tạo bảng dựa vào màu sáng và tối). Sau đó kéo chuột tới khi thấy được cách phối màu mà bạn ưng ý.

    RDTYWYe.jpg
    Cách tạo bảng màu với Colour code

    Material Palette

    Material Palette sẽ phức tạp hơn một chút nhưng nó cũng rất tiện dụng. Material Palette sẽ đưa ra cho bạn một số màu sáng, thêm một số màu trung tính và chỉ dẫn bạn để chọn 2 màu. Với việc này, bạn sẽ được cung cấp tự dộng một bảng màu từ lựa chọn đầu tiên ( màu hướng sáng và hướng tối), sau đó là chọn màu trung tính và màu nhấn.

    Tv5Q3ab.jpg
    Cách tạo bảng màu với Material Palette

    Paletton

    Chế độ đơn sắc của Paletton tự động phân loại ra một bảng màu hướng sáng và hướng tối từ một màu gốc mà bạn đã chọn ở bánh xe màu, hoặc nhập một mã RGB với một sắc độ cụ thể. Bạn có thể dùng chế độ Free style để thêm 2 đến 4 màu gốc. Ngoài ra thanh Presets còn cho bạn nhiều lựa chọn hơn dựa trên màu gốc đã chọn.

    7FM6RXl.jpg
    Cách tạo bảng màu với Paletton

    3. Ứng dụng sắc độ sáng và sắc độ tối

    Hình thành phong cách hoặc chủ đề

    Việc lựa chọn ứng dụng sắc độ sáng và tối vào trong thiết kế chính là cách nói lên phong cách hoặc chủ đề mà bạn hướng tới. Phong cách và chủ đề có rõ nét hay không nằm ở chính việc lưa chọn màu sắc chủ đạo của bạn.
    Alan Cheetham sử dụng sắc độ sáng và sắc độ tối ở mức độ cao vào thiết kế của mình đã là cho thiết kế một phong cách hiện đại, ấn tượng.

    swWCCH8.jpg
    Thiết kế nến của Alan Cheetham

    Hay bao bì của Veronica Lethorn sử dụng 1 cặp màu đậm nhạt để tạo nên sự tươi ngon và hấp dẫn

    wTWkQiM.jpg
    Thiết kế của Veronica Lethorn

    Tạo tương phản

    Độ tương phản làm nên sự sống động và độc đáo cho mọi thiết kế. Sử dụng độ tương phản sẽ làm nổi bật những điểm bạn muốn phô bày trong thiết kế. Đừng ngần ngại sự tương phản sẽ làm hỏng thiết kế của bạn mà hãy thử áp dụng, nó sẽ cho bạn phải bất ngờ.

    Hãy xem thiết kế Michael Hildebrand dưới đây để thấy được sự bất ngờ

    RDEhC2p.jpg
    Thiết kế Michael Hildebrand

    Tạo độ sâu và chiều không gian

    Đây là một trong những công dụng tuyệt vời của việc ứng dụng sắc độ sáng và sắc độ tối vào trong thiết kế của bạn.
    Trong poster của Mads berg, sự sắp xếp các lát cắt màu đặc biệt là màu xanh đậm của bầu trời, mặt nước và sắc xám đậm trên tàu đã tạo nên độ sâu và cong mang lại hiệu ứng ba chiều cho poster.

    97Eg2K7.jpg
    Dùng phông nền trong suốt

    Sử dụng phông nền trong suốt sẽ góp phần làm phong phú bảng màu của bạn: khi bạn xếp 2 lớp sắc độ sáng và tối trong suốt với nhau, bạn tạo ra một sắc thái mới. Hoặc bạn cũng có thể sử dụng phông nền trong suốt như một miếng cắt để tạo ra sắc độ sáng và tối khi xếp một lớp màu trong suốt lên nền trắng hoặc đen.

    Hãy cùng xem ví dụ với bìa sách của Julian bauer

    lFV7KPB.jpg
    Thiết kế của Julian bauer

    Tạo tính liên kết trong brading

    Với một màu gốc, bạn sử dụng độ đậm nhạt của nó sẽ góp phần tạo ra nhiều lựa chọn và hiệu quả trên các phần của sản phẩm làm các thiết kế nhìn rõ ràng và thống nhất hơn.
    Thiết kế của studio Mast là một ví dụ minh họa điển hình.
    Bộ đầu tiên sử dụng nhiều sắc độ của màu xanh

    1UuYErY.jpg
    Thiết kế sử dụng sắc độ xanh của studio Mast

    Trong khi bộ thứ hai sử dụng sử dụng màu đỏ với một màu gốc và một màu có sắc độ tối hơn

    PKzbb43.jpg
    Hay sắc độ đỏ của studio Mast

    Hòa trộn

    Nếu những màu tương phản làm thiết kế của bạn bắt mắt và sống động hơn thì việc thay đổi theo hướng khác sẽ giúp nó trông nhẹ nhàng và hòa hợp hơn.

    Với việc sử dụng độ đậm nhạt của màu xanh không nhiều tương phản trong bìa trang sách của Robert Frank dưới đây đã làm nổi bật phần typography.

    DqH5rC9.jpg
    Thiết kế của Robert Frank

    Dùng gradient

    Nếubạn muốn thêm nhiều sắc độ sáng và sắc độ tối trong một lần thì Gradient là sự lựa chọn tuyệt vời. Đặc biệt khi bạn sử dụng hiệu ứng trong suốt (transparency effects) để thêm màu vào thiết kế.
    Hãy nhìn vào mẫu thiệp của Hyperakt: nhìn kĩ mặt trước mẫu thiệp (hình bên trái) những hình tam giác được liên kết tạo nên bóng người có gradient riêng

    9dvbeiT.jpg
    Mẫu thiệp của Hyperakt

    Tạo khối và pattern

    Bạn không nhất thiết phải sử dụng sắc độ sáng và sắc độ tối trong cùng một lần, thay vào đó bạn hoàn toàn có thể sắp xếp và kết hợp chúng để tạo khối, pattern hoặc các yếu tố đồ họa để làm thiết kế của bạn hấp dẫn hơn.
    Trong thiết kế Cardvisit của Chloe Park, sử dụng sắc thái đậm dần cho một chuối các khối hình học đã tạo yếu tố kích thích thị giác trên một phông nền khá đơn giản.

    BZhVIw7.jpg
    Thiết kế Cardvisit của Chloe Park

    Bạn có thể tham khảo thiết kế bao bì cà phê của Mike Peck

    toU481C.jpg

    Đơn giản và tách biệt

    Áp dụng sắc độ sáng và sắc độ tối trong một thiết kế dùng 1 màu, 1 tone hay saturation sẽ giúp ích cho việc phân biệt các chi tiết với nhau. Nếu lượng thông tin cần sắp xếp quá nhiều, hãy nghĩ tới dùng các dải màu. Nó sẽ giúp bạn có được hình dung rõ về những phần trong layout.
    Bằng việc dựa lấy màu xanh lá làm chủ đạo thêm một chút sắc độ sáng hơn, một chút màu trắng – đen, Infographic của William Mellor trở nên gọn gàng và đơn giản.

    wzSxxBd.jpg
    Infographic của William Mellor

    Hay trong thiết kế trang web của Owen Shifflett, lấy sắc đậm nhạt của màu xanh da trời làm chủ đạo, các sản phẩm sặc sỡ được làm nổi bật lên nhờ các gam màu trầm, đồng thời giúp cho trang web có bố cục rõ ràng hơn.

    7h0wL8K.jpg
    Thiết kế trang web của Owen Shifflett

    Ứng dụng vào các đoạn text

    Linh hoạt áp dụng các sắc độ sáng và tối vào các đoạn text. Các đoạn text không chỉ bó hẹp trong các gam màu trắng hay đen mà cần có sự sáng tạo để tạo nên sự đa dạng cho các thiết kế của bạn.

    Bạn có thể tham khảo trong thiết kế của Francesco Poroli:

    ilXBEby.jpg
    Thiết kế của Francesco Poroli

    Làm giàu thêm cho bảng màu
    Hãy giúp cho thiết kế của mình phong phú hơn với việc sáng tạo ra các màu mới qua việc thêm các sắc độ sáng và sắc độ tối.

    U0YYsmP.jpg
    Thiết kế của Julie Wauters

    Đơn giản thôi

    Với những thiết kế theo phong cách tối giản, hãy lựa chọn bảng màu đơn sắc ( monochromatic). Việc phối màu này ngoài giúp bạn có thêm nhiều sự lựa chọn mà vẫn đảm bảo sự đơn giản và tính thẩm mĩ chỉ với 1 màu.
    Trong thiết kế của Steve Woft, ngoài 2 màu xanh chủ đạo, việc thêm màu đỏ làm màu nhấn và màu trắng làm màu trung tính đã làm cho thiết kế vừa hấp dẫn lại không hề cầu kì, phức tạp.

    KgmTVRa.jpg
    Thiết kế của Steve Woft

    Thiết kế Chris Ross cho chương trình hội nghị chỉ sử dụng sắc độ sáng của màu vàng cùng với các khối hình học đã cho ra một kết hợp hiện đại, nổi bật
    H5XHyMN.jpg
    Thiết kế của Chris Ross

    Đừng ngại kết hợp

    hãy làm cho bộ thiết kế của bạn trở nên tinh tế và bắt mắt hơn với việc thử kết hợp hai sắc độ sáng và tối.
    trong ví dụ dưới đây của nhà hàng Michael Hildebrand, bằng cách kết hợp sắc độ đỏ và nâu vàng. Màu nâu trung tính tăng càng nhiều thì màu đỏ sẽ càng được nổi bật.

    0GbvWzK.jpg
    Cách phối màu của nhà hàng Michael Hildebrand

    Kết luận
    Mong rằng với những chia sẻ trên sẽ giúp cho các bạn hiểu rõ, nắm vững và dễ dàng hơn trong việc phối màu . Chúc các bạn thành công!

    Nguồn: RGB.vn

    ...
    _phong_thu_cuc_, Cá Xanh, Hucio Sang5 người khác thích bài viết này.
  2. Bui Van Duong

    Bui Van Duong Thành viên cấp 1

    Thank mod nhiều nhé :)
  3. nguyen_antu

    nguyen_antu Thành viên cấp 2

    Tuyệt vời :x:x:x:x:x:x
  4. Chém Gió Mướn

    Chém Gió Mướn Thành viên cấp 1

    cho e hỏi là shades có phải là saturation k ạ?
    e có đọc 1 bài về saturation và value
    còn bài này là shades và tints
    .
    cã 2 đề là chuyển màu gốc ra các màu xung qanh đều là thêm vào trắng hoặc đen đúng k ạh

    e rất mong các cao nhân chỉ e điều này :D

    đội ơn các a :)))

Ủng hộ diễn đàn