Giáo Trình Môn Học Mô Đun Thiết Kế Giao Diện Web (Ngành Thiết Kế Đồ Họa - Trình Độ Cao Đẳng.pdf

Tài liệu bao gồm 6 chương Chương 1: Thiết kế mỹ thuật giao diện web Chương 2: Bố cục và thiết kế web Chương 3: Đường nét – hình nền – quan hệ Chương 4: Màu sắc Chương 5: Chữ Text Chương

THIẾT KẾ MỸ THUẬT GIAO DIỆN WEB

KHÁI NIỆM MỸ THUẬT

Mỹ thuật được hiểu là “nghệ thuật của cái đẹp” Đây là một từ Hán Việt, với

“mỹ” nghĩa là đẹp, còn “thuật” nằm trong từ “nghệ thuật” Hiểu một cách đơn giản, mỹ thuật là những cái đẹp từ nghệ thuật, có thể là do con người hoặc từ tự nhiên tạo nên và có thể nhìn thấy được Vì thế mà người ta còn gọi môn này là “nghệ thuật thị giác” – hay còn có tên tiếng anh là “visual art”

Hiểu theo nghĩa rộng, từ “mỹ thuật” còn được sử dụng để phân biệt những ngành lớn của hội họa: mỹ thuật ứng dụng, mỹ thuật công nghiệp, mỹ thuật trang trí…; mỗi ngành có một đặc thù riêng về kỹ thuật thể hiện và giá trị sử dụng

Trên thế giới cũng như ở Việt Nam, những người hoạt động trong ngành thường chỉ thừa nhận khái niệm mỹ thuật theo nghĩa hàn lâm và có sự phân biệt rõ rệt giữa mỹ thuật với thủ công mỹ nghệ và mỹ thuật ứng dụng Đơn giản hơn, mỹ thuật là những đường nét được con người tự quy ước với nhau theo cảm nhận được sử dụng để biểu lộ thế giới thực tại gián tiếp qua một chất liệu nào đó theo một cách riêng của mỗi người cho là đẹp

2 Mỹ thuật trong lĩnh vực Hội họa

Hội họa được xem là phần quan trọng nhất của Mỹ thuật, cũng là loại hình nghệ thuật phổ biến nhất Đây là nghệ thuật tạo hình trên bề mặt hai chiều một cách trực tiếp, hay giải thích nôm na là người vẽ sử dụng màu và bút chì để tô lên một bề mặt láng (giấy, vải,…) để thể hiện những ý tưởng nghệ thuật Người làm việc này còn được gọi là họa sĩ.

Kết quả của việc này là những tác phẩm hội họa được ra đời, hay người ta còn gọi là tranh vẽ Nói cách khác, hội họa là một hình thức để thể hiện ý tưởng của người nghệ sĩ bằng các tác phẩm hội họa sử dụng kỹ thuật và phương pháp nghệ thuật của họa sỹ (xem Hình 1.1)

Chương 1: Thiết kế mỹ thuật giao diện Web 2

Hình 1.1 Mỹ thuật trong lĩnh vực Hội họa

3 Mỹ thuật trong lĩnh vực Đồ Họa Đồ họa là hình thức nghệ thuật tạo hình trên bề mặt hai chiều một cách gián tiếp thông qua kỹ thuật in ấn Do đó, tác phẩm đồ họa thường có nhiều bản sao Đồ họa thường là dùng cho những mục đích về truyền thông, quảng cáo, kinh doanh,… Do đó, đây là ngành thu hút được nhiều bạn trẻ tham gia học hỏi Ngành Đồ họa mang tính sáng tạo và tính thẩm mỹ, đòi hỏi người làm cần sử dụng được những công cụ, thiết bị hiện đại và những phần mềm chuyên dụng

Có rất nhiều loại đồ họa khác nhau như: đồ họa độc lập, đồ họa in ấn, đồ họa máy tính (xem Hình 1.2)

Hình 1.2 Mỹ thuật trong lĩnh vực đồ họa

4 Mỹ thuật trong lĩnh vực Điêu khắc Điêu khắc là tác phẩm nghệ thuật ba chiều (tượng tròn) hoặc hai chiều (chạm khắc, chạm nổi) được tạo hình từ những sự kết hợp vật liệu khác nhau như thạch cao, gỗ, kim loại, đá, thủy tinh, đất sét… Người làm điêu khắc được gọi là nghệ nhân điêu khắc

Ngoài việc lên ý tưởng thì bàn tay lành nghề, điêu luyện và khéo léo của nghệ nhân điêu khác đóng vai trò rất lớn ở đây Có rất nhiều thể loại của tác phẩm điêu khắc, điển hình nhất là tượng, phù điêu và cũng có rất nhiều bước trong quy trình để tạo ra một tác phẩm như: tạc, đúc, gò….

CÁC DẠNG TRANG WEB

Web còn gọi là trang Web hoặc trang mạng, nội dung liên quan được xác định bằng một tên miền chung và được xuất bản trên ít nhất một máy chủ Web Ví dụ:

Web wikipedia.org, google.com, amazon.com…

Tất cả các trang Web có thể truy cập công khai đều tạo thành World Wide Web

Cũng có những trang Web riêng tư chỉ có thể được truy cập trên mạng riêng, chẳng hạn như trang Web nội bộ của công ty dành cho nhân viên của công ty

Các trang Web thường dành riêng cho một chủ đề hoặc mục đích cụ thể, chẳng hạn như tin tức, giáo dục, thương mại, giải trí hoặc mạng xã hội Siêu liên kết giữa các trang Web hướng dẫn điều hướng của trang Web, thường bắt đầu với trang chủ

Người dùng có thể truy cập các trang Web trên nhiều loại thiết bị, bao gồm máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại thông minh Ứng dụng được sử dụng trên các thiết bị này được gọi là trình duyệt Web

2 Phân loại trang Web theo nội dung Đối với tính thường xuyên và quy mô thay đổi nội dung, tất cả các trang Web có thể được chia thành hai nhóm lớn – trang Web tĩnh và Web động (tương tác) Tóm tắt lại, phân loại dựa trên tần suất cập nhật nội dung của trang Web

2.1.Trang Web tĩnh (cố định)

Web tĩnh là dạng trang Web cơ bản, trang web tĩnh không thường xuyên thay đổi nội dung và không được cập nhật bởi người dùng Với dạng Web này để thay đổi nội dung trên trang Web, chủ sở hữu phải truy cập trực tiếp vào các lệnh mã để thay đổi thông tin và phải biết thiết lập chuyên mục Hầu hết, các loại trang Web này đều được tạo ra cho thông tin mục tiêu hơn là tương tác

Là những trang Web có nội dung được cập nhật thường xuyên, trang Web khi xây dựng sẽ bao gồm hai phần: Một phần hiển thị trên trình duyệt mà khi truy cập internet, thường thấy và một phần bên dưới được sử dụng để điều khiển nội dung của trang Web, phần nội dung ở phía sau là phần quản trị và thường thì chỉ người quản trị trang Web mới có quyền truy cập Tính tương tác của trang Web động cao hơn trang Web tĩnh

3 Phân loại theo chức năng và mục đích

Một cách phân loại khác dựa trên các mục đích của trang Web và các vấn đề giải quyết cho người dùng Trong số các biến thể phổ biến hiện nay có thể kể đến các Web phổ biến như sau

Là những trang Web quảng bá một cá nhân từ góc độ sáng tạo hoặc chuyên nghiệp Nhiều người sử dụng trang Web để xây dựng thương hiệu cá nhân trên Internet, xây dựng hình ảnh của họ là những người tài giỏi, chuyên gia trong lĩnh vực của họ Có thể tìm thấy trang Web cá nhân từ các ca sĩ, diễn viên, doanh nhân, diễn viên, nhà đào tạo cho đến giáo viên, nhà văn, nhà thiết kế hoặc từ bất kỳ ai thích giới thiệu bản thân mình trên mạng (xem Hình 1.3)

Hình 1.3 Giao diện trang Web cá nhân

3.2 Trang Web giới thiệu công ty

Mục đích của doanh nghiệp khi thiết kế Web doanh nghiệp là để nhằm mục đích giới thiệu công ty, sản phẩm, dịch vụ mà mình cung cấp Cốt lõi của Web công ty là hướng đến khách hàng mục tiêu và cung cấp các thông tin sản phẩm để họ giao dịch, mua hàng hoặc ký hợp đồng

Vì vậy loại trang Web này phải cung cấp thông tin về các dịch vụ và quy trình làm việc, chia sẻ các lợi ích chính và triết lý hoạt động của công ty, hiển thị danh mục đầu tư và các dấu hiệu đáng tin cậy như lời chứng thực và đánh giá, cảm nhận của khách hàng (xem Hình 1.4)

Hình 1.4 Giao diện trang Web doanh nghiệp

Trang Web phải trình bày thương hiệu công ty đáng tin cậy và chuyên nghiệp, đồng thời tạo cho khách hàng tiềm năng kết nối trực tiếp với các đại diện bán hàng của công ty qua cung cấp số hotline Hơn nữa, một phân khúc người dùng mục tiêu khác có thể bao gồm những người muốn làm việc trong công ty:

Trong trường hợp này, trang Web công ty cung cấp thông tin về vị trí tuyển dụng hiện có, yêu cầu đối với nhân sự cũng như các hoạt động và sự kiện của công ty Ngoài ra Web công ty còn có thể là kênh thông tin, tư vấn các kiến thức sử dụng sản phẩm và tin tức hữu ích

3.3 Trang Web thương mại điện tử

Mục đích chính của trang Web thương mại điện tử là bán sản phẩm hoặc dịch vụ trực tuyến cho khách hàng Nền tảng Web thương mại điện tử cho phép khách hàng có nhiều tùy chọn từ lựa chọn sản phẩm đến mua hàng thực sự bằng các thiết bị điện tử và Internet

Web thương mại điện tử cũng gồm những chức năng chuyên biệt như có giỏ hàng, tích hợp tính năng thanh toán, giao hàng, đánh giá sản phẩm… Các trang Web thương mại điện tử có thể là của một cá nhân hoặc một tổ chức, doanh nghiệp

MỸ THUẬT TRONG THIẾT KẾ WEB

Ngày nay bất cứ ngành nghề gì cũng đòi hỏi tính thẩm mỹ Trong thiết kế

Web điều này lại càng thể hiện rõ hơn

Cũng giống như trong các lĩnh vực khác, yếu tố thẩm mỹ trong thiết kế Web chuyên nghiệp đòi hỏi phải thể hiện đúng quy luật, quy tắc mỹ thuật, bố cục Mà là tổng

Chương 1: Thiết kế mỹ thuật giao diện Web 12 thể của nhiều yếu tố hòa quyện như trình bày nội dung và các yếu tố thiết kế phù hợp

Mẫu thiết kế phải trình bày được thông điệp mà Web muốn nói Một giao diện đẹp nhưng bắt buộc phải đúng với nội dung mà Web đề cập tới Khái niệm về mỹ thuật, thiết kế mỹ thuật cho trang Web là tạo bố cục, đường nét, đường khung, Bên cạnh đó còn có thêm những kiến thức về màu sắc, phối màu, tạo chữ, sử dụng kiểu chữ phù hợp cho giao diện trang Web Ý tưởng thiết kế Web Là cội nguồn của mọi thứ Đương nhiên Web đẹp phải có ý tưởng tốt để thể hiện điều đó Tính thẩm mỹ trong Web không chỉ là đẹp mắt mà còn phải phù hợp với nội dung Web và đáp ứng đầy đủ công năng của Web (xem Hình 1.13)

Hình 1.13 Minh hoạ ý tưởng thiết kế Web

Bố cục trang Web Quan niệm về cái đẹp trong Web cũng giống như các lĩnh vực đồ họa khác như thiết kế poster, brochure, catalogue,… Cũng phải có điểm nhấn, phải tuân theo quy luật thị giác, phải đảm bảo điểm vàng trong bố cục,… Chính vì vậy bạn hãy mạnh dạn áp dụng các kiến thức đã học về bố cục vào trong thiết kế Web nhé

Màu sắc Nó là yếu tố không thể không nhắc tới khi nói tới yếu tố thẩm mỹ Nó cũng là thứ đầu tiên đập vào mắt người xem Một lần nữa những người được đào tạo căn bản về mỹ thuật lại có lợi thế trong việc sử dụng, kết hợp màu sắc Việc chọn màu sắc trước tiên hãy chọn tông màu chính Sau đó chọn 1 màu bổ sung và chọn thêm 1 màu nhấn

Liên kết trang chính là sự sắp xếp các nội dung trong cùng 1 trang sao cho hợp lý Nó cũng giống như việc bạn bài trí các món hàng trong một gian hàng Các món hàng có liên quan gần nhau để người mua dễ tìm kiếm.Trong Web nó còn thể hiện ở việc các đường dẫn đi tới những trang khác, những link quay về, những nhóm thông tin liên quan được bố trí thuận tiện

Như vậy để đáp ứng yếu tố thẩm mỹ trong Web đòi hỏi người thiết kế Web phải là người có gu thẩm mỹ và có óc sáng tạo tốt.

KÍCH THƯỚC TRANG WEB

Kích thước chuẩn Web (Fixed layout): Kích thước cố định trong đó chiều rộng được đặt theo thông số riêng, không thay đổi ngay cả trên các thiết bị có độ phân giải khác nhau

Thông số chiều rộng Web thường là: 800 px, 960 px, 1000 px, 1260 px Trong đó, kích thước cố định phổ biến của Web là 960 px hiển thị hoàn hảo trên các màn hình có độ phân giải 1024

Kích thước Web full màn hình ổn định thông thường là: 1440×900 px (xem Hình 1.13 và Hình 1.14)

Hình 1.13 Kích thước chuẩn Web, kích thước Web mobile, kích thước layout Web

Hình 1.14 Kích thước trang Web chuẩn Ưu điểm của kích thước Web chuẩn: Đảm bảo nhất quán với tất cả độ phân giải Web

Thiết kế, kiểm soát kích thước Web, triển khai Web một cách đơn giản hơn

Hỗ trợ trên tất cả thiết bị, trình duyệt khác nhau

Dễ dàng, nhanh chóng bố cục các thành phần HTML có chiều rộng cố định

Dễ dàng đọc nội dung trang Web khi hiển thị trên các máy có độ phân giải cao hơn 800x600px (xem Hình 1.15)

Hình 1.15 Kích thước chuẩn giao diện Web,

Hạn chế của kích thước Web chuẩn:

Kích thước chiều rộng lớn hơn độ phân giải => Tạo thanh cuộn ngang gây khó khăn khi lướt Web

Mất tính thẩm mỹ, thiếu cân đối và hài hòa khi xem trang Web trên những màn hình có độ phân giải cao => Có khoảng trống lớn ở 2 bên Đơn vị tính kích thước Web chuẩn Px (pixel): Đơn vị tính một điểm trên màn hình

% là đơn vị kích thước lưu động

“em” là đơn vị dùng cho font chữ

“rem” được dùng với font-size của html

2 Một số kích thước Web khác

Kích thước lưu động (Fluid layout): Kích thước được tính theo tỷ lệ %, chiều rộng Web có thể linh hoạt thay đổi dựa theo kích thước trình duyệt Web

Kích thước co giãn (Elastic layout): Kết hợp của hai loại kích thước chuẩn và kích thước lưu động

Kích thước banner, slider trên trang chủ Web Kích thước hình ảnh trong bài viết, hình ảnh trong sản phẩm Kích thước Web khi share lên fanpage Facebook

Hình 1.16 Kích thước chuẩn thiết kế Web tốt cho SEO tối ưu UX- UI

KÍCH THƯỚC BANNER, FOOTER, MENU

Banner Web thông thường là những nhóm hình ảnh tĩnh hoặc ảnh động Được đặt tại Web để quảng cáo sản phẩm hay dịch vụ của mỗi doanh nghiệp Hình ảnh này được đặt trên đầu trang chủ của Web Hoặc cũng có thể là loại hình ảnh động được đặt tại thanh toolbar bên trái hoặc phải Web Thường được gọi là baner ngang hoặc banner dọc Một số banner treo để chạy quảng cáo liên kết giữa các Web còn có kích thước hình vuông Hoặc thiết kế dạng flash, html5 động

Tại mỗi hình ảnh banner Web sẽ được thiết kế sinh động, bắt mắt Đặc biệt luôn chèn những thông điệp logo hoặc slogan của doanh nghiệp Được đặt tại các vị trí bắt mắt của Web giúp thu hút khách hàng hoặc thu lượng truy cập vào Web Với mục đích chính là nâng cao doanh số bán hàng và để lại ấn tượng cho mỗi khách hàng

Tại các Web giới thiệu sản phẩm, Web doanh nghiệp bán hàng Banner sẽ được phân loại theo vị trí đặt trên Web Thông thường sẽ được phân làm 2 loại chính là banner ngang và banner dọc

728×90 pixel là loại kích thước chuẩn banner được áp dụng nhiều vào Web Kích thước này được sử dụng để làm hình ảnh cho những banner ngang tại Web chính và Web quảng cáo Lưu ý Web chính kích thước có thể lớn hơn Và có thể thiết kế theo kích thước của Web với chiều cao 90px

- Kích thước banner dọc Nếu như với banner ngang được đặt tại phía trên hoặc dưới nội dung content của Web thì banner dọc lại có nhiều chỗ đứng hơn Bởi banner dọc cũng có 2 kiểu là banner dọc hình chữ nhật hoặc là hình vuông Vì thế nên sẽ có nhiều kích thước hơn

Dưới đây là kích thước banner dọc chuẩn nhất của google các ban có thể tham khảo (xem Hình 1.17)

Kích thước banner đứng chữ nhật hiển thị trên máy tính: 300x600px, 160x600px, 300x250px, 336x280px

Kích thước banner dọc hình vuông hiển thị trên máy tính:250x250px, 200x200px Kích thước banner ngang hiển thị điện thoại: 300x50px, 300x100px

Kích thước banner đứng hiển thị trên điện thoại: 250x250px, 200x200px…

Hình 1.17 Kích thước banner dọc Web

Câu 1: Anh chị hãy cho biết banner dọc Web gồm có những kích thước thông dụng nào? Anh chị hãy vận dụng kiến thức đã học thiết kế 1 banner dọc với kích thước chuẩn 300*600px?

Câu 2: Anh chị hãy nêu rõ ưu điểm và hạn chế trong thiết kế banner Web theo kích thước chuẩn? Vì sao lại có hạn chế?

BỐ CỤC VÀ THIẾT KẾ WEB

KHÁI NIỆM BỐ CỤC

Bố cục là cách tổ chức, sắp xếp hình ảnh, chữ viết trong diện tích thiết kế Tất cả các yếu tố riêng biệt khi kết hợp với nhau trong thiết kế sẽ tạo thành một tổng thể có sự gắn kết chặt chẽ (xem Hình 2.1)

Hình 2.1 Bố cục trong thiết kế

Lý do cần sắp xếp bố cục thiết kế Một bố cục tốt trong thiết kế không chỉ thể hiện sự tương xứng, hài hòa mà còn thể hiện được ý đồ riêng của người thiết kế, mang lại hiệu quả truyền thông cao

Tạo sự hài hòa cho thiết kế: Các yếu tố trong thiết kế luôn có sự tác động qua lại lẫn nhau Khi đặt các yếu tố này đúng vị trí nó có thể gây ấn tượng cho người xem từ cái nhìn đầu tiên Sắp xếp bố cục hợp lý không làm người xem bị nhiễu loạn bởi quá nhiều thông tin hình ảnh

Chương 2: Bố cục và thiết kế Web 20

Thể hiện ý đồ truyền thông của thiết kế: Mỗi một bản thiết kế được tạo ra đều nhằm một mục đích nhất định Muốn đạt được mục đích đó việc sắp xếp bố cục hợp lý là vô cùng quan trọng Thiết kế cần phải có khả năng điều tiết người dùng chú ý đến cái gì trước, cái gì sau; cái gì là yếu tố chính của thiết kế, cái gì là phần phụ Muốn thể hiện ý đồ truyền thông một cách rõ ràng bố cục thường phải có tính phân cấp Có thể tạo ra phân cấp cho thiết kế bằng kích thước, tương phản về màu sắc, hình dạng, độ đậm nhạt của chữ

Tăng giá trị cho sản phẩm thiết kế: một tác phẩm có bố cục đẹp và nhà thiết kế có thể giải thích về bố cục đó chắc chắn tác phẩm sẽ có giá trị cao hơn.

BỐ CỤC CÂN ĐỐI - ĐỐI XỨNG - TỰ DO

Bố cục cân bằng là loại bố cục thường gặp trong thiết kế đồ họa Sự cân bằng trong bố cục thiết kế tương tự như sự cân bằng trực quan vật lý

Có hai loại trong bố cục cân bằng:

Cân bằng đối xứng: Tất cả các yếu tố như chiều cao, chiều rộng được sắp xếp một cách đối xứng trong bản thiết kế Bố cục cân bằng đối xứng tạo ra cảm giác ổn định (xem Hình 2.2)

Hình 2.2 Bố cục cân bằng đối xứng

Cân bằng không đối xứng: Hai bên phần tử không bằng nhau, tất cả các yếu tố sắp đặt không có sự đối xứng với nhau Cân bằng bất đối xứng được tạo ra từ việc sử dụng các yếu tố màu sắc, kích thước, số lượng, sắc độ…

Hình 2.3 Bố cục cân bằng không đối xứng

Là bố cục sử dụng màu sắc và hình ảnh đối lập nhau trong cùng một bố cục thiết kế Loại bố cục tương phản tạo ra một ấn tượng mạnh, hấp dẫn người xem Sự tương phản được tạo ta từ màu sắc, kiểu chữ, kích thước chữ (xem Hình 2.4)

Hình 2.4 Bố cục tương phản

Là bố cục tạo cho người xem cảm giác sự vật đang trong trang thái chuyển động hoặc có độ nông sâu nhất định Có thể tạo ra bố cục chuyển động bằng cách sắp xếp to nhỏ, sử dụng đường chéo (xem Hình 2.5)

Hình 2.5 Bố cục chuyển động

Giữa những đối tượng bình thường tạo ra một đối tượng khác về màu sắc, kích cỡ, nền hình ảnh… nhằm khiến người xem chú ý vào đối tượng được nhấn mạnh (xem Hình 2.6)

Hình 2.6 Bố cục nhấn mạnh

Sử dụng những đối tượng giống nhau về đường nét, màu sắc tương đồng; chung một thuộc tính để tạo ra một tín hiệu nhận diện Bố cục đồng nhất tương đối khó để tạo ra (xem Hình 2.7)

Hình 2.7 Bố cục đồng nhất

TỔNG QUAN VỀ THIẾT KẾ WEB

Web giống như “Show-room” trên mạng Internet, nó là nơi trưng bày và giới thiệu các thông tin/hình ảnh về doanh nghiệp, về các sản phẩm/dịch vụ mà doanh nghiệp cung cấp Bất cứ ai trên toàn thế giới đều có thể truy cập được, Web hoạt động liên tục 24h mỗi ngày và 7 ngày mỗi tuần Để Web có thể hoạt động được thì nhất thiết phải có tên miền, hosting và nội dung

2 Đặc điểm tiện lợi của Web

Thông tin được cập nhật và thay đổi dễ dàng Khách hàng có thể xem được thông tin sản phẩm/dịch vụ ngay tức khắc, ở bất cứ nơi đâu

Tiết kiệm chi phí in ấn, gửi bưu điện, fax…

Thông tin đăng tải không giới hạn, không hạn chế số trang, diện tích bảng in và không bị giới hạn về phạm vi địa lý

3 Các yêu cầu tối thiểu của một Weblist

Tên Web (hay còn được gọi là Tên miền hoặc Domain name), tên miền web có dạng: com, net, org, gov, edu, info, tv, biz, hoặc các TLD kết hợp với ký hiệu viết tắt của quốc gia: com.vn, net.vn, org.vn, gov.vn

Tổng quan về thiết kế Web bao gồm cả Web Hosting là nơi lưu trữ dữ liệu, thông tin Web trên máy chủ Internet Tại đây sẽ diễn ra tất cả các giao dịch, trao đổi thông tin giữa người sử dụng với Web

4 Những phần nội dung thiết yếu của một Web

Tổng quan về thiết kế Web thông thường bao gồm các nội dung sau:

+ Trang chủ: Là trang đầu tiên hiện lên khi người dùng truy cập vào Web Nó là nới trưng bày các thông tin mới nhất mà doanh nghiệp muốn người dùng có thể nhìn thấy đầu tiên Ngoài ra, trang chủ còn là nơi liệt kê các liên kết trong Web

+ Trang liên hệ: Là nơi trưng bày những thông tin liên hệ của doanh nghiệp và nó thường được thể hiện theo một form để người xem gõ câu hỏi ngay trên chính trang Web này

+ Trang giới thiệu về doanh nghiệp: Một khi người dùng đã click vào Web tức là họ muốn tìm hiểu về nhà cung cấp Do đó, doanh nghiệp cần có một trang giới thiệu về mình, nêu ra những thế mạnh nổi bật của mình so với những đơn vị khác trên thị trường

+ Trang giới thiệu về sản phẩm/dịch vụ: Là nơi cung cấp cho khách hàng biết tới những thông tin/hình ảnh về các sản phẩm/dịch vụ mà mình cung cấp

+ Trang hướng dẫn hoặc chính sách: Cung cấp thông tin, hướng dẫn người xem cách thức đặt mua hàng hóa/dịch vụ Tại đây, người dùng sẽ được hướng dẫn cách họ phải làm gì để mua hàng, hay những chính sách của doanh nghiệp…Trang này sẽ giúp doanh nghiệp tiết kiệm được khá nhiều thời gian và công sức cho những câu hỏi thường gặp “làm thế nào” của khách hàng Đây là cách tạo ấn tượng cho người xem cũng như thể hiện tính chuyên nghiệp của doanh nghiệp.

THIẾT KẾ WEB TƯƠNG THÍCH VỚI GIAO DIỆN NGƯỜI DÙNG

Bố cục của Web được thiết kế để phù hợp với nhiều kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường làm trước đó Đây được xem là thiết kế Web tương thích tốt với di động (Responsive Web Design)

Dựa trên sự phát triển của các chuẩn HTML5 và CSS3 nên việc thiết kế Web thân thiện với thiết bị di động trở nên dễ dàng hơn Ngày nay các mã nguồn còn cung cấp các phương thức cho người lập trình biết được Web được truy cập từ thiết bị nào (Iphone 6, Samsung S7, hay Ipad…) từ đó dễ dàng thiết kế Web phù hợp với thiết bị người truy cập

Thiết kế Web chuẩn Responsive là một nhu cầu thực tế trên thị trường để làm Web chuẩn SEO như hiện nay Thậm chí, nhiều người còn ví von rằng, khi nắm được kỹ thuật Responsive, nghĩa là đã nắm được xu thế của một kỷ nguyên Web trong thời đại 4.0 hiện nay

Thời gian trước đây việc phát triển Web đáp ứng mọi nhu cầu sử dụng trên các thiết bị như máy tính bảng, smartphone… là áp lực đối với các đơn vị làm Web, cũng như người dùng Mà để đảm bảo hiển thị tốt trên cả PC lẫn mobile, bắt buộc công ty thiết kế Web phải đưa ra giải pháp tốt nhất thiết kế hai hay nhiều giao diện khác nhau

Chương 2: Bố cục và thiết kế Web 25 Nhưng hiện nay đã có giải pháp tiện lợi dành cho Web đó chính là thiết kế Web chuẩn Responsive nhằm tương thích mọi thiết bị

Responsive Web Design được viết tắt (RWD) mà một thuật ngữ dành cho phương pháp thiết kế Web có khả năng hiển thị tương thích với mọi kích thước của tất cả thiết bị Hiểu một cách đơn giản nhất, thiết kế Web Responsive là phong cách thiết kế sao cho phù hợp với tất cả các thiết bị cũng như mọi độ phân giải màn hình Các hình ảnh, bài viết, bố cục được sắp xếp cân đối, theo trình tự khi xem trên máy tính hay trên tablet, điện thoại cũng đều tương tự nhau

Với thiết kế Web chuẩn Responsive, nội dung hiển thị sẽ dễ dàng đọc và điều hướng cụ thể hơn Các nội dung sẽ được xếp theo chiều dọc hoặc dạng cột, các hình ảnh sẽ tự động thay đổi kích thích hợp với thiết bị mà người xem sử dụng

2 Ưu, nhược điểm của việc sử dụng thiết kế Web chuẩn Responsive Ưu điểm: Được Google đánh giá cao nhờ tính năng cải thiện Search Engine Optimization (SEO): Chỉ cần tối ưu hóa một Web thì những giá trị về link, PageRank… từ Google Search và Google Mobile Search sẽ đều được quy về thành một

Khả năng tương thích cũng cực kỳ tốt: Một Web, nhiều device để tiết kiệm tất cả chi phí, bởi chỉ cần thiết kế 1 trang Web mà tương thích với tất cả các thiết bị

Nâng cao trải nghiệm đến mức tối ưu nhất , bất kể khi họ sử dụng PC, Smartphone, Tablet hay Smart-TV để truy cập

Việc quản trị duy nhất một Web cũng sẽ dễ dàng rút ngắn thời gian hơn trong việc quản lý, tiết kiệm công sức cũng như các chi phí khác

Có nhiều tranh cãi cho rằng một trong những lý do hạn chế khi sử dụng các thiết kế Web chuẩn Responsive là họ sẽ mất khá nhiều thời gian để tải trang

Thiết kế Web chuẩn Responsive tốn thời gian để phát triển hơn và tương đối phức tạp ->Vậy nên, lời khuyên là hãy ứng dụng ngay từ đầu khi có ý định làm Web chuẩn

SEO Đối với các Web Designer, sẽ phải thiết kế nhiều thứ hơn cho HTML/CSS Bởi vì tính chất đặc trưng của Responsive là “All in One” tất nhiên là phải bỏ nhiều công sức hơn trong giai đoạn thiết kế.

THIẾT KẾ GIAO DIỆN WEB

Thiết kế bố cục và giao diện Web là quá trình mẫu chốt quyết định sức hấp dẫn của doanh nghiệp khi người dùng ghé thăm Thiết kế bố cục và giao diện Web không

Chương 2: Bố cục và thiết kế Web 26 những cần phải ấn tượng, độc đáo mà còn chứa thông tin dễ nhìn, thân thiện với người xem

Trên thực tế, việc chọn một phong cách thiết kế có đúng ý mong muốn hay không còn dựa vào các yếu tố như ngân sách, thời gian, năng lực của người thiết kế Web,…

Nói về cách thiết kế giao diện Web, có thể chia làm ba loại: Thiết kế theo templates (modify from template), tự thiết kế theo yêu cầu (unique design) và kết hợp dùng hai phương pháp (average design) (xem Hình 2.8)

Hình 2.8 Mô phỏng giao diện Web

Là dùng ngôn ngữ HTML để làm ra bố cục và giao diện Web Web tĩnh (có đuôi html hoặc htm), một khi tải một trang Web tĩnh xuống từ máy chủ, các trình duyệt sẽ biên dịch các đoạn mã HTML và hiển thị thông tin Gần như chẳng thể tác động qua lại được với trang Web đấy

Ví dụ: Người có nhiệm vụ quản lý không thể thêm hoặc xóa bất kỳ sản phẩm nào đã có trong Web, người sử dụng không thể đặt hàng, gửi bài trên Web tĩnh Chỉ có thể xem thông tin, bài viết hoặc chạy các file âm thanh, clip Ưu điểm: Chạy nhanh, dùng một vài ít tài nguyên của máy chủ, hầu như không thể bị hack, chi phí để tạo Web tĩnh rất thấp chỉ cần phải trả một vài phí duy trì như phí domain, hosting

Nhược điểm: Không tương tác được với người dùng

Web động là Web có sự tác động qua lại giữa người truy cập Web và người có nhiệm vụ quản lý Web

Ví dụ: Khách truy cập có thể đặt hàng, gửi nội dung liên hệ

Người quản trị Web có thể thêm bài viết, xóa bài, sửa bài,… Ưu điểm: Có thể trao đổi qua lại qua lại với người sử dụng, làm thỏa mãn nhu cầu của khách hàng khi truy cập vào Web

Nhược điểm: Khoản chi tạo Web tương đối cao và có nguy cơ bị tấn công, nhiễm virus nếu có lỗ hổng bảo mật.

HOẠT ẢNH WEB VỚI ANIMATE CC

Do sự phát triển không ngừng của HTML5 và nhu cầu tạo hiệu ứng cho Web nhằm thúc đẩy chuẩn Web, các nhà phát triển đã viết lại hoàn toàn phần mềm Adobe Animate CC trong vài năm, tích hợp thêm HTML5 Canvas và hỗ trợ WebGL Giờ đây, sản phẩm mới đã ra đời với cái tên Adobe Animate CC và được tuyên bố phát hành lần đầu tiên vào năm 2016

Từ một nội dung đã được thiết kế, Adobe Animate sẽ tự động phát sinh mã nguồn dưới dạng HTML5, CSS3, Javascript để được nội dung động hoàn chỉnh nhằm tích hợp vào các dự án phát triển trên Web của mình

Bộ công cụ hoạt họa hàng đầu trong ngành của Adobe Animate cho phép tạo ứng dụng, quảng cáo và nội dung đa phương tiện hấp dẫn, tương thích mọi màn hình máy tính hoặc điện thoại (xem Hình 2.9)

Tạo nội dung Web tương tác cho game và quảng cáo bằng các công cụ minh họa

& hiệu ứng chuyên nghiệp Xây dựng môi trường game, thiết kế màn hình, giao diện khởi động, hình sprite trình phát tương tác Thậm chí cả âm thanh tích hợp Với Adobe Animate, có thể thực hiện toàn bộ thiết kế công cụ (asset) Và lập trình ngay trong ứng dụng

Tiếp cận đối tượng trên desktop, mobile, TV bằng cách xuất tác phẩm hoạt họa sang nhiều nền tảng Bao gồm HTML5 Canvas, WebGL, Flash/Adobe AIR, SVG,…

Hình 2.10 Các hoạt cảnh được tạo

Không gian làm việc chính của Adobe Animate:

Thanh công cụ: Edge Animate hỗ trợ một số công cụ cơ bản Để tạo hình, hiệu chỉnh nhanh đối tượng

Stage: Là đây mà một giao diện trực quan Cho phép sắp xếp các đối tượng và tạo chuyển động cho chúng trên đó

Properties Panel: Mỗi đối tượng đều có các thuộc tính riêng như kích thước, màu nền, màu viền, đổ bóng

Timeline Panel: là nơi điều khiển các diễn hoạt cho từng đối tượng

Elements Panel: là nơi chứa các thành phần trang Web Library Panle: nơi quản lý hình ảnh, font chữ, symbols,… (những đối tượng import từ bên ngoài vào

Hình 2.11 Không gian làm việc CÂU HỎI ÔN TẬP

Câu 1: Anh chị hãy cho biết ý nghĩa của Web tĩnh và Web động là gì?

Câu 2: Anh chị hãy cho biết khái niệm bố cục là gì? Vận dụng những kiến thức đã học anh chị hãy vẽ 1 bố cục giao diện Web về bán hàng điện tử? Gợi ý có thể dựa trên mẫu giao diện Web từ những trang như Tiki, Shopee.

ĐƯỜNG NÉT – HÌNH NỀN – QUAN HỆ

ĐƯỜNG NÉT VÀ SỰ BIỂU DIỄN CỦA ĐƯỜNG NÉT

Đường nét là sự diễn tả bằng nét vẽ Xét về mặt hình học thì đường nét không tồn tại Nó được coi là có bởi sự nhìn nhận giữa con người với nhau, như là một quy ước được thỏa thuận giữa trí tuệ của con người với con người

Các yếu tố để xác định một đường nét:

- Màu sắc của nét (Color);

- Tinh thần, chất lượng của đường nét như: Mạnh yếu, rõ nhòe, khô ướt, lúc rõ lúc nhòe, cứng mềm, đều nét hay bể nét (Quality);

- Tinh thần của đường nét, tốc độ, bút lực, sức mạnh của nét (Force);

- Khả năng gợi chất của nét (Texture) thông qua chất liệu cụ thể dùng để vẽ như: mực, sơn dầu, vữa hồ, sắt, gỗ, thủy tinh (cắt, khắc, thành nét…);

- Chiều hướng của đường nét (Direction) như: Ngang dọc, xiên cong, gãy;

- Độ đậm hay nhạt của nét (Value/Tone)

Trên thực tế, có khi khái niệm về đường nét được xác nhận do sự phân chia của hai hay nhiều diện tích của một vật thể nào đó mà thôi

Mỗi loại đường nét này có khả năng gây ấn tượng tĩnh động hay ý nghĩa nào đó, khác nhau như sau: a Đường thẳng nằm ngang (Horizontal line): Gợi cho người xem ấn tượng về sự tĩnh lặng, nghỉ ngơi, an bình, khoáng đãng, mông mênh, vững chãi Thí dụ cảnh bãi biển lúc bình minh tĩnh lặng b Đường thẳng, thẳng đứng (Vertical line): Gợi cho người xem cảm giác, ấn tượng về sự uy nghi, uy vũ, nghiêm túc, trang trọng, vững chắc, tĩnh lặng, quyền lực

Thí dụ, có cảm giác này khi bước vào nội thất các cung điện nguy nga, đồ sộ với những hàng cột to, cao vút c Đường xiên (Oblique line): Gợi cho người xem ấn tượng về sự chuyển động từ nhẹ nhàng như những cơn mưa lao xao, đến hình tượng của những trận mưa nặng hạt, mưa bão dữ dội hay cảnh gươm giáo xiên xéo trong những trận giáp chiến hỗn loạn d Đường gáy (Break line): Gợi ấn tượng về sự đột biến Thí dụ hình ảnh về đường xẹt bất chợt của ánh sấm sét, vết kính vỡ

Chương 3: Đường nét – hình nền – quan hệ 31 e Đường cong (Curved line): Gợi cho người xem những ấn tượng chuyển động từ có nhịp điệu từ nhẹ đến mạnh, đến hỗn loạn, hoặc ma quái Thí dụ hình tượng một loạt các cú nẩy của quả bóng liên tục bật lên, rơi xuống sàn nhà Hình tượng những cụm khói cuồn cuộn của những đám cháy Hình tượng chảy xệ, chảy nhễu nhão do kính dị dạng tạo ra f Đường quanh co (Sinuous lines): Đường quanh co, uốn lượn tượng trưng cho sự quyến rũ, sự say mê va sự mềm dẻo của cuộc sống Tất cả những đường quanh co hay đường rắn lượn (snake lines) theo chiều hướng nào đó cũng là một phương tiện diễn đạt nghệ thuật thị giác (minh họa hình con rắn, đường lượn).

ĐƯỜNG VIỀN VÀ MỐI QUAN HỆ HÌNH - NỀN

Một đường xác định cạnh của cái gì đó được xem là đường viền Hai đường viền được kết nối có thể tạo góc, ví dụ: Đường viền thường được sử dụng để tách phần thân của trang Web khỏi chân trang hoặc được sử dụng xung quanh các đối tượng (chẳng hạn như ảnh) làm đường viền

Có nhiều cách để tạo một đường thẳng, chúng có thể là một đường liền mạch hoặc chấm hoặc lộn xộn Các đường có thể có màu hoặc không Mỗi loại đường kẻ được mô tả tốt nhất tùy theo mục đích được sử dụng Đường trang trí: Kiểu đường kẻ này được sử dụng để tô điểm cho một đối tượng, văn bản hoặc yếu tố thiết kế Các đường trang trí thường được sử dụng cho các phần tử như gạch dưới văn bản Đường phân chia: Đường chia nhỏ và xác định các phần riêng biệt của thiết kế là chia các đường Chúng bao gồm các dòng giữa các cột văn bản hoặc dòng giữa phần chính của trang Web và sidebar Đường “ngụ ý”: Đôi khi một đường không thực sự là một đường nào cả Đây chính là một đường kẻ ngụ ý Nó được tạo ra khi các đối tượng hoặc các phần tử rơi vào sự liên kết theo cách tạo ra một dòng riêng của nó Ví dụ, một hàng các mục menu trên một trang Web sẽ tạo một dòng Đường “tâm linh”: Các yếu tố khiến mắt tạo ra chuyển động giống như một dòng sẽ được coi là đường tâm linh Một mũi tên chỉ vào một đối tượng khác, ví dụ, là một đường tâm linh vì nó khiến nhìn vào thứ gì đó theo đường dẫn mà một đường thẳng sẽ tạo ra

Sử dụng các dòng trống là phương pháp hàng đầu để phân tách các phần nội dung kể từ thời xa xưa, cả trong sản xuất in ấn và trong các giao diện UI Chúng được nhận ra dễ dàng trong vai trò này, vì vậy người dùng sẽ không cần phải suy nghĩ kỹ

Mặt khác, loại hình này có vẻ siêu đơn giản và khác xa so với bản gốc Vì vậy, khá thường xuyên, các nhà thiết kế cố gắng tìm cách khác để phân tách nội dung Hơn

Chương 3: Đường nét – hình nền – quan hệ 32 nữa, chỉ nên sử dụng các dòng nếu nội dung không thể được phân chia một cách hiệu quả theo cách khác Quá nhiều dòng có thể làm quá cho màn hình bị tràn nội dung và khiến người xem khó đọc hơn (xem Hình 3.1)

Hình 3.1 Hiệu ứng đường nét trogn thiết kế Web

2 Mối quan hệ giữa hình – nền

Negative Space (còn gọi là không gian trắng) là không gian trống trên màn hình xung quanh và thường bên trong các yếu tố Tuy nhiên, trống không có nghĩa là thụ động hoặc lãng phí: Bất kỳ yếu tố nào khác của màn hình, nó hoạt động hỗ trợ trải nghiệm người dùng tích cực Negative Space là một trong những loại phân chia thị giác phổ biến nhất, đặc biệt là trong các giao diện được xây dựng trên ý tưởng về sự tối giản và đơn giản (xem Hình 3.2)

Chương 3: Đường nét – hình nền – quan hệ 33

Hình 3.2 Không gian trắng trong thiết kế Web

QUAN HỆ HÌNH - NỀN - ĐƯỜNG KHUNG

Trước một điểm nhấn, con mắt ta sẽ phản ứng như thế nào Điểm nhấn đó sẽ không nổi lên nếu đằng sau nó không có một cái nền Như vậy, khi bắt gặp một hình thể thì sẽ xuất hiện ngay một mối quan hệ đầu tiên Mối quan hệ Hình và nền

Khi chỉ ở dạng đen trắng; có thể thử tự vẽ theo cảm tính các chấm tròn với độ to nhỏ khác nhau để hiểu được sự tương phản của hình và nền; tương phản giữa hình này với hình kia…

Theo nguyên lý này hình ảnh được cảm nhận nhờ có mối quan hệ của nó với nền Một cây được cảm nhận nhờ đặt nó trong nền của một bầu trời Tương tự như vậy các con chữ được cảm nhận vì chứng được đặt vào nền của một trang giấy Sự cám nhận của một vật thê về mặt màu sắc kích cỡ hình dáng độ đậm nhạt và lý giái v.v… đều phụ thuộc vào mối quan hệ giữa nền và hình Chúng ta cảm nhận một hình ánh trên một nền hoặc nền trên đó có hình đều phụ thuộc vào tính chất của người cám nhận cũng như dộ nối của hình hoặc của nền

Những kinh nghiệm về cám xúc ngoài những kinh nghiệm về thị giác có thế được coi như là hình và nền Một người nào đó đang ăn một đĩa thức ăn quá mặn sẽ cảm nhận muối như là hình trên nền cứa bánh mì và rau Chúng ta ngửi một mùi vị, nghe một tin tức và xem một hình ảnh của vô tuyến (ảnh) và trong cùng một lúc chúng ta vận nhận

Chương 3: Đường nét – hình nền – quan hệ 34 ra một cuộc đối thoại vẫn tiếp diễn và có rất nhiều vật thể khác đang tồn tại trong phòng (nền)

Những mối quan hệ giữa nền và hình đều rất quan trọng theo góc độ cảm nhận về nền hoặc về ảnh (xem Hình 3.3)

Hình 3.3 Chiếc bình có 2 khuôn mặt – một hình ảnh

Trong trường hợp hình mập mờ có thể nhìn nhận như là hình của một thái nêu trên có thể có hai cách giải thích phụ thuộc vào sự cảm nhận; hai hình dáng, chiếc bình hav hai khuôn mặt, cái nào là ảnh, cái nào là nền Hơn thế nữa, khó có thể cả hình và nền trong cùng một lúc

Chương 3: Đường nét – hình nền – quan hệ 35

Câu 1: Anh chị hãy cho biết mối quan hệ giữa hình và nền? Phân tích bức ảnh có 2 khuôn mặt và cho biết cảm nhận gì khi có sự kết hợp như vậy?

Câu 2: Anh chị hãy cho biết định nghĩa của đường viền là gì? Hãy cho biết mối quan hệ giữa đường viền và hình nền?

Câu 3: Vận dụng những phần mềm đã học, anh chị hãy vẽ 1 giao diện Web có kết hợp đường nét và hình nền?

MÀU SẮC

KHÁI NIỆM VÀ CÁC YẾU TỐ VỀ MÀU SẮC

- Màu sắc là con đẻ của ánh sáng Màu sắc là ánh sáng

- Màu sắc mà phân biệt từ ánh sáng là những cảm giác

+ Sự phản chiếu của ánh sáng trên những vật thể màu sắc ánh sáng

+ Màu của vật thể mà ta cảm nhận được là sự cộng hưởng của màu ánh sáng với màu của bản thân vật thể đó, màu của các sự vật lân cận tác động vào, màu của bầu khí quyển đang bao bọc chung quanh đó nữa

- Theo quang học: Khi luồng áng sáng trắng đi qua lăng kính mặt trời thì tách ra 7 sắc gồm: Vàng, cam, đỏ, lục, lam, chàm, tím

- Trong hội hoạ thì màu là những chất liệu cụ thể do những sắc tố được chiết ra từ khoáng chất, hoá chất, thảo mộc > màu sắc tố

2 Yếu tố cơ bản của màu sắc

Sắc ( Ton ) Độ đậm hoặc nhạt của một màu nào đó khi pha trắng hoặc pha đen

Quang độ: (Valuer) Độ sáng hoặc tối của một màu, là tác dụng liên kết giữa các độ đậm nhạt này với độ đậm nhạt kia Ví dụ: Trong vòng thuần sắc, vàng là màu có đỉnh quang độ sáng nhất, tím là màu có đỉnh quang độ tối nhất do Sự đập mắt

Là mức độ mạnh hay yếu của một màu nào đó (thị giác cảm nhận được độ tươi thắm) do Sự kích thích thị giác Ví dụ: Vàng: Quang độ sáng hơn Cam: Cường độ mạnh hơn do độ tươi thắm của nó.

CÁC MÀU CƠ BẢN VÀ CÁCH PHỐI MÀU

Màu bậc nhất: Còn gọi là màu chính, màu cơ bản, màu bậc nhất Từ đó có thể pha ra các màu khác (trừ đen và trắng – không màu nào pha trộn ra nó) (xem Hình 4.1)

Gồm 3 màu: Vàng, đỏ, lam

Màu bậc hai (màu bổ túc): Còn gọi là màu phụ, màu bậc hai Gồm 3 màu: Tím, lục, cam (xem Hình 4.2)

Cam vàng, Cam đỏ, Tím lam, Tím đỏ, Lục lam, Lục vàng Được pha với phân lượng bằng nhau từ màu bậc 1 với màu bậc 2 đứng cạnh nhau trên vòng thuần sắc

Tương tự ta có Màu bậc 4,5,6,7 …

Bằng cách pha với phân lượng bằng nhau giữa các màu đứng cạnh nhau trong vòng thuận sắc ta tiếp tục có các màu bậc cao hơn (xem Hình 4.3)

Màu tương phản: Màu đối kháng nhau, khi đứng cạnh nhau màu này làm nổi bật màu kia hay ngược lại

Có 3 cặp màu tương phản:

Vàng – Tím Đỏ – Lục Lam – Cam

Màu nóng, màu lạnh (xem Hình 4.5)

Hình 4.5 Màu nóng, màu lạnh

Màu nóng: Gây cảm giác ấm áp, gần, kích thích thị giác –> Màu ngả đỏ: Vàng, cam vàng, cam, cam đỏ, đỏ

Màu lạnh: Gây cảm giác mát mẻ, dễ chịu hoặc lạnh lẽo, xa –> Màu ngả xanh:

Lục vàng, lục, lục lam, lam, tím lam, tím, tím đỏ

Màu trung tính: Màu trung tính do sự kết hợp giữa trắng và đen tạo ra Màu không thuộc nóng, không thuộc lạnh: Màu xám

+ Xám do đen pha trắng + Xám do pha 2 màu tương phản với nhau + Xám do pha 3 màu chính với nhau (xem Hình 4.6)

- Màu điều giải sự mâu thuẫn đối kháng về sắc độ, cường độ, quang độ, được pha từ hai màu đang có sự tương phản với nhau

- Hai màu tương phản về nóng lạnh, tìm màu trung gian trên vòng thuần sắc

Màu tương đồng: Màu tương đồng là những màu thoạt nhìn qua trông chúng có vẻ giống nhau, nhóm màu đứng cạnh nhau trong vòng thuần sắc Một dãy màu nối tiếp nhau, liên kết nhau chặt chẽ, không phân biệt nóng lạnh (mở rộng cả khi pha với trắng hoặc đen) (xem Hình 4.7)

Màu bổ túc xen kẻ - Vàng và tím: Cặp màu tương phản (Tím đỏ, tím lam: 2 màu tương đồng với tím, là một cặp bổ sung xen kẽ của vàng)

- Đỏ và Lục: Cặp màu tương phản (Lục vàng, lục lam: 2 màu tương đồng với lục, là một cặp bổ sung xen kẽ của đỏ)

- Lam và Cam: Cặp màu tương phản (Cam vàng, Cam đỏ: 2 màu tương đồng với cam, là một cặp bổ sung xen kẽ của lam) Áp dụng để trang trí: Màu tương đồng nhau làm phông (fond) là chủ toàn bộ không gian, màu còn lại (cũng là màu gốc trong nhóm 3 màu bổ sung xen kẽ) làm màu nhấn, màu trọng điểm (xem Hình 4.8)

Hình 4.8 Màu bổ túc xen kẽ

Bổ túc trực tiếp: Các màu nằm đối diện nhau trong bản màu bổ sung trực tiếp cho nhau

Bổ túc kép: Hai màu nằm hai bên bổ sung kép cho màu đối diện trên bản màu ( Tạo thành hình tam giác cân )

Bổ túc bộ ba, bổ túc bộ bốn Màu chủ đạo:

- Màu chiếm diện tích trội nhất trong toàn bộ không gian, chi phối toàn bộ hoà sắc của không gian

- Một không gian trang trí có màu chủ đạo như một bản nhạc có chủ âm

- Màu chủ đạo còn tuỳ thuộc vào đề tài, không gian, thời gian, vị trí sử dụng, tâm sinh lý người sử dụng, ý đồ, tình cảm

Nói đến màu chủ đạo là nói đến màu nhấn để tạo sự cân đối, hài hoà, là màu tô điểm có tác dụng dẫn mắt, tạo chính phụ Màu nhấn là màu tương phản với màu nền (màu chủ đạo) về tính chất nóng, lạnh, sắc độ, quang độ, cường độ

Hiện nay, có 2 hệ thống màu chính được chia thành pha màu theo phép cộng màu và pha màu theo phép trừ màu Phép cộng màu được sử dụng cho bất kỳ thứ gì phát ra ánh sáng (chẳng hạn như màn hình, máy chiếu, mặt trời, ), còn lại, những vật phản chiếu ánh sáng sử dụng pha màu theo phép trừ màu

Danh sách các màu cần thu thập bao gồm: Đỏ, vàng, cánh sen, xanh lá, xanh lơ, xanh dương, đen và trắng Trong danh sách này, có 3 màu cơ bản là cánh sen, vàng và xanh lơ (xem Hình 4.9)

Ba màu thứ cấp được tạo ra từ 2 màu gốc cơ bản trộn với nhau, gồm:

- Xanh lá cây = vàng + xanh lơ - Xanh dương = cánh sen + xanh lơ - Đỏ = vàng + cánh sen

- Đen = xanh lơ + vàng + cánh sen

Hình 4.9 Hệ thống 3 màu cơ bản và 3 màu thứ cấp – màu trừ

Màu phụ, hay còn được biết đến là màu bù là các màu được tạo nên bằng cách phối hợp các màu cơ bản Hãy thử nhìn các vùng trắng trên màn hình máy tính Khi sử dụng kính hiển vi, có thể thấy nó không phải là màu trắng Thay vào đó, nó là vô vàn những chấm đỏ, xanh dương và xanh lá cây Nó hoạt động dựa trên cách phối ánh sáng thay vì cách hấp thụ màu như các chất màu Cho dù đó là màn hình TV hay màn hình điện thoại, tất cả đều hoạt động dựa trên cách phối ánh sáng (hay còn gọi là phối màu bù) Nó được biết đến qua mô hình RGB

Theo mô hình này, con người sẽ nhìn thấy các màu sắc dựa trên sóng ánh sáng

Việc hòa trộn các ánh sáng sẽ cho phép tạo ra những màu mới với cường độ thay đổi màu cơ bản khác nhau (xem Hình 4.10)

Hình 4.10 Hệ thống 3 màu cơ bản và 3 màu thứ cấp – màu bù

Cũng giống như cách phối màu trừ, phối ánh sáng cũng gồm 3 màu cơ bản, tiếp đó là 3 màu thứ cấp được tạo nên từ việc phối hợp 2 trong 3 màu cơ bản đó Danh sách các màu bao gồm:

- Màu cánh sen = đỏ + xanh dương - Màu xanh lơ = xanh lá cây + xanh dương - Màu vàng = xanh lá cây + đỏ

Khi các màu bù được phối hợp lại với nhau, nó sẽ tạo ra màu trắng.

ĐỒ THỊ MÀU SẮC

Khi cố gắng mô tả một màu, cách làm phổ biến nhất là tham chiếu đến một vật thể có màu sắc trong tâm trí Ví dụ, khi mô tả màu đó là ‘đỏ’, mọi người thường sử dụng

‘táo’ để mô tả ‘đỏ’ Nhưng đang nói về loại táo nào? Có nghĩ về cùng một loại táo không? Có ít nhất bảy sắc thái khác nhau của màu "đỏ" giữa các giống táo khác nhau

Chưa kể đến giống táo cuối cùng; nó thậm chí không có màu đỏ! Do đó, có sự khác biệt khi sử dụng các đồ vật để mô tả màu sắc Và cần phải tìm cách để giảm sự khác biệt trong giao tiếp (xem Hình 4.11)

Hình 4.11 Các loại táo khác nhau

Con người có xu hướng sử dụng “số” để thể hiện sự đo lường chính xác Ví dụ, sử dụng các số để mô tả chiều dài, trọng lượng, v.v Do đó, cần một cách để thể hiện màu ở dạng số, vì vậy có thể nói màu A và màu B giống nhau vì chúng có cùng giá trị số Quay trở lại năm 1913, CIE (Ủy ban Quốc tế de l´Eclairage) đã đưa ra định nghĩa về

Giá trị Tristimulus (giá trị XYZ) để định lượng màu sắc con người có thể cảm nhận được Các giá trị XYZ được xây dựng bằng cách nhân ba thuộc tính sau đây: Phân bố phổ năng lượng của nguồn sáng, độ phản xạ của vật thể và các chức năng Quan Sát Tiêu Chuẩn để mô tả các đặc tính của hệ thống thị giác ở người Kết quả là khi màu A và màu

B có cùng giá trị XYZ, có thể nói màu A và màu B trông như nhau (xem từ Hình 4.12 đến Hình 4.14)

Hình 4.14 Công thức để tính giá trị XYZ

Một lợi thế khác của việc xác định màu sắc bằng giá trị số là có thể dễ dàng thể hiện màu sắc trong sơ đồ với hệ thống tọa độ Và điều này tạo thành một hệ màu

Trình bày sơ đồ màu xy 1931 CIE, thể hiện tất cả màu sắc mà con người có thể nhận thức được Tuy nhiên, sơ đồ này không thực sự phản ánh được sự nhạy cảm của hệ thống thị giác ở người Ví dụ như xanh lam và xanh lá cây Con người rất nhạy cảm với màu xanh lam và ít nhạy cảm với màu xanh lá cây: Một chút màu đỏ chúng ta nhìn ra màu tím và ít màu xanh lá cây chúng ta nhìn ra màu xanh lơ Hiện tượng này không được phản ánh, sơ đồ màu xy CIE 1931 Kết quả là, vào năm 1976, sơ đồ màu u’ v’ được đề xuất để phản ánh cảm giác của hệ thống thị giác ở người (xem Hình 4.15 và Hình 4.16)

Hình 4.15 Sơ đồ màu xy CIE 1931

Hình 4.16 Sơ đồ màu u’ v’ CIE 1976

CÁCH SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ WEB

Chọn màu nền cho trang Web rất quan trọng, nó là nền móng cho bất cứ cách kết hợp màu nào và ảnh hưởng lớn đến tổng thể cả bản thiết kế Màu nền đại diện cho thiết kế, quyết định ấn tượng đầu tiên của người dùng về trang Web Phải đảm bảo được rằng màu nền đó thể hiện được đúng mục đích và ý nghĩa của trang Web muốn thể hiện

Màu đen thường làm người ta liên tưởng đến bóng tối, cái ác hay ma quỷ, nhưng nó cũng đại diện cho sự sang trọng, quyền lực và sức mạnh Màu đen là một màu nền tuyệt vời vì nó tương phản với hầu hết tất cả các màu sắc, kể cả các màu tươi sáng Tuy

Chương 4: Màu sắc 47 nhiên hãy cẩn thận khi dùng quá nhiều màu đen, nó khiến chữ khó đọc hơn và có thể gây nhức mắt nếu nhìn trong thời gian dài (xem Hình 4.17)

Hình 4.17 Giao diện Web màu đen

Màu trắng đại diện cho sự sạch sẽ, tinh khiết, hoàn hảo và tạo cảm giác nhiều không gian Nó cũng tương phản với hầu hết các màu như màu đen, nhưng không áp đảo mà làm cho mắt dễ nhìn hơn Màu trắng là màu sắc tuyệt vời để làm màu nền cho các trang Web liên quan tới tôn giáo, các tổ chức từ thiện vì nó thể hiện sự ngay thẳng, thuần khiết hoặc dành cho các trang Web về nghệ thuật và nhiếp ảnh Nếu muốn tìm kiếm một thiết kế nhìn thoáng và rõ ràng, hãy dùng nhiều màu trắng (xem Hình 4.18)

Hình 4.18 Giao diện Web màu trắng

Màu đỏ là một màu khá là mạnh, giống như một ngọn lửa rừng rực la hét thu hút sự chú ý, vì thế nó là một màu tuyệt vời khi cần kêu gọi, thuyết phục Màu sắc cũng liên quan đến năng lượng, trong đó màu đỏ là màu nhiều năng lượng nhất, thu hút sự chú ý của người dùng nhấp vào quảng cáo hay đăng ký sản phẩm (xem Hình 4.19)

Hình 4.19 Giao diện Web màu đỏ

Màu cam thường khiến người nhìn cảm thấy vui vẻ Nó là màu sắc nhiệt đới gắn liền với niềm vui, say mê, năng lượng Màu cam là một màu rất thân thiện, mời gọi, thường khá hiệu quả với những lời kêu gọi hành động Màu cam cũng là một trong những màu có tỉ lệ hiển thị cao nhất, vì vậy những phần dùng màu cam sẽ thu hút mắt người dùng và làm nổi bật các yếu tố quan trọng của bản thiết kế

Hình 4.20 Giao diện Web màu cam

Màu vàng tươi sáng, nhẹ nhàng và vui vẻ Màu vàng thường tạo cho người ta cảm giác ấm áp, vui vẻ, nó cũng là màu tương phản tuyệt vời với các gam màu tối hơn như đen, xám Màu vàng là màu tuyệt vời để làm nổi bật các yếu tố quan trọng và thu hút sự chú ý của người dùng Tuy nhiên quá nhiều màu vàng tạo cảm giác không ổn định, vì vậy nếu đang cần làm một trang Web cần tạo cảm giác an toàn thì nên tránh dùng màu vàng (xem Hình 4.21)

Hình 4.21 Giao diện Web sử dụng màu vàng

Màu xanh lá cây là màu của thiên nhiên, thường gắn liền với sự phát triển, hòa bình, sự ổn định Màu xanh lá cây là màu nền tuyệt vời khi muốn thể hiện sự yên bình vì nó là màu sắc làm dịu mắt nhất Vì màu xanh lá cây đối lập với màu đỏ, nên tạo cảm giác an toàn, tin cậy, thích hợp với các tổ chức tài chính, ngân hàng (xem Hình 4.22)

Hình 4.22 Giao diện Web sử dụng màu xanh lá

Màu xanh lam mang tính ổn định và có chiều sâu, nó tượng trưng cho sự tự tin, chân thành, hy vọng, hiểu biết và tin tưởng Màu xanh lam thường được nam giới ưu thích Tuy nhiên nó không phải màu tốt để thu hút sự chú ý, vì nó không nổi bật so với các màu tương phản Một điểm thú vị nữa là màu xanh lam làm giảm cảm giác thèm ăn, nên đừng dùng nó cho các trang Web về thực phẩm (xem Hình 4.23)

Hình 4.23 Giao diện Web sử dụng màu xanh lam

Cách kết hợp này là sử dụng độ bóng và độ bão hòa (saturation) của cùng 1 màu, nghe có vẻ khá nhàm chán, không hẳn vậy Cách kết hợp này khá là đơn giản mà tạo cảm giác lịch sự và tao nhã, tạo sắc thái riêng Tuy nhiên nó trông có thể hơi đơn điệu do thiếu sự tương phản Nếu cảm thấy quá nhạt nhẽo thì có thể thử cách Analogous (sẽ được giải thích phía dưới), bằng cách này có thể tăng sự tương phản mà vẫn tạo cảm giác đơn giản

Hình 4.24 Giao diện phối màu đơn sắc

Cách kết hợp này được dùng khi muốn tạo một sự tương phản mạnh mẽ Màu tương phản là 2 màu đối diện nhau trong vòng tuần hoàn màu sắc Ví dụ như màu nền của là màu xanh, thì màu tương phản với nó là màu đỏ Màu tương phản khá khó nhìn nếu dùng quá nhiều, đặc biệt cho chữ viết, nhưng cực hữu ích khi muốn làm nổi bật một cái gì đó Màu đồng phục hoặc logo trong thể thao thường có xu hướng dùng màu tương phản, cách này cũng phổ biến trong quảng cáo (xem Hình 4.25)

Hình 4.25 Giao diện phối màu tương phản

Cách kết hợp này là của 3 màu nằm tại các đỉnh của một tam giác đều trên vòng tuần hoàn màu sắc Cách này vẫn giữ được độ tương phản mà hài hòa hơn cách kết hợp màu tương phản Tuy nhiên cũng chỉ nên chọn một màu chủ đạo, dùng nhiều hơn Nếu muốn có sự sống động của màu tương phản nhưng vẫn muốn giữ sự đồng nhất của màu đơn sắc thì cách kết hợp này (xem Hình 4.26)

Hình 4.26 Giao diện phối màu tam giác

Chương 4: Màu sắc 52 Đây là cách kết hợp sử dụng 4 màu trong đó có 2 cặp màu tương phản, cách này vừa rực rỡ lại vừa cân bằng và có thể tạo thành rất nhiều biến thể Tuy nhiên khá khó để cân bằng màu nóng, màu lạnh, vì vậy chỉ nên dùng 1 màu làm chủ đạo (xem Hình 4.27)

Hình 4.27 Giao diện phối màu hình chữ nhật

Màu tương tự là các màu sắc nằm cạnh nhau trong vòng tuần hoàn, thường thì chúng khá ăn nhập với nhau, tạo cảm giác êm ái, dễ chịu Cách kết hợp này thường tìm thấy trong tự nhiên, tạo cảm giác dễ chịu cho mắt Tuy nhiên nó ko phải cách kết hợp tạo được sự tương phản cao, nó chỉ tương phản tốt hơn cách phối màu đơn sắc Cách tốt nhất để sử dụng cách này là dùng một màu làm chủ đạo, màu thứ hai để củng cố, màu thứ 3 dùng kèm với trắng, đen, xám để tô điểm Ví dụ sử dụng màu xanh lá cây là chủ đạo, thì sẽ dùng thêm màu xanh lá mạ để củng cố và dùng màu xanh dương để tạo sự tương phản (xem Hình 4.28)

Hình 4.28 Giao diện phối màu tương tự

Câu 1: Anh chị hãy cho biết màu sắc là gì? Có bao nhiêu loại màu sắc và nêu rõ ý nghĩa của từng loại màu sắc? Các yếu tố màu sắc gồm những gì?

Câu 2: Anh chị hãy cho biết cách pha màu trừ, màu cộng và cách pha màu CMYK trên phần mềm đã học?

Câu 3: Anh chị hãy thiết kế một giao diện Web với chủ đề màu cam?

CHỮ (TEXT)

KHÁI NIỆM VÀ SỰ RA ĐỜI CỦA CHỮ

Lịch sử chữ viết bắt đầu khi các hệ thống chữ viết đầu tiên của loài người xuất hiện vào đầu thời kỳ đồ đồng (cuối thiên niên kỷ 4 trước Công nguyên) từ các biểu tượng tiền ký tự của thời kỳ đồ đá mới

1 Hệ thống biểu tượng tiền ký tự

Những hệ thống chữ viết đầu tiên không tự xuất hiện Chúng bắt nguồn từ các tập quán cổ xưa của các hệ thống biểu tượng Những hệ thống này không thể coi là chữ viết, nhưng chúng có rất nhiều đặc điểm liên hệ với chữ viết sau này, vì vậy có thể gọi là hệ thống tiền ký tự (nguồn gốc của chữ viết) Chúng là các hệ thống biểu tượng khá dễ nhớ và ghi lại ý, cho phép truyền đạt thông tin nhất định Tuy vậy, chúng không có nội dung ngôn ngữ Những hệ thống này xuất hiện ở đầu thời kỳ đồ đá mới, khoảng thiên niên kỷ thứ 7 TCN Đáng chú ý có hệ biểu tượng Vinca có những cải tiến về biểu tượng giản đơn ở đầu thiên niên kỷ 7 TCN, dần tăng tính phức tạp trong thiên niên kỷ tiếp theo và lên đến đỉnh cao là những bản ghi Tartaria vào thiên niên kỷ 5 TCN Những biểu tượng được xếp theo hàng lối chặt chẽ, giúp chúng ta liên tưởng ngay đến văn bản

Các ký tự tượng hình của Cận đông thời cổ đại (Ai Cập, Cuneiform – tiền thân nền văn minh Sumer, Cretan) dường như không bắt nguồn từ những hệ thống biểu tượng trên

Vì vậy, khó có thể kết luận rằng hệ thống chữ viết đã kế thừa biểu tượng tiền chữ viết ở thời điểm nào

Năm 2003, các biểu tượng khắc trên mu rùa được phát hiện ở Jiahu, tỉnh Hà Nam, Trung Quốc Phương pháp xác định tuổi bằng đồng vị carbon cho thấy những mu rùa này có từ thiên niên kỷ 2 trước công nguyên Các mu rùa được tìm thấy khi khai quật những di chỉ ở 24 hang động thời đồ đá mới ở Jiahu, tỉnh Hà Nam, Trung Quốc

Theo một số nhà khảo cổ, những chữ viết trên mai rùa có những điểm tương đồng với ký tự viết trên những thẻ xương động vật ở thiên niên kỷ 2 TCN Tuy nhiên, nhiều nhà khảo cổ khác không đồng ý với quan điểm đó Họ cho rằng những phác họa hình học giản đơn như thế không hề liên hệ đến chữ viết cổ xưa Ở nền văn minh sông Ấn, chuỗi biểu tượng tìm thấy có thể tạo thành hệ biểu tượng tiền ký tự, có thể là chịu ảnh hưởng từ sự xuất hiện chữ viết ở Lưỡng Hà

2 Phát minh ra chữ viết

Những dạng cổ xưa nhất của chữ viết mang những yếu tố như ký tự viết tắt dựa trên những yếu tố tượng hình và tượng ý Đa phần các hệ thống chữ viết có thể chia làm ba loại: Tượng ý, tượng thanh và chia đoạn Tuy vậy, cả ba loại này đều tìm thấy ở bất

Chương 5: Chữ (Text) 55 kỳ hệ thống chữ viết nào với mức độ cấu thành khác nhau và khiến việc xếp loại mỗi hệ chữ viết trở nên khó khăn và nhiều mâu thuẫn

Phát minh chữ viết đầu tiên cùng lúc với sự ra đời của thời kỳ đồ đồng ở cuối thời đồ đá mới, thiên niên kỷ 4 TCN Người ta tin rằng hệ thống chữ viết đầu tiên của loài người ra đời cuối thiên niên kỷ 3 TCN tại vùng Sumer (Lưỡng Hà) ở dạng chữ hình nêm cổ xưa ở Triều đại Ur thứ ba Cùng thời gian đó, những dạng tiền chữ viết Elamite phát triển thành chữ viết Elamite có hàng lối (dạng chữ viết này cho đến nay vẫn chưa giải mã được)

Sự phát triển của chữ viết tượng hình Ai cập song song với những ký tự vùng Lưỡng Hà và không nhất thiết là độc lập với nhau Hệ thống tiền ký tự của người Ai Cập tiến hóa thành những ký tự tượng hình cổ xưa vào khoảng 3.200 năm TCN và phổ biến rộng rãi ở giữa thiên niên kỷ 3 TCN

Ký tự của nền văn minh sông Ấn phát triển trong suốt thiên niên kỷ 3 cả ở dạng tiền chữ viết hoặc dạng chữ viết cổ xưa tuy vậy quá trình phát triển này tiến nhanh hơn khi nền văn minh đi qua giai đoạn đỉnh điểm vào khoảng 1.900 năm TCN

Chữ viết của người Trung Quốc có lẽ là không cùng nguồn gốc với các nền văn minh Trung Đông Từ hệ thống biểu tượng tiền chữ viết ở cuối thời kỳ đồ đá mới khoảng 6.000 năm TCN, chữ viết Trung Quốc ra đời khoảng 1.500 năm TCN vào thời nhà Thương

Những hệ thống chữ viết ở châu Mỹ (bao gồm nền văn minh Maya và Olmec) cũng có những nguồn xuất xứ độc lập

Phần lớn các hệ thống chữ viết trên thế giới ngày này đều bắt nguồn từ Ai Cập hoặc Trung Quốc Có một vài ngoại lệ là hệ thống tượng ý của người Maya xuất hiện thế kỷ thứ 3 TCN và các ký tự tìm thấy trên đảo Phục Sinh

Hình 5.1 Lá thư tìm thấy ở Telloh của thầy tế Lu'enna gửi nhà vua (có lẽ tên là) Urukagina của thành Lagash, Lưỡng Hà, thông báo con ngài đã chết trận, khoảng năm 2.400 TCN

CÁC KIỂU CHỮ

Font chữ hay Phông chữ là khái niệm để chỉ một tập hợp đầy đủ các ký tự (character) và thuộc tính (properties) Khi sử dụng có thể tạo ra một văn bản đầy đủ, thống nhất về hình dạng, kích cỡ Font chữ bao gồm hệ thống các chữ cái, bộ số, ký tự đặc biệt, dấu câu Đồng thời Font chữ phải có các đặt trưng riêng và thống nhất không bị thay đổi (lỗi font) về kiểu dáng, kích cỡ Hiện nay, có thể sử dụng hàng triệu font chữ cho các ngôn ngữ khác nhau

Mỗi một ngôn ngữ khác nhau đều có những đặc trưng riêng về cấu cạo và cách thể hiện Vì vậy mỗi ngôn ngữ khác nhau sẽ sử dụng font chữ khác nhau Tiếng Việt của cũng vậy, khi soạn thảo văn bản cần có font chữ dành riêng Nhưng không phải cứ có font chữ Việt Hoá là có thể gõ được tiếng Việt Cần có phần mềm hỗ trợ soạn thảo tiếng

Việt, nó bao gồm bộ gõ và kiểu gõ Ở Việt Nam chúng ta thường sử dụng phần mềm Unikey để hỗ trợ soạn thảo tiếng Việt

Hiện tại chúng ta có hàng triệu font chữ khác nhau, Mỗi font chữ lại có một kiểu dáng khác nhau Thết nhưng kiểu font chữ thường được chia làm 3 nhóm chính bao gồm kiểu chữ có chân; kiểu chữ không chân và Free style

Là các loại Font chữ mà ở đó điểm kết thúc và bắt đầu của các ký tự không có các nét gạch Có 2 loại font không chân bao gồm nét thẳng và nét tròn Có nghĩa là phần bắt đầu và kết thúc của các nét có được bo tròn các đầu nét hay không Những font chữ không chân thường được sử dụng cho các nội dung ngắn (slide, rờ rơi, tờ gấp ) Font chữ không chân cũng được sử dụng nhiều cho các thiết bị hiển thị như trang Web, video…

2.2 Font chữ có chân Đối ngược với font chữ không chân Font chữ có chân là font chữ mà bắt đầu hoặc kết thúc của các nét có thêm đường gạch Đường gạch này có nhiều hình dáng và độ dày, nhưng thường thì chúng vuông góc với nét Font chữ có chân thường dùng cho các văn bản hành chính, sách vở, giáo dục Nó tạo cảm giác chắc chắn và an toàn trong các trường hợp kích thước văn bản nhỏ

Font chữ Free style, hay thường được gọi là font chữ nghệ thuật Các loại font chữ này có cấu tạo phức tạp, uốn lượn Đôi khi font chữ Việt hoá được thêm thắt các hoạ tiết Chúng có kiểu dáng đặc biệt nhằm tạo dấu ấn và thể hiện phong cách cá nhân

Chúng ta thường thấy font chữ nghệ thuật trong các bản thiết kế như: Thiệp cưới, các ấn phẩm truyền thông, banner quảng cáo…

ỨNG DỤNG CHỮ TRONG THIẾT KẾ WEB

Anh chị hãy sử dụng những phần mềm và kiến thức đã học, hãy tạo ra 1 giao diện Web ứng dụng chữ kết hợp hình ảnh, đường nét để làm giao diện Xem mẫu tham khảo (xem Hình 5.2)

Hình 5.2 Mẫu giao diện Web 01

Anh chị hãy sử dụng những phần mềm và kiến thức đã học, hãy thiết kế theo bố cục mẫu giao diện Web ứng dụng chữ kết hợp hình ảnh, đường nét để làm giao diện

Xem mẫu tham khảo (xem Hình 5.3)

Hình 5.3 Bố cục mẫu thiết kế giao diện Web

Câu 1: Vận dụng kiến thức đã học, anh chị hãy cho biết lịch sử chữ viết và Sự phát triển của chữ viết tượng hình Ai cập?

Câu 2: Anh chị hãy cho biết kiểu chữ là gì? Có bao nhiêu loại kiểu chữ, phân tích rõ ý nghĩa các kiểu chữ đó?

CÁC ỨNG DỤNG VÀO THIẾT KẾ WEB

XỬ LÝ ẢNH, MÀU SẮC VÀ TẠO CHỮ VỚI PHOTOSHOP

1 Xử lý ảnh bằng photoshop

Bước 1: Mở hình ảnh bị mờ trong Adobe Photoshop, vào File >> Open >> chọn hình bị mờ cần chỉnh sửa (xem Hình 6.1)

Hình 6.1 Mở một hình vào photoshop

Bước 2: Mở bộ lọc Shake Reduction Đi tới Filter>> Sharpen>> Shake Reduction (xem Hình 6.2)

Chương 6: Các ứng dụng vào thiết kế Web 61

Khi mở được hộp thoại Shake Reduction thì Photoshop tự động làm mờ hình ảnh và hiển thị bản xem trước trong hộp thoại Shake Reduction (xem Hình 6.3)

Hình 6.3 Hộp thoại xem trước Shake Reduction

Bước 3: Khi mở phần Advanced sẽ nhìn thấy Blur Estimation Region, nó được hiển thị bằng một hình vẽ ở trong phần xem trước hình ảnh

Có thể sử dụng vị trí này để di chuyển hình vẽ sang nơi khác của hình ảnh hoặc có thể vẽ các ước tính độ mờ bổ sung, chỉ cần thao tác trên đó sẽ nhìn thấy hình ảnh tốt hơn lúc ban đầu (xem Hình 6.4)

Hình 6.4 Di chuyển hình vẽ sang nơi khác

Bước 4: Trước khi làm điều đó sẽ phóng to hình ảnh Lưu ý rằng ở phía dưới bên phải của hộp thoại là phần chi tiết, cho phép xem thêm những gì đang diễn ra với hình ảnh Ở phía dưới bên trái của phần đó là một kính hiển thị chi tiết, cho phép xem thêm những gì đang diễn ra trong hình ảnh Để kích hoạt nó, hãy nhấp vào biểu tượng hình vuông có chấm ở trên cùng bên trái của hộp thoại Con trỏ chuyển thành biểu tượng hình chữ thập lớn

Khi nhấp vào bất kỳ đâu trong hình ảnh, kết quả sẽ được hiển thị trong bảng chi tiết Cũng có thể sử dụng biểu tượng này để thay đổi kích thước của hộp Blur Estimation (xem Hình 6.5)

Bước 5: Sử dụng các thanh trượt điều khiển nâng cao để điều khiển hiệu chỉnh độ mờ Có thể thay đổi khu vực được sử dụng để theo dõi vết mờ bằng thanh trượt Blur Trace Bounds Cũng có thể tăng Smoothness và Artifact Suppression bằng cách di chuyển các thanh trượt sang bên phải (xem Hình 6.6)

Hình 6.6 Tăng Smoothness và Artifact Suppression

Bước 6: Khi đã cảm thấy hài lòng với các thay đổi của mình, hãy nhấp vào OK

Trong hình ảnh hoàn chỉnh, Photoshop đã cải thiện đáng kể độ sắc nét (xem Hình 6.7)

Bước 1: Danh sách công cụ bên trái có hai hình vuông chồng vào nhau Hình vuông phía trên gọi là Foreground, hình vuông phía dưới gọi là Background Có thể sử dụng phím X để đảo vị trí màu của hai hình vuông này (xem Hình 6.8)

Bước 2: Nhấn vào Foreground hoặc Background và chọn màu muốn sử dụng để tô Layer > Nhấn OK (xem Hình 6.9)

Hình 6.9 Chọn màu cần tô

Bước 3: Nhấn chuột trái vào Layer muốn tô màu (xem Hình 6.10)

Hình 6.10 Chọn layer cần tô màu

Bước 4: Nhấn Alt + Delete để tô màu Foreground hoặc nhấn Ctrl + Delete để tô màu Background (xem Hình 6.11)

Bước 1: Mở file ảnh bất kì muốn chèn chữ File -> Open hoặc có thể dùng phím tắt Ctrl + O (xem Hình 6.12)

Hình 6.12 Mở hình cần chèn chữ

Bước 2: Chọn công cụ Type Tool hoặc sử dụng phím tắt T rồi gõ chữ muốn lên bức ảnh

Chọn viết chữ theo chiều ngang (Horizontal Type Tool), muốn viết chữ theo chiều dọc chọn Vertical Type Tool (xem Hình 6.13)

Bước 3: Sau khi gõ xong nội dung, bắt đầu chỉnh sửa cho đẹp Có thể chọn font chữ, kiểu chữ, cỡ chữ, màu chữ cho đúng theo yêu cầu (xem Hình 6.14)

Hình 6.14 Panel tinh chỉnh chữ

Bảng điều khiển bên phía tay phải ở mục Kind và Normal có tùy chỉnh khác nhau, có thể tự trải nghiệm để chọn ra được kiểu chữ yêu thích Để giãn dòng giữa các đoạn text vào mục Character ở bảng điều khiển phía bên tay phải và lựa chọn khoảng cách giãn dòng sao phù hợp

Hình 6.15 Bảng điều khiển Character

Bước 4: Sau khi đã chọn được kiểu chữ phù hợp và màu chữ, để cho chữ trông đẹp mắt hơn hãy giảm thông số Opacity xuống sao cho phù hợp

Lưu ý: Để di chuyển vị trí của dòng chữ theo ý, chọn công cụ Move Tool (ấn phím tắt V) để di chuyển đoạn text

THIẾT KẾ BANNER - MENU VỚI PHOTOSHOP

Anh chị dựa trên kiến thức đã học, thiết kế 1 banner theo mẫu, hoặc có thể tùy chọn bố cục (xem Hình 6.17 đến Hình 6.19)

+ Banner dùng để đăng youtube

+ Hệ màu theo quy định trên Web + Sử dụng phần mềm photoshop + Xuất file jpeg

Anh chị dựa trên kiến thức đã học, thiết kế 1 banner theo mẫu, hoặc có thể tùy chọn bố cục (xem Hình 6.17 đến Hình 6.18)

+ Thiết kế theo gam màu cam + Kích thước 900*2400px

+ Banner dùng để đăng facebook

+ Hệ màu theo quy định trên Web + Sử dụng phần mềm photoshop + Xuất file png

THIẾT KẾ BỐ CỤC WEB

Anh chị dựa trên kiến thức đã học, vẽ 3 bài bố cục trang Web bao gồm 1 trang chủ và 2 trang ruột bố cục Web thương mại điện tử Ví dụ: Tiki, Shoppee, Lazada…

(xem từ Hình 6.23 đến Hình 6.25)

Anh chị dựa trên BÀI TẬP 01 đã vẽ 3 bài bố cục trang Web bao gồm 1 trang chủ và 2 trang ruột bố cục Web thương mại điện tử Thiết kế kế lại trên phần mềm đã học

(xem từ Hình 6.26 đến Hình 2.28)

+ Chạy hiệu ứng click chọn hoặc biến đôi trang (chuyển trang) + Gam màu cam chủ đạo

+ Có nội dung chữ, hình, đường nét

Hình 6.26 Trang chủ shoppee gam màu cam

Hình 6.27 Trang ruột 01 gam màu cam

Hình 6.28 Trang ruột 02 gam màu cam

THIẾT KẾ GIAO DIỆN WEB

Dựa trên BÀI TẬP 01 – BÀI TẬP 02 ở mục III chương 6 và vận dụng các phần mềm đã học (Adobe Dreamweaver) anh chị hãy thiết kế giao diện cho trang Web đã tạo (xem Hình 6.29)

+ Có thể sử dụng được trên Chrome + Click được thanh menu

+ Có link để liên kết chuyển trang

Dựa trên BÀI TẬP 01 – BÀI TẬP 02 ở mục III chương 6 và vận dụng các phần mềm đã học (Adobe Dreamweaver) anh chị hãy thiết kế 2 trang ruột cho trang Web đã tạo (xem Hình 6.30)

+ Có thể sử dụng được trên Chrome + Click được thanh menu trong trang ruột + Có link để liên kết chuyển trang tiếp theo

Hình 6.30 Trang ruột có liên kết và thanh menu

Câu 1: Anh chị hãy cho biết các bước xử lý ảnh bằng photoshop? Thao tác những bước đó với file có sẵn?

Câu 2: Anh chị hãy cho biết các bước tô màu trong photoshop? Thao tác những bước đó với file có sẵn?