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
Ủ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: [email protected]
TRƯỞNG KHOA
TỔ TRƯỞNG
BỘ MÔN
CHỦ NHIỆM
ĐỀ TÀI
HIỆU TRƯỞNG
DUYỆT
Tháng 9, năm 2020
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
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. 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.
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 hoà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
MỤC LỤC
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.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.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.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
2.1 Giới thiệu và nhận dạng các trang web.........................................................22
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
BÀI TẬP ÁP DỤNG ..........................................................................................40
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
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 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
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. Ngoà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.1Vù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
Ngoà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
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
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 toà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
vùng tối
Ảnh hưởng
vùng trung
bình chung
Ảnh hưởng
vùng sáng
KHOA CÔNG NGHỆ THÔNG TIN
3
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
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 ngoà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ô
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
KHOA CÔNG NGHỆ THÔNG TIN
5
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í
nhất định (tại ô
Opacity Stop
đang chọn)
Vị trí nút màu
đang chọn
KHOA CÔNG NGHỆ THÔNG TIN
6
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.
Hoà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
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: Xoá 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
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
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
hướng
Text
Chọn
Font
Chọn chế độ
canh hàng
(Align)
Màu
chữ
Chọn kiểu
đậm/
nghiêng,…
Chọn
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
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
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
Ngoà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
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
4
1
2
5
6
7
8
9 10 11 113 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
Tải về để xem bản đầy đủ
69 trang
27382
Free
Bạn đang xem 20 trang mẫu của tài liệu "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", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_mo_dun_thiet_ke_giao_dien_web_nghe_thiet_ke_trang.pdf
