Giáo trình Photoshop CS - Chương 16: Tối ưu hóa hình ảnh trên trang web

 
2. Trong bảng Optimize, đảm bảo hộp kiểm Transparency được chọn. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 28
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
Chọn Transparency chuyển đổi những vùng trong ảnh gốc với độ mờ đục nhỏ hơn 50% sang độ mờ 
đục nền trong ảnh đã được tối ưu hoá. 
3. Chọn mẫu Matte trong palette Optimize để mở color picker rồi chọn bất kỳ màu gì trừ màu trắng. 
Bấm OK để đóng color picker. 
4. Chọn File > Preview In và chọn trình duyệt web từ menu con 
Chú ý: Để sử dụng lệnh Preview In, bạn phải có một trình duyệt Web cài trên hệ thống của bạn. 
Nếu ảnh chưa mở ra, trình duyệt đầu tiên bắt đầu rồi hiện ảnh đã được tối ưu hoá ở góc trên trái của 
cửa sổ trình duyệt. Trình duyệt này cũng cho biết kích thước điểm ảnh, kích thước tập tin, dạng tập tin 
và các thiết lập tối ưu hoá cho ảnh cùng với mã HTML được dùng để tạo ra phần xem trước. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 29
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
5. Thoát khỏi trình duyệt khi bạn kết thúc phần xem trước ảnh. 
Xén vùng nền thừa 
Dù phần nền của ảnh tổ chức du lịch giả tưởng hiện giờ có chứa các điểm ảnh trông suốt nhưng không 
thể hiện, những điểm ảnh này vẫn còn chiếm không gian tập tin, tăng thêm kích thước của ảnh. Bạn có 
thể xén đi phần vùng nền không cần thiết để cải thiện bố cục của ảnh và tối ưu hoá kích thước tập tin. 
1. Trong ImageReady, chọn Image > Trim. 
Bạn sử dụng lệnh Trim để xén ảnh theo độ trông suốt hoặc màu điểm ảnh của vùng biên thừa. 
2. Trong hộp thoại Trim, chọn các điểm ảnh trông suốt nếu chưa được chọn và bấm OK. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 30
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
ImageReady xén vùng trông suốt thừa ra khỏi ảnh. 
3. Chọn File > Save Optimized As. 
4. Trong hộp thoại Save Optimized As, dùng tên mặc định (16Start2.gif) và bấm chọn Save. 
5. Trong hộp thoại Replace Files, bấm Replace (nếu nó xuất hiện) 
6. Chọn File > Close. 
7. Bạn sẽ được nhắc để lưu tập tin 
16.Start2.psd trước khi đóng nó lại. Đối với bài học này bạn đã kết thúc với tập tin này nên không cần 
lưu những thay đổi cuối cùng. 
Tạo sự trong suốt hoà sắc 
Trong phần này của bài học 16, bạn sẽ tạo một độ trong suốt hoà sắc cho 1 ảnh đồ hoạ được dùng 
trong 1 vùng khác của Web site cho tổ chức du lịch giả tưởng. Bằng cách tạo một độ hoà sắc từ bóng 
đổ mờ đục thành trông suốt, bạn sẽ có thể tạo ra một sự chuyển dịch uyển chuyển từ ảnh này sang 
phông nền thuộc bất kỳ màu nào trên trang mà không phải làm lại bất cứ việc gì. 
Bạn sẽ làm điều này trong 2 thủ tục. Đầu tiên bạn sẽ áp dụng một hiệu ứng bóng đổ vào ảnh. Tiếp đến 
bạn sẽ thêm độ hoà sắc vào bóng đổ để nó pha trộn thành màu nền cho trang Web. Bạn có thể làm 
điều này trong Photoshop và ImageReady, sử dụng các phương pháp điều khiển giống nhau trong 
những vị trí hơi khác một chút. 
Thêm 1 bóng đổ 
Tập tin bạn sẽ làm việc có tác dụng như một ảnh mà những người sử dụng bấm vào để mở trên 1 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 31
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
trang khác của Web site. Bạn sẽ thêm 1 bóng đổ vào nút này để làm cho ảnh nổi lên trên phần nền, 
nhấn mạnh rằng nó là thành phần tương tác của trang này. 
1. Chọn File > Open rồi chọn tập tin 16Start3.psd trong thư mục Lesson16 của thư mục Lesson. 
2. Nếu cần, chọn Window > Layers để mở bảng Layers rồi chọn layer1 nếu nó chưa được chọn. 
3. Chọn nút Add A Layer Style ở cuối bảng layers rồi chọn Drop Shadow từ menu. 
4. Trong hộp thoại Layer Style, nhập vào các giá trị như sau: 
• Đối với mục Opacity kéo con trượt hoặc gõ vào giá trị 65%. 
• Đối với mục Distance, kéo con trượt hoặc gõ vào trị số15px. 
• Đối với mục Spread, kéo con trượt hoặc gõ vào trị số 10%. 
• Đối với Size, kéo con trượt hoặc gõ vào trị số 15px. 
5. Bấm chọn OK để đóng hộp thoại Drop Shadow. 
6. Chọn File > Save. 
Thêm độ hoà sắc trong suốt vào bóng đổ 
Như bạn đã biết, hoà sắc chính là 1 phương pháp tạo sự chuyển tiếp màu trong bảng màu giới hạn. 
Điều này hữu ích đối với các trang Web vì bạn có thể bắt chước sự giảm màu liền lạc hơn mà không 
làm ảnh hưởng đến kích cở tập tin và tải xuống nhanh. 
1. (Chỉ áp dụng trong Photoshop) Với tập tin 16Start3.psd đang mở, chọn File > Save For Web để mở 
hộp thoại Save For Web. Bước này không cần thiết trong ImageReady. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 32
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
2. Bấm thẻ Optimized trong hộp thoại Save For Web (Photoshop) hoặc cửa sổ ảnh (ImageReady) rồi 
thiết lập các tuỳ chọn sau đây bên phải hộp thoại Save For Web (Photoshop) hoặc bảng Optimize 
(ImgeReady): 
• Trong menu Preset, chọn GIF 128 Dithered. 
• Chọn hộp kiểm Transparency nếu hộp này chưa được chọn. 
• Trong menu Dither dành cho Transparency, chọn Diffusion. 
• Trong tuỳ chọn Amount, dùng con trượt hoặc nhập trị số 64%. 
3. Bấm Matte swatch để mở hộp Color Picker. Chọn bất kỳ màu nào khác màu trắng và bấm OK. 
(Chúng tôi chọn R=250, G=234, B=212), màu nâu nhạt làm nổi bật những màu xanh trong ảnh hộp thư. 
Để thấy được hiệu ứng của thiết lập lưới (matte), cố gắng phóng lớn khoảng 400% và thậm chí tới 
1600% là tối đa để bạn nhìn thấy các điểm ảnh riêng rẻ trong độ hoà sắc. Chú ý rằng các điểm ảnh 
nằm sát rìa của hộp thư và vùng khung màu xanh là màu sậm,và những màu khác gia tăng độ hoà trộn 
với màu matte ở vị trí nằm xa rìa. Thu nhỏ lại còn 100%. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 33
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
4. Làm 1 trong các việc sau: 
• (Trong Photoshop) Ở đáy hộp thoại Save For Web, bấm vào nút có biểu tượng trình duyệt 
hoặc bấm mũi tên để chọn trình duyệt từ menu. 
• (Trong ImageReady) Sử dụng nút Preview In Default Browser hoặc menu con Preview In trên 
menu File để mở tập tin trong 1 trình duyệt. 
5. Trong trình duyệt, Chú ý cách bóng đổ được hoà trộn vào màu matte nền. Khi xem xong tài liệu, 
đóng trình duyệt hoặc trở về Photoshop hay ImageReady 
6. Bấm nút Save trong hộp thoại Save For Web (Photoshop) hoặc chọn File > Save Optimized 
(ImageReady). 
7. Trong hộp thoại Save Optimized, chấp nhận các thiết lập mặc định và tên của tập tin (16Start3.gif) 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 34
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
và lưu tập tin trong Lessons/Lesson16 folder. 
8. Chọn File > Save để lưu tập tin 16Start3.psd hoặc đóng tập tin lại không cần lưu. 
Tối ưu hoá tập việc xử lý hàng loạt tập tin 
ImageReady hỗ trợ việc xử lý hàng loạt qua việc sử dụng Droplets - biểu tượng chứa những hoạt động 
dành cho ImageReady để thực hiện trên 1 hoặc nhiều tập tin. Droplets dễ tạo và dễ sử dụng. Để tạo 
một droplet, bạn kéo biểu tượng droplet ra khỏi bảng Optimize vào trong desktop. Để sử dụng nó, bạn 
kéo 1 tập tin hoặc 1 thư mục qua biểu tượng droplet trên desktop. 
1. Trong ImageReady, chọn File > Open, mở bất kỳ tập tin nào trong thư mục đích Lessons/Lessons16. 
2. Thử nghiệm với các dạng tập tin khác nhau và các thiết lập khác trong bảng Optimize như bạn muốn 
cho đến khi bạn hài lòng với kết quả. (Chúng tôi sử dụng định dạng , JPEG, High cho chất lượng và tuỳ 
chọn Progressive.) 
3. Kéo biểu tượng Droplet ra khỏi bảng Optimize và đặt bất cứ nơi nào trên Desktop. (Nếu bạn đang 
sử dụng Window, có thể bạn phải lấy lại kích thước cửa sổ ImageReady để thấy được desktop.) 
4. Đóng tập tin lại (không lưu) 
5. Từ Desktop kéo thư mục đích từ thư mục Lesson16 trong thư mục Lessons và thả nó vào droplet để 
xử lý hàng loạt các ảnh đồ hoạ trong thư mục. 
ImageReady tối ưu hoá mỗi ảnh và thêm ảnh Web vào thư mục đích. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 35
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
6. Trong ImageReady, mở bất kỳ hoặc tất cả các tập tin có định dạng JPEG trong thư mục đích. 
Chú ý là tất cả đều được tối ưu hoá theo các thiết lập đã xác định khi droplet được tạo ra. 
7. Thoát ImageReady. Bây giờ bạn đã kết thúc chương trình và bài học này. 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 36
Chương 16: Tối ưu hoá hình ảnh trên trang web Photoshop CS 
Các câu hỏi ôn tập 
1. Đối với việc tối ưu hoá hình ảnh, đâu là những ưu điểm của việc sử dụng ImageReady so với 
Photoshop? 
2. Color Table là gì? 
3. Khi nào thì hoà sắc trình duyệt xảy ra và làm thế nào bạn có thể giảm thiểu số hoà sắc trình duyệt 
trong 1 ảnh? 
4. Mục đích của việc gán matte color cho ảnh GIF là gì? 
Các câu trả lời ôn tập 
1. Thật sự có nhiều lợi điểm khi sử dụng một trình ứng dụng này đối với trình ứng dụng khác trong việc 
tối ưu hoá.Cả Photoshop lẫn ImageReady đều có thể thực hiện được một phạm vi rộng rãi những thao 
tác nhằm tối ưu hoá ảnh. ImageReady có nhiều đặc điểm chuyên Web mà bạn sẽ không tìm thấy trong 
Photoshop, nhưng tối ưu hoá hình ảnh không phải là một trong những đặc điểm này. 
2. Color Table là một bảng chứa các màu sử dụng ảnh 8 bit. Bạn có thể chọn 1 color table cho ảnh GIF 
và PNG-8, thêm, bớt và chỉnh sửa màu trong Color table. 
3. Hoà sắc trình duyệt xảy ra khi một trình duyệt Web nhái những màu xuất hiện trong bảng màu của 
ảnh nhưng không xuất hiện trong hệ thống hiển thị của trình duyệt. 
Để bảo vệ một màu khỏi hoà sắc trình duyệt, bạn có thể chọn màu trong bảng Color Table rồi bấm 
chọn nút Web-shift ở cuối bảng để dịch chuyển màu sang màu 
tương đương gần nhất của nó trong bảng Web. 
4. Qua việc xác định một lưới màu (matte color), bạn có thể pha trộn phần nào các điểm ảnh trong suốt 
trong 1 ảnh với màu nền trong trang Web của bạn. Với lưới (matting), bạn có thể tạo những ảnh GIF 
với rìa mềm mại không có răng cưa hoà sắc nhẹ nhàng vào màu nền của trang Web. Bạn cũng có thể 
xác định độ hoà sắc 
thành trong suốt. 
© www.vietphotoshop.com - Nguyễn Tấn Sĩ 
|Trang chủ| |Photoshop CS| |Chương 17| 
www.vietphotoshop.com - Dịch bởi Nguyễn Tấn Sĩ 37