Giáo trình Thiết kế giao diện web giới thiệu một số công cụ trong Photoshop chuyên dùng cho web, giới thiệu các dạng web thường thấy, cấu trúc website. Ngoài ra, giáo trình còn hướng dẫn tạo một số website cho desktop và cho mobile trong Photoshop, hướng dẫn cắt trang web và xuất trang html.
ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ GIAO DIỆN WEB NGHỀ: THIẾT KẾ TRANG WEB, THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: CAO ĐẲNG, TRUNG CẤP Tháng 9, năm 2020 ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ GIAO DIỆN WEB NGHỀ: THIẾT KẾ TRANG WEB, THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: CAO ĐẲNG, TRUNG CẤP THÔNG TIN CHỦ NHIỆM ĐỀ TÀI Họ tên: Võ Thị Lắm Học vị: Thạc sĩ Đơn vị: Khoa Công nghệ thơng tin Email: vothilam@hotec.edu.vn TRƯỞNG KHOA TỔ TRƯỞNG BỘ MƠN HIỆU TRƯỞNG DUYỆT Tháng 9, năm 2020 CHỦ NHIỆM ĐỀ TÀI TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Giáo trình Thiết kế giao diện web biên soạn theo đề cương Chương trình đào tạo Trường Cao Đẳng Kinh Tế Kỹ Thuật Thành Phố Hồ Chí Minh Giáo trình giới thiệu số công cụ Photoshop chuyên dùng cho web, giới thiệu dạng web thường thấy, cấu trúc website Ngoài ra, giáo trình cịn hướng dẫn tạo số website cho desktop cho mobile Photoshop, hướng dẫn cắt trang web xuất trang html Cuốn sách dùng làm tài liệu học tập cho học sinh bậc cao đẳng trung cấp ngành Thiết kế Quản lý website Tôi xin chân thành cảm ơn Khoa Công nghệ thông tin, đồng nghiệp, hội đồng tạo điều kiện giúp đỡ nhà trường để giáo trình sớm hồn thành TP.Hờ Chí Minh, ngày tháng Tham gia biên soạn Chủ biên Võ Thị Lắm năm 2020 MỤC LỤC Công cụ thiết kế giao diện web Photoshop 1.1 Vùng chọn 1.1.1 Bộ công cụ Marquee 1.1.2 Bộ công cụ Lasso .2 1.1.3 Magic wand 1.2 Màu sắc 1.2.1 Lệnh Color Balance 1.2.2 Lệnh Hue/Saturation 1.2.3 Lệnh Variations 1.3 Công cụ tô vẽ shape 1.3.1 Bộ công cụ hút màu: 1.3.2 Công cụ Gradient .5 1.3.3 Brush 1.3.4 Nhóm cơng cụ Pen 1.3.5 Nhóm lệnh Path 1.4 Text .10 1.4.1 Các kiểu text 10 1.4.2 Định dạng text 10 1.4.3 Uốn cong Text: 11 1.5 Làm việc với layer group 13 1.5.1 Palette Layer (F7) 13 1.5.2 Các thao tác với Layer 14 1.6 Một số hiệu ứng photoshop 17 1.6.1 Truy cập bảng Layer Style .17 1.6.2 Các loại hiệu ứng thuộc tính .17 1.6.3 Copy paste hiệu ứng 19 1.6.4 Xóa hiệu ứng 19 1.6.5 Tách hiệu ứng 19 1.6.6 Một số phím tắt thường dùng 19 BÀI TẬP ÁP DỤNG 21 Giới thiệu nhận dạng trang web 22 2.1 Giới thiệu nhận dạng trang web 22 2.2 Tham khảo website thiết kế thiết bị di động desktop .28 BÀI TẬP ÁP DỤNG 32 Cấu trúc trang web .34 3.1 Các công việc chuẩn bị tạo trang web 34 3.2 Cấu trúc SiteMap 36 3.4 Các thành phần trang web 37 3.4.1 Bố cục thông thường trang web .37 3.4.2 Bí thiết kế bố cục tương tác tốt với người dùng .39 BÀI TẬP ÁP DỤNG 40 Tạo trang web cho desktop mobile 41 4.1 Tạo trang web theo mẫu 41 4.1.1 Tạo trang web desktop 41 4.1.2 Tạo trang web mobile .43 4.2 Tạo trang web theo chủ đề 44 4.2.1 Xác định màu sắc 44 4.2.2 Xác định bố cục .44 4.2.3 Phác thảo trang web giấy 45 4.2.4 Tạo thành phần trang web .45 4.2.5 Tạo trang web desktop 45 4.2.6 Tạo trang web mobile .46 BÀI TẬP ÁP DỤNG 47 Cắt xuất trang web 50 5.1 Xuất hình cho web 50 5.2 Cắt trang web 51 5.2.1 Tìm hiểu công cụ slice 51 5.2.2 Cắt trang web 52 5.3 Tối ưu ảnh cho web .54 5.3.1 Số lượng hình viết 54 5.3.2 Đặt tên hình ảnh 54 5.3.3 Kích thước hình ảnh chuẩn website .54 5.3.4 Cách giảm dung lượng giữ nguyên kích thước ảnh 56 BÀI TẬP ÁP DỤNG 59 TÀI LIỆU THAM KHẢO 60 MỤC LỤC HÌNH ẢNH 61 CHƯƠNG TRÌNH MƠ ĐUN Tên mơ đun: Thiết kế giao diện web Mã mô đun: MĐ3101334, MĐ2101413 I Vị trí, tính chất mơ đun: - Vị trí: mơn học sau mơn học Thiết kế đồ hoạ - Tính chất: mơn học chun mơn bắt buộc II Mục tiêu mô đun: - Về kiến thức: + Trình bày cơng cụ cần thiết thiết kế web + Trình bày thành phần trang web + Nhận dạng loại web + Phân tích loại ảnh xuất trang web - Về kỹ năng: + Tạo SiteMap + Tạo thành phần trang web + Tạo website cho desktop mobile + Slice xuất trang web photoshop - Về lực tự chủ trách nhiệm: + Có ý thức vận dụng kiến thức vào thiết kế giao diện web + Có kỹ tư sáng tạo thiết kế giao diện web + Có tác phong làm việc cẩn thận, xác, chun nghiệp Bài 1: Cơng cụ thiết kế giao diện web photoshop CÔNG CỤ THIẾT KẾ GIAO DIỆN WEB TRONG PHOTOSHOP Giới thiệu: Qua giới thiệu số công cụ thường dùng cho thiết kế web như: tạo vùng chọn, dùng pen để vẽ cách sử dụng shape Ngồi ra, cịn sử dụng thêm số hiệu ứng thường dùng thiết kế giao diện web photoshop Mục tiêu: Trình bày công cụ Photoshop sử dụng cho web Áp dụng công cụ photoshop để thiết kế website Phân tích tối ưu công cụ sử dụng cho web Nhận thức tầm quan trọng công cụ sử dụng cho web 1.1 Vùng chọn 1.1.1 Bộ cơng cụ Marquee Hình 1.1 Cơng cụ Marquee a Rectangular Marquee Hình 1.2 Bảng thuộc tính cơng cụ Rectangular Marquee Refine Edge o Radius: Cải thiện phần biên vùng chọn, giúp cho phần biên êm gần o Contrast: Độ tương phản (độ sắc nét) biên vùng chọn o Smooth: Bo trịn góc nhọn o Feather: Tạo độ nhòe biên o Contract/Expand: Thu hẹp/ nới rộng vùng chọn Ngồi ra, ta cịn cộng thêm vùng chọn cách kết hợp phím Shift, trừ bớt vùng chọn phím Alt, lấy phần giao Alt + Shift b Elliptical Marquee Chọn vùng hình ảnh theo dạng hình elip/ hình trịn Thao tác thuộc tính: Tương tự cơng cụ rectangular marquee KHOA CƠNG NGHỆ THƠNG TIN Bài 1: Công cụ thiết kế giao diện web photoshop c Single row marquee Tạo vùng chọn dòng ngang pixel Điều kiện: Feather = d Single column marquee Tạo vùng chọn cột dọc pixel Điều kiện: Feather = 1.1.2 Bộ công cụ Lasso Hình 1.3 Bộ cơng cụ Lasso a Lasso: công cụ chọn vùng chọn tự Thao tác thực hiện: Chọn cơng cụ Lasso Kích giữ kéo rê chuột cho đường viền chọn chạy theo chu vi đối tượng Muốn kết thúc thao tác chọn, ta cần nhả chuột Kết quả: đường viền chọn bao quanh đối tượng theo đường chu vi b Polygon Lasso: công cụ chọn vùng chọn tự Thao tác thực hiện: Ta kích điểm để tạo khung viền chọn Kích lại điểm kích kép để kết thúc Xóa điểm chọn sai phím Backspace Undo bước c Magnetic Lasso: công cụ Lasso từ tính, thao tác với cơng cụ vùng chọn ln bám vào biên hình ảnh, thích hợp cho đối tượng có độ tương phản cao màu sắc biên đối tượng với Thao tác thực hiện: Kích xác định điểm đầu tiên, nhả chuột, di chuyển chuột dọc biên đối tượng, kích lại điểm kích kép để kết thúc Trong trình di chuyển chuột quanh chu vi đối tượng, ta kích để cưỡng chế vùng chọn hướng (nếu chế độ tự động khơng xác) Xóa điểm chọn sai phím Backspace Undo bước 1.1.3 Magic wand Hình 1.4 Bộ cơng cụ Magic wand Là công cụ chọn vùng theo vùng màu tương đồng Thao tác thực hiện: KHOA CÔNG NGHỆ THÔNG TIN Bài 1: Công cụ thiết kế giao diện web photoshop Chọn cơng cụ Magic wand Kích vào màu hình ảnh, vùng màu tương ứng chọn Độ rộng vùng chọn tùy thuộc vào giá trị Tolerance Options Thuộc tính: Tolerance: Dung sai vùng chọn, dung sai lớn vùng chọn rộng Anti – Alias: Khử cưa Contiguous: Chọn màu cục – màu giới hạn vùng màu lân cận (Nếu không kiểm nhận chọn tồn file) Use All Layers: Chọn tất Layer, không phân biệt Layer hành hay Layer khác Quick Selection Tool (W) Là công cụ chọn nhanh vùng chọn cách kích liên tục vào vùng hình ảnh cần chọn 1.2 Màu sắc 1.2.1 Lệnh Color Balance Dùng để cân màu sắc Thao tác: Rê trượt để cân màu Hình 1.5 Bảng màu Color Balance Ảnh hưởng vùng tối Ảnh hưởng vùng trung bình chung KHOA CƠNG NGHỆ THƠNG TIN Ảnh hưởng vùng sáng Bài 4: Tạo trang web cho desktop mobile Bài tập 3: Hãy tạo trang web theo mẫu sau: Bài tập 4: Hãy tạo trang web theo bố cục sau: KHOA CÔNG NGHỆ THÔNG TIN 48 Bài 4: Tạo trang web cho desktop mobile Bài tập 5: Tạo trang web theo chủ đề Bán thực phẩm tươi góp phần bảo vệ mơi trường KHOA CÔNG NGHỆ THÔNG TIN 49 Bài 5: Cắt xuất trang web CẮT VÀ XUẤT TRANG WEB Giới thiệu: Bài học hướng dẫn sử dụng công cụ slide để cắt trang web xuất trang html Cách xuất hình cho web, cách chọn loại file hình để xuất cho hình chất lượng mà nhẹ Mục tiêu: Xuất hình tối ưu cho web Phân biệt đặc điểm dạng hình xuất Cắt trang web Xuất trang html 5.1 Xuất hình cho web Để xuất ảnh cho web, ta vào File/Save for Web Hình 5.1 Xuất banner cho web Chọn loại file cần xuất nhấn Save KHOA CÔNG NGHỆ THÔNG TIN 50 Bài 5: Cắt xuất trang web Hình 5.2 Chọn loại file hình Chọn nơi để lưu đặt tên file Hình 5.3 Chọn nơi để lưu đặt tên hình 5.2 Cắt trang web 5.2.1 Tìm hiểu cơng cụ slice Slice vùng hình chữ nhật có số thứ tự góc bên trái, tạo từ công cụ slice slice tự động Chúng ta tạo liên kết, hiệu ứng rollover hoạt hình trang Web kết từ slice Việc phân chia ảnh thành slice cho phép điều khiển tối ưu hóa kích cỡ file ảnh Các dạng slice: Auto slice: tạo cách tự động User slice: tạo công cụ slice KHOA CÔNG NGHỆ THÔNG TIN 51 Bài 5: Cắt xuất trang web Layer – based slice: tạo palette layer Table slice: tạo palette Web content Hình 5.4 Bảng thuộc tính cơng cụ slice Tạo Slice từ đường guides Các kiểu tạo Slice Tạo Slice: Chọn cơng cụ slice Rê trực tiếp lên vùng hình ảnh muốn tạo slice Tạo slice với đường guides: Kéo đường guide vào vị trí thích hợp Chọn cơng cụ slice (Nhấp “slice from guides” options) Tạo slice từ lớp (layer): Chọn Layer Menu Layer \ New Layer Based Slice Chuyển Auto Slice thành user Slice: R-click Romote to User Slice Xóa Slice: Menu View \ Clear slices 5.2.2 Cắt trang web Sau dùng công cụ slice để rê chuột lên vùng cần cắt: hình ảnh cần giữ lại, chữ khơng cần giữ Menu File \ Save for Web Hình 5.5 Cách xuất hình sau dùng cơng cụ slice Chọn chế độ xem trước, chọn loại file cần xuất, nhấn nút Save KHOA CÔNG NGHỆ THÔNG TIN 52 Bài 5: Cắt xuất trang web Hình 5.6 Chọn loại file cần xuất Nhập tên file vị trí cần lưu file Chọn tùy chọn Format: o HTML and Image: Lưu file thành trang HTML thư mục Image chứa tất Slice file (mỗi Slice file riêng biệt với tên mặc định = tên file + số thứ tự slice) o Image Only: Chỉ lưu hình ảnh, không lưu trang HTML o HTML only: Chỉ lưu trang HTML, khơng lưu hình ảnh Hình 5.7 Cách chọn tùy chỉnh Format Chọn tùy chọn từ hộp Slice: o All slices: Lưu tất slice ảnh KHOA CÔNG NGHỆ THÔNG TIN 53 Bài 5: Cắt xuất trang web o Selected slices: Chỉ lưu slice chọn Save Hình 5.8 Kết sau xuất 5.3 Tối ưu ảnh cho web 5.3.1 Số lượng hình viết Google khuyến khích đánh giá cao viết có chèn hình ảnh video để viết sinh động hơn, nội dung dễ hiểu Thông thường, viết khoảng 1000 từ nên có tối thiểu hình trở lên để người dùng khơng nhàm chán đọc Tuỳ vào nội dung mà hình nhiều hay Ví dụ hướng dẫn sử dụng thường có nhiều hình blog thông thường Tuy nhiên, không nên lạm dụng chèn nhiều hình cho viết làm chậm tốc độ tải trang website, đơi cịn tạo cảm giác viết khơng mang nhiều giá trị cho người đọc 5.3.2 Đặt tên hình ảnh Cách đặt tên hình ảnh yếu tố để đưa website đứng vị trí trang kết tìm kiếm Google Do đó, cách đặt tên nên theo quy tắc sau: Đặt tên ảnh khơng dấu phải có gạch nối từ Ví dụ: cách tối ưu hình ảnh.jpg nên đặt thành cach-toi-uu-hinh-anh.jpg Hình ảnh phải chứa từ khóa: Ví dụ: từ khóa viết giày thể thao cho nữ bạn không nên đặt tùy ý hinh_1.jpg mà nên đặt thành ao-thun-bodynam.jpg Tên hình ảnh không nên chứa ký tự lạ ký tự đặt biệt #, $, /, *, ? 5.3.3 Kích thước hình ảnh chuẩn website - Sử dụng hình ảnh website khơng đơn giản chèn hình vào viết Chúng ta cần phải kiểm tra kích thước, dung lượng hình Bởi hình ảnh nguyên nhân khiến website tải chậm - Nếu tin tức, hướng dẫn bình thường, kích thước hình nên tối thiểu 500px tối đa 700px - Với hình sản phẩm, hình dự án, cần có kích thước lớn chút 800px đến 1000px Khi up lên website, ta điều chỉnh hình có kích thước KHOA CƠNG NGHỆ THƠNG TIN 54 Bài 5: Cắt xuất trang web nhỏ, người xem nhấn vào xem chi tiết, thấy hình lớn Ảnh đại diện viết website 1200x630px để chia sẻ ảnh lên facebook - Về dung lượng, để đảm bảo tốc độ tải trang tốt dung lượng ảnh khơng nên vượt q 100KB Bởi viết có hình nặng 200KB hồn tồn ổn, viết có 10 hình, hình 200KB, điều thật khơng ổn tí - Vì vậy, tối ưu kích thước dung lượng hình ảnh theo tiêu chuẩn điều cần thiết phải làm trước up ảnh lên website - Sau ví dụ kích thước dạng file ảnh: Ví dụ 1: Hình ảnh dạng ảnh chụp Hình 5.9 Ví dụ ảnh chụp bình thủy Hình 5.10 Bảng so sánh dung lượng loại file hình bình thủy Nhận xét: Nếu ảnh chụp ta nên xuất dạng Save for web lưu ảnh jpg ảnh đảm bảo chất lượng dung lượng nhẹ Ví dụ 2: Hình ảnh dạng tự vẽ (vector) Hình 5.11 Ví dụ ảnh dạng vector KHOA CÔNG NGHỆ THÔNG TIN 55 Bài 5: Cắt xuất trang web Hình 5.12 Bảng so sánh dung lượng loại file hình banner Nhận xét: Banner toàn ảnh vector, nên xuất dạng Save for web lưu ảnh dạng png chất lượng lại nhẹ Nếu lưu dạng ảnh png bình thường mà khơng phải Save for web kích thước to Qua ví dụ trên, ta rút nhận xét sau: Ảnh dạng vector nên xuất dạng png Ảnh dạng ảnh chụp (bitmap) nên xuất dạng jpg 5.3.4 Cách giảm dung lượng giữ nguyên kích thước ảnh Trong số trường hợp ảnh chụp từ hình bạn muốn dung lượng ảnh giảm giữ nguyên kích thước để người dùng nhìn rõ hơn, lúc sử dụng phương pháp nén ảnh phù hợp Hiện nay, có nhiều cơng cụ, phần mềm hỗ trợ nén ảnh trực tuyến dễ dàng sử dụng Dưới số website hỗ trợ nén ảnh đánh giá tốt dành cho người khơng chun bạn tham khảo qua: https://imagecompressor.com https://compressjpeg.com https://www.websiteplanet.com/ Ví dụ: Kích thước ban đầu ảnh 1024 x 768 với dung lượng ảnh 325KB Với kích thước bạn sử dụng để up lên website, nhiên dung lượng ảnh lại cao so với tiêu chuẩn Do cần giảm dung lượng ảnh 100KB KHOA CÔNG NGHỆ THÔNG TIN 56 Bài 5: Cắt xuất trang web Hình 5.13 Dung lượng, kích thước file hình trước nén Ảnh cần giảm dung lượng giữ nguyên kích thước Để thực hiện, bạn truy cập vào ba website (ba website có cách sử dụng tương tự nhau) Sau tải ảnh cần giảm dung lượng lên Kết ảnh sau giảm dung lượng không qua khác biệt so với ban đầu Nén xong, bạn tải ảnh sử dụng kiểm tra lại kỹ file lưu trữ Kết cho thấy ảnh nén giữ nguyên size 1024 x 768 dung lượng giảm cịn 96KB KHOA CƠNG NGHỆ THƠNG TIN 57 Bài 5: Cắt xuất trang web Hình 5.14 Dung lượng giảm sau nén Dung lượng ảnh giảm xuống 75KB Với cách thực giúp hình ảnh đăng tải website đảm bảo đủ kích thước để nhìn rõ thơng tin mà dung lượng lại tối ưu tốt nhất, không gây ảnh hưởng đến tốc độ tải trang KHOA CÔNG NGHỆ THÔNG TIN 58 Bài 5: Cắt xuất trang web BÀI TẬP ÁP DỤNG Bài tập 1: Tạo banner sau xuất hình png cho web: Bài tập 2: Dùng công cụ slice để cắt trang web xuất dạng “HTML and Images” tập tập áp dụng Bài Tạo trang web cho desktop mobile trang 48 Bài tập 3: Hãy tạo trang web theo chủ đề tự chọn: Phác thảo giấy Thiết kế photoshop Dùng công cụ slide photoshop để cắt trang web xuất dạng “HTML images” KHOA CÔNG NGHỆ THÔNG TIN 59 TÀI LIỆU THAM KHẢO Phạm Quang Huy, “ Photoshop CC toàn tập”, Nhà xuất Khoa Học Kỹ Thuật, 2015 Phạm Quang Huy, “Tự học Photoshop CC tồn tập”, Nhà xuất Thanh Niên, 2017 KHOA CƠNG NGHỆ THƠNG TIN 60 MỤC LỤC HÌNH ẢNH Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 1.1 Cơng cụ Marquee 1.2 Bảng thuộc tính cơng cụ Rectangular Marquee 1.3 Bộ công cụ Lasso 1.4 Bộ công cụ Magic wand 1.5 Bảng màu Color Balance 1.6 Bảng màu Hue/Saturation 1.7 Bộ công cụ hút màu 1.8 Bảng thuộc tính công cụ Gradient 1.9 Bảng hiệu chỉnh tô màu Gradient 1.10 Bảng Brush 1.11 Nhóm cơng cụ Pen .8 1.12 Bảng thuộc tính Pen .8 1.13 Bảng Paths .9 1.14 Nhóm cơng cụ Shape 10 1.15 Bảng công cụ Text .10 1.16 Bảng thuộc tính text 10 1.17 Ví dụ uốn cong text .11 1.18 Bảng Wap Text 12 1.19 Ví dụ text theo đường path 12 1.20 Bảng layer 13 1.21 Ví dụ hình lồng chữ 16 1.22 Bảng layer style 17 2.1 Ví dụ website thương mại điện tử 23 2.2 Ví dụ website giới thiệu doanh nghiệp 24 2.3 Ví dụ website giải trí .25 2.4 Ví dụ website truyền thơng 26 2.5 Ví dụ website giáo dục 27 2.6 Ví dụ website cá nhân 28 2.7 Ví dụ cách chuyển qua giao diện moblie desktop 29 2.8 Giao diện website Desktop, ipad Galaxy S5 (phần trên) 30 2.9 Giao diện website Desktop, ipad Galaxy S5 (phần dưới) 31 3.1 Layout phác thảo giấy 35 3.2 Giao diện phần mềm Photoshop 35 3.3 Cấu trúc Site Map 36 3.4 Ví dụ Site Map cơng ty 37 3.5 Bố cục website thường dùng 38 3.6 Các dạng bố cục khác 39 4.1 Ví dụ website mẫu desktop 42 4.2 Giao diện mobile 44 4.3 Ví dụ độ phần giải hình 45 4.4 Chiều rộng 12 cột 46 5.1 Xuất banner cho web .50 5.2 Chọn loại file hình 51 5.3 Chọn nơi để lưu đặt tên hình 51 5.4 Bảng thuộc tính cơng cụ slice 52 KHOA CƠNG NGHỆ THƠNG TIN 61 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 5.5 Cách xuất hình sau dùng công cụ slice 52 5.6 Chọn loại file cần xuất 53 5.7 Cách chọn tùy chỉnh Format 53 5.8 Kết sau xuất 54 5.9 Ví dụ ảnh chụp bình thủy 55 5.10 Bảng so sánh dung lượng loại file hình bình thủy 55 5.11 Ví dụ ảnh dạng vector 55 5.12 Bảng so sánh dung lượng loại file hình banner 56 5.13 Dung lượng, kích thước file hình trước nén 57 5.14 Dung lượng giảm sau nén 58 KHOA CÔNG NGHỆ THÔNG TIN 62 ... HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ GIAO DIỆN WEB NGHỀ: THIẾT KẾ TRANG WEB, THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: CAO ĐẲNG, TRUNG CẤP... Tạo website cho desktop mobile + Slice xuất trang web photoshop - Về lực tự chủ trách nhiệm: + Có ý thức vận dụng kiến thức vào thiết kế giao diện web + Có kỹ tư sáng tạo thiết kế giao diện web. .. thức: + Trình bày công cụ cần thiết thiết kế web + Trình bày thành phần trang web + Nhận dạng loại web + Phân tích loại ảnh xuất trang web - Về kỹ năng: + Tạo SiteMap + Tạo thành phần trang web +