Web2022 slide 2
- 1. BÀI 2 LÝ THUYẾT MÀU SẮC
- 2. NHẮC LẠI BÀI TRƯỚC Quy trình thiết kế website Những yếu tố trong thiết kế website Một số vấn đề cần tránh khi thiết kế website Slide 2 - Lý thuyết màu sắc 2
- 3. MỤC TIÊU BÀI HỌC Lý thuyết tổng quan về màu sắc Sự kết hợp màu sắc Nhiệt độ của màu sắc Giá trị của màu sắc Bảng màu Công cụ màu sắc Slide 2 - Lý thuyết màu sắc 3
- 4. TỔNG QUAN VỀ MÀU SẮC
- 5. TỔNG QUAN VỀ MÀU SẮC Là phản ứng của mắt của bức xạ khác nhau trong quang phổ nhìn thấy được. Quang phổ có thể nhìn thấy là những gì chúng ta nhận thức như ánh sáng Ba thành phần chính của màu sắc: Hue Value: giá trị sáng hoặc tối Saturation: cường độ, hoặc mức sắc độ, màu sắc Slide 2 - Lý thuyết màu sắc 5
- 6. TỔNG QUAN VỀ MÀU SẮC Không gian màu sắc: Màu sắc thường được tổ chức có sự phân cấp, dựa trên sự pha trộn màu sắc Có hai loại không gian màu sắc: • Subtractive: dựa trên sắc tố của màu. Tất cả các sắc tố pha trộn với nhau tạo nên màu đen, sự vắng mặt của bất kỳ sắc tố sẽ tạo nên màu trắng – Màu Primary: đỏ, vàng, xanh – Màu Secondary: da cam, xanh lá cây, tím Slide 2 - Lý thuyết màu sắc 6 Không gian màu Subtractive
- 7. TỔNG QUAN VỀ MÀU SẮC • Additive: là không gian màu điện tử (như sự pha trộn màu sắc trên máy tính). Sự hiện diện của tất cả cường độ sáng sẽ tạo nên màu trắng, ngược lại sẽ tạo nên màu đen – Màu Primary: đỏ, xanh lá cây, xanh (RGB) – Màu Secondary: màu vàng, đỏ tươi, lục cam (Yellow, magenta, cyan) Slide 2 - Lý thuyết màu sắc 7 Không gian màu Additive
- 8. TỔNG QUAN VỀ MÀU SẮC Web-safe color: Là tập hợp màu sắc sẽ làm cho nhất quán trong các trình duyệt trên hai hệ thống điều hành máy tính (Windows và OS X) Mặc dù "an toàn" và đảm bảo hiển thị đồng nhất trên các trình duyệt, tuy nhiên nếu chỉ sử dụng web-safe color sẽ gây hạn chế cho người thiết kế web Bảng màu web-safe color: Bảng màu của 216 màu sắc được sử dụng trên các nền tảng với chế độ đồ họa chỉ với 256 màu Các màu sắc khác sẽ được tạo ra nhờ sự pha trộn Slide 2 - Lý thuyết màu sắc 8
- 9. TỔNG QUAN VỀ MÀU SẮC Bảng màu web-safe color: Slide 2 - Lý thuyết màu sắc 9
- 10. TỔNG QUAN VỀ MÀU SẮC Màu sắc hiển thị trên màn hình được xây dựng dựa trên hệ màu additive Trong hệ màu additive, màu sắc được hiển thị bởi giá trị phần trăm của màu đỏ (red), xanh lá cây (green), xanh lam (blue) Slide 2 - Lý thuyết màu sắc 10 Hệ màu RGB
- 11. TỔNG QUAN VỀ MÀU SẮC Màu sắc sử dụng để in ấn được xây dựng trên hệ màu CMYK Sử dụng chế độ màu subtractive Sử dụng màu màu xanh lơ (cyan), xanh hồng sẫm (magenta), màu vàng (yellow), đen (black) Slide 2 - Lý thuyết màu sắc 11 Hệ màu CMYK
- 12. TỔNG QUAN VỀ MÀU SẮC Bánh xe màu: là một sơ đồ đơn giản nhưng hiệu quả để trình bày những khái niệm và thuật ngữ của lý thuyết màu Bánh xe màu được chia ra thành 12 lát, bao gồm màu cơ bản (Primary), màu thứ cấp (Secondary) và màu thứ ba (Tertiary) Slide 2 - Lý thuyết màu sắc 12
- 13. TỔNG QUAN VỀ MÀU SẮC Slide 2 - Lý thuyết màu sắc 13 Primary: màu cơ bản là màu đỏ, vàng, xanh. Những màu này tạo thành 1 tam giác đều trên bánh xe màu Secondary: được tạo ra bằng cách trộn 2 màu cơ bản. Tertiary : được tạo ra bằng cách trộn 1 màu cơ bản với 1 màu thứ cấp liền kề
- 14. TỔNG QUAN VỀ MÀU SẮC Sáu kênh màu: Monochromatic (màu đơn sắc) Analogous (màu tương đồng) Complementary (màu bù/bổ sung) Split complementary (màu chia bổ sung) Triadic: ba màu trên ba đỉnh riêng biệt của tam giác trên bánh xe màu Tetradic: bốn màu trên bốn đỉnh của tứ giác trên bánh xe màu Slide 2 - Lý thuyết màu sắc 14
- 15. TỔNG QUAN VỀ MÀU SẮC Monochromatic (màu đơn sắc): • Bao gồm một màu cơ bản duy nhất và một số lượng tints & shades của màu đó Slide 2 - Lý thuyết màu sắc 15
- 16. TỔNG QUAN VỀ MÀU SẮC • Rất nhiều trang web sử dụng những màu sắc khác nhau cho từng phần nội dung • Nếu sử dụng nhiều màu sắc thì nên bố trí logo, menu, bố cục tổng thể phù hợp để tránh bị nhầm lẫn Slide 2 - Lý thuyết màu sắc 16
- 17. TỔNG QUAN VỀ MÀU SẮC Analogous: • Bao gồm màu sắc liền kề nhau trên bánh xe màu Slide 2 - Lý thuyết màu sắc 17
- 18. TỔNG QUAN VỀ MÀU SẮC Slide 2 - Lý thuyết màu sắc 18
- 19. TỔNG QUAN VỀ MÀU SẮC Complementary: • Bao gồm màu sắc được đặt đối diện nhau trên bánh xe màu Slide 2 - Lý thuyết màu sắc 19
- 20. TỔNG QUAN VỀ MÀU SẮC Slide 2 - Lý thuyết màu sắc 20
- 21. TỔNG QUAN VỀ MÀU SẮC • Hiệu ứng tương phản đồng thời: xuất hiện khi các màu complementary được đặt cạnh nhau • Hãy cẩn thận khi xuất hiện hiệu ứng tương phản đồng thời Slide 2 - Lý thuyết màu sắc 21
- 22. TỔNG QUAN VỀ MÀU SẮC split-complementary: • Sử dụng hai màu liền kề để bổ sung cho màu cơ bản triadic: bao gồm 3 màu trên ba đỉnh tam giác Slide 2 - Lý thuyết màu sắc 22
- 23. TỔNG QUAN VỀ MÀU SẮC Tetradic: • Bao gồm bốn màu • Kết hợp màu complementary bất kỳ với màu complementary khác Slide 2 - Lý thuyết màu sắc 23
- 24. TỔNG QUAN VỀ MÀU SẮC Một số kênh màu khác: Monochromatic with mo’ pop Analo-adjust Mono-split-complement Slide 2 - Lý thuyết màu sắc 24
- 25. GIÁ TRỊ CỦA MÀU SẮC
- 26. GIÁ TRỊ CỦA MÀU SẮC Một số thuộc tính sáng (lightness), tối (darkness) được gọi là giá trị của màu sắc Slide 2 - Lý thuyết màu sắc 26 Tint: được tạo khi thêm màu trắng shade: được tạo ra khi thêm màu đen
- 27. GIÁ TRỊ CỦA MÀU SẮC Độ bão hòa (saturation/ intensity): Được mô tả giống cường độ hay độ tinh khiết của màu sắc Slide 2 - Lý thuyết màu sắc 27 Khi thêm màu xám màu sẽ mờ đục
- 28. NHIỆT ĐỘ MÀU
- 29. NHIỆT ĐỘ MÀU Một thuộc tính tồn tại trên bộ quang phổ là nhiệt độ của màu Màu nóng ấm Là những màu nằm trong dải màu từ màu đỏ sang màu vàng Bao gồm cả màu vàng, màu hồng, màu nâu và đỏ tía Slide 2 - Lý thuyết màu sắc 29
- 30. NHIỆT ĐỘ MÀU Màu trang nhã Là những màu nằm trong dải màu từ màu xanh lá cây sang màu xanh lam Bao gồm cả một số sắc thái của màu tím Màu tím là màu trung gian giữa màu đỏ và xanh lam Slide 2 - Lý thuyết màu sắc 30
- 31. BẢNG MÀU
- 32. BẢNG MÀU Một kênh màu có thể cung cấp hai, ba hoặc bốn màu sắc để làm việc Một bảng màu có thể cung cấp một vài màu sắc để bạn thiết kế web Kí pháp thập lục phân: Dựa trên bội số của 16 Có 256 sắc độ khác nhau của màu đỏ, 256 sắc độ khác nhau của màu xanh, 256 sắc độ khác nhau của màu xanh lá cây, 256 sắc độ khác nhau của màu xanh lam có thể tạo ra được 16,777,216 màu sắc Slide 2 - Lý thuyết màu sắc 32
- 33. BẢNG MÀU Ví dụ: màu trắng là sự kết hợp 3 màu đỏ, xanh lá cây, xanh lam ở sắc độ cao nhất Slide 2 - Lý thuyết màu sắc 33 Màu đỏ Xanh lá cây Xanh lam Màu trắng 255/ FF 255/ FF 255/ FF FFFFFF
- 34. BẢNG MÀU Slide 2 - Lý thuyết màu sắc 34
- 35. CÔNG CỤ MÀU SẮC
- 36. CÔNG CỤ MÀU SẮC Color Scheme Designer: http://colorschemedesigner.com/ Slide 2 - Lý thuyết màu sắc 36
- 37. CÔNG CỤ MÀU SẮC Adobe Kuler: http://kuler.adobe.com/ Trực tiếp qua menu của các chương trình đồ hoạ của hãng Adobe Slide 2 - Lý thuyết màu sắc 37
- 38. CÔNG CỤ MÀU SẮC Adobe Kuler: Cung cấp các dải màu theo định dạng .ase Login download chèn vào các chương trình đồ hoạ của adobe Slide 2 - Lý thuyết màu sắc 38
- 39. TỔNG KẾT Một số thuộc tính sáng (lightness), tối (darkness) được gọi là giá trị của màu sắc Bản chất 6 kênh màu chính từ đó biết cách sử dụng màu sắc khi thiết kế web Áp dụng các kênh màu vào việc thiết kế web, tuy nhiên không nên lạm dụng quá nhiều kênh màu trên một website Công cụ màu sắc Adobe Kuler hiện đang được áp dụng rất rộng rãi trong việc thiết kế web Slide 2 - Lý thuyết màu sắc 39