TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.

HCM
TRUNG TÂM TIN HỌC

TÀI LIỆU GIẢNG DẠY

MOÂN PHOTOSHOP

1
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

BÀI
Tối ưu hóa hình ảnh cho web

2
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

I. Giới thiệu
ƒ Photoshop cung cấp các công cụ để tạo và xử lý các ảnh tĩnh, để
sử dụng cho web
ƒ Có thể chia một ảnh, layout web thành slice, tối ưu hóa các Slice
và lưu ảnh dưới dạng một trang web

II. Slice
1. Tìm hiểu về slice
ƒ Slice là một vùng hình chữ nhật, có số thứ tự gốc bên trái
ƒ Ngay tại slice, có thể tạo liên kết( hiệu ứng thay đổi, hoạt hình…)

3
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

Các kiểu tạo slice Tỉ lệ slice Tạo slice từ các đường

guides

4
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

2. Tạo một user Slice

ƒ Gióng thước từ các đường guides
ƒ Chọn công cụ slice tool
ƒ Rê lên vùng muốn tạo slice
ƒ Chọn công cụ slice nhấp Slice from guides trên thanh option

5
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

6
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

7
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒ Có thể slice theo 2 truờng hợp

Slice đơn: Slice những vùng cần thiết được chọn như: banner, logo,
ảnh minh họa.
Slice toàn trang: Thao tác kéo hết trang web để cắt slice

8
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

9
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

III. Chuẩn bị ảnh cho Web

1. Tối ưu ảnh cho Web
ƒ Sử dụng hộp thoại Save for web để xác lập các tùy chọn tối ưu
hóa và xem trước ảnh được tối ưu.
ƒ Menu File/ Save for web
ƒ Chọn kiểu hiển thị: Original (ảnh gốc), Optimized(ảnh đã được
tối ưu hóa)

Xác lập các tùy chọn

Quyết định chọn ảnh tối ưu hóa nhất

10
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒChọn 2- Up: Xem 2 phiên bản nằm cạnh nhau

Góc phải là chất lượng file sau khi tối ưu (Optimize).

11
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒChọn 4 - Up: Xem 4 phiên bản nằm cạnh nhau

12
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

3. Tối ưu dạng JPEG

ƒ Tối ưu cho ảnh là làm giảm thời gian load và đảm bảo chất lượng
ảnh
ƒ Tối ưu dạng JPEG Là định dạng phù hợp nhất cho ảnh chụp, hỗ trợ
tới hàng triệu màu
ƒ Thông số Quality: bạn sẽ thay đổi được từ 0 – 100
Quality càng thấp, kích thước file càng nhỏ, load càng
nhanh nhưng chất lượng càng kém.
ƒ Thông số thứ 2 là Blur: Blur càng lớn, ảnh càng mờ nhưng thời gian
load càng nhanh.
ƒ Chế độ ảnh Low- Medium- hight: Chất lượng ảnh ở chế độ thấp,
vừa, cao.

13
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

3. Tối ưu dạng JPEG

Xác lập các tùy chọn
Quyết định chọn ảnh tối ưu hóa nhất

14
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

3. Tối ưu dạng JPEG

ƒ Chỉnh Quality và Blur để đạt chất lượng ảnh Jpeg như mong muốn
với thời gian tải là nhỏ nhất.

15
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

2. Tối ưu dạng GIF

ƒ Định dạng này chỉ cho phép tối đa 256 màu
ƒ Sử dụng cho các ảnh màu đơn, màu đơn giản
ƒ GIF là dạng chuẩn dùng để nén các màu phẳng
ƒ Giảm kích cỡ các ảnh gif bằng cách giảm số màu trong file

16
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒ GIF sẽ không phù hợp với các ảnh chụp, bởi vì ảnh lưu sẽ bị mất
bớt màu và chất lượng không còn được như ảnh gốc.
ƒ Lần lượt thay đổi các thông số khác cho file size là nhỏ nhất. Chon
số lượng màu sao cho thời gian load là nhanh nhất.

17
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒ Trong ô Color giảm số màu bằng cách chọn số màu sao cho
nhỏ nhất mà logo nhìn vẫn tốt

18
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

ƒ Trong ô Dither có thể thay đổi các giá trị trong Dither để có
file size là nhỏ nhất.

19
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

Preset: Định vị tối ưu hóa

Color: Tăng hay giảm số lượng màu
Dither: Chất lượng ảnh( độ thô,mịn)
Transparency: độ trong suốt
Matter: Chọn một màu nền
Lossy: Giảm chất lượng ảnh

20
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

2. Tối ưu dạng PNG - 24

ƒ PNG-24 thích hợp cho các file ảnh có tông màu lên tục
ƒ Kết hợp các đặc tính tốt nhất của JPEG và GIF.

21
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

2. Tối ưu dạng PNG - 24

ƒ PNG-24 thích hợp cho các file ảnh có tông màu lên tục
ƒ Kết hợp các đặc tính tốt nhất của JPEG và GIF.

22
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

IV. Lưu file

1. Chọn một tùy chọn

23
 TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM
TRUNG TÂM TIN HỌC

IV. Lưu file

1. Chọn một tùy chọn
ƒ HTML and Image: Lưu cả file thành một trang HTML và một thư
một thư mục Image
ƒ Image Only: Chỉ lưu hình ảnh, không lưu trang HTML
ƒ HTML only: Chỉ lưu HTML, không lưu trang hình ảnh
ƒ Selected Slices: Chỉ lưu các slice được chọn

24