›
›

Giáo trình Thiết kế đồ họa - Trình độ: Cao đẳng, Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh

pdf 69 trang Gia Huy 16/05/2022 4592
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế đồ họa - Trình độ: Cao đẳng, Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_thiet_ke_do_hoa_trinh_do_cao_dang_trung_cap_truon.pdf

Nội dung text: Giáo trình Thiết kế đồ họa - Trình độ: Cao đẳng, Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh

  1. Ủ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
  2. Ủ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 CHỦ NHIỆM BỘ MƠN ĐỀ TÀI HIỆU TRƯỞNG DUYỆT Tháng 9, năm 2020
  3. TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin cĩ thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm
  4. LỜI GIỚI THIỆU Giáo trình Thiết kế giao diện web được biên soạn theo đề cương Chương trình đào tạo của Trường Cao Đẳng Kinh Tế Kỹ Thuật Thành Phố Hồ Chí Minh. Giáo trình 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. Ngồ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. Cuốn sách này dùng làm tài liệu học tập cho học sinh bậc cao đẳng và trung cấp ngành Thiết kế và 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 và giúp đỡ nhà trường để cuốn giáo trình sớm được hồn thành. TP.Hờ Chí Minh, ngày tháng năm 2020 Tham gia biên soạn Chủ biên Võ Thị Lắm
  5. MỤC LỤC Cơng cụ thiết kế giao diện web trong Photoshop 1 1.1 Vùng chọn 1 1.1.1 Bộ cơng cụ Marquee 1 1.1.2 Bộ cơng cụ Lasso 2 1.1.3 Magic wand 2 1.2 Màu sắc 3 1.2.1 Lệnh Color Balance 3 1.2.2 Lệnh Hue/Saturation 4 1.2.3 Lệnh Variations 4 1.3 Cơng cụ tơ vẽ và shape 4 1.3.1 Bộ cơng cụ hút màu: 4 1.3.2 Cơng cụ Gradient 5 1.3.3 Brush 7 1.3.4 Nhĩm cơng cụ Pen 8 1.3.5 Nhĩm lệnh về Path 9 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 và 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 trong photoshop 17 1.6.1 Truy cập bảng Layer Style 17 1.6.2 Các loại hiệu ứng và thuộc tính 17 1.6.3 Copy và 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 và nhận dạng các trang web 22 2.1 Giới thiệu và nhận dạng các trang web 22 2.2 Tham khảo website thiết kế trên thiết bị di động và desktop 28 BÀI TẬP ÁP DỤNG 32
  6. 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 của một trang web 37 3.4.2 Bí quyết 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 và mobile 41 4.1 Tạo trang web theo mẫu 41 4.1.1 Tạo trang web trên desktop 41 4.1.2 Tạo trang web trên 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 trên giấy 45 4.2.4 Tạo các thành phần trang web 45 4.2.5 Tạo trang web trên desktop 45 4.2.6 Tạo trang web trên mobile 46 BÀI TẬP ÁP DỤNG 47 Cắt và 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 về 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 trên một bài 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 trên website 54 5.3.4. Cách giảm dung lượng nhưng vẫn 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
  7. 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 của mơ đun: - Vị trí: là mơn học sau mơn học Thiết kế đồ hoạ - Tính chất: là mơn học chuyên mơn bắt buộc II. Mục tiêu mơ đun: - Về kiến thức: + Trình bày được các cơng cụ cần thiết trong thiết kế web + Trình bày được các thành phần của trang web + Nhận dạng được các loại web + Phân tích được các loại ảnh khi xuất trang web - Về kỹ năng: + Tạo được SiteMap + Tạo các thành các phần của trang web + Tạo được website cho desktop và mobile + Slice và xuất được trang web trong photoshop - Về năng lực tự chủ và 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ỹ năng tư duy sáng tạo trong thiết kế giao diện web + Cĩ tác phong làm việc cẩn thận, chính xác, chuyên nghiệp
  8. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop CƠNG CỤ THIẾT KẾ GIAO DIỆN WEB TRONG PHOTOSHOP Giới thiệu: Qua bài này giới thiệu một số cơng cụ thường dùng cho thiết kế web như: tạo vùng chọn, dùng pen để vẽ và cách sử dụng shape. Ngồi ra, cịn sử dụng thêm một số hiệu ứng thường dùng thiết kế giao diện web trong photoshop. Mục tiêu: Trình bày được các cơng cụ trong Photoshop sử dụng cho web Áp dụng được các cơng cụ trong photoshop để thiết kế website Phân tích được sự tối ưu của từng cơng cụ sử dụng cho web Nhận thức được tầm quan trọng của 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ủa 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 được êm hơn và gần sạch hơn. o Contrast: Độ tương phản (độ sắc nét) tại biên vùng chọn o Smooth: Bo trịn các 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ĩ thể cộng thêm vùng chọn bằng cách kết hợp phím Shift, trừ bớt vùng chọn bằng phím Alt, lấy phần giao bằng 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 và thuộc tính: Tương tự cơng cụ rectangular marquee. KHOA CƠNG NGHỆ THƠNG TIN 1
  9. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop c. Single row marquee Tạo vùng chọn một dịng ngang 1 pixel. Điều kiện: Feather = 0 d. Single column marquee Tạo vùng chọn một cột dọc 1 pixel. Điều kiện: Feather = 0 1.1.2 Bộ cơng cụ Lasso 5 Hình 1.3 Bộ cơng cụ Lasso a. Lasso: cơng cụ chọn vùng chọn tự do Thao tác thực hiện: Chọn cơng cụ Lasso. Kích giữ và kéo rê chuột sao cho đường viền chọn chạy theo chu vi của một đối tượng. Muốn kết thúc thao tác chọn, ta chỉ 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ự do Thao tác thực hiện: Ta kích từng điểm để tạo khung viền chọn. Kích lại điểm đầu tiên hoặc kích kép để kết thúc. Xĩa từng điểm chọn sai bằng phím Backspace hoặc Undo từng bước. c. Magnetic Lasso: cơng cụ Lasso từ tính, khi thao tác với cơng cụ này thì vùng chọn luơn bám vào biên của hình ảnh, thích hợp cho những đối tượng cĩ độ tương phản cao về màu sắc giữa biên đối tượng với nền. 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 đầu tiên hoặc kích kép để kết thúc. Trong quá trình di chuyển chuột quanh chu vi đối tượng, ta cĩ thể kích để cưỡng chế vùng chọn đi đúng hướng (nếu chế độ tự động khơng chính xác). Xĩa từng điểm chọn sai bằng phím Backspace hoặc Undo từng 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 2
  10. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Chọn cơng cụ Magic wand. Kích vào một màu trên hình ảnh, một vùng màu tương ứng được chọn. Độ rộng của vùng chọn tùy thuộc vào giá trị Tolerance trên thanh Options. Thuộc tính: Tolerance: Dung sai của vùng chọn, dung sai càng lớn thì vùng chọn càng rộng. Anti – Alias: Khử răng cưa Contiguous: Chọn màu cục bộ – màu được giới hạn bởi những vùng màu lân cận. (Nếu khơng được kiểm nhận thì sẽ chọn trên tồn file) Use All Layers: Chọn trên tất cả các Layer, khơng phân biệt Layer hiện hành hay những Layer khác. Quick Selection Tool (W) Là cơng cụ chọn nhanh một vùng chọn bằng cách kích liên tục vào những 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 bằng màu sắc. Thao tác: Rê các thanh trượt để cân bằng màu Hình 1.5 Bảng màu Color Balance Ảnh hưởng Ảnh hưởng Ảnh hưởng vùng tối vùng trung vùng sáng bình chung KHOA CƠNG NGHỆ THƠNG TIN 3
  11. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop 1.2.2 Lệnh Hue/Saturation Dùng để hiệu chỉnh sắc độ, độ bão hịa màu và mức độ sáng tối cho hình ảnh. Hiệu chỉnh tơng màu Hiệu chỉnh độ bão hịa màu Hiệu chỉnh sáng tối Cập nhật tơng màu foreground Hình 1.6 Bảng màu Hue/Saturation 1.2.3 Lệnh Variations Hiệu chỉnh màu bằng cách cộng dần từng màu, cộng dần từng sắc độ sáng – tối. Rất tốt cho việc chuyển ảnh trắng đen sang màu. 1.3 Cơng cụ tơ vẽ và shape 1.3.1 Bộ cơng cụ hút màu: Hình 1.7 Bộ cơng cụ hút màu Eyedropper Tool: hút lấy mẫu màu trên hình ảnh, màu được hút hiển thị trên ơ màu foregroud. Color Sampler Tool: hút lấy thơng số màu, tối đa là 4 thơng số KHOA CƠNG NGHỆ THƠNG TIN 4
  12. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Ruler tool: Đo đạc kích thước hình ảnh và một ứng dụng khác của cơng cụ Measure: Canh chỉnh hình ảnh bị nghiêng trở về dạng thẳng: Dùng cơng cụ Measure rê dọc theo bờ xiên của hình ảnh Menu Image/ Rotate Canvas/ Arbitrary OK Note Tool: Cơng cụ ghi chú 123 count Tool: Cơng cụ đánh dấu và ghi số lượng 1.3.2 Cơng cụ Gradient Dùng để tơ màu chuyển sắc. Cĩ 4 kiểu tơ: Linear Gradient: Màu biến thiên từ điểm đầu đến điểm cuối theo đường thẳng. Radial Gradient: Màu biến thiên từ điểm đầu đến điểm cuối theo dạng tỏa trịn. Angle Gradient: Màu biến thiên nghịch chiều kim đồng hồ xung quanh điểm bắt đầu (giống hình chĩp hay hình nĩn). Reflected Gradient: Màu biến thiên dựa trên mẫu gradient tuyến tính đối xứng ở một bên điểm bắt đầu. Diamond Gradient: Màu biến thiên từ điểm bắt đầu hướng ra ngồi theo dạng hình thoi. Điểm cuối quyết định một gĩc của hình thoi. Cho phép tơ Hiệu chỉnh màu tơ Hịa trộn màu Đảo màu trong suốt Hình 1.8 Bảng thuộc tính của cơng cụ Gradient Các kiểu chuyển sắc Độ trong suốt Làm mịn màu tơ KHOA CƠNG NGHỆ THƠNG TIN 5
  13. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Thư viện Gradient mẫu Loại chuyển sắc mịn (Solid) hay sọc (Noise) Độ trong suốt của màu Nút màu Hình 1.9 Bảng hiệu chỉnh tơ màu Gradient Độ trong suốt của màu tại vị trí Vị trí nút màu nhất định (tại ơ đang chọn Opacity Stop đang chọn) KHOA CƠNG NGHỆ THƠNG TIN 6
  14. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Hướng dẫn thực hiện: Nền: Tơ chuyển sắc từ màu xanh sang màu đen. Text: Tơ chuyển sắc từ màu xanh sang màu đỏ, giảm opacity. Vịng trịn: Tạo vùng chọn Stroke Blending Mode: Overlay Vịng trịn nhỏ: Tạo vùng chọn Stroke Giảm Opacity Hình trịn nhỏ nhất: Tạo vùng chọn tơ màu trắng Blending Mode: Overlay Chữ “&”: Tơ màu xám Blending Mode: Color Dodge Bĩng chiếc đồng hồ: Copy và lật đối xứng theo chiều dọc Blending Mode: Overlay Đường line: Chọn 1 vùng chọn 1 pixel Tơ màu xanh lá giảm Opacity. Các Text: Lấy các text từ file Begin. Hồn tất 1.3.3 Brush  Hộp thoại cọ Brush (F5) Kích thước nét cọ Độ cứng nét cọ Thư viện nét cọ Hình 1.10 Bảng Brush Load thư viện nét cọ mới: kích biểu tượng Chọn tên thư viện cần load  Thuộc tính nét cọ: Kích chọn nét cọ Kích biểu tượng “toggle the brushes palette” o Brush Tip shape: Ấn định tùy chọn cho cọ vẽ KHOA CƠNG NGHỆ THƠNG TIN 7
  15. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop o Spacing: Khoảng cách giữa các đầu cọ trong một nét vẽ. o Scattering: Xác định độ phân tán, chi phối số lượng và vị trí hạt phun trên nét vẽ. o Color Dynamics: Quản lý việc thay đổi màu sắc trên đường đi của nét vẽ. 1.3.4 Nhĩm cơng cụ Pen Hình 1.11 Nhĩm cơng cụ Pen Pen Tool: cơng cụ chính để tạo đường Path. Freeform Pen Tool: Vẽ đường Path bằng cách rê chuột tự do. Add Anchor Point Tool: Thêm node Delete Anchor Point Tool: Xố node Convert Point Tool: Hiệu chỉnh tay nắm, biến node gãy nhọn thành node trơn, mịn Thuộc tính và các thao tác vẽ và hiệu chỉnh đường Path Thuộc tính Hình 1.12 Bảng thuộc tính Pen KHOA CƠNG NGHỆ THƠNG TIN 8
  16. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Thao tác Chọn cơng cụ Pen (“P”). Trên thanh Option của cơng cụ Pen, chọn chức năng Paths Thao tác trên file (kích hoặc rê chuột): Vẽ các đoạn thẳng Vẽ đoạn gấp khúc Vẽ đoạn cong Thêm node Xĩa bỏ node Chỉnh để biến node gãy nhọn thành node cong mịn Hiệu chỉnh node với phím Ctrl và phím Alt Chuyển Path thành vùng chọn: bấm Ctrl+ Enter; hoặc R-Click “Make Selection ” Vẽ tiếp một đường Path cĩ sẵn bấm giữ Ctrl + kích chọn đường Path, kích vào node cuối cùng, sau đĩ vẽ tiếp bình thường. 1.3.5 Nhĩm lệnh về Path Path palette Hình 1.13 Bảng Paths New path: tạo path mới Delete path: xĩa đường path Make selection: chuyển path thành vùng chọn Make work path: chuyển vùng chọn thành đường path Fill path with foreground color: tơ màu nền cho path với màu foreground. Stroke Path with Brush: tơ đường viền cho path với các dạng cọ brush. Chọn Path, chọn cọ Brush, chọn nét cọ (kích biểu tượng “Stroke path with brush”) 1.3.6 Nhĩm cơng cụ Shape KHOA CƠNG NGHỆ THƠNG TIN 9
  17. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Hình 1.14 Nhĩm cơng cụ Shape Chọn kiểu shape drag mouse trực tiếp lên trang giấy. Tạo và lưu một shape vào thư viện Custom Shape: o Tạo shape mới (bằng cơng cụ Pen hoặc hiệu chỉnh từ các shape cĩ sẵn) o Chọn Shape vừa tạo Menu Edit/ Define custom shape o Ok Shape mới sẽ được đưa vào cuối thư viện custom shape. 1.4 Text 1.4.1 Các kiểu text Hình 1.15 Bảng cơng cụ Text Horizontal Type Tool: Cơng cụ tạo văn bản ngang Vertical Type Tool: Cơng cụ tạo văn bản dọc Horizontal Type Mask Tool: Cơng cụ tạo văn bản ngang với hình thức là vùng chọn Vertical Type Mask Tool: Cơng cụ tạo văn bản dọc với hình thức là vùng chọn 1.4.2 Định dạng text Sử dụng thanh option Hình 1.16 Bảng thuộc tính của text Đổi Chọn Chọn chế độ Màu hướng Font Chọn kiểu canh hàng chữ Chọn Text đậm/ (Align) nghiêng, Size Các hiệu ứng uốn cong chữ Tất cả các định dạng cho chữ KHOA CƠNG NGHỆ THƠNG TIN 10
  18. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Leading: khoảng cách dịng Kerning: khoảng cách giữa hai ký tự Tracking: khoảng cách giữa các ký tự Vertically Scale: co giãn văn bản theo chiều dọc Horizontally Scale: co giãn văn bản theo chiều ngang Set the baseline Shift: khoảng cách với đường nền ban đầu 1.4.3 Uốn cong Text: Hình 1.17 Ví dụ về uốn cong text Chọn lớp chữ. Thực hiện một trong hai cách: Chọn cơng cụ Type, nhấp vào biểu tượng Create Warped Text trên thanh Options. Hoặc chọn Layer /Type/ Warp Text KHOA CƠNG NGHỆ THƠNG TIN 11
  19. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Hình 1.18 Bảng Wap Text Chọn kiểu uốn cong Ok Ngồi ra, ta cịn cĩ thể uốn cong Text bằng cách cho text chạy theo đường path (sử dụng cho version CS trở lên). Thao tác: Tạo đường path Chọn cơng cụ Text đặt gần đường Path kích một lần lên đường path Nhập Text khi cĩ dấu nhắc xuất hiện. Chúng ta cĩ thể hiệu chỉnh text trên đường Path bằng cơng cụ Direct selection tool Hình 1.19 Ví dụ text theo đường path KHOA CƠNG NGHỆ THƠNG TIN 12
  20. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop 1.5 Làm việc với layer và group 1.5.1 Palette Layer (F7) 3 1 4 2 5 6 7 8 9 10 11 12 13 14 Hình 1.20 Bảng layer Nút số 1: Opacity: Độ trong suốt (độ mờ đục) của Layer Nút số 2: Fill: Độ trong suốt của các Pixel màu (khơng kể màu do hiệu ứng LayerStyle tạo ra). Nút số 3: Blending Mode (chế độ hịa trộn lớp) Nút số 4: Các chế độ khĩa Layer Nút số 5: Ẩn/ Hiện Layer Nút số 6: Ơ ảnh hiển thị trước Nút số 7: Lớp nền Background (mặc định là khơng di chuyển được) Nút số 8: Liên kết các Layer được chọn Nút số 9: Add a Layer Style: Hiệu ứng trên Layer Nút số 10: Add a mask: Tạo một lớp mặt nạ mới. Nút số 11: Create new fill or adjustment Layer: phủ lên đối tượng một lớp màu hay một lớp hiệu chỉnh mới. Nút số 12: Create a new Group: Tạo một group mới (thư mục chứa các Layer con bên trong) Nút số 13: Tạo một Layer mới Nút số 14: Xĩa Layer, xĩa hiệu ứng, xĩa mặt nạ, KHOA CƠNG NGHỆ THƠNG TIN 13
  21. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop 1.5.2 Các thao tác với Layer a. Chọn Layer Cĩ nhiều cách: Kích mouse trực tiếp lên layer R-click trực tiếp lên hình ảnh Chọn tên Layer Kiểm nhận chế độ “Auto select” Bấm giữ Ctrl và click vào hình ảnh cần chọn. Chọn một lúc nhiều layer: Kích chọn 1 layer trong palette layer Bấm giữ Ctrl và tiếp tục kích chọn những layer khác, hoặc chọn 1 layer bấm giữ Shift và kích chọn Layer cuối cùng của nhĩm muốn chọn. b. Di chuyển Layer Cĩ nhiều cách: Drag mouse trực tiếp lên palette Layer Chọn layer muốn di chuyển lớp Menu Layer / Arrange: o Bring Forward (Ctrl+]) : Đưa Layer lên trên một lớp o Send Backward (Ctrl+[) : Đưa layer xuống dưới một lớp o Bring to Front (Ctrl+Shift+]) : Đưa Layer lên lớp trên cùng o Send to Back (Ctrl+Shift+[) : Đưa Layer xuống lớp dưới cùng c. Đổi tên Layer D-click vào tên layer hiện tại của layer trong palette layer nhập tên mới R-click vào Layer trong palette layer Layer Proprerties nhập tên mới d. Tạo layer mới Kích biểu tượng “Create a new Layer” phía dưới palette Layer Menu layer / New / Layer (Ctrl + Shift + N) e. Nhân đơi Layer Chọn Layer Ctrl + J Chọn Layer Chọn cơng cụ Move Bấm giữ Alt + drag mouse Drag layer muốn nhân đơi vào biểu tượng “Create a new Layer” R-click vào Layer Duplicate layer KHOA CƠNG NGHỆ THƠNG TIN 14
  22. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop f. Xĩa Layer Chọn 1 hoặc nhiều layer Bấm delete Drag Layer muốn xĩa vào biểu tượng g. Khĩa Layer : Khĩa các pixel trong suốt : Khĩa khơng cho hiệu chỉnh trên hình ảnh : Khĩa khơng cho di chuyển : Khĩa tất cả mọi tác động lên Layer đĩ. h. Canh hàng Layer Chọn các Layer muốn canh hàng Menu Layer / Align (Hoặc chọn cơng cụ Move, sau đĩ chọn kiểu giĩng hàng trên thanh Options): Chọn kiểu giĩng hàng: o Top Edges: Canh bằng nhau trên đỉnh o Vertical Centers: Canh giữa theo phương dọc o Bottom Edges: Canh bằng nhau dưới đáy o Left Edges: Canh trái o Horizontal CEnters: Canh giữa theo phương ngang o Right Edges: Canh phải i. Phân phối đều các Layer (Distribute) Chọn các Layer muốn phân phối đều Menu Layer / Distribute (Hoặc chọn cơng cụ Move, sau đĩ chọn kiểu giĩng hàng trên thanh Options) Chọn kiểu phân phối cần thiết j. Lồng ghép các Layer Điều kiện: Phải cĩ ít nhất hai Layer Đặt layer hình ảnh nằm trên layer dùng làm khung chứa KHOA CƠNG NGHỆ THƠNG TIN 15
  23. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Menu Layer/ Create Clipping Mask (Ctrl + Alt + G) Hoặc bấm giữ Alt và kích vào đường ngăn cách giữa 2 Layer này. Gỡ bỏ chế độ lồng ghép Layer: Menu Layer/ Release Clipping Mask (Ctrl + Alt + G) Hoặc một lần nữa bấm giữ Alt và kích vào đường ngăn cách giữa 2 Layer này. Ví dụ: Cĩ 2 layer, Layer text và layer hình ảnh Hình 1.21 Ví dụ hình lồng trong chữ Sau khi để layer hình trên layer chữ Bấm giữ Alt và kích vào đường ngăn cách giữa 2 Layer này Ta cĩ kết quả sau: k. Liên kết Layer Chọn các Layer muốn liên kết Click biểu tượng l. Gộp lớp các Layer: Chọn các Layer cần gộp kích biểu tượng Merge Linked (Ctrl + E): Gộp các lớp đang được liên kết thành một lớp Merge Layers: Gộp tất cả các Layer đang được chọn thành một Layer độc lập. Merge Down: Gộp lớp đang chọn với lớp bên dưới Merge Visible: Gộp tất cả các lớp đang hiển thị KHOA CƠNG NGHỆ THƠNG TIN 16
  24. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Flatten Image: Làm phẳng lớp (gộp tất cả các lớp lại thành một lớp background). 1.6 Một số hiệu ứng trong photoshop 1.6.1 Truy cập bảng Layer Style Nhấp hai lần vào Layer muốn tạo hiệu ứng R- Click lên Layer muốn tạo hiệu ứng/ Blending option Kích biểu tượng ở gĩc dưới trái của palette Layer/ Chọn kiểu hiệu ứng 1.6.2 Các loại hiệu ứng và thuộc tính Hình 1.22 Bảng layer style a. Drop shadow Tạo hiệu ứng bĩng đổ bên ngồi. Các thơng số cơ bản cho hiệu ứng đang chọn (Drop Shadow): KHOA CƠNG NGHỆ THƠNG TIN 17
  25. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Mode: các chế độ hịa trộn của hiệu ứng Opacity: độ trong suốt của hiệu ứng Use Global Light: Sử dụng một nguồn ánh sáng chung Distance: khoảng cách của hiệu ứng đối với đối tượng Spread: độ thắt (căng) của bĩng Size: độ lớn của bĩng, bĩng càng lớn thì càng nhịe và cĩ độ chuyển mềm Noise: tạo nhiễu hạt Contour: kiểu viền của bĩng, tạo ra các dạng bĩng lạ mắt. b. Inner shadow Tạo hiệu ứng bĩng gĩc bên trong đối tượng. c. Outer Glow Tạo hiệu ứng tỏa sáng bên ngồi đối tượng. d. Inner Glow Tạo hiệu ứng phát sáng hướng vào phía trong đối tượng. e. Bevel and Emboss Tạo hiệu ứng chạm nổi và vát cạnh. o Outer Bevel: hiệu ứng vát cạnh bên ngồi o Inner Bevel: hiệu ứng vát cạnh bên trong o Emboss: hiệu ứng chạm nổi o Pillow Emboss: hiệu ứng chạm nổi dạng khắc chìm o Stroke Emboss: chạm nổi cho đường viền (Chỉ cĩ tác dụng khi cĩ sử dụng hiệu ứng đường viền Stroke). Gloss Contour: kiểu bĩng của khối Higlight: o Mode: các chế độ hịa trộn của highlight (phần sáng) o Opacity: độ trong suốt của highlight KHOA CƠNG NGHỆ THƠNG TIN 18
  26. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Shadow: o Mode: các chế độ hịa trộn của bĩng o Opacity: độ trong suốt của bĩng f. Satin Tạo độ trơn láng, bĩng nước g. Color Overlay Phủ một lớp màu lên đối tượng h. Gradient Overlay Phủ một lớp Gradient lên đối tượng i. Pattern Overlay Phủ một lớp họa tiết lên đối tượng 1.6.3 Copy và paste hiệu ứng Copy hiệu ứng: Kích phải chuột vào layer đang cĩ hiệu ứng Kích chọn lệnh “Copy Layer Style” Paste hiệu ứng: Chọn các Layer cần dán hiệu ứng, kích phải chuột vào một trong các layer đang chọn Chọn lệnh “Paste Layer Style”. 1.6.4 Xĩa hiệu ứng Cách 1: Rê chuột thả layer chứa hiệu ứng vào biểu tượng sọt rác (Delete Layer). Cách 2: Kích phải chuột lên layer chứa hiệu ứng Clear Layer Style. Cách 3: Menu Layer/ Layer Style/ Clear Layer Style. 1.6.5 Tách hiệu ứng Cách 1: Kích phải chuột vào layer chứa hiệu ứng cần tách (lớp hiệu ứng_effect) Chọn lệnh Create Layer Cách 2: Chọn Layer chứa hiệu ứng cần tách Menu Layer/ Layer Style/ Create Layer Khi kích lệnh Create Layer Sẽ xuất hiện câu thơng báo Ok 1.6.6 Một số phím tắt thường dùng Tạo file mới bằng kích thước file End Đứng tại file End Nhấn Ctrl+A / Ctrl+C / Ctrl+N / OK KHOA CƠNG NGHỆ THƠNG TIN 19
  27. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop Ctrl + +: Phĩng to Ctrl + -: thu nhỏ Ctrl+ D: bỏ vùng chọn Spacebar + drag chuột: di chuyển hình Trong lúc vẽ vùng chọn: o Nhấn thêm phím spacebar là để di chuyển vùng chọn o Nhấn Shift: thêm vùng chọn o Alt: bớt vùng chọn o Ctrl + C: copy hình o Ctrl + V: dán hình Ctrl + E: link các layer đang chọn thành 1 Ctrl + Shift + I: nghịch đảo vùng chọn KHOA CƠNG NGHỆ THƠNG TIN 20
  28. Bài 1: Cơng cụ thiết kế giao diện web trong photoshop BÀI TẬP ÁP DỤNG Bài tập 1: Hãy tạo hình chữ nhật cĩ bo trịn gĩc theo đúng kích thước sau đây: rộng 117px, cao 35px, độ bo trịn 30px, tơ màu màu đỏ, chữ màu trắng đặt chính giữa hình chữ nhật như hình mẫu dưới đây: Bài tập 2: Hãy tạo nút cĩ hình dạng như sau: Bài tập 3: Hãy tạo logo cĩ hình dạng như sau: Bài tập 4: Hãy tạo bộ nút cĩ dạng như sau: KHOA CƠNG NGHỆ THƠNG TIN 21
  29. Bài 2: Giới thiệu và nhận dạng các trang web GIỚI THIỆU VÀ NHẬN DẠNG CÁC TRANG WEB Giới thiệu: Bài này giới thiệu về các dạng website thường thấy và cách xem giao diện website ở một số thiết bị mobile. Mục tiêu: Nhận dạng được các dạng website. Xem được website trên desktop và mobile Mơ tả được các dạng website trên desktop và mobile Hình thành tính sáng tạo tạo trang web 2.1 Giới thiệu và nhận dạng các trang web Web là phương tiện hữu dụng và tức thời cho những nhu cầu đa dạn và thiết yếu. Về tính chất, website được phân thành 2 dạng: 2.1.1. Website tĩnh: Đặc điểm và tính chất o Tuỳ vào yêu cầu của khách hàng lựa chọn o Thơng tin khơng thay đổi nhiều o Nhẹ, quản lý đơn giản khơng kết nối cơ sở dữ liệu o Cĩ thể thiết kế bằng HTML, photoshop, Flash, Giao diện: cĩ các thành phần như: o Banner o Logo o Bộ nút (menu) o Background o Icon o Bờ lề chừa nút o Các liên kết o Văn bản o Hỉnh ảnh, . 2.1.2. Website động: Đặc điểm và tính chất: cập nhật thơng tin thường xuyên Giao diện: KHOA CƠNG NGHỆ THƠNG TIN 22
  30. Bài 2: Giới thiệu và nhận dạng các trang web o Thiết kế đơn giản, hệ thống dễ tra cứu o Cĩ các thành phần như: tìm kiếm, login, password o Cĩ lập trình kết nối cơ sở dữ liệu. Về mục đích sử dụng, web được thành các dạng phổ biến như sau: Website thương mại điện tử Trong số các loại website, phổ biến và được người dùng biết đến nhiều nhất vẫn là các trang web thương mại điện tử. Loại website này rất dễ để người dùng nhận biết, nĩ là một trang web mọi người cĩ thể trực tiếp mua sản phẩm. Một vài ví dụ về các loại website thương mại nổi tiếng và khá phổ biến ở Việt Nam hiện tại như: Shopee, Tiki, Lazada, Sendo, Hình 2.1 Ví dụ website thương mại điện tử Lazada là 1 trong những loại website thương mại điện tử Website giới thiệu doanh nghiệp Hầu hết các doanh nghiệp đều cĩ website cho riêng mình. Khách hàng sẽ thấy tin tưởng hơn nếu tìm thấy website doanh nhghiệp trên mạng. Website phải được gắn nhãn hiệu như doanh nghiệp (cùng logo và định vị) nhằm thể hiện được các sản phẩm hoặc dịch vụ mà doanh nghiệp cung cấp như: sunhouse.com.vn, duytan.vn, . KHOA CƠNG NGHỆ THƠNG TIN 23
  31. Bài 2: Giới thiệu và nhận dạng các trang web Hình 2.2 Ví dụ website giới thiệu doanh nghiệp Website giải trí Trong số các loại website phổ biến hiện nay thì web giải trí luơn là những trang được người dùng ưu ái lựa chọn nhiều nhất. Nhiều người cĩ thĩi quen duyệt web với các kênh giải trí như nghe nhạc, xem phim, đọc truyện, game, kết bạn, trị chuyện, Đây hồn tồn là các trang web cho mục đích giải trí như: mp3.zing.vn, ngoisao.net, KHOA CƠNG NGHỆ THƠNG TIN 24
  32. Bài 2: Giới thiệu và nhận dạng các trang web Hình 2.3 Ví dụ website giải trí Website truyền thơng Các trang web truyền thơng được xem là các trang báo luơn thu thập các câu chuyện, tin tức hoặc báo cáo nhanh chĩng theo giờ như: dantri.com.vn, tuoitre.vn, KHOA CƠNG NGHỆ THƠNG TIN 25
  33. Bài 2: Giới thiệu và nhận dạng các trang web Hình 2.4 Ví dụ website truyền thơng KHOA CƠNG NGHỆ THƠNG TIN 26
  34. Bài 2: Giới thiệu và nhận dạng các trang web Website giáo dục Các trang web của các tổ chức giáo dục và những người cung cấp các khĩa học trực tuyến, đào tạo trực tuyến được xếp hạng vào loại trang web giáo dục hoặc thơng tin về một trường nào đĩ, ví dụ như: ktkthcm.edu.vn, ntt.edu.vn, . Hình 2.5 Ví dụ website giáo dục Ngồi ra cịn một số dạng website khác như: website giới thiệu cá nhân, forum, Wiki hoặc trang web diễn đàn cộng đồng, KHOA CƠNG NGHỆ THƠNG TIN 27
  35. Bài 2: Giới thiệu và nhận dạng các trang web Hình 2.6 Ví dụ website cá nhân 2.2 Tham khảo website thiết kế trên thiết bị di động và desktop Những năm về trước, khi nĩi đến thiết kế website, người dùng đều hiểu là thiết kế website cho máy tính cá nhân, bao gồm cả máy tính để bàn và máy tính xách tay. Tuy nhiên đi cùng với sự phát triển của điện thoại thơng minh, máy tính bảng và tivi thơng minh tại Việt Nam với số lượng người dùng tăng trưởng mạnh, thiết kế website cho điện thoại nĩi riêng và thiết kế website dành cho các thiết bị di động (mobile) nĩi chung ngày càng được chú trọng. Trên máy tính bàn mà cĩ thể xem giao diện các trang web trên thiết bị di động thì ta làm như sau: Mở website để xem, ví dụ trang bluestone.com.vn Nhấn F12 và chọn để chọn loại thiết bị như hình sau KHOA CƠNG NGHỆ THƠNG TIN 28
  36. Bài 2: Giới thiệu và nhận dạng các trang web Hình 2.7 Ví dụ cách chuyển qua giao diện moblie trên desktop Bảng dưới đây là xem trang web bluestone.com.vn trên cả 3 thiết bị: desktop, ipad (rộng 768px), Galaxy S5 (rộng 360px) KHOA CƠNG NGHỆ THƠNG TIN 29
  37. Bài 2: Giới thiệu và nhận dạng các trang web Giao diện trên Desktop Giao diện trên ipad Giao diện trên Galaxy S5 Menu Menu Hình 2.8 Giao diện website trên Desktop, ipad và Galaxy S5 (phần trên) KHOA CƠNG NGHỆ THƠNG TIN 30
  38. Bài 2: Giới thiệu và nhận dạng các trang web Giao diện trên Desktop Giao diện trên ipad Giao diện trên Galaxy S5 Hình 2.9 Giao diện website trên Desktop, ipad và Galaxy S5 (phần dưới) KHOA CƠNG NGHỆ THƠNG TIN 31
  39. Bài 2: Giới thiệu và nhận dạng các trang web BÀI TẬP ÁP DỤNG Hãy chụp hình màn hình trang web, mỗi loại ít nhất 1 trang. Ví dụ dưới đây là chụp hình trang web của vus.edu.vn, sunhouse.com.vn KHOA CƠNG NGHỆ THƠNG TIN 32
  40. Bài 2: Giới thiệu và nhận dạng các trang web Hướng dẫn: Cài đặt fireshot for chrome Mở trang web Chọn extensions gĩc trên phải của trình duyệt google /Take Webpage Screenshots Entirely Chọn Capture entire page Lưu file KHOA CƠNG NGHỆ THƠNG TIN 33
  41. Bài 3: Cấu trúc trang web CẤU TRÚC TRANG WEB Giới thiệu: Bài học này giới thiệu các thành phần trong trang web, cấu trúc sitemap của website. Các cơng việc chuẩn bị tạo website, một số bố cục thường thấy của trang web. Mục tiêu: Trình bày được các cơng việc chuẩn bị tạo trang web Nhân biết được các thành phần của trang web: logo, menu, banner, header, footer, text, hình ảnh Tạo được SiteMap Nhận thức được website cĩ đẹp. 3.1 Các cơng việc chuẩn bị tạo trang web Để làm ra một website chất lượng, địi hỏi một quy trình chuyên nghiệp và cĩ rất nhiều cơng đoạn. Dưới đây là 4 giai đoạn cần làm: Giai đoạn 1: Thu thập và phân tích thơng tin khách hàng để xây dựng hợp đồng Tìm hiểu yêu cầu thực tế của khách hàng, ghi lại những thơng tin và yêu cầu thiết kế của khách hàng Phân tích rõ ràng mục đích, nguyện vọng của khách hàng, tính đến các khả năng và vấn đề phát sinh Căn cứ trên kết quả khảo sát, thơng tin do khách hàng cung cấp tiến hành lập cấu trúc nội dung và chức năng cho website. Giai đoạn 2: Giai đoạn thiết kế và xây dựng cơ sở dữ liệu Giai đoạn thiết kế (đây là giai đoạn quan trọng của người thiết kế) - Phác thảo giao diện trên giấy KHOA CƠNG NGHỆ THƠNG TIN 34
  42. Bài 3: Cấu trúc trang web Hình 3.1 Layout phác thảo trên giấy - Xây dựng giao diện website trên phần mềm Photoshop, Illustrator, Hình 3.2 Giao diện trên phần mềm Photoshop Giai đoạn xây dựng cơ sở dữ liệu: Xây dựng các bảng sơ sở dữ liệu theo thơng tin khách hàng cùng cấp. Phối màu tổng thể, bố cục nội dung và chức năng. Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan. Soạn thảo nội dung tài liệu, chỉnh sửa hồn thiện nội dung rồi đưa lên trang web. Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ Giai đoạn 3: Giai đoạn cho khách hàng chạy thử và duyệt thiết kế Gửi demo hồn chỉnh cho khách hàng nghiệm thu. Sửa lại theo các yêu cầu khách hàng, bám sát nội dung hợp đồng. KHOA CƠNG NGHỆ THƠNG TIN 35
  43. Bài 3: Cấu trúc trang web Khách hàng duyệt phần thiết kế và chức năng. Giai đoạn 4: Giai đoạn chuyển giao và bảo hành - Bàn giao cho khách hàng website bao gồm host, domain, mật khẩu quản trị. - Hướng dẫn khách hàng quản trị website một cách hiệu quả - Hỗ trợ khách hàng trong quá trình sử dụng, sửa các lỗi kỹ thuật phát sinh. Tùy vào mỗi gĩi website, dựa vào nhu cầu của mỗi khách hàng, và phụ thuộc vào các chức năng phát sinh mà quy trình này cĩ thể thay đổi để phù hợp và đưa ra giải pháp tốt nhất. Thu thập ý kiến khách hàng Thiết kế website khơng chỉ là phương pháp để tăng cường, quảng bá hình ảnh của sản phẩm, doanh nghiệp trên Internet mà cịn là một kênh bán hàng hiệu quả của chính doanh nghiệp. Vì vậy, kế hoạch thiết kế website cho doanh nghiệp cần được đầu tư về thời gian và chi phí một cách đúng đắn. Tuy nhiên, để website hồn thành thực sự mang lại giá trị cho doanh nghiệp của bạn, cơng ty thiết kế website chúng tơi khuyên bạn nên chú ý một số điều sau ngay từ khi bắt đầu: 3.2 Cấu trúc SiteMap Site map (sơ đồ của một website) là một danh lục liệt kê tất cả các mục thơng tin trên trang web của bạn cùng sự mơ tả ngắn gọn cho các mục thơng tin đĩ. Site map nên được sử dụng dễ dàng trong việc thực hiện tìm kiếm nhanh để tìm ra thơng tin cần thiết cũng như trong việc di chuyển thơng qua các đường link trên website. Site map là một sơ đồ hồn hảo nhất của website. Khi tạo cấu trúc sitemap cần lưu ý những vấn đề sau: Nên bám sát theo mong muốn, yêu cầu của khách hàng Khi tạo website cĩ sitemap, ta sẽ cĩ những tiện ích như: o Tối ưu về thời gian, chi phí, o Đạt những thuận lợi cho khách hàng Hình 3.3 Cấu trúc Site Map KHOA CƠNG NGHỆ THƠNG TIN 36
  44. Bài 3: Cấu trúc trang web Ví dụ dưới đây là sitemap của webtise Bảo hiểm nhân thọ Cathay Life Hình 3.4 Ví dụ Site Map của cơng ty 3.4 Các thành phần trang web Một trang web thơng thường sẽ cĩ các thành phần sau: o Banner o Logo o Bộ nút (menu) o Background o Icon o Bờ lề chừa nút o Các liên kết o Văn bản o Hình ảnh o Video . o Nút tìm kiếm, login, password 3.4.1 Bố cục thơng thường của một trang web Một số thành phần thơng thường mà tất cả các website đều cĩ là: KHOA CƠNG NGHỆ THƠNG TIN 37
  45. Bài 3: Cấu trúc trang web Hình 3.5 Bố cục website thường dùng - Header: header là phần đầu tiên của trang web, chứa logo trang web, banner chính ngang, menu phụ như thơng tin, ơ tìm kiếm, ngày tháng, thời tiết, - Navigation: thanh điều hướng (hay là menu chính), là một thanh ngang, chứa các mục chính (thể loại chính) của trang web. Phần menu này rất quan trọng giúp người dùng và cơ chế tìm kiếm định hình hiểu rõ về cấu trúc website của bạn. - Content: chứa nội dung chính website. - Sidebar: thanh bên, chứa các phần liên quan đến nội dung chính như các menu phụ, các bài viết liên quan, quảng cáo, một số website cĩ 1 thanh bên, 2 thanh bên hoặc hơn nữa là tùy theo bố cục. - Footer: phần chân (đáy) trang, chứa thơng tin về trang web như tình trạng bản quyền Ngồi ra, cịn một số bố cục dưới đây: KHOA CƠNG NGHỆ THƠNG TIN 38
  46. Bài 3: Cấu trúc trang web Hình 3.6 Các dạng bố cục khác 3.4.2 Bí quyết thiết kế bố cục tương tác tốt với người dùng. Ngồi những thành phần chính trên, để tương tác tốt với người dùng khi thiết kế bố cục doanh nghiệp nên chú ý đến các yếu tố như: - Slider Thơng thường Slider sẽ được trình bày ở Header hoặc tại phần đầu của content với hình ảnh, video chứa trong một khung và được sử dụng một số hiệu ứng đồ họa để tạo ấn tượng giữ chân người dùng ở lại website. Tuy nhiên bạn cần đảm bảo một slider với hình ảnh, video chất lượng và khơng ảnh hưởng đến tốc độ tải trang. - Giỏ hàng - dành riêng cho các website bán hàng Giỏ hàng là một thành phần khơng thể thiếu trên website bán hàng trực tuyến. Nĩ thường được đặt tại gĩc bên phải trên cùng của Header. Nĩ rất hữu ích cho mỗi khách hàng bởi tính năng tự động cập nhật sản phẩm đồng thời người dùng cĩ thể dễ dàng thêm bớt nếu muốn. - Ơ tìm kiếm Nếu như giỏ hàng sẽ giúp khách hàng sẽ giúp khách hàng dễ dàng cập nhật số lượng sản phẩm mà mình đã mua được và sở hữu thì ơ tìm kiếm lại phát huy vai trị đắc lực của nĩ trong việc tìm kiếm sản phẩm, hàng hĩa mà khách hàng cần một cách nhanh nhất. KHOA CƠNG NGHỆ THƠNG TIN 39
  47. Bài 3: Cấu trúc trang web BÀI TẬP ÁP DỤNG Bài tập 1: Hãy phác thảo trên giấy giao diện trang chủ của website với chủ đề “Shop hoa tươi” Bài tập 2: Tạo sitemap của website với chủ đề “Shop hoa tươi” Bài tập 3: Thiết kế giao diện trên phần mềm photoshop của bài tập 1 vừa phác thảo trên giấy. Bài tập 4: Hãy tạo header của bigC như sau: Bài tập 5: Hãy tạo banner cho Shop hoa tươi KHOA CƠNG NGHỆ THƠNG TIN 40
  48. Bài 4: Tạo trang web cho desktop và mobile TẠO TRANG WEB CHO DESKTOP VÀ MOBILE Giới thiệu: Đây là bài học quan trong trong mơn học này, tổng hợp kiến thức từ những bài học trước để tạo trang trang web theo chủ mẫu và trang web theo chủ đề trên desktop và mobile. Thiết kế trang web theo chủ đề là phần khĩ nhưng hay, người học cĩ thể tự sáng tạo trang web cho riêng mình nhưng vẫn đảm bảo các thành phần và tính thẩm mỹ của trang web. Mục tiêu: Trình bày được bố cục thơng dụng cho trang web Phác thảo trang web trên giấy Tạo được website trên mobile Tạo trang web trên desktop Hình thành tính sáng tạo khi thiết kế trang web 4.1 Tạo trang web theo mẫu 4.1.1 Tạo trang web trên desktop KHOA CƠNG NGHỆ THƠNG TIN 41
  49. Bài 4: Tạo trang web cho desktop và mobile Hình 4.1 Ví dụ website mẫu trên desktop KHOA CƠNG NGHỆ THƠNG TIN 42
  50. Bài 4: Tạo trang web cho desktop và mobile 4.1.2 Tạo trang web trên mobile Theo xu hướng thiết kế web hiện nay Responsive là phong cách thiết kế website phù hợp trên tất cả các thiết bị: iPhone, iPad, MacBook, Laptop , mọi độ phân giải màn hình như: Tuy nhiên, ta muốn giao diện trên mobile như thế nào ta phải thiết kế thì người code sẽ cho ra sản phẩm như thế. Dưới đây là trang web về spa, giao diện dành cho mobile. Giao diện trên mobile khá dài nên được cắt thành 3 hình dưới đây. KHOA CƠNG NGHỆ THƠNG TIN 43
  51. Bài 4: Tạo trang web cho desktop và mobile Hình 4.2 Giao diện trên mobile 4.2 Tạo trang web theo chủ đề 4.2.1 Xác định màu sắc Đưa ra màu sắc chủ đạo của website (phù hợp với logo và ngành nghề của doanh nghiệp). Ví dụ, nếu doanh nghiệp là kinh doanh các sản phẩm cĩ nguồn gốc thực vật, ta cĩ thể chọn màu xanh lá cây tươi mát là màu sắc chủ đạo cho web; với sản phẩm là thiết bị cơng nghiệp, ta cĩ thể sử dụng những màu sắc đơn giản, khơng màu mè nhưng phải hài hịa và cĩ điểm nhấn, giúp người truy cập dễ dàng theo dõi và nhận biết được các thơng số kỹ thuật của máy 4.2.2 Xác định bố cục Trước khi xây dựng website ta phải hình dung được bố cục tổng quát của trang web như thế nào, sau đĩ ta phác thảo trang web trên giấy KHOA CƠNG NGHỆ THƠNG TIN 44
  52. Bài 4: Tạo trang web cho desktop và mobile 4.2.3 Phác thảo trang web trên giấy Tại sao ta cần phác thảo trang web trên giấy? Khi phác thảo trên giấy thì ý tưởng của ta sẽ được thể hiện liên tục, khơng bị ảnh hưởng các yếu tố kỹ thuật của phần mềm hay mơi trường bên ngồi 4.2.4 Tạo các thành phần trang web Đây là bước tạo giao diện trên phần mềm, ví dụ như phần mềm photoshop. Từng thành phần trong trang web ta đều phải chú ý thật tỉ mỉ như: - Chữ: chọn font chữ gì, kích thước bao nhiêu, màu gì cho phù hợp với website, đặt phải chừa lề và khơng sát hình. - Chữ cho menu nên chọn font Roboto, chữ cho nội dung nên chọn font Arial. Đây là font chữ trịn, khơng cĩ nét chân, đẹp rất phù hợp cho web. Ngồi ra cịn cĩ thể sử dụng font chữ như: Helvetica, Times New Roman, Courier New, Verdana, Georgia, Tahoma, Garamond, Bookman - Hình ảnh: nên chọn hình ảnh chất lượng, phù hợp với đề tài. 4.2.5 Tạo trang web trên desktop Để áp dụng những phần vừa lý thuyết ở trên, hãy tạo trang home cho website với chủ đề thương mại (bán hàng qua mạng). Chú ý: - Để phù hợp theo xu hướng hiện tại nên thiết kế trang web cĩ chiều rộng 12 cột, nghĩa là chia hết cho 12 - Trang web khơng xuất hiện thanh cuộn ngang, tùy theo từng thời điểm cĩ độ phân giải chung của màn hình Hình 4.3 Ví dụ độ phần giải màn hình - Chiều dài tùy ý, tùy theo nội dung nhiều hay ít KHOA CƠNG NGHỆ THƠNG TIN 45
  53. Bài 4: Tạo trang web cho desktop và mobile Hình 4.4 Chiều rộng 12 cột - Do đĩ chiều rộng cĩ thể là 1440px, 1380px, 1320px, 1200px, 4.2.6 Tạo trang web trên mobile Tương tự tạo trang web cho mobile theo mẫu, chúng ta hãy tạo trang home cho website với chủ đề thương mại (bán hàng qua mạng). KHOA CƠNG NGHỆ THƠNG TIN 46
  54. Bài 4: Tạo trang web cho desktop và mobile BÀI TẬP ÁP DỤNG Bài tập 1: Hãy tạo trang web theo mẫu như sau, cĩ chiều rộng: chiều cao Bài tập 2: Tạo trang web như sau: KHOA CƠNG NGHỆ THƠNG TIN 47
  55. Bài 4: Tạo trang web cho desktop và mobile Bài tập 3: Hãy tạo trang web theo mẫu như sau: Bài tập 4: Hãy tạo trang web theo bố cục như sau: KHOA CƠNG NGHỆ THƠNG TIN 48
  56. Bài 4: Tạo trang web cho desktop và mobile Bài tập 5: Tạo trang web theo chủ đề Bán thực phẩm tươi sạch gĩp phần bảo vệ mơi trường. KHOA CƠNG NGHỆ THƠNG TIN 49
  57. Bài 5: Cắt và xuất trang web CẮT VÀ XUẤT TRANG WEB Giới thiệu: Bài học này hướng dẫn sử dụng cơng cụ slide để cắt trang web và xuất ra trang html. Cách xuất hình cho web, cách chọn loại file hình để xuất sao cho hình vẫn chất lượng mà nhẹ. Mục tiêu: Xuất hình tối ưu cho web Phân biệt được đặc điểm các dạng hình khi xuất Cắt được trang web Xuất được 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 và nhấn Save KHOA CƠNG NGHỆ THƠNG TIN 50
  58. Bài 5: Cắt và xuất trang web Hình 5.2 Chọn loại file hình Chọn nơi để lưu và đặt tên file Hình 5.3 Chọn nơi để lưu và đặt tên hình 5.2 Cắt trang web 5.2.1 Tìm hiểu về cơng cụ slice Slice là một vùng hình chữ nhật cĩ số thứ tự ở gĩc trên bên trái, được tạo ra từ cơng cụ slice hoặc các slice tự động. Chúng ta cĩ thể tạo liên kết, các hiệu ứng rollover và các hoạt hình trong một trang Web kết từ các slice. Việc phân chia một ảnh thành các slice sẽ cho phép điều khiển và tối ưu hĩa kích cỡ file của ảnh. Các dạng slice: Auto slice: được tạo ra một cách tự động User slice: được tạo ra bằng cơng cụ slice KHOA CƠNG NGHỆ THƠNG TIN 51
  59. Bài 5: Cắt và xuất trang web Layer – based slice: được tạo bằng palette layer Table slice: được tạo bằng palette Web content Hình 5.4 Bảng thuộc tính cơng cụ slice Tạo Slice từ các đườ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 những đường guide vào vị trí thích hợp. Chọn cơng cụ slice (Nhấp “slice from guides” trên thanh options). Tạo các 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 khi dùng cơng cụ slice để rê chuột lên những vùng cần cắt: những 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 khi 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
  60. Bài 5: Cắt và xuất trang web Hình 5.6 Chọn loại file cần xuất Nhập tên file và vị trí cần lưu file. Chọn một tùy chọn Format: o HTML and Image: Lưu cả file thành một trang HTML và một thư mục Image chứa tất cả các Slice trong file (mỗi Slice là một file riêng biệt với tên mặc định = tên file + số thứ tự của các slice). o Image Only: Chỉ lưu hình ảnh, khơng lưu trang HTML o HTML only: Chỉ lưu một trang HTML, khơng lưu hình ảnh. Hình 5.7 Cách chọn tùy chỉnh trong Format Chọn một tùy chọn từ hộp Slice: o All slices: Lưu tất cả các slice trong ảnh. KHOA CƠNG NGHỆ THƠNG TIN 53
  61. Bài 5: Cắt và xuất trang web o Selected slices: Chỉ lưu các slice được chọn. Save Hình 5.8 Kết quả sau khi xuất 5.3 Tối ưu ảnh cho web 5.3.1. Số lượng hình trên một bài viết Google khuyến khích và cũng đánh giá cao những bài viết cĩ chèn hình ảnh và video để bài viết sinh động hơn, nội dung được dễ hiểu hơn. Thơng thường, mỗi bài viết khoảng 1000 từ nên cĩ tối thiểu 3 hình trở lên để người dùng khơng nhàm chán khi đọc. Tuỳ vào nội dung của bài mà hình sẽ nhiều hay ít. Ví dụ một bài hướng dẫn sử dụng thường sẽ cĩ nhiều hình hơn một bài blog thơng thường. Tuy nhiên, khơng nên lạm dụng chèn quá nhiều hình cho một bài viết sẽ làm chậm tốc độ tải trang của website, đơi khi nĩ cịn tạo cảm giác bài viết khơng mang được 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 là một trong những yếu tố để đưa website này đứng ở vị trí đầu tiên trên trang kết quả tìm kiếm của Google. Do đĩ, cách đặt tên nên theo những quy tắc sau: Đặt tên ảnh khơng dấu và phải cĩ gạch nối giữa các 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 bài viết là giày thể thao cho nữ bạn khơng nên đặt tùy ý như hinh_1.jpg mà nên đặt thành ao-thun-body- nam.jpg Tên hình ảnh khơng nên chứa các ký tự lạ và các ký tự đặt biệt như #, $, /, *, ? 5.3.3. Kích thước hình ảnh chuẩn trên website - Sử dụng hình ảnh trên website khơng đơn giản là chèn hình vào bài 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 là một trong những nguyên nhân khiến website tải chậm. - Nếu là các bài tin tức, hướng dẫn bình thường, kích thước hình nên tối thiểu là 500px và tối đa là 700px. - Với hình sản phẩm, hình dự án, cần cĩ kích thước lớn một chút là 800px đến 1000px. Khi up lên website, ta cĩ thể điều chỉnh hình hiện ra cĩ kích thước KHOA CƠNG NGHỆ THƠNG TIN 54
  62. Bài 5: Cắt và xuất trang web nhỏ, và khi người xem nhấn vào xem chi tiết, sẽ thấy được hình lớn. Ảnh đại diện bài viết website là 1200x630px để chia sẻ ảnh lên facebook. - Về dung lượng, để đảm bảo tốc độ tải trang tốt thì dung lượng ảnh khơng nên vượt quá 100KB. Bởi nếu một bài viết cĩ một hình nặng 200KB là hồn tồn ổn, nhưng một bài viết cĩ 10 hình, mỗi hình là 200KB, điều đĩ thật sự khơng ổn tí nào. - Vì vậy, tối ưu kích thước và dung lượng hình ảnh theo các tiêu chuẩn trên là điều cần thiết phải làm trước khi up ảnh lên website - Sau đây là ví dụ về kích thước của cá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 các loại file hình của bình thủy Nhận xét: Nếu ảnh chụp thì ta nên xuất dạng Save for web và lưu ảnh .jpg thì ảnh vẫn đảm bảo chất lượng và 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
  63. Bài 5: Cắt và xuất trang web Hình 5.12 Bảng so sánh dung lượng các loại file hình của banner Nhận xét: Banner này chỉ tồn là ảnh vector, nên khi xuất dạng Save for web và lưu ảnh dạng .png chất lượng nhất nhưng lại nhẹ nhất. Nếu lưu dưới dạng ảnh .png bình thường mà khơng phải là Save for web thì kích thước vẫn to hơn. Qua 2 ví dụ trên, ta rút ra nhận xét như 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 nhưng vẫn giữ nguyên kích thước ảnh Trong một số trường hợp như ảnh chụp từ màn hình bạn muốn dung lượng ảnh giảm những vẫn giữ nguyên được kích thước để người dùng nhìn rõ hơn, lúc này sử dụng phương pháp nén ảnh là phù hợp nhất. Hiện nay, cĩ rất nhiều cơng cụ, phần mềm hỗ trợ nén ảnh trực tuyến bất kỳ ai cũng cĩ thể dễ dàng sử dụng. Dưới đây là một số website hỗ trợ nén ảnh được đánh giá khá tốt dành cho những người khơng chuyên bạn cĩ thể tham khảo qua: Ví dụ: Kích thước ban đầu của ảnh là 1024 x 768 với dung lượng ảnh là 325KB. Với kích thước này bạn cĩ thể sử dụng để up lên website, tuy nhiên dung lượng ảnh này lại quá cao so với tiêu chuẩn. Do đĩ cần giảm dung lượng ảnh dưới 100KB. KHOA CƠNG NGHỆ THƠNG TIN 56
  64. Bài 5: Cắt và xuất trang web Hình 5.13 Dung lượng, kích thước file hình trước khi nén Ảnh cần giảm dung lượng nhưng vẫn giữ nguyên kích thước Để thực hiện, bạn truy cập vào một trong ba website ở trên (ba website này 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 quả ảnh sau khi giảm dung lượng khơng qua khác biệt so với ban đầu Nén xong, bạn cĩ thể tải ảnh về sử dụng hoặc kiểm tra lại kỹ hơn trong file lưu trữ. Kết quả cho thấy ảnh được nén vẫn giữ nguyên size 1024 x 768 nhưng dung lượng đã giảm cịn 96KB. KHOA CƠNG NGHỆ THƠNG TIN 57
  65. Bài 5: Cắt và xuất trang web Hình 5.14 Dung lượng giảm sau khi đã nén Dung lượng ảnh đã giảm xuống cịn 75KB Với cách thực hiện này giúp hình ảnh đăng tải trên website vẫn đảm bảo đủ kích thước để nhìn rõ thơng tin mà dung lượng lại được 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
  66. Bài 5: Cắt và xuất trang web BÀI TẬP ÁP DỤNG Bài tập 1: Tạo banner như sau và xuất hình png cho web: Bài tập 2: Dùng cơng cụ slice để cắt trang web và xuất ra dạng “HTML and Images” của bài tập 3 trong bài tập áp dụng của Bài 4 Tạo trang web cho desktop và mobile trang 48 Bài tập 3: Hãy tạo trang web theo chủ đề tự chọn: Phác thảo trên giấy Thiết kế trên photoshop Dùng cơng cụ slide trong photoshop để cắt trang web và xuất dạng “HTML và images” KHOA CƠNG NGHỆ THƠNG TIN 59
  67. TÀI LIỆU THAM KHẢO Phạm Quang Huy, “ Photoshop CC tồn tập”, Nhà xuất bản Khoa Học Kỹ Thuật, 2015. Phạm Quang Huy, “Tự học Photoshop CC tồn tập”, Nhà xuất bản Thanh Niên, 2017. KHOA CƠNG NGHỆ THƠNG TIN 60
  68. MỤC LỤC HÌNH ẢNH Hình 1.1 Cơng cụ Marquee 1 Hình 1.2 Bảng thuộc tính của cơng cụ Rectangular Marquee 1 Hình 1.3 Bộ cơng cụ Lasso 2 Hình 1.4 Bộ cơng cụ Magic wand 2 Hình 1.5 Bảng màu Color Balance 3 Hình 1.6 Bảng màu Hue/Saturation 4 Hình 1.7 Bộ cơng cụ hút màu 4 Hình 1.8 Bảng thuộc tính của cơng cụ Gradient 5 Hình 1.9 Bảng hiệu chỉnh tơ màu Gradient 6 Hình 1.10 Bảng Brush 7 Hình 1.11 Nhĩm cơng cụ Pen 8 Hình 1.12 Bảng thuộc tính Pen 8 Hình 1.13 Bảng Paths 9 Hình 1.14 Nhĩm cơng cụ Shape 10 Hình 1.15 Bảng cơng cụ Text 10 Hình 1.16 Bảng thuộc tính của text 10 Hình 1.17 Ví dụ về uốn cong text 11 Hình 1.18 Bảng Wap Text 12 Hình 1.19 Ví dụ text theo đường path 12 Hình 1.20 Bảng layer 13 Hình 1.21 Ví dụ hình lồng trong chữ 16 Hình 1.22 Bảng layer style 17 Hình 2.1 Ví dụ website thương mại điện tử 23 Hình 2.2 Ví dụ website giới thiệu doanh nghiệp 24 Hình 2.3 Ví dụ website giải trí 25 Hình 2.4 Ví dụ website truyền thơng 26 Hình 2.5 Ví dụ website giáo dục 27 Hình 2.6 Ví dụ website cá nhân 28 Hình 2.7 Ví dụ cách chuyển qua giao diện moblie trên desktop 29 Hình 2.8 Giao diện website trên Desktop, ipad và Galaxy S5 (phần trên) 30 Hình 2.9 Giao diện website trên Desktop, ipad và Galaxy S5 (phần dưới) 31 Hình 3.1 Layout phác thảo trên giấy 35 Hình 3.2 Giao diện trên phần mềm Photoshop 35 Hình 3.3 Cấu trúc Site Map 36 Hình 3.4 Ví dụ Site Map của cơng ty 37 Hình 3.5 Bố cục website thường dùng 38 Hình 3.6 Các dạng bố cục khác 39 Hình 4.1 Ví dụ website mẫu trên desktop 42 Hình 4.2 Giao diện trên mobile 44 Hình 4.3 Ví dụ độ phần giải màn hình 45 Hình 4.4 Chiều rộng 12 cột 46 Hình 5.1 Xuất banner cho web 50 Hình 5.2 Chọn loại file hình 51 Hình 5.3 Chọn nơi để lưu và đặt tên hình 51 Hình 5.4 Bảng thuộc tính cơng cụ slice 52 KHOA CƠNG NGHỆ THƠNG TIN 61
  69. Hình 5.5 Cách xuất hình sau khi dùng cơng cụ slice 52 Hình 5.6 Chọn loại file cần xuất 53 Hình 5.7 Cách chọn tùy chỉnh trong Format 53 Hình 5.8 Kết quả sau khi xuất 54 Hình 5.9 Ví dụ ảnh chụp bình thủy 55 Hình 5.10 Bảng so sánh dung lượng các loại file hình của bình thủy 55 Hình 5.11 Ví dụ ảnh dạng vector 55 Hình 5.12 Bảng so sánh dung lượng các loại file hình của banner 56 Hình 5.13 Dung lượng, kích thước file hình trước khi nén 57 Hình 5.14 Dung lượng giảm sau khi đã nén 58 KHOA CƠNG NGHỆ THƠNG TIN 62