Tối ưu hoá hình ảnh trên trang web

Tối ưu hoá hình ảnh trên trang web

Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Những viết in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn phát hành lại trang web bạn làm ơn liên lạc với phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Để có hình ảnh hiệu trang Web, hình ảnh bạn phải có cân hài hồ kích thước file ảnh chất lượng ảnh Sử dụng Adobe Photoshop Adobe Image Ready, bạn tối ưu hố hình ảnh bạn để hình ảnh tải xuống nhiều lần từ máy chủ mà không bị chi tiết quan trọng, độ trông suốt, thành phần chuyển dịch chẳng hạn đồ ảnh (image map) Trong học này, bạn học cách làm sau: • Tối ưu hoá tập tin dạng JPEG GIF, điều chỉnh xác lập tối ưu hoá để đạt cân kích cở ảnh chất lượng ảnh • Xác định độ suốt cho ảnh • Xử lý hàng loạt tập tin nhằm tự động hố q trình tối ưu hố Bài học cần tiếng 30 phút để hoàn tất Bài học soạn dành cho Adobe Photoshop Adobe ImageReady Chú ý: Những người sử dụng Window 2000 cần mở tập tin học trước sử dụng chúng Để biết thêm thông tin, xem phần “Copying the Classroom in a Book files” trang www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Sử dụng Photoshop ImageReady để tối ưu ho hình ảnh Tối ưu hố trình chọn dạng, độ phân giải, xác lập chất lượng ảnh để ảnh có hiệu quả, bắt mắt tiện ích cho trang duyệt web Nói cách đơn giản, hài hồ kích cở ảnh chất lượng ảnh Khơng có tập hợp xác lập đơn lẻ tối ưu hố mức hữu hiệu loại ảnh, tối ưu hố địi hỏi nhận xét mắt thẩm mỹ người Các tuỳ chọn nén thay đổi tuỳ theo dạng tập tin lưu Bạn nên làm quen với loại dạng tổng quát • Dạng JPEG thiết kế để giữ lại độ màu rộng độ sáng rõ ảnh có tơng màu liên tục (chẳng hạn ảnh chế độ tơ màu gradient) Dạng tiêu biểu cho ảnh sử dụng hàng triệu màu • Dạng GIF hiệu ảnh nén màu đặc ảnh có vùng màu lập lại (chẳng hạn nghệ thuật đường thẳng, biểu tượng hình minh hoạ có chữ) Dạng sử dụng bảng gồm 256 màu để thể hình ảnh hỗ trợ cho độ suốt • Dạng PNG hiệu ảnh nén màu đặc giữ chi tiết sắc nét Dạng PNG-8 sử dụng bảng 256 màu để thể ảnh Dạng PNG-24 hỗ trợ màu 24 bit (hàng triệu màu), nhiên nhiều ứng dụng trình duyệt trước khơng hỗ trợ tập tin dạng PNG • Dạng WBNG dạng chuẩn cho việc tối ưu hoá hình ảnh thiết bị di động chẳng hạn điện thoại di động Dạng WBMP hỗ trợ màu bit, có nghĩa ảnh dạng WBMP chứa điểm ảnh màu đen màu trắng Chú ý: Để có thơng tin việc sử dụng dạng PNG WBNG, xem phần Trợ Giúp Photoshop Adobe Photoshop Adobe ImageReady cho bạn phạm vi điều khiển hiệu việc nén kích thước tập tin ảnh tối ưu hoá chất lượng ảnh thể hình Bạn áp dụng tập hợp thiết lập tối ưu cho tập hợp ảnh, ảnh rời, lớp (layer) hay phim chụp (slice) Trong học bạn tối ưu hoá lưu hình ảnh dạng JPEG v GIF Trong tập sau, bạn làm việc với loạt ảnh thiết kế để sử dụng trang web cho tổ chức du lịch giả tưởng Photoshop (qua hộp thoại Save for web) ImageReady (qua bảng Optimize) có nhiều khả giống việc tối ưu hố hình ảnh Thí dụ, bạn sử dụng trình ứng dụng để chọn mảng rộng www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS dạng tập tin xác lập cho phù hợp với mục tiêu dự án bạn Bạn dùng hai chương trình để so sánh ảnh đặt kế bên có mức độ tối ưu hố khác tập tin Sử dụng đặc điểm tối ưu hoá bảng màu Adobe Photoshop ImageReady, bạn làm tối đa tính trọn vẹn màu sắc làm cho kích thước tập tin ảnh giảm tối thiểu Bắt đầu Bạn làm phần học Photoshop đồng thời làm chương trình ImageReady Khi bắt đầu bạn phục hồi lại thiết lập ứng dụng mặc định cho Photoshop để mô tả phần dẫn phù hợp với thiết lập vùng làm việc Photoshop Bài học xoay quanh đồ hoạ trang chủ cho tổ chức du lịch giả tưởng Khởi động Photoshop nhấn phím Ctrl+Alt+Shift (window) Command +Option+Shift (Mac OS) để phục hồi ưu tiên mặc định (Xem “Phục hồi ưu tiên mặc định” trang 4) Khi dịng thơng báo xuất hiện, chọn Yes để xác định bạn muốn thiết lập lại ưu tiên, chọn No để hỗn lại việc thiết lập hình màu bạn,và chọn Close để đóng lại hình Welcome Bấm nút File Browser tuỳ chọn công cụ để mở Trong bảng thư mục File browser, xác định chọn thư mục Lesson 16 thư mục Lesson Những ảnh nhỏ tập tin bắt đầu kết thúc khác xuất bảng chứa ảnh nhỏ, nhiều ảnh số ảnh hồn tồn giống Chọn-nhưng khơng mở ảnh nhỏ có tên 16Start1.psd để ảnh sáng lên metadata xuất bảng Metadata www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn ảnh nhỏ có tên 16End1.jpg Chú ý kích thước tập tin liệt kê phần metadata nhỏ ảnh giống ảnh 16Start1.psd Lần lượt chọn xem trước tập tin Start End khác thư mục Lesson 16 Nhấp đúp tập tin ảnh 16Start1.psd để mở Photoshop Đóng File Browser lại cách bấm vào nút có biểu tượng File Browser tuỳ chọn công cụ lần (một lần để đưa phía trước lần để đóng lại) bấm nút Close cửa sổ File Browser Tối ưu hoá ảnh JPEG (Photoshop) Trong học này, bạn tối ưu hoá tập tin vừa dạng JPEG vừa dạng GIF Mục tiêu bạn thiết lập lựa chọn tối ưu để tập tin ảnh bạn nhỏ, hiệu đẹp mắt Hiện giờ, kích thước ảnh 16Start1.psd lớn mức lý tưởng để sử dụng trang web Bạn so sánh dạng tập tin nén khác để thấy ảnh có độ nén cao mà khơng q nhiều chất lượng ảnh www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Sử dụng hộp thoại Save For Web Hộp thoại Save For Web Photoshop cho bạn thấy ảnh đặt bên cạnh khác việc sử dụng thiết lập tối ưu hố khác Bạn so sánh phiên làm việc, chỉnh thiết lập tối ưu tìm xem khác biệt bạn có kết hợp kích thước chất lượng ảnh Với tập tin ảnh 16Start1.psd mở kích hoạt Photoshop, chọn File >Save for Web Chú ý : Nếu thẻ 4-up chưa chọn cửa sổ ảnh, chọn Photoshop tự động đưa thiết lập tối ưu ngồi ảnh gốc Chú ý thơng tin trình bày ảnh gồm có kích thước tập tin thời gian (tính giây) cần thiết để tải ảnh xuống Bảng cho thấy ảnh gốc Các bảng thứ 2, 3, thể kết hợp khác việc thiết lập tối ưu ảnh bao gồm dạng tập tin (như GIF JPEG) giải thuật giảm màu (như Selective, Perceptual hay Web) Ở góc trái hộp thoại Save For Web, chọn 300% từ menu pop-up Zoom Level để bạn nhìn thấy chi tiết ảnh So sánh ảnh với thiết lập tối ưu khác Bấm vào ảnh để trỏ biến thành biểu tượng hình bàn tay kéo ảnh để bạn thấy khác biệt ảnh tối ưu hoá ảnh gốc Nhìn cẩn thận vùng sau đây: văn góc phải ảnh, vùng nắp hộp thư tương phản với trời màu xanh, bóng cánh cửa rỉ sét hộp thư lớn,vùng lên hộp thư rỉ sét chi tiết khác ảnh www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS So sánh dạng GIF, JPEG PNG tối ưu hố Bạn tạo tuỳ biến ảnh ảnh tối ưu hoá hộp thoại Save For Web Để làm điều này, bạn chọn xem trước ảnh tối ưu hoá chọn thiết lập cho phía bên phải hộp thoại Qua việc thử nghiệm với nhiều thiết lập khác nhau, bạn có ý tưởng hay thiết lập phù hợp với mục đích bạn Chú ý : Khi thực thao tác học này, sử dụng công cụ định tỉ lệ thường xun để bạn có nhìn tồn cảnh ảnh thấy chi tiết nhỏ cho bạn thấy khiếm khuyết mà bạn khơng nhìn thấy độ phóng đại nhỏ Mỗi thao tác đừng chờ dẫn yêu cầu bạn phóng to hay thu nhỏ Chọn ảnh xem trước tối ưu hố góc phải hộp thoại Save For Web Trong menu pop-up Preset bên phải hộp thoại, chọn GIF 128 Dithered (nếu ảnh chưa chọn) Thơng tin trình bày bên thay đổi ảnh xem trước (xem hình) www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh 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ủ phần vuông xanh phía sau số biểu tượng Bạn dùng phiên phía ảnh để so sánh việc tối ưu hoá tập tin GIF 128 Dithered với việc tối ưu hoá dạng JPEG PNG Bấm vào phiên ảnh góc trái để chọn chọn tuỳ chọn JPEG sau đây, thời điểm chọn lần menu pop-up Preset: • JPEG Low Chú ý chi tiết ảnh văn nhăn nhúm khơng chấp nhận • JPEG High Chất lượng ảnh cải thiện kích cở ảnh cịn gấp lần (Xem hình) • JPEG Medium Với thiết lập này, chất lượng ảnh chấp nhận kích thước ảnh thấp phiên với tuỳ chọn JPEG High GIF Chú ý: Bạn chọn mức độ chất lượng trung bình khác cho tập tin JPEG cách gõ vào kéo trỏ bên phải hộp thoại Save For Web Vì bạn thử thiết lập khác dạng GIF JPEG, bạn dùng ảnh xem trước thứ tư để thử dạng khác www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn ảnh nằm góc phải sử dụng menu Preset để chọn dạng PNG-8 128 dithered Dù kết cho kích cở tập tin nhỏ ảnh gốc, chất lượng ảnh khơng đẹp ảnh JPEG Medium, có kích cở tập tin nhỏ Hơn nữa, nhiều trình duyệt trước không đọc dạng PNG Để làm cho ảnh tương thích với trình duyệt trước đây, bạn lưu tập tin cho trang Web cách sử dụng độ tối ưu hoá dạng JPEG Medium Chọn dạng JPEG Medium ảnh tối ưu (ở góc trái hộp thoại) chọn hộp kiểm Progressive Chú ý: Khi mục Progressive chọn, việc tải hình ảnh xuống nhiều đường xảy ra, đường gia tăng chất lượng hình ảnh Bấm Save Trong hộp thoại Save optimized as, dùng tên mặc định 16Start1.jpeg lưu tập tin thư mục với tập tin gốc Photoshop Chọn File > Close để đóng tập tin 16Start1.psd đừng lưu thay đổi bạn Tối ưu hoá ảnh dạng GIF Bây bạn tối ưu hoá ảnh cách điệu hố thành màu nhạt, có nghĩa vùng mà điểm ảnh kế bên có giá trị màu RGB tương tự Bạn tối ưu hoá ảnh dạng GIF so sánh kết bảng màu khác thiết lập hồ sắc Dù bạn làm phần Photoshop, bạn dùng ImageReady Photoshop ImageReady có nhiều đặc điểm chung có số thao tác bạn làm Photoshop làm ImageReady ngược lại Một số thao tác thực phù hợp trình ứng dụng hay trình ứng dụng khác Nếu bạn có tập tin mở, bạn nhảy từ trình ứng dụng sang trình ứng dụng khác, tập tin nhảy sang trình ứng dụng bạn mở Nếu bạn có nhiều tập tin mở, có tập tin kích hoạt mở trình ứng dụng mà bạn vừa nhảy sang www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Nếu khơng có tập tin mở, bạn nhảy tới lui từ trình ứng dụng sang trình ứng dụng khác Trong trường hợp, xử lý bấm chuột Sử dụng không gian làm việc ImageReady xác định trước Trước bắt đầu làm việc tập tin mới, bạn nhảy từ Photoshop sang ImageReady Bạn xếp lại vùng làm việc cách chọn không gian làm việc xác định trước luôn sẵn có menu vùng làm việc ImageReady 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ó đủ nhớ (ram) để chạy trình ứng dụng lúc, khỏi Photoshop bắt đầu với ImageReady Trong ImageReady, chọn Window > Workspace > Optimization Palette Locations Chỉ có Palette chủ yếu cần thiết cho thao tác tối ưu hoá mở vùng làm việc : Nhóm Palette tối ưu hố nhóm Palette Color Table, với hộp công cụ tuỳ chọn công cụ Nếu bạn cần Palette khác thời điểm đó, bạn mở lại cách chọn menu Window Chọn thiết lập tối ưu ImageReady Trước học này, bạn dùng thiết lập tối ưu Photoshop tích hợp hộp thoại Save For Web Trong ImageReady, tuỳ chọn tương tự xuất Palette Optimize Trong ImageReady, chọn File > Open mở tập tin 16Start1.psd thư mục Lesson16 thư mục Lesson Ảnh được tạo Adobe Illustrator mành hố thành dạng Photoshop Ảnh có chứa nhiều vùng màu đặc Bấm tab 2-up cửa sổ ảnh www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Phiên ảnh tối ưu hoá chọn bên tay phải cửa sổ Trong menu Preset pop-up Palette Optimize, chọn tập tin GIF 128 No Dither Nếu cần, bấm mũi tên để mở rộng tuỳ chọn Color Table Palette Optimize chọn Perceptual Menu pop-up Reduction www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 10 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Tối ưu hoá Slice Các nhà thiết kế chuyên nghiệp thường kết hợp loại nguồn ảnh khác thành ảnh đơn Photoshop ImageReady Thí dụ, bạn tạo tập tin ảnh gồm ảnh có vùng màu nhạt kiểu in kết hợp với ảnh có tơng màu liên tục ảnh khác chế độ tơ màu theo tỉ lệ bóng phức tạp Rất khó đạt kết thoả đáng tối ưu hoá ảnh sử dụng đơn phương án tối ưu hố Nếu bạn chia ảnh thành slice, bạn tối ưu hố slice rời biệt lập Thí dụ, bạn ứng dụng việc tối ưu hố dạng GIF cho số vùng ảnh ứng dụng việc tối ưu hố dạng JPEG PNG cho ảnh khác Để làm điều này, bạn việc chọn slice riêng (dùng công cụ chọn slice) thiết lập tuỳ chọn tối ưu hoá hộp thoại Save For Web (Photoshop) bảng Optimize (ImageReady) Xác định độ suốt phần Bạn sử dụng độ suốt phần để đặt đối tượng đồ họa hình chữ nhật lên trang Web; vùng biên đối tượng xác định suốt, để màu trang Web thể xuyên suốt Bạn xác định độ suốt phần ảnh dạng GIF PNG Chuyển đổi lớp (Background) thành lớp bình thường Trước bạn sử dụng khả tập tin dạng GIF để giữ lại độ suốt, bạn phải tạo độ suốt ảnh bạn Bạn làm điều cách dời phơng màu trắng xung quanh ảnh Để bắt đầu tiến trình này, bạn chuyển đổi lớp Background thành lớp bình thường lớp Background ln ln bị khố khơng thể có độ suốt Đảm bảo tập tin 16Start2.psd mở ImageReady Chọn ảnh gốc bên trái cửa sổ ảnh Chọn Fit on Screen từ menu Zoom Level góc phía trái bên cửa sổ ảnh Chọn Window > Layer để mở bảng Layers mở menu bảng layers chọn Layers Options www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 23 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Bấm OK để đóng hộp thoại Layer Options mà không thay đổi thiết lập mặc định ( kể tên Layer 0) Lớp xuất bảng Layer Layer Layer Background chứa thông tin độ trơng suốt theo định nghĩa, khơng có phía sau nhìn thấy Nếu bạn cố gắng dùng kỹ thuật thường thay điểm ảnh màu điểm ảnh trông suốt, kết điểm ảnh gốc chuyển thành màu chọn hành thay trở thành điểm ảnh trơng suốt Sử dụng công cụ Magic Eraser để tạo độ trông suốt Trong phần học bạn sử dụng công cụ Magic Eraser để chuyển đổi nhanh màu trắng phía sau ảnh chữ viết thành điểm ảnh trơng suốt Tuy nhiên, bạn khơng muốn xố điểm ảnh màu trắng xuất bên ảnh màu Bạn hoàn tất điều qua bước Đảm bảo ảnh gốc bên trái cửa sổ ảnh chọn Bạn xố điểm ảnh ảnh chưa tối ưu hố, khơng phải ảnh tối ưu hố Chọn cơng cụ Magic Eraser công cụ ẩn nằm công cụ Eraser www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 24 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Trong tuỳ chọn công cụ, đảm bảo hộp kiểm Contiguous chọn Bấm vào trắng xung quanh ảnh màu Mẫu checkerboard thay trắng cho thấy vùng suốt Bấm chọn vùng màu trắng hình chữ nhật nằm khối màu Giờ hầu hết phơng màu trắng bị xố ngoại trừ đảo nhỏ gồm điểm ảnh www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 25 Chương 16: Tối ưu hoá hình ảnh trang web Photoshop CS màu trắng vùng có chữ khép kín Chuyển đổi vùng màu trắng bị cô lập thành suốt Công cụ Magic Eraser khơng xố vùng màu trắng bị lập vùng chữ tuỳ chọn Contiguous chọn tuỳ chọn công cụ Một cách để chỉnh sửa điểm phóng to bấm vào vùng màu trắng chữ, giống y bạn bấm vào hình chữ nhật màu trắng nằm ảnh Thay thế, bạn sử dụng phương pháp hoạt động hữu hiệu nhiều trường hợp có số lớn vùng nhỏ nằm rải rác mà bạn muốn xoá muốn giữ lại vùng có điểm ảnh màu tương tự mà bạn khơng muốn xố Trong tuỳ biến công cụ công cụ Magic Eraser, bỏ tuỳ chọn Contiguous Chọn công cụ Rectangular Marquee cẩn thận vẽ vùng chọn hình chữ nhật bao quanh chữ Corners ảnh gốc nằm bên trái Bấm giữ phím Shift để trỏ biến thành biểu tượng dấu cộng nhỏ xuất kéo vùng chọn khác hình chữ nhật quanh chữ “Travel” chữ “of” Hai vùng chọn trở thành vùng (Bạn tạo vùng chọn riêng biệt cho chữ “of” bạn thích giữ phím Shift kéo để gia tăng vùng chọn Hoặc bạn thêm khối màu vàng nhỏ bạn chọn chữ “Travel” chữ “of”.) www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 26 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn cơng cụ Zoom phóng lớn để bạn dễ nhìn thấy vùng nằm vùng chọn (khoảng 300%) Chọn công cụ Magic Eraser cẩn thận bấm vào màu trắng chữ “O” Các điểm ảnh màu trắng chữ “O” chuyển đổi thành điểm ảnh suốt, tương tự điểm ảnh chữ “A” “R” chữ “Travel” chữ “O” chữ “of” có tác dụng Chọn Select > Deselect chọn File > Save Hồn tất bảng Color Table Mặc dù người ta nghĩ độ suốt màu, khơng xem 32 màu bảng màu hình ảnh.Điều có nghĩa bạn cần lại hình ảnh lần để tìm độ hồ sắc khơng thể chấp nhận gây chuyển dịch sang độ suốt Cuộn chọn công cụ bàn tay kéo để xem xét tất vùng ảnh Chú ý có độ hồ sắc nặng vùng màu xanh xung quanh dương www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 27 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn ảnh tối ưu hoá nằm bên phải cửa sổ ảnh Trong tuỳ chọn Color palette Optimize, chọn trị số 128 Chọn công cụ Eyedropper bấm chọn vùng màu xanh vừa góc bên phải ảnh dương Trong bảng Color Table, bấm vào biểu tượng ổ khoá để khoá màu Trong palette Optimize, chọn trị số 32 số lượng màu Cuộn sử dụng cơng cụ bàn tay để xem hình lần nữa, xác định ảnh có cân hài hồ độ hồ sắc kích thước tập tin Chọn File > Close Xem trước độ suốt Bây bạn xem trước độ suốt trình duyệt bạn Vì đặc điểm xem trước ImageReady thể hịên hình ảnh trang web với trắng, bạn thay đổi màu ảnh để thấy độ suốt Trong cửa sổ ảnh, chọn ảnh tối ưu hoá (nằm bên phải) Trong bảng Optimize, đảm bảo hộp kiểm Transparency chọn www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 28 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Chọn Transparency chuyển đổi vùng ảnh gốc với độ mờ đục nhỏ 50% sang độ mờ đục ảnh tối ưu hoá Chọn mẫu Matte palette Optimize để mở color picker chọn màu trừ màu trắng Bấm OK để đóng color picker Chọn File > Preview In chọn trình duyệt web từ menu Chú ý: Để sử dụng lệnh Preview In, bạn phải có trình duyệt Web cài hệ thống bạn Nếu ảnh chưa mở ra, trình duyệt bắt đầu ảnh tối ưu hố góc trái cửa sổ trình duyệt Trình duyệt cho biết kích thước điểm ảnh, kích thước tập tin, dạng tập tin thiết lập tối ưu hoá cho ảnh với mã HTML dùng để tạo phần xem trước www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 29 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Thốt khỏi trình duyệt bạn kết thúc phần xem trước ảnh Xén vùng thừa Dù phần ảnh tổ chức du lịch giả tưởng có chứa điểm ảnh trông suốt hiện, điểm ảnh cịn chiếm khơng gian tập tin, tăng thêm kích thước ảnh Bạn xén phần vùng không cần thiết để cải thiện bố cục ảnh tối ưu hố kích thước tập tin Trong ImageReady, chọn Image > Trim Bạn sử dụng lệnh Trim để xén ảnh theo độ trông suốt màu điểm ảnh vùng biên thừa Trong hộp thoại Trim, chọn điểm ảnh trông suốt chưa chọn bấm OK www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 30 Chương 16: Tối ưu hoá hình ảnh trang web Photoshop CS ImageReady xén vùng trông suốt thừa khỏi ảnh Chọn File > Save Optimized As Trong hộp thoại Save Optimized As, dùng tên mặc định (16Start2.gif) bấm chọn Save Trong hộp thoại Replace Files, bấm Replace (nếu xuất hiện) Chọn File > Close Bạn nhắc để lưu tập tin 16.Start2.psd trước đóng lại Đối với học bạn kết thúc với tập tin nên không cần lưu thay đổi cuối Tạo suốt hoà sắc Trong phần học 16, bạn tạo độ suốt hoà sắc cho ảnh đồ hoạ dùng vùng khác Web site cho tổ chức du lịch giả tưởng Bằng cách tạo độ hồ sắc từ bóng đổ mờ đục thành trơng suốt, bạn tạo chuyển dịch uyển chuyển từ ảnh sang phông thuộc màu trang mà làm lại việc Bạn làm điều thủ tục Đầu tiên bạn áp dụng hiệu ứng bóng đổ vào ảnh Tiếp đến bạn thêm độ hồ sắc vào bóng đổ để pha trộn thành màu cho trang Web Bạn làm điều Photoshop ImageReady, sử dụng phương pháp điều khiển giống vị trí khác chút Thêm bóng đổ Tập tin bạn làm việc có tác dụng ảnh mà người sử dụng bấm vào để mở www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 31 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS trang khác Web site Bạn thêm bóng đổ vào nút để làm cho ảnh lên phần nền, nhấn mạnh thành phần tương tác trang Chọn File > Open chọn tập tin 16Start3.psd thư mục Lesson16 thư mục Lesson Nếu cần, chọn Window > Layers để mở bảng Layers chọn layer1 chưa chọn Chọn nút Add A Layer Style cuối bảng layers chọn Drop Shadow từ menu Trong hộp thoại Layer Style, nhập vào giá trị sau: • Đối với mục Opacity kéo trượt gõ vào giá trị 65% • Đối với mục Distance, kéo trượt gõ vào trị số15px • Đối với mục Spread, kéo trượt gõ vào trị số 10% • Đối với Size, kéo trượt gõ vào trị số 15px Bấm chọn OK để đóng hộp thoại Drop Shadow Chọn File > Save Thêm độ hoà sắc suốt vào bóng đổ Như bạn biết, hồ sắc phương pháp tạo chuyển tiếp màu bảng màu giới hạn Điều hữu ích trang Web bạn bắt chước giảm màu liền lạc mà không làm ảnh hưởng đến kích cở tập tin tải xuống nhanh (Chỉ áp dụng Photoshop) Với tập tin 16Start3.psd mở, chọn File > Save For Web để mở hộp thoại Save For Web Bước không cần thiết ImageReady www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 32 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Bấm thẻ Optimized hộp thoại Save For Web (Photoshop) cửa sổ ảnh (ImageReady) thiết lập tuỳ chọn sau bên phải hộp thoại Save For Web (Photoshop) bảng Optimize (ImgeReady): • Trong menu Preset, chọn GIF 128 Dithered • Chọn hộp kiểm Transparency hộp chưa chọn • Trong menu Dither dành cho Transparency, chọn Diffusion • Trong tuỳ chọn Amount, dùng trượt nhập trị số 64% Bấm Matte swatch để mở hộp Color Picker Chọn màu khác màu trắng bấm OK (Chúng chọn R=250, G=234, B=212), màu nâu nhạt làm bật màu xanh ảnh hộp thư Để thấy hiệu ứng thiết lập lưới (matte), cố gắng phóng lớn khoảng 400% chí tới 1600% tối đa để bạn nhìn thấy điểm ảnh riêng rẻ độ hoà sắc Chú ý điểm ảnh nằm sát rìa hộp thư vùng khung màu xanh màu sậm,và 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 100% www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 33 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Làm 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 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 menu Preview In menu File để mở tập tin trình duyệt Trong trình duyệt, Chú ý cách bóng đổ hồ trộn vào màu matte Khi xem xong tài liệu, đóng trình duyệt trở Photoshop hay ImageReady Bấm nút Save hộp thoại Save For Web (Photoshop) chọn File > Save Optimized (ImageReady) Trong hộp thoại Save Optimized, chấp nhận thiết lập mặc định tên tập tin (16Start3.gif) www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 34 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS lưu tập tin Lessons/Lesson16 folder Chọn File > Save để lưu tập tin 16Start3.psd đó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 hoạt động dành cho ImageReady để thực nhiều tập tin Droplets dễ tạo dễ sử dụng Để tạo droplet, bạn kéo biểu tượng droplet khỏi bảng Optimize vào desktop Để sử dụng nó, bạn kéo tập tin thư mục qua biểu tượng droplet desktop Trong ImageReady, chọn File > Open, mở tập tin thư mục đích Lessons/Lessons16 Thử nghiệm với dạng tập tin khác thiết lập khác bảng Optimize bạn muốn bạn hài lòng với kết (Chúng sử dụng định dạng , JPEG, High cho chất lượng tuỳ chọn Progressive.) Kéo biểu tượng Droplet khỏi bảng Optimize đặt nơi Desktop (Nếu bạn sử dụng Window, bạn phải lấy lại kích thước cửa sổ ImageReady để thấy desktop.) Đóng tập tin lại (khơng lưu) Từ Desktop kéo thư mục đích từ thư mục Lesson16 thư mục Lessons thả vào droplet để xử lý hàng loạt ảnh đồ hoạ thư mục ImageReady tối ưu hoá ảnh thêm ảnh Web vào thư mục đích www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 35 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Trong ImageReady, mở tất tập tin có định dạng JPEG thư mục đích Chú ý tất tối ưu hoá theo thiết lập xác định droplet tạo Thoát ImageReady Bây bạn kết thúc chương trình học www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 36 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS Các câu hỏi ôn tập Đối với việc tối ưu hố hình ảnh, đâu ưu điểm việc sử dụng ImageReady so với Photoshop? Color Table gì? Khi hồ sắc trình duyệt xảy làm bạn giảm thiểu số hồ sắc trình duyệt ảnh? Mục đích việc gán matte color cho ảnh GIF gì? Các câu trả lời ơn tập Thật có nhiều lợi điểm sử dụng trình ứng dụng trình ứng dụng khác việc tối ưu hố.Cả Photoshop lẫn ImageReady thực phạm vi rộng rãi thao tác nhằm tối ưu hoá ảnh ImageReady có nhiều đặc điểm chuyên Web mà bạn khơng tìm thấy Photoshop, tối ưu hố hình ảnh khơng phải đặc điểm Color Table bảng chứa màu sử dụng ảnh bit Bạn chọn color table cho ảnh GIF PNG-8, thêm, bớt chỉnh sửa màu Color table Hồ sắc trình duyệt xảy trình duyệt Web nhái màu xuất bảng màu ảnh không xuất hệ thống hiển thị trình duyệt Để bảo vệ màu khỏi hồ sắc trình duyệt, bạn chọn màu bảng Color Table 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 bảng Web Qua việc xác định lưới màu (matte color), bạn pha trộn phần điểm ảnh suốt ảnh với màu trang Web bạn Với lưới (matting), bạn tạo ảnh GIF với rìa mềm mại khơng có cưa hồ sắc nhẹ nhàng vào màu trang Web Bạn xác định độ hồ sắc thành suốt © www.vietphotoshop.com - Nguyễn Tấn Sĩ |Trang chủ| |Photoshop CS| |Chương 17| www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 37 ... thước tập tin ảnh tối ưu hoá chất lượng ảnh thể hình Bạn áp dụng tập hợp thiết lập tối ưu cho tập hợp ảnh, ảnh rời, lớp (layer) hay phim chụp (slice) Trong học bạn tối ưu hố lưu hình ảnh dạng JPEG... 16Start1.psd đừng lưu thay đổi bạn Tối ưu hoá ảnh dạng GIF Bây bạn tối ưu hoá ảnh cách điệu hoá thành màu nhạt, có nghĩa vùng mà điểm ảnh kế bên có giá trị màu RGB tương tự Bạn tối ưu hoá ảnh dạng GIF... ích khác ảnh tối ưu hoá ảnh gốc www.vietphotoshop.com - Dịch Nguyễn Tấn Sĩ 12 Chương 16: Tối ưu hố hình ảnh trang web Photoshop CS A Kích thước tập tin thời gian tải xuống hình ảnh tối ưu hố B