Chất lượng và các loại hình ảnh trên web

• Chế độ nén hình ảnh khi sử dụng trên web:
  • GIF (Graphics Interchange Format):
    • Độ sâu màu từ 1-bit (2 colors) to 8-bit (256 colors)
    • Hỗ trợ trong suốt
    • Hỗ trợ ảnh động
    • Kích thước tập tin: 20%-90% kích thước ban đầu
• JPEG (Joint Photographic Experts Group):
  • Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216 colors)
  • Cho phép thiết lập và kiểm soát chất lượng theo tỷ lệ phần trăm
  • Kích thước tập tin là 5%- 20% kích thước ban đầu
• PNG (Portable Network Graphics):
  • Độ sâu màu từ 8-bit (256 colors) or 24-bit (16,777,216 colors)
  • Hỗ trợ các kênh màu alpha và độ trong suốt
  • Thông thường nén hình ảnh 5% – 25% tốt hơn GIF

• Định dạng SVG:
  • Là định dạng chuẩn của web theo W3C
  • Có thể thêm thông tin vector vào trang web
  • Trình duyệt hỗ trợ: Firefox, Safari, Opera
  • IE: coi SVG như 1 plugin
  • Lệnh trỏ tới file SVG:

• Pixel: Là phần tử thông tin nhỏ nhất của ảnh được hiển thị trên màn hình, sắp xếp dưới dạng một chuỗi dấu chấm hoặc hình chữ nhật trong một ô lưới hai chiều

• Các pixel kết hợp với nhau theo màu đỏ, xanh lá cây và xanh da trời ở cường độ khác nhau để tạo ra hàng nghìn hoặc hàng triệu màu sắc khác nhau  

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

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

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)

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) (RGB mode).
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)

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)

• 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

• 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 đó
  
• Analogous: Bao gồm màu sắc liền kề nhau trên bánh xe màu
• Complementary: Bao gồm màu sắc được đặt đối diện nhau trên bánh xe màu. 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
• 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
• 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
• Một số kênh màu khác:
  • Monochromatic with mo’ pop
  • Analo-adjust
  • Mono-split-complement
• 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ão hòa (saturation/ intensity):
  • Được mô tả giống cường độ hay độ tinh khiết của màu sắc
• NHIỆT ĐỘ MÀU

• Nhiệt độ màu là 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
• Màu lạ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

• 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

• Color Scheme Designer: http://colorschemedesigner.com/
• 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

Typography

• Sự kết hợp giữa font, kiểu chữ, màu sắc … để làm nổi bật nội dung
• Tạo typography: photoshop, illustrator, HTML/CSS
• Nguyên liệu để tạo nên typography:
  • Font chữ
  • Kiểu chữ (chữ hoa, chữ thường)
  • Khoảng cách giữa các ký tự
  • Hình ảnh, đồ họa (màu sắc, mảng màu, đường thẳng, đường cong, khoảng trống…)
• Khả năng ứng dụng của Typography:
  • Đồ họa hình ảnh (graphic design + in ấn)
  • Đồ họa web (website design)
• Mục đích sử dụng typography trên web:
  • Trình bày nội dung rõ ràng tới người đọc
  • Tạo ấn tượng mạnh tới người duyệt web
  • Tạo thẩm mỹ cho trang web
• Hạn chế của web typography:
  • Lựa chọn font bị hạn chế
  • Khi mỗi cột văn bản bị thu hẹp thì nội dung được trình bày không thẩm mỹ
  • Kiểm soát khoảng cách các chữ (kerning)
  • Kích cỡ, độ phân giải màn hình
• Lựa chọn font bị hạn chế:
  • Có thể cài đặt bất kì font nào trong CSS
  • Đối với người xem:
    • Chỉ xem được văn bản sử dụng font nào được cài đặt sẵn trên máy tính
    • Nếu như trên máy tính không có sẵn font đó trình duyệt sẽ sử dụng font được chỉ định thay thế, đã được định nghĩa trong CSS
• Sự căn chỉnh:
  • Vấn đề được nói đến là việc căn chỉnh/ sắp xếp văn bản trên trang web
  • Có 4 cách để căn chỉnh văn bản:
    • Căn trái
    • Căn phải
    • Căn giữa
    • Căn đều (justify)
• Kiểm soát khoảng cách các chữ (kerning):
• Đây là quá trình điều chỉnh khoảng cách giữa các cặp ký tự của chữ cái

Cách tạo typography trên web

• • Được điều khiển bởi CSS (kích thước, màu sắc, kiểu chữ, kích thước dòng, khoảng cách ký tự, …)
  • Bằng cách tạo các khối văn bản, có thể điều khiển được việc căn lề và chỉnh kích thước dòng cho toàn khối

• Dùng các font phổ biến để trình bày nội dung trên trang web:
  • Font serif: font có chân (Georgia, Time New Roman), thường được sử dụng cho dòng tiêu đề
  • Font sans-serif: font không chân (Arial, Vernada, Tahoma), thường được sử dụng cho phần nội dung

• Kết hợp kích thước, màu sắc cho font chữ
• Áp dụng các mảng sáng, tối, màu sắc, bố cục trên trang web để tạo độ tương phản, điểm nhấn
• Có thể sử dụng javascript để tạo thêm hiệu ứng cho nội dung

Sự khác biệt giữa typography của graphic design và web design:

• Khi sử dụng font trên web cần thiết phải chú ý:
  • Trình duyệt phải hỗ trợ
  • Font có trong máy tính
  • Tốc độ
  • Bản quyền
  • Tương thích của CSS
  • Người dùng