Tài liệu giảng dạy thiết kế giao diện web trường cđ kinh tế kỹ thuật vinatex TP HCM

TRƯỜNG CAO ĐẲNG CƠNG NGHỆ TP HỒ CHÍ MINH KHOA THIẾT KẾ THỜI TRANG Tài liệu giảng dạy THIẾT KẾ GIAO DIỆN WEB THÀNH PHỐ HỒ CHÍ MINH, THÁNG 12 NĂM 2021 TRƯỜNG CAO ĐẲNG CƠNG NGHỆ TP HỒ CHÍ MINH KHOA THIẾT KẾ THỜI TRANG Tài liệu giảng dạy THIẾT KẾ GIAO DIỆN WEB THÀNH PHỐ HỒ CHÍ MINH, THÁNG 12 NĂM 2021 MỤC LỤC Chương 1: THIẾT KẾ MỸ THUẬT GIAO DIỆN WEB I KHÁI NIỆM MỸ THUẬT 1 Định nghĩa mỹ thuật Mỹ thuật lĩnh vực Hội họa .1 Mỹ thuật lĩnh vực Đồ Họa .2 Mỹ thuật lĩnh vực Điêu khắc II CÁC DẠNG TRANG WEB Định nghĩa trang Web .3 Phân loại trang Web theo nội dung Phân loại theo chức mục đích III MỸ THUẬT TRONG THIẾT KẾ WEB 11 IV KÍCH THƯỚC TRANG WEB 13 Kích thước chuẩn Web 13 Một số kích thước Web khác 15 V KÍCH THƯỚC BANNER, FOOTER, MENU .16 Phân loại banner .16 Kích thước banner 16 Chương 2: BỐ CỤC VÀ THIẾT KẾ WEB 19 I KHÁI NIỆM BỐ CỤC 19 II BỐ CỤC CÂN ĐỐI - ĐỐI XỨNG - TỰ DO 20 Bố cục cân 20 Bố cục tương phản 21 Bố cục chuyển động 21 Bố cục nhấn mạnh 22 Bố cục đồng 23 III TỔNG QUAN VỀ THIẾT KẾ WEB 23 Khái niệm Web .23 Đặc điểm tiện lợi Web 23 Các yêu cầu tối thiểu Web .23 Những phần nội dung thiết yếu Web 24 IV THIẾT KẾ WEB TƯƠNG THÍCH VỚI GIAO DIỆN NGƯỜI DÙNG 24 Chuẩn Responsive 24 Ưu, nhược điểm việc sử dụng thiết kế Web chuẩn Responsive 25 V THIẾT KẾ GIAO DIỆN WEB 26 Thiết kế Web tĩnh 26 Thiết kế Web động 27 VI HOẠT ẢNH WEB VỚI ANIMATE CC 27 Chương 3: ĐƯỜNG NÉT – HÌNH NỀN – QUAN HỆ 31 I ĐƯỜNG NÉT VÀ SỰ BIỂU DIỄN CỦA ĐƯỜNG NÉT 31 II ĐƯỜNG VIỀN VÀ MỐI QUAN HỆ HÌNH - NỀN 32 Định nghĩa đường viền 32 Mối quan hệ hình – 33 III QUAN HỆ HÌNH - NỀN - ĐƯỜNG KHUNG 34 Chương 4: MÀU SẮC 37 I KHÁI NIỆM VÀ CÁC YẾU TỐ VỀ MÀU SẮC 37 Khái niệm màu sắc 37 Yếu tố màu sắc 37 II CÁC MÀU CƠ BẢN VÀ CÁCH PHỐI MÀU 37 Các màu 37 Cách pha màu 42 III ĐỒ THỊ MÀU SẮC 43 IV CÁCH SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ WEB 47 Màu đen 47 Màu trắng 48 Màu đỏ 49 Màu cam 49 Màu vàng 50 Màu xanh 50 10 11 Màu xanh lam 51 Monochromatic: Đơn sắc 51 Complementary: Tương phản 52 Triadic: Tam giác 52 Tetradic: Hình chữ nhật 53 12 Analogous: Tương tự 53 Chương 5: CHỮ (TEXT) 55 I KHÁI NIỆM VÀ SỰ RA ĐỜI CỦA CHỮ 55 Hệ thống biểu tượng tiền ký tự .55 Phát minh chữ viết 55 II CÁC KIỂU CHỮ 57 Khái niệm kiểu chữ 57 Phân loại kiểu chữ 57 III ỨNG DỤNG CHỮ TRONG THIẾT KẾ WEB 58 Chương 6: CÁC ỨNG DỤNG VÀO THIẾT KẾ WEB 61 XỬ LÝ ẢNH, MÀU SẮC VÀ TẠO CHỮ VỚI PHOTOSHOP 61 Xử lý ảnh photoshop 61 Màu photoshop 65 Tạo chữ photoshop 67 II THIẾT KẾ BANNER - MENU VỚI PHOTOSHOP 70 I III THIẾT KẾ BỐ CỤC WEB 75 IV THIẾT KẾ GIAO DIỆN WEB 79 TÀI LIỆU THAM KHẢO 82 Chương 1: Thiết kế mỹ thuật giao diện Web Chương 1: THIẾT KẾ MỸ THUẬT GIAO DIỆN WEB Sau sinh viên học xong chương trình bày khái niệm mỹ thuật, dạng trang Web, mỹ thuật thiết kế Web, kích thước trang Web, kích thước Banner, Footer, Menu sử dụng loại kích thước phù hợp trang Web I KHÁI NIỆM MỸ THUẬT Định nghĩa mỹ thuật Mỹ thuật hiểu “nghệ thuật đẹp” Đây từ Hán Việt, với “mỹ” nghĩa đẹp, “thuật” nằm từ “nghệ thuật” Hiểu cách đơn giản, mỹ thuật đẹp từ nghệ thuật, người từ tự nhiên tạo nên nhìn thấy Vì mà người ta cịn gọi mơn “nghệ thuật thị giác” – hay cịn có tên tiếng anh “visual art” Hiểu theo nghĩa rộng, từ “mỹ thuật” sử dụng để phân biệt ngành lớn hội họa: mỹ thuật ứng dụng, mỹ thuật công nghiệp, mỹ thuật trang trí…; ngành có đặc thù riêng kỹ thuật thể giá trị sử dụng Trên giới Việt Nam, người hoạt động ngành thường thừa nhận khái niệm mỹ thuật theo nghĩa hàn lâm có phân biệt rõ rệt mỹ thuật với thủ công mỹ nghệ mỹ thuật ứng dụng Đơn giản hơn, mỹ thuật đường nét người tự quy ước với theo cảm nhận sử dụng để biểu lộ giới thực gián tiếp qua chất liệu theo cách riêng người cho đẹp Mỹ thuật lĩnh vực Hội họa Hội họa xem phần quan trọng Mỹ thuật, loại hình nghệ thuật phổ biến Đây nghệ thuật tạo hình bề mặt hai chiều cách trực tiếp, hay giải thích nôm na người vẽ sử dụng màu bút chì để tơ lên bề mặt láng (giấy, vải,…) để thể ý tưởng nghệ thuật Người làm việc gọi họa sĩ Kết việc tác phẩm hội họa đời, hay người ta gọi tranh vẽ Nói cách khác, hội họa hình thức để thể ý tưởng người nghệ sĩ tác phẩm hội họa sử dụng kỹ thuật phương pháp nghệ thuật họa sỹ (xem Hình 1.1) Chương 1: Thiết kế mỹ thuật giao diện Web Hình 1.1 Mỹ thuật lĩnh vực Hội họa Mỹ thuật lĩnh vực Đồ Họa Đồ họa hình thức nghệ thuật tạo hình bề mặt hai chiều 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 Đồ họa thường dùng cho mục đích truyền thơng, quảng cáo, kinh doanh,… Do đó, ngành thu hút nhiều bạn trẻ tham gia học hỏi Ngành Đồ họa mang tính sáng tạo tính thẩm mỹ, địi hỏi người làm cần sử dụng công cụ, thiết bị đại phần mềm chuyên dụng Có nhiều loại đồ họa khác như: đồ họa độc lập, đồ họa in ấn, đồ họa máy tính (xem Hình 1.2) Chương 1: Thiết kế mỹ thuật giao diện Web Hình 1.2 Mỹ thuật lĩnh vực đồ họa Mỹ thuật lĩnh vực Điêu khắc Điêu khắc tác phẩm nghệ thuật ba chiều (tượng tròn) hai chiều (chạm khắc, chạm nổi) tạo hình từ kết hợp vật liệu khác thạch cao, gỗ, kim loại, đá, thủy tinh, đất sét… Người làm điêu khắc gọi nghệ nhân điêu khắc Ngoài việc lên ý tưởng bàn tay lành nghề, điêu luyện khéo léo nghệ nhân điêu khác đóng vai trị lớn Có nhiều thể loại tác phẩm điêu khắc, điển hình tượng, phù điêu có nhiều bước quy trình để tạo tác phẩm như: tạc, đúc, gò… II CÁC DẠNG TRANG WEB Định nghĩa trang Web Web gọi trang Web trang mạng, nội dung liên quan xác định tên miền chung xuất máy chủ Web Ví dụ: Web wikipedia.org, google.com, amazon.com… Tất trang Web truy cập cơng khai tạo thành World Wide Web Cũng có trang Web riêng tư truy cập mạng riêng, chẳng hạn trang Web nội công ty dành cho nhân viên công ty Các trang Web thường dành riêng cho chủ đề mục đích cụ thể, chẳng hạn tin tức, giáo dục, thương mại, giải trí mạng xã hội Siêu liên kết trang Web hướng dẫn điều hướng trang Web, thường bắt đầu với trang chủ Chương 1: Thiết kế mỹ thuật giao diện Web Người dùng truy cập trang Web 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 điện thoại thơng minh Ứng dụng sử dụng thiết bị gọi trình duyệt Web Phân loại trang Web theo nội dung Đối với tính thường xuyên quy mô thay đổi nội dung, tất trang Web chia thành hai nhóm lớn – trang Web tĩnh Web động (tương tác) Tóm tắt lại, phân loại dựa tần suất cập nhật nội dung trang Web 2.1.Trang Web tĩnh (cố định) Web tĩnh dạng trang Web bản, trang web tĩnh không thường xuyên thay đổi nội dung không cập nhật người dùng Với dạng Web để thay đổi nội dung trang Web, chủ sở hữu phải truy cập trực tiếp vào lệnh mã để thay đổi thông tin phải biết thiết lập chuyên mục Hầu hết, loại trang Web tạo cho thông tin mục tiêu tương tác 2.2.Trang Web động Là trang Web có nội dung cập nhật thường xuyên, trang Web xây dựng bao gồm hai phần: Một phần hiển thị trình duyệt mà truy cập internet, thường thấy phần bên sử dụng để điều khiển nội dung trang Web, phần nội dung phía sau phần quản trị thường người quản trị trang Web có quyền truy cập Tính tương tác trang Web động cao trang Web tĩnh Phân loại theo chức mục đích Một cách phân loại khác dựa mục đích trang Web vấn đề giải cho người dùng Trong số biến thể phổ biến kể đến Web phổ biến sau 3.1 Trang Web cá nhân Là trang Web quảng bá cá nhân từ góc độ sáng tạo chuyên nghiệp Nhiều người sử dụng trang Web để xây dựng thương hiệu cá nhân Internet, xây dựng hình ảnh họ người tài giỏi, chun gia lĩnh vực họ Có thể tìm thấy trang Web cá nhân từ ca sĩ, diễn viên, doanh nhân, diễn viên, nhà đào tạo giáo viên, nhà văn, nhà thiết kế từ thích giới thiệu thân mạng (xem Hình 1.3) Chương 6: Các ứng dụng vào thiết kế Web 68 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) Hình 6.13 Horizontal Type Tool Bước 3: Sau 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 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 Normal có tùy chỉnh khác nhau, tự trải nghiệm để chọn kiểu chữ yêu thích Để giãn dòng đoạn text vào mục Character bảng điều khiển phía bên tay phải lựa chọn khoảng cách giãn dòng phù hợp Chương 6: Các ứng dụng vào thiết kế Web 69 Hình 6.15 Bảng điều khiển Character Bước 4: Sau chọn kiểu chữ phù hợp màu chữ, chữ trông đẹp mắt giảm thông số Opacity xuống cho phù hợp Hình 6.16 Panel Opacity Lưu ý: Để di chuyển vị trí dịng chữ theo ý, chọn cơng cụ Move Tool (ấn phím tắt V) để di chuyển đoạn text Chương 6: Các ứng dụng vào thiết kế Web 70 II THIẾT KẾ BANNER - MENU VỚI PHOTOSHOP BÀI TẬP 01: Anh chị dựa kiến thức học, thiết kế banner theo mẫu, tùy chọn bố cục (xem Hình 6.17 đến Hình 6.19) u cầu: + Kích thước 2560*1440px + Banner dùng để đăng youtube + Hệ màu theo quy định Web + Sử dụng phần mềm photoshop + Xuất file jpeg Hình 6.17 Hình mẫu banner 01 Hình 6.18 Hình mẫu banner 02 Chương 6: Các ứng dụng vào thiết kế Web 71 Hình 6.19 Hình mẫu banner 03 BÀI TẬP 02 Anh chị dựa kiến thức học, thiết kế banner theo mẫu, tùy chọn bố cục (xem Hình 6.17 đến Hình 6.18) Yêu cầu: + 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 Web + Sử dụng phần mềm photoshop + Xuất file png Chương 6: Các ứng dụng vào thiết kế Web Hình 6.20 Mẫu banner dọc 01 72 Chương 6: Các ứng dụng vào thiết kế Web Hình 6.21 Mẫu banner dọc 02 73 Chương 6: Các ứng dụng vào thiết kế Web Hình 6.22 Mẫu banner dọc 03 74 Chương 6: Các ứng dụng vào thiết kế Web 75 III THIẾT KẾ BỐ CỤC WEB BÀI TẬP 01 Anh chị dựa kiến thức học, vẽ bố cục trang Web bao gồm trang chủ 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) Hình 6.23 Trang chủ tiki Chương 6: Các ứng dụng vào thiết kế Web Hình 6.24 Trang ruột 01 Hình 6.25 Trang ruột 02 76 Chương 6: Các ứng dụng vào thiết kế Web 77 BÀI TẬP 02 Anh chị dựa BÀI TẬP 01 vẽ bố cục trang Web bao gồm trang chủ trang ruột bố cục Web thương mại điện tử Thiết kế kế lại phần mềm học (xem từ Hình 6.26 đến Hình 2.28) Yêu cầu: + Chạy hiệu ứng click chọn 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 Chương 6: Các ứng dụng vào thiết kế Web Hình 6.27 Trang ruột 01 gam màu cam Hình 6.28 Trang ruột 02 gam màu cam 78 Chương 6: Các ứng dụng vào thiết kế Web 79 IV THIẾT KẾ GIAO DIỆN WEB BÀI TẬP 01: Dựa BÀI TẬP 01 – BÀI TẬP 02 mục III chương vận dụng phần mềm học (Adobe Dreamweaver) anh chị thiết kế giao diện cho trang Web tạo (xem Hình 6.29) u cầu: + Có thể sử dụng Chrome + Click menu + Có link để liên kết chuyển trang Hình 6.29 Giao diện Shoppee BÀI TẬP 02: Dựa BÀI TẬP 01 – BÀI TẬP 02 mục III chương vận dụng phần mềm học (Adobe Dreamweaver) anh chị thiết kế trang ruột cho trang Web tạo (xem Hình 6.30) u cầu: + Có thể sử dụng Chrome + Click menu trang ruột + Có link để liên kết chuyển trang Chương 6: Các ứng dụng vào thiết kế Web Hình 6.30 Trang ruột có liên kết menu 80 Chương 6: Các ứng dụng vào thiết kế Web 81 CÂU HỎI ÔN TẬP Câu 1: Anh chị cho biết bước xử lý ảnh photoshop? Thao tác bước với file có sẵn? Câu 2: Anh chị cho biết bước tơ màu photoshop? Thao tác bước với file có sẵn? TÀI LIỆU THAM KHẢO TÀI LIỆU THAM KHẢO [1] Nguyễn Minh Hoàng, Hướng dẫn thực hành Adobe Dreamweaver CS5: Chỉ dẫn hình cho người sử dụng, NXB Hồng Đức, 2011 [2] Hồ Tấn Mẫn, Xử lý ảnh cao cấp tự động hóa hoạt động Photoshop CS, NXB Lao Động, 2005 [3] Nguyễn Trường Sinh, Học thiết kế Web hình minh họa, NXB Phương Đông, 2007 [4] VL.COMP (Tổng hợp biên soạn), Hướng dẫn tự học adobe photoshop CS6 dành cho người bắt đầu, Hà Nội: Từ điển Bách Khoa, 2012 82 ... đoạn thiết kế 25 Chương 2: Bố cục thiết kế Web V THIẾT KẾ GIAO DIỆN WEB Thiết kế bố cục giao diện Web trình mẫu chốt định sức hấp dẫn doanh nghiệp người dùng ghé thăm Thiết kế bố cục giao diện Web. ..TRƯỜNG CAO ĐẲNG CƠNG NGHỆ TP HỒ CHÍ MINH KHOA THIẾT KẾ THỜI TRANG Tài liệu giảng dạy THIẾT KẾ GIAO DIỆN WEB THÀNH PHỐ HỒ CHÍ MINH, THÁNG 12 NĂM 2021 MỤC LỤC Chương 1: THIẾT KẾ MỸ THUẬT GIAO DIỆN... II THIẾT KẾ BANNER - MENU VỚI PHOTOSHOP 70 I III THIẾT KẾ BỐ CỤC WEB 75 IV THIẾT KẾ GIAO DIỆN WEB 79 TÀI LIỆU THAM KHẢO 82 Chương 1: Thiết kế mỹ thuật giao