Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Sử dụng hộp thoại Save For Web
Hộp thoại Save For Web trong Photoshop cho bạn thấy những tấm ảnh đặt bên cạnh nhau nhưng khác
nhau do việc sử dụng những thiết lập tối ưu hoá khác nhau. Bạn có thể so sánh các phiên bản khi làm
việc, chỉnh các thiết lập tối ưu và tìm xem những khác biệt cho đến khi bạn có được sự kết hợp khả dĩ
giữa kích thước và chất lượng của ảnh.
1. Với tập tin của ảnh 16Start1.psd đang mở và kích hoạt trong Photoshop, chọn File >Save for Web.
Chú ý : Nếu thẻ 4-up chưa được chọn trong cửa sổ ảnh, hãy chọn nó.
Photoshop tự động đưa ra 3 thiết lập tối ưu ngoài ảnh gốc ra. Chú ý thông tin được trình bày dưới mỗi
ảnh gồm có kích thước tập tin và thời gian (tính bằng giây) cần thiết để tải ảnh đó xuống. Bảng đầu tiên
cho thấy ảnh gốc. Các bảng thứ 2, 3, 4 thể hiện sự kết hợp khác nhau của việc thiết lập tối ưu đối với
ảnh này bao gồm dạng tập tin (như GIF hoặc JPEG) và giải thuật giảm màu (như Selective, Perceptual
hay Web)
2. Ở góc dưới trái của hộp thoại Save For Web, chọn 300% từ menu pop-up Zoom Level để bạn có thể
nhìn thấy những chi tiết của ảnh.
So sánh những ảnh với các thiết lập tối ưu khác nhau.
3. Bấm vào 1 trong 4 tấm ảnh để con trỏ biến thành biểu tượng hình bàn tay và kéo ảnh để bạn có thể
thấy những khác biệt giữa những ảnh đã được tối ưu hoá và ảnh gốc.
4. Nhìn cẩn thận các vùng sau đây: văn bản ở góc dưới phải của ảnh, vùng trên nắp hộp thư tương
phản với nền trời màu xanh, bóng của cánh cửa rỉ sét của
hộp thư lớn,vùng nổi lên của hộp thư rỉ sét và những chi tiết khác của ảnh.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
5
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
So sánh các dạng GIF, JPEG và PNG đã được tối ưu hoá
Bạn có thể tạo tuỳ biến bất kỳ ảnh nào trong 3 ảnh được tối ưu hoá trong hộp thoại Save For Web. Để
làm điều này, bạn chọn xem trước 1 trong những ảnh đã được tối ưu hoá rồi chọn các thiết lập cho nó
phía bên phải của hộp thoại. Qua việc thử nghiệm với nhiều thiết lập khác nhau, bạn sẽ có được ý
tưởng hay thiết lập nào phù hợp nhất với mục đích của bạn.
Chú ý : Khi thực hiện các thao tác trong bài học này, hãy sử dụng công cụ định tỉ lệ thường xuyên để
bạn có được cái nhìn toàn cảnh của bức ảnh và thấy được những chi tiết nhỏ cho bạn thấy những
khiếm khuyết mà bạn không nhìn thấy ở độ phóng đại nhỏ hơn. Mỗi thao tác đừng chờ những chỉ dẫn
yêu cầu bạn phóng to hay thu nhỏ.
1. Chọn ảnh xem trước đã được tối ưu hoá ở góc trên phải của hộp thoại Save For Web.
2. Trong menu pop-up Preset bên phải hộp thoại, chọn GIF 128 Dithered (nếu ảnh này chưa được
chọn)
Thông tin được trình bày ngay bên dưới những thay đổi của ảnh xem trước. (xem hình)
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
6
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Hãy Chú ý nhóm điểm ảnh màu xậm quanh hộp thư bị sét bao phủ và trong phần nền vuông xanh lá
cây phía sau con số 4 trong biểu tượng.
Bạn sẽ dùng 2 phiên bản ở phía dưới của ảnh để so sánh việc tối ưu hoá của tập tin GIF 128 Dithered
với việc tối ưu hoá của dạng JPEG và PNG.
3. Bấm vào phiên bản ảnh ở góc dưới trái để chọn nó và chọn các tuỳ chọn JPEG sau đây, mỗi thời
điểm chọn 1 lần trên menu pop-up Preset:
• JPEG Low. Chú ý là các chi tiết ảnh và văn bản nhăn nhúm không chấp nhận được.
• JPEG High. Chất lượng ảnh được cải thiện nhưng kích cở ảnh còn hơn gấp 3 lần. (Xem hình)
• JPEG Medium. Với thiết lập này, chất lượng ảnh có thể chấp nhận được và kích thước ảnh
thấp hơn phiên bản với tuỳ chọn là JPEG High hoặc GIF.
Chú ý: Bạn có thể chọn mức độ chất lượng trung bình khác cho tập tin JPEG bằng cách gõ vào hoặc
kéo con trỏ về bên phải của hộp thoại Save For Web.
Vì bạn đã thử các thiết lập khác nhau của dạng GIF và JPEG, bạn sẽ dùng ảnh xem trước thứ tư để
thử một dạng khác.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
7
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
4. Chọn ảnh nằm ở góc dưới phải rồi sử dụng menu Preset để chọn dạng PNG-8 128 dithered.
Dù các kết quả này cho kích cở tập tin nhỏ hơn ảnh gốc, chất lượng ảnh không đẹp bằng ảnh JPEG
Medium, cũng có kích cở tập tin nhỏ hơn. Hơn nữa, nhiều trình duyệt trước đây không đọc được dạng
PNG. Để làm cho ảnh này tương thích với các trình duyệt trước đây, bạn sẽ lưu tập tin này cho trang
Web bằng cách sử dụng
độ tối ưu hoá của dạng JPEG Medium.
5. Chọn dạng JPEG Medium của ảnh đã được tối ưu (ở góc dưới trái của hộp thoại) và chọn hộp kiểm
Progressive.
Chú ý: Khi mục Progressive được chọn, bất kỳ khi nào việc tải hình ảnh xuống bằng nhiều con đường
xảy ra, mỗi con đường gia tăng chất lượng hình ảnh.
6. Bấm Save. Trong hộp thoại Save optimized as, dùng tên mặc định 16Start1.jpeg và lưu tập tin này
trong cùng thư mục với tập tin gốc của Photoshop.
7. Chọn File > Close để đóng tập tin 16Start1.psd và đừng lưu những thay đổi của bạn.
Tối ưu hoá một ảnh dạng GIF
Bây giờ bạn sẽ tối ưu hoá một ảnh được cách điệu hoá thành những màu nhạt, có nghĩa là những
vùng mà các điểm ảnh kế bên nhau có giá trị màu RGB tương tự nhau. Bạn sẽ tối ưu hoá ảnh này ở
dạng GIF và so sánh các kết quả của bảng màu khác và các thiết lập hoà sắc. Dù bạn có thể làm cả
phần này trong Photoshop, bạn sẽ dùng ImageReady.
Photoshop và ImageReady có nhiều đặc điểm chung nhưng có một số thao tác nào đó bạn có thể làm
trong Photoshop nhưng không thể làm được trong ImageReady và ngược lại. Một số thao tác được
thực hiện phù hợp hơn trong một trình ứng dụng này hay trình ứng dụng khác.
Nếu bạn có một tập tin đang mở, khi bạn nhảy từ trình ứng dụng này sang trình ứng dụng khác, tập tin
sẽ nhảy sang trình ứng dụng bạn đang mở. Nếu bạn có nhiều
tập tin đang mở, chỉ có tập tin kích hoạt mới được mở trong trình ứng dụng mà bạn vừa nhảy sang.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
8
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Nếu không có tập tin nào được mở, bạn có thể nhảy tới hoặc lui từ trình ứng dụng này sang trình ứng
dụng khác. Trong mọi trường hợp, xử lý chỉ là một cái bấm chuột.
Sử dụng không gian làm việc của ImageReady được xác định trước
Trước khi bắt đầu làm việc trên một tập tin mới, bạn sẽ nhảy từ Photoshop sang ImageReady. Bạn sẽ
sắp xếp lại vùng làm việc bằng cách chọn một trong những không gian làm việc được xác định trước
luôn luôn sẵn có trên menu con vùng làm việc của ImageReady.
1. Trong Photoshop bạn bấm nút chuyển sang ImageReady ở cuối hộp công cụ để chuyển từ
Photoshop sang ImageReady.
Chú ý: Nếu bạn không có đủ bộ nhớ (ram) để chạy 2 trình ứng dụng này cùng một lúc, thoát khỏi
Photoshop và bắt đầu với ImageReady.
2. Trong ImageReady, chọn Window > Workspace > Optimization Palette Locations.
Chỉ có bộ Palette chủ yếu cần thiết cho thao tác tối ưu hoá được mở ra trong vùng làm việc : Nhóm
Palette tối ưu hoá và nhóm Palette Color Table, cùng với hộp công cụ và thanh tuỳ chọn công cụ. Nếu
bạn cần một Palette khác tại một thời điểm nào đó, bạn có thể mở lại nó bằng cách chọn nó trên menu
Window.
Chọn những thiết lập tối ưu trong ImageReady
Trước đây trong bài học này, bạn dùng các thiết lập tối ưu của Photoshop được tích hợp trong hộp
thoại Save For Web. Trong ImageReady, các tuỳ chọn tương tự xuất hiện trong Palette Optimize.
1. Trong ImageReady, chọn File > Open và mở tập tin 16Start1.psd trong thư mục Lesson16 trong thư
mục Lesson.
Ảnh này được được tạo ra trong Adobe Illustrator và được mành hoá thành dạng Photoshop. Ảnh này
có chứa nhiều vùng màu đặc.
2. Bấm tab 2-up trong cửa sổ ảnh.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
9
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Phiên bản của ảnh được tối ưu hoá được chọn bên tay phải của cửa sổ.
3. Trong menu Preset pop-up trên Palette Optimize, chọn tập tin GIF 128 No Dither.
4. Nếu cần, bấm mũi tên để mở rộng tuỳ chọn Color Table trên Palette Optimize rồi chọn Perceptual
trên Menu pop-up Reduction.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
10
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
11
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Chọn một giải thuật giảm màu
Một trong những cách giảm kích thước tập tin là giảm số màu trong ảnh. Photoshop có thể tính toán
những màu cần thiết nhất cho bạn dựa trên nhiều giải thuật sẵn có. Bạn xác định giải thuật nào được
sử dụng bằng cách chọn từ menu Color Reduction Algorithm giải thuật nào bao gồm những tuỳ chọn
sau đây:
Cảm nhận (Perceptual): Tạo một bảng màu thông thường bằng cách đưa ra những màu ưu tiên mà
mắt nguời có độ cảm nhận lớn hơn.
Chọn lọc (Selective): Tạo một bảng màu tương tự với bảng màu Perceptual nhưng ưu tiên những
vùng màu rộng và giữ lại những màu của trang Web. Bảng màu này
thường tạo ra những ảnh có độ hoàn chỉnh màu lớn nhất. Phần chọn lọc (Selective) là tuỳ chọn mặc
định.
Thích nghi (Adaptive): Tạo bảng màu thông thường bằng cách lấy mẩu những màu từ quang phổ
thường xuất hiện nhất trong ảnh. Thí dụ, một ảnh chỉ có màu xanh lá cây và xanh biển tạo ra một bảng
màu chủ yếu chỉ có màu xanh lá cây và xanh biển. Hầu hết các ảnh đều tập trung các màu vào những
vùng đặc biệt của quang phổ.
Web sử dụng bảng màu chuẩn gồm 256 màu thông thường đối với các bảng màu Window và Mac OS
8-bit (256 màu). Hệ thống nấy đảm bảo được rằng không có sự hoà sắc nào được áp dụng cho các
màu khi những hình ảnh được thể hiện sử dụng màu 8 bit. Bảng này còn được gọi là bảng Web an
toàn. Nếu hình ảnh của bạn có ít màu hơn tất cả màu trong palette màu, những màu bất thường bị loại
đi.
Tự tạo (Custom): Giữ lại bảng màu hiện hành như một bảng màu cố định không cập nhật theo những
thay đổi của hình ảnh.
Window hoặc Mac OS Sử dụng bảng màu mặc định của hệ thống là 256 màu dựa trên mẫu thuần nhất
của những màu RGB. Nếu ảnh của bạn có ít màu hơn số màu tổng cộng trong palette màu, màu bất
thường cũng bị loại.
Thanh trạng thái ở cuối cửa sổ ảnh thể hiện độ phóng đại và thông tin hữu ích khác về ảnh được tối ưu
hoá và ảnh gốc.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
12
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
A. Kích thước tập tin và thời gian tải xuống hình ảnh đã được tối ưu hoá
B. Kích thước của ảnh được tối ưu hoá và ảnh gốc.
Bạn có thể tạo tuỳ biến cho loại thông tin xuất hiện ở đây.
5. Ở thanh trạng thái, chọn Size/Download Time (56.6 Kbps Modem/ISDN) trong menu pop-up ở giữa
rồi chọn Image Dimension từ menu pop-up bên phải.
Tốc độ tải xuống 56.6 Kbps thông thường hơn tốc độ 28.8 Kbps. Kích thước này thể hiện kích cở của
ảnh bằng những điểm ảnh. Đây là điều quan trọng cần biết để dự định làm thế nào cho 1 ảnh phù hợp
với 1 mẫu của trang Web được thiết kế trước.
Về bảng màu
Palette Color Table thể hiện những màu mà việc sử dụng tuỳ chọn giảm màu dành cho tập tin được
kích hoạt hiện hành. Số lượng màu dùng trong ảnh này được liệt kê ở dưới đáy của palette với nhiều
nút khác nhau.Bạn có thể lấy lại kích cở của Palette hoặc dùng thanh cuộn để xem tất cả các màu.
Bạn cũng có thể thay đổi cách các màu được sắp xếp trong Palette bằng cách bấm chuột vào mũi tên
nhỏ để menu palette Color Table rồi chọn phương pháp phân loại : theo sắcmàu, theo độ sáng, hoặc
theo mức độ phổ biến thường dùng.
Những biểu tượng khác nằm ngay trên bảng màu mẫu cho biết mẫu màu hiện hành (nếu mẫu màu
được chọn),cho dù một màu có bị khoá lại hay không, và cho dù một màu là màu bị giới hạn trên trang
(web). Bạn sẽ học hỏi thêm nhiều về việc nhận diện và sử dụng những đặc điểm này khi tiến hành qua
bài học này.
Chú ý: Trong Photoshop, bảng Color Table nằm trong hộp thoại Save For Web.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
13
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS
Điều khiển độ hoà sắc và các màu giảm
Bạn có thể thấy rằng một số vùng nào đó của ảnh bị lốm đốm. Hiện tượng lốm đốm này là do độ hoà
sắc. Kỹ thuật này được dùng để nhái những màu không có trong bảng màu. Thí dụ, màu xanh biển và
màu vàng có thể hoà trộn theo một mẫu (gồm những mảnh màu nhỏ được ghép lại với nhau) để tạo ra
một ảo giác có một màu xanh lá cây không nằm trong bảng màu.
Khi tối ưu hoá hình ảnh, hãy Chú ý 2 loại hoà sắc có thể xảy ra:
• Hoà sắc ứng dụng: xảy ra khi ImageReady hoặc Photoshop cố nhái những màu có trong ảnh
gốc nhưng không có trong bảng màu tối ưu mà bạn xác định. Bạn có thể điều khiển độ hoà sắc
ứng dụng bằng cách kéo con trượt Dither vào bảng Optimize.
• Hoà sắc trình duyệt: có thể xảy ra bên cạnh hoà sắc ứng dụng. Hoà sắc trình duyệt xảy ra khi
một trình duyệt web sử dụng những màu nhái 8 bit (256 màu) xuất hiện trong bảng màu của
ảnh được tối ưu hoá nhưng không nằm trong bảng hệ thống do trình duyệt web sử dụng. Bạn
có thể điều chỉnh độ hoà sắc trình duyệt bằng cách di chuyển những màu được chọn vào
những màu web an toàn trong bảng Color Table.
Trước khi bạn tối ưu hoá nhiều hơn, hãy phóng lớn ảnh tới 200% hoặc hơn và so sánh các vùng
chuyển tiếp giữa những ảnh thật và nền màu đặc trong cả 2 phiên bản: Ảnh được tối ưu hoá và ảnh
gốc được tối ưu hoá. Trong ảnh gốc, ảnh chụp cách điệu mờ dần vào nền. Trong ảnh được tối ưu hoá,
sự dịch chuyển mang tính đột ngột và có các đường biên thô. Cũng vậy, hãy Chú ý những dãy màu
mây hình cầu vòng ở vùng phía trên bên phải của ảnh thung lũng.
Giảm palette màu
Để nén kích cở tập tin được nhiều hơn, bạn có thể giảm lượng màu trong bảng Color Table. Phạm vi
số màu bị giảm thường giữ lại chất lượng hình ảnh đẹp trong khi giảm dung lượng tập tin cần thiết để
lưu trữ những màu thừa một cách ngoạn mục.
Hiện giờ, 128 màu tạo ra tập tin 16Start1.psd được thể hiện trong tuỳ chọn Colors trong bảng Optimize
bên dưới Color Table. Mục tiêu cuối cùng của bạn trong cả phần này là giảm con số màu xuống còn 32
mà không làm hỏng đi bức ảnh.
1. Đảm bảo rằng ảnh tối ưu hoá được chọn và cảm nhận (Perceptual) được chọn trong bảng
Optimization. Chú ý kích cở tập tin hiện hành.
2. Trên menu pop-up zoom ở đáy cửa sổ ảnh, chọn 200% hoặc lớn hơn hoặc sử dụng công cụ phóng
đại để phóng lớn tấm ảnh của bạn. Đảm bảo rằng bạn phóng đại
đủ lớn để bạn bắt đầu thấy hiện tượng điểm ảnh hoá của ảnh.
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ
14
Không có nhận xét nào:
Đăng nhận xét