Academia.eduAcademia.edu
BÀI 3 TỔ NG QUAN VỀ TYPOGRAPHY NHẮ C LẠ I BÀI TRƯ Ớ 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 3 - Tổ ng quan về Typography 2 MỤ C TI ÊU BÀI HỌ C Khái niệ m về Typography: Typography cho thiế t kế graphic Typography trên web Sự khác biệ t Màu sắ c & màu sắ c trên web Bố cụ c trong thiế t kế web Khái niệ m chố ng răng cư a Nguyên tắ c chọ n & sử dụ ng kiể u chữ Slide 3 - Tổ ng quan về Typography 3 GI Ớ I THI Ệ U TYPOGRAPHY GI Ớ I THI Ệ U Typography: typo graphic typography Nghệ thuậ t sắ p ặ t và kỹ thuậ t ghép chữ 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 Slide 3 - Tổ ng quan về Typography 5 GI Ớ I THI Ệ U 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) … Slide 3 - Tổ ng quan về Typography 6 TYPOGRAPHY VỚ I THI Ế T KẾ GRAPHI C TYPOGRAPHY VỚ I THI Ế T KẾ GRAPHI C Phạ m vi ứ ng dụ ng: I n ấ n (poster, quả ng cáo) Website (banner, logo, …) Quả ng bá Các chư ơ ng trình hỗ trợ thiế t kế typography: Photoshop I llustrator Flash … Slide 3 - Tổ ng quan về Typography 8 TYPOGRAPHY VỚ I THI Ế T KẾ GRAPHI C Banner/ Website Quả ng cáo Slide 3 - Tổ ng quan về Typography 9 TYPOGRAPHY TRÊN WEB http://joe.vn/ TYPOGRAPHY TRÊN WEB 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 http://dev.opera.com/articles/view/11-typography-on-the-web/ Slide 3 - Tổ ng quan về Typography 11 TYPOGRAPHY TRÊN WEB 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 font-family: Georgia, "Times New Roman", Times, serif Thứ tự ư u tiên sử dụ ng font Slide 3 - Tổ ng quan về Typography 12 TYPOGRAPHY TRÊN WEB Lự a chọ n font bị hạ n chế : Nhà thiế t kế web thư ờ ng hạ n chế mình trong nhữ ng font phổ biế n có trong hệ thố ng: Slide 3 - Tổ ng quan về Typography 13 TYPOGRAPHY TRÊN WEB 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) justify Slide 3 - Tổ ng quan về Typography 14 TYPOGRAPHY TRÊN WEB 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 Slide 3 - Tổ ng quan về Typography 15 TYPOGRAPHY TRÊN WEB Thiế u kiể m soát: Website không nhằ m phụ c vụ in ấ n Ngư ờ i duyệ t web có thể sử dụ ng nhiề u thiế t bị trong nhiề u môi trư ờ ng khác nhau để xem trang web: • Trên thiế t bị di độ ng • Tăng kích cỡ font … Tấ t cả nhữ ng việ c bạ n làm đó là đị nh kiể u cho văn bả n trên web, cung cấ p mộ t hư ớ ng dẫ n cho tấ t cả các thiế t bị duyệ t web khác nhau Slide 3 - Tổ ng quan về Typography 16 TYPOGRAPHY TRÊN WEB 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 http://dev.opera.com/articles/view/11-typography-onthe-web/ Slide 3 - Tổ ng quan về Typography 17 TYPOGRAPHY TRÊN WEB Slide 3 - Tổ ng quan về Typography 18 TYPOGRAPHY TRÊN WEB 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 Tỷ lệ sử dụ ng giữ a font có chân và không chân (Tạ p chí smallshing) Slide 3 - Tổ ng quan về Typography 19 TYPOGRAPHY TRÊN WEB 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 Slide 3 - Tổ ng quan về Typography 20 SỰ KHÁC BI Ệ T Sự khác biệ t giữ a typography củ a graphic design và web design: Web typography Sử dụ ng các kỹ thuậ t CSS/HTML ộ phân gi giả i bình th thư ờ ng ttừ 85dpi hoặ c thấ p hơ n Nhiề u cộ t nộ i dung giúp ngư ờ i ọ c duyệ t tố t hơ n trên màn hình Slide 3 - Tổ ng quan về Typography Graphic typography Không sử dụ ng ộ phân gi giả i ttừ 1200dpi ho hoặ c cao hơ n Cộ t có thể làm ngư ờ i ọ c khó theo dõi 21 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A Slide 3 - Tổ ng quan về Typography 22 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A Printed Typography: là kiể u chữ in ấ n hiể n thị vớ i độ phân giả i cao DPI , hiể n thị đư ợ c nhữ ng đư ờ ng cong đẹ p và tinh tế . PPI Monitor: là kiể u hiể n thị trên màn hình máy tính vớ i độ phân giả i thấ p hơ n so vớ i kiể u hiể n thị in ấ n. Chố ng răng cư a: là điề u tố t trên màn hình ở độ phân giả văn bả n hiể n thị sắ c nét, rõ nhấ t cho việ c hiể n thị i cao hơ n nhằ m giúp ràng. Việ c chố ng răng cư a là vô cùng quan trọ ng Slide 3 - Tổ ng quan về Typography 23 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A Slide 3 - Tổ ng quan về Typography 24 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A Các kiể u đị nh dạ ng văn bả n cơ bả n: - HTML Text: chiế m phầ n lớ n các văn bả n đư ợ c tìm thấ y trên trang web. - font-smooth: kiể u font mị n Slide 3 - Tổ ng quan về Typography 25 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A @font-face: là mộ t kiể u nhúng font vớ i tính năng mớ i thú vị củ a CSS3, cho phép các trình duyệ t nhậ p vào mộ t Font chữ từ URL. Slide 3 - Tổ ng quan về Typography 26 KHÁI NI Ệ M CHỐ NG RĂNG CƯ A Text as I mage : là dạ ng văn bả n dạ ng hình ả nh bằ ng cách sử dụ ng tùy chọ n Free Transform để di chuyể n các vị trí lớ p và thư ờ ng đư ợ c thiế t lậ p theo thông số có sẵ n Slide 3 - Tổ ng quan về Typography 27 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Họ font Helvetica Neue: sử dụ ng để thể hiệ n mộ t loạ t các tiế ng nói và cả m xúc linh hoạ t và thoả i mái Slide 3 - Tổ ng quan về Typography 29 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Grouping Fonts: Kiể u chữ có thể đư ợ c chia và phân chia thành hàng chụ c loạ i Slide 3 - Tổ ng quan về Typography 30 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Geometric Sans:Kiể u chữ dự a trên các hình thứ c hình họ c nghiêm ngặ t. • Helvetica • Univers • Futura • Avant Garde • Akzidenz Grotesk • Franklin Gothic • Gotham Slide 3 - Tổ ng quan về Typography 31 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Humanist Sans: Kiể u chữ có nguồ n gố c từ chữ viế t và có kiể u dáng hiệ n đạ i. • Gill Sans • Frutiger • Myriad • Optima • Verdana Slide 3 - Tổ ng quan về Typography 32 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Humanist Sans: Kiể u chữ lâu đờ i nhấ t cổ điể n, truyề n thố ng • Jenson • Bembo • Palatino • Garamond Slide 3 - Tổ ng quan về Typography 33 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Transitional and Modern : Kiể u chữ chuyể n tiế p từ truyề n thố ng đế n hiệ n đạ i • Times New Roman • Baskerville • Bodoni • Didot Slide 3 - Tổ ng quan về Typography 34 NGUYÊN TẮ C CHỌ N VÀ SỬ Slide 3 - Tổ ng quan về Typography DỤ NG KI Ể U CHỮ 35 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Humanist Sans: Kiể u chữ hoang dã, mạ nh mẽ • Clarendon, Rockwell • Courier • Lubalin Graph • Archer Slide 3 - Tổ ng quan về Typography 36 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ The Principle of Decisive Contrast (nguyên tắ c tư ơ ng phả n): Đây là mộ t nguyên tắ c chung về thiế t kế . Slide 3 - Tổ ng quan về Typography 37 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Sự kế t hợ p mộ t họ font cùng vớ i Helvetica tạ o ra phong cách cổ điể n và có độ tư ơ ng phả n mạ nh. Slide 3 - Tổ ng quan về Typography 38 NGUYÊN TẮ C CHỌ N VÀ SỬ DỤ NG KI Ể U CHỮ Hai kiể u chữ kế t hợ p tố t vớ i nhau nế u có mộ t điể m chung. Slide 3 - Tổ ng quan về Typography 39 TỔ NG KẾ T Typography là sự kế t hợ p củ a font, kiể u chữ , màu sắ c, bố cụ c… nhằ m truyề n đạ t nộ i dung mộ t cách ấ n tư ợ ng nhấ t đế n vớ i ngư ờ i xem 2 trư ờ ng phái Typography: Typography dành cho thiế t kế hình ả nh Typography dành cho thiế t kế web Nguyên liệ u tạ o nên typography: Font chữ Kiể u chữ Màu sắ c, độ tư ơ ng phả n, bố cụ c mả ng màu … Slide 3 - Tổ ng quan về Typography 40