Tối ưu hoá hình ảnh cho trang Web và Bản đồ ảnh

Tối ưu hoá hình ảnh cho trang Web và Bản đồ ảnh

Chương 14: Tối ưu hố hình ảnh cho trang Web Bản đồ ảnh Để việc xuất Web đạt hiệu quả, ảnh bạn cần đảm bảo có cân tốt kích thước file chất lượng hiển thị Với việc sử dụng Adobe Photoshop ImageReady, bạn tối ưu hố kích thước hình ảnh bạn, ảnh có thời gian tải hợp lý từ máy chủ trang web mà không làm chi tiết, màu sắc, sáng thành phần định hướng cần thiết đồ ảnh chẳng hạn Trong chương này, bạn học cách thực hiện: • Tối ưu hoá file ảnh dạng JPEG GIF, điều chỉnh thơng số tối ưu hố để đạt cân mong muốn kích thước file chất lượng hình ảnh • Hiệu chỉnh lượng phối màu áp dụng cho ảnh • Tạo suốt cho ảnh • Tạo đồ ảnh siêu văn • Xử lý bó file để tự động thực trình tối ưu hố Bạn tìm hiểu học khoảng ba mươi phút Bài học biên soạn cho Adobe Photoshop ImageReady Cũng học trước (chương 13), bạn ghi lại file mở đầu Nếu bạn muốn phục hồi file mở đầu, copy từ Học Adobe Photoshop CD kèm theo Chú ý: Người dùng Windows phải giải nén file học trước sử dụng chúng Để hiểu rõ hơn, tham khảo “Copy học từ CD” trang Tối ưu hoá ảnh Photoshop ImageReady Adobe Photoshop Adobe ImageReady mang lại cho bạn dải kiểm soát tốt cho việc nén kích thước file ảnh tối ưu hố chất lượng hiển thị hình Các lụa chọn cho nén file ảnh phụ thay đổi thuộc vào định dạng file mà bạn lưu ảnh • Định dạng JPEG thiết kế để bảo toàn dải màu lớn biến đổi ánh sáng tinh tế ảnh tín hiệu số liên tục (như ảnh chụp hình ảnh với độ dốc) Định dạng biểu thị hình ảnh với hàng triệu màu sắc • Định dạng GIF mang lại hiệu cao nén ảnh dạng màu đặc ảnh với vùng màu lặp lặp lại (ví dụ nghệ thuật vẽ nét đơn, logo hình minh hoạ có văn bản) Định dạng sử dụng bảng màu có 256 màu để hiển thị hình ảnh có hỗ trợ suốt • Định dạng PNG mang lại hiệu nén ảnh có màu đặc bảo tồn chi tiết sắc nét Định dạng PNG-8 sử dụng bảng màu có 256 màu để thị hình ảnh, định dạng PNG-24 hỗ trợ màu 24-bit (hàng triệu màu) Tuy nhiên, nhiều trình duyệt ứng dụng cũ không hỗ trợ file định dạng PNG Trong chuơng bạn học cách sử dụng Adobe Photoshop ImageReady để tối ưu hoá lưu file ảnh định dạng JPEG GIF cho việc xuất Web Bạn thao tác với tập hợp ảnh thiết kế cho Web site ảo với vườn thú ảo Photoshop (qua hộp thoại Save For Web) ImageReady (qua bảng Optimize) mở nhiều khả cho việc tối ưu hố hình ảnh, file bạn nhỏ hiệu quan sát tốt.Ví dụ bạn dùng ứng dụng để chọn từ tập hợp lớn định dạng phân bố file, để đạt mục đích cho cơng việc bạn Bạn dùng ứng dụng để so sánh với file tối ưu theo cách khác đặt cạnh Sử dụng tối ưu hoá nét đặc trưng bảng màu dùng Photoshop dùng ImageReady, bạn bào tồn tối đa màu sắc kích thước file bạn tối thiểu Bắt đầu Trước bắt đầu học này, bạn phục hồi thông số mặc định cho Adobe Photoshop Adobe ImageReady Hãy xem “Phục hồi thông số mặc định” trang Khỏi động Adobe Photoshop Nếu ý xuất hỏi bạn có tối ưu hố thơng số màu sắc hay khơng, click No Chọn Open > Browser click vào bảng File Browser in bảng để mở Trong File Browser, dùng bên trái phía để chọn thư mục Lesson/Lesson14 chọn thư mục Lession14 Hình nhỏ file Start End xuất ô bên phải, nhiều file xuất hoàn toàn tương tự Bạn chọn thư mục Photos thư mục Lesson14 đẻ xem ảnh mà bạn dùng để làm cho file 14Start1.psd, sau nhớ chọn lại thư mục Lesson14 Chọn hình nhỏ file 14Start1.psd, hình nhỏ biến liệu file xuất ô bên trái trình duyệt file (File Browser) Nếu cần, bạn định lại kích thước cho File Browser để có hình nhỏ lớn Đây file phiên sửa chữa cho đồ vườn thú, file mà bạn sử dụng sau chuơng Phiên đồ bổ sung ảnh chụp động vật quét vào máy chế tác Photoshop Trong ô thấp bên trái File Browser, cuộn xuống biến liệu ý kích thước file thực lớn Chọn hình nhỏ file 14End1.psd Chú ý kích thước file biến liệu nhỏ ảnh nhìn hình ảnh file 14Start1.psd Lần lượt, chọn file Start End khác đánh số thư mục Lesson14 để xem trước chúng Click đúp file 14Start1.psd để mở Photoshop Tối ưu hố ảnh định dạng JPEG Trong học này, bạn tối ưu hoá file định dạng JPEG GIF Bạn sử dụng Photoshop ImageReady để nén file định dạng JPEG GIF Hiện tại, kích thước file 14Start1.psd lớn để dùng cho trang Web, bạn so sánh với định dạng file nén khác để xem file nén tạo cho bạn hình ảnh nén tốt mà khơng làm giảm nhiều chất lượng hình ảnh Sử dụng hộp thoại Save For Web Hộp thoại Save For Web Photoshop có đầy đủ tất tính tối ưu hố ImageReady Bạn so sánh hai hay nhiều file bạn làm việc, bạn điều chỉnh lựa chọn tối ưu hố bạn có phối hợp tốt giưũa kích thước file chất lượng hình ảnh Với file Start1.psd mở kích hoạt Photoshop, chọn File > Save for Web Trong hộp thoại Save for Web, click vào bảng 4-Up để có hình ảnh Photoshop tự động tạo ba tập hợp lựa chọn tối ưu hoá khác bên cạnh hình ảnh gốc Các thơng tin quan trọng đặt hình ảnh xem trước, bao gồm kích thước file, thời gian tính giây để tải hình ảnh Ơ hình ảnh file gốc Các ô thứ hai, ba bốn diễn giải ba lụa chọn tối ưu hoá khác bao gồm định dạng file (JPEG hay GIF) thuật toán giảm thiểu màu sắc (như Lựa chọn (Selective), Cảm quan (Perceptual) hay Web) Trong góc trái bên hộp thoại Save for Web, chọn 200% lớn trình đơn Level Zoom mở để bạn quan sát chi tiết ảnh, sau click để xem trước phía bên phải ngừng kích hoạt lựa chọn cho phóng đại hình ảnh So sánh với lựa chọn tối ưu hoá định sẵn khác Giữ phím cách (Space), trỏ chuột trở thành hình bàn tay, drag hình ảnh đến vị trí có dịng chữ Tropical Rainforest (ở tâm ảnh, vẹt xanh) để dòng chữ bốn phần xem trước ảnh Một lần nữa, xem xét cách thật tỷ mỷ để thấy khác biệt hình ảnh xem trước tối ưu hoá So sánh định dạng JPEG, GIF PNG tối ưu hố Bạn tối ưu hoá hỉnh ảnh ô hình ảnh mà bạn quan sát thấy hộp thoại Save for Web Để thực điều này, bạn chọn ảnh tối ưu hoá để xem trước chọn thiết lập cạnh bên phải hộp thoại Bằng việc thử nghiệm với thiết lập nén khác nhau, bạn rút thiết lập tốt để đạt mục đích bạn Trước bắt đầu, bạn đảm bảo hình ảnh xem trước tối ưu hố nằm phía bên phải chọn Trong phần Settings trình đơn mở phía bên phải hộp thoại Save for Web, chọn GIF 128 Dithered (Nếu thực chưa chọn) Thông tin bên dành cho thay đổi phần xem trước ảnh chọn Hãy ý nhóm điểm ảnh tối xung quanh phần văn mỏ vẹt (Có thể bạn phải giữ phím Shift Drag ảnh để xem phần mỏ vẹt) Bạn dùng thứ hai để so sánh tối ưu hoá GIF 128 Dithered với tối ưu hoá định dạng JPEG GIF Click vào phiên thấp bên trái ảnh để chọn chọn theo lựa chọn dạng thức JPEG, thời điểm này, phần Settings trình đơn mở ra, có lựa chọn sau: • JPEG Low: ý chi tiết ảnh văn biến đổi cách chấp nhận • JPEG High: chất lượng hình ảnh cải thiện, kích thước ảnh tăng lên chút JPEG Low • JPEG High JPEG Medium: thiết lập này, chất lượng hình ảnh chấp nhận kích thước file nhỏ so với trường hợp dạng thức JPEG High hay GIF Chú ý: Bạn lựa chọn mức độ trung bình khác cho chất lượng file định dạng JPEG cách gỗ Drag trượt lựa chọn Quality phần bên phải hộp thoại Save for Web Bây bạn thử thay đổi thiết lập khác định dạng JPEG GIF, bạn dùng ảnh xem trước thú tư để thử với định dạng khác Chọn phiên hình ảnh thấp bên phải chọn menu Settings để chọn PNG-8 128 Dithered Mặc dù lựa chọn mang lại kích thước file nhỏ ảnh gốc chất lượng hình ảnh khơng tốt trường hợp JPEG Medium (trường hợp JPEG Medium cho kích thước file nhỏ hơn), nữa, nhiều trình duyệt cũa lại khơng thể đọc file có định dạng PNG Để làm cho ảnh tương thích với trình duyệt cũ, bạn se lưu file dùng tối ưu hố JPEG Medium cho mục đích sử dụng cho Web Chọn phiên JPEG Medium ảnh tối ưu hố (nó nằm góc bên trái thấp hộp thoại), bạn chọn hộp chọn Progressive Chú ý: Khi Progressive chọn, tải xuống hình ảnh thành cơng với lần làm tăng chất lượng hình ảnh Progressive JPEG tải xuống Click Save Trong hộp thoại Save Optimized As, sử dụng tên mặc định 14Start1.jpg lưu vào thư mục với hình gốc Chọn File > Close, khơng lưu lại thay đổi Tối ưu hố hình ảnh định dạng GIF Bây giờ, bạn tối ưu hố hình ảnh màu phẳng định dạng GIF so sánh với kết bảng màu khác chế độ hoà sắc khác Mặc dù bạn thực tồn học Photoshop bạn dùng ImageReady Photoshop ImageReady chia sẻ nhiều tính năng, vài cơng việc thích hợp sử dụng Photoshop cơng việc khác lại thích hợp với ImageReady phụ thuộc vào mục đích sử dụng file ảnh bạn Cũng có việc thực Photoshop có việc thực ImageReady Đó lý hai cơng cụ có cách thuận lợi để chuyển đổi lẫn Nếu bạn mở file bạn chuyển từ Photoshop sang ImageReady ngược lại, file mở ứng dụng mà bạn chuyển qua Nếu bạn mở nhiều file, file bạn mở kích hoạt mở ứng dụng mà bạn chuyển qua Nếu khơng có file mở, bạn chuyển đổi qua lại từ ứng dụng sang ứng dụng khác Chuẩn bị vùng làm việc với ImageReady Trước bạn bắt đầu với file mới, bạn chuyển đổi từ Photoshop sang ImageReady sau xác định vùng làm việc với ImageReady cho công việc mà bạn thực học Trong Photoshop, click vào nút Jump To ImageReady phần hộp công cụ để chuyển từ Photoshop sang ImageReady Chú ý: Nếu bạn khơng có đủ nhớ để chạy hai ứng dụng lúc, đóng Photoshop bắt đầu với ImageReady Trong ImageReady, chọn Windows > Workspace > Reset Pallette Loactions để đảm bảo tất Pallette đặt vị trí mặc định chúng Hãy Drag nhãn Palette khỏi nhóm palette để tách riêng chúng thành palette riêng biệt, bao gồm: · · Palette Info (từ nhóm palette Optimize) Palette Color Table (từ nhóm Palette Rollovers) Click vào hộp đóng nhóm palette để ẩn palette: · · Nhóm palette Color (gồm palette Color, Swatches Styles) Nhóm palette Rollovers (gồm palette Rollovers Layer Option) Drag palette Optimize, Color Table Layers để xếp lại chúng vùng làm việc mong muốn định lại kích thước chúng cho thuận lợi bạn làm việc Chọn Windows > Workspace > Save Workspace Trong hộp thoại Save Workspace, gõ Optimize_14 click OK Vùng làm việc đặt tên Optimize_14 xuất menu Windows > Workspace, tên giúp bạn nhớ bạn tạo vùng làm việc cho chương 14 để làm việc việc tối ưu hố (Optimize) Bạn xác lập lại vùng làm việc cho bạn với cấu hình làm việc palette quay trở lại với vùng làm việc mặc định lúc cách bạn chọn tên mà bạn muốn dùng menu phụ Workspace Chọn thơng số tối ưu hố ImageReady Phần trước học này, bạn sử dungj thơng số tối ưu hố Photoshop cách sử dụng hộp thoại Save For Web Trong ImageReady, lựa chọn tương tự xuất palette Optimize Trong ImageReady, chọn File > Open, mở file 14Start2.psd từ thư mục Lesson/Lesson14 Bức ảnh tạo từ Adobe Illustrator sau raster (mành) hố Photoshop Bức ảnh chứa nhiều vùng màu đặc Click vào bảng 2-Up sổ chứa hình ảnh Bản tối ưu hoá ảnh họn nằm bên phải của sổ Trong trình đơn mở palette Optimize, chọn GIF 128 No Dither Trong menu Color Reduction Algorithm, chọn Perceptual Lựa chọn thuật toán giản lược màu (Color reduction algorithm) Một cách để giảm kích thước file giảm số màu ảnh Photoshop tính tốn số màu cần thiết cho bạn, dựa thuật tốn Bạn cần định thuật toán sử dụng cách tạo vùng chọn từ menu Color Reduction Algorithm, bao gồm lựa chọn sau: Perceptual: Tạo bảng màu tuỳ chọn cách đưa ưu tiên màu dành cho mắt nguời có độ nhạy cao Selective: Tạo bảng màu tương tự bảng màu Perceptual, vùng màu phổ biến giữ nguyên màu sắc trang Web Đây bảng màu thường tạo ảnh với tính nguyên vẹn màu sắc cao Selective chọn làm mặc định Adaptive: Tạo bảng màu tuỳ chọn cách lấy mẫu màu từ dải màu xuất phổ biến ảnh Ví dụ ảnh với hai màu xanh xanh da trời tạo bảng màu gồm hai màu xanh da trời phổ biến Đây tuỳ chọn tốt để mô tả màu sắc tập trung vùng riêng biệt phổ màu Web: Dùng bảng màu chuẩn 256 màu phổ biến bảng màu Windows Mac OS 8-bit (256 màu) Hệ thống đảm bảo khơng có hồ sắc trình duyệt ứng dụng màu sắc ảnh hiển thị sử dụng 8-bit màu (bảng màu gọi palette Web-safe) Nếu ảnh bạn có màu tổng số màu lý thuyết bảng màu này, màu khơng sử dụng bị loại bỏ Custom: Bảo toàn bảng màu bảng màu hoà trộn bảng màu không cập nhật thay đổi đến ảnh Windows or Mac OS: Sử dụng bảng màu mặc định hệ thống 8-bit (256 màu), bảng màu dựa lấy mẫu nguyên gốc chế độ màu RGB Nếu ảnh bạn có màu tổng số màu lý thuyết bảng màu, n Thanh trạng thái nằm cửa sổ hiển thị hình ảnh hiển thị hình ảnh phóng đại thơng tin hữu ích khác ảnh gốc tối ưu hoá ảnh A Kích thước file thời gian tải ảnh tối ưu hố B Kích thước ảnh gốc ảnh tối ưu hố Bạn tuỳ chọn loại thơng tin xuất Trong trạng thái, chọn Image Dimensions từ trình đơn mở bên phải Lựa chọn hiển thị kích thước hình ảnh pixels (điểm ảnh), điều quan trọng bạn lên kế hoạch làm để làm khớp ảnh vào vị trí có kích thước định sẵn khuôn mẫu (template) trang Web Khám phá bảng màu (Color Table) Chọn công cụ Rectangular Marquee ( ) Vẽ vùng chọn hình chữ nhật chứa tất chữ vùng năm màu đồ vườn thú, hình minh hoạ phía Chọn Select > Inverse để chọn tất phần nằm ngồi vùng chọn hình chữ nhật Chọn công cụ Magic Eraser ( ), ẩn công cụ Erase ( ) Trong tuỳ chọn công cụ, bỏ tuỳ chọn Contigous để tất điểm màu trắng vùng chọn xoá, kể Click vào màu phần màu trắng trắng bên riêng biệt đồ vườn thú Bây giờ, tất màu trắng bị xoá bỏ, thay vào điểm suốt mà bạn nhìn thấy mẫu hình bàn cờ bên ảnh Duy trì xem trước vùng suốt Bây giờ, bạn xác nhận vùng suốt ảnh phải chứa điểm ảnh suốt file ảnh tối ưu hoá định dạng GIF Sau đó, bạn xem trước trình duyệt bạn Vì tính xem trước ImageReady hiển thị ảnh trang Web với màu màu trắng, nên bạn thay đổi màu sẫm ảnh để xem phần suốt Trên palette Optimize, chọn hộp thoại Transparency (Nếu bạn khơng nhìn thấy hộp thoại này, chọn Show Options menu palette Optimize) Việc chọn Transparency chuyển đổi vùng ảnh gốc có độ mờ đục 50% thành suốt ảnh tối ưu hoá Chọn Select > Deselect, sau chọn File > Save Click vào Matte palette Optimize để mở bảng màu, sau chọn màu loại trừ màu trắng Click OK để đóng bảng màu Chọn File > Preview In, chọn trình duyệt Web từ menu phụ Chú ý: Để sử dụng lệnh Preview IN, bạn phải có trình duyệt Web cài đặt máy bạn Nếu không mở bạn chọn trình duyệt, trình duyệt thứ khởi động sau hiển thị hình ảnh tối ưu hố góc bên trái cửa số trình duyệt Trình duyệt hiển thị kích thước tính điểm ảnh, kích thước file, định dạng file thơng số tối ưu hố ảnh, với mã sử dụng để tạo nên hình xem trước Tuỳ chọn Transparency chọn Tuỳ chọn Transparency bỏ Thốt khỏi trình duyệt bạn xem trước xong hình ảnh bạn Cắt tỉa thêm vùng Mặc dù ảnh đồ vườn thú chứa đựng điểm suốt điểm ảnh không hiển thị, điểm ảnh chiếm chỗ trốn file, làm tăng thêm kích thước ảnh Bạ cắt xén hết phần không cần thiết để cải thiện việc xếp đặt hình ảnh tối ưu hố kích thước file Trong ImageReady, chọn Image > Trim Lệnh Trim giúp bạn cắt tỉa ảnh bạn, theo độ suốt điểm ảnh màu phần khung mở rộng Trong hộp thoại Trim, chọn Transparent Pixels khơng thực chọn click OK ImageReady cắt phần suốt phía ngồi ảnh Chọn File > Save Optimized As Trong hộp thoại Save Optimized As, dùng tên mặc định (14Start2.gif) click Save Trong hộp thoại Raplace Files, chọn Replace (nếu ra) Chọn File > Close Bạn thấy mọt lời nhắc bạn lưu file 14Start2.psd trước đóng Kể từ bạn hồn tất với file cho học này, đừng lưu lại thay đổi cuối Tạo vùng suốt hoà sắc Trong phần này, bạn tạo vùng suốt hoà sắc cho hình đồ hoạ đóng vai trị điểm truy cập từ trang web khác vào đồ vườn thú Bằng cách tạo hoà sắc từ điểm bóng đổ mờ thành suốt, bạn làm cho cách tạo chuyển tiếp mềm mại từ hình ảnh màu trang Web mà làm lại Bạn thực điều với hai bước Đầu tiên, bạn tạo bóng đổ ảnh Sau đó, bán thêm hồ sắc vào bóng đổ để hồn trộn thành màu cho trang web Bạn thực Photoshop ImageReady với thao tác khác chút vị trí Thêm bóng đổ File bạn làm việc đón vai trị nút bấm để truy cập đến web site vườn thú Bạn thêm bóng đổ cho bút để làm cho hình ảnh xuất trơi nền, nhấn mạnh thành phần liên kết trang web Chọn File > Open, chọn 14Start3.psd thư mục Lesson/Lesson14 Trong palette Layers, click vào nút Add A Layer Style ( ) phần palette, sau chọn Drop Shadow từ trình đơn mở Trong hộp thoại Layer Style (Photoshop) palette Drop Shadow (ImageReady), nhập vào giá trị sau: · · Với Spread, drag trượt gõ 7% · Với Distance, drag trượt gõ 15 Với Size, drag trượt gõ 15 (Chỉ với Photoshop), Click OK để đóng hộp thoại Drop Shadow Chọn File > Save Thêm hoà sắc suốt đến bóng đổ Như bạn tìm hiểu, hồ sắc phương pháp tạo chuyển trạng thái màu với bảng màu giới hạn Điều làm cho hữu dụng trang Web bạn mơ trạng thái chuyển mềm mại mà khơng làm ảnh hưởng đến kích thước file thời gian tải nhanh Kích hoạt file 14Start3.psd, chọn File > Save fỏ Web để mở hộp thoại Save For Web (Bước không cần thiết với ImageReady) Click vào Optimized hộp thoại Save For Web (Photoshop) cửa sổ hiển thj hình ảnh (ImageReady) Trên phần bên phải hộp thoại Save For Web (Photoshop) palette Optimize (ImageReady), thiết lập thông số sau: · Trong menu Settingsnh đơn mở ra, chọn GIF 128 Dithred · Chọn xem hộp kiểm tra Transparency chọn hay chưa, chưa, tchs chọn Chú ý: Trong ImageReady, bạn khơng nhìn thấy hộp kiểm tra Transparency, mở menu palette Optimize chọn Show Options click vào hình có hình hai mũi tên Optimize để mở rộng palette để bạn nhìn thấy tất tuỳ chọn · Trong menu trình đơn mở hộp kiểm tra Transparency, chọn Diffusion Transparency Dither · Trong tuỳ chọn Amount, dùng trượt mở gõ 55% Hộp thoại Save For Web (Photoshop) Palette Optimize (ImageReady) Click Matter để mở bảng màu, chọn màu trừ màu trắng click OK (Chúng chọn màu nâu sáng: R=220, G=190 B=150) Để xem hiệu ứng tuỳ chọn Matter, thử phóng đại hình ảnh đến mức bạn nhìn thấy điểm ảnh riêng biệt hồ sắc, đến 400% cao Để ý pixel gần cạnh vùng màu xanh màu đen pixel khác tăng cường hoà trộn với màu mờ chúng xảy xa từ cạnh vùng màu xanh Sau đó, cho độ phóng đại 100% Tại phần hộp thoại Save For Web, click vào nút với biểu tượng trình duyệt click vào mũi tên để chọn trình duyệt bạn từ menu trình đơn bật lên (Trong ImageReady sử dụng nút Preview In Default Browser hộp cơng cụ để mở file trình duyệt) Trong trình duyệt, ý bóng đổ phải hoà trộn để tương phản với màu mờ Khi bạn kết thúc việc xem tài liệu bạn, đógn trình duyệt chuyển quay trở lại Photoshop (hoặc ImageReady) Click vào nút Save hộp thoại Save for Web (Trong ImageReady, chọn File > Save Optimized) Trong hộp thoại Save Optimized As, chấp nhận thông số chọn mặc định tên file (14Start3.gif) lưu file thư mục essons/Lessons14 Chọn File > Save để lưu file 14Start3.psd đóng file mà không lưu Làm việc với đồ ảnh (ImageReady) Một đồ ảnh ảnh chứa siêu văn liên kết đến file khác trang Web Tại vùng khác nhau, hay điểm nóng (hotspost), đồ ảnh liên kết đến file khác Adobe ImageReady tạo đồ ảnh máy khách mày chủ Việc tạo đồ ảnh số chức phải thực ImageReady Bạn sử dụng Photoshop để tạo slice, slice chia sẻ chức với đồ ảnh, bạn khơng thể tạo đồ ảnh Photoshop Chú ý: Để có thêm thơng tin cắt ảnh thành nhiều file ảnh liên kết phần cắt đến trang Web khác, xem chưong 15, “Thêm Slice tương tác Rollovers” Tạo xem đồ ảnh (ImageReady) Bản đồ ảnh cho phép bạn liên kết vùng ảnh đến URL (address to an Internet or intranet site) Bạn thiết lập vùng đa liên kết - gọi vùng đồ ảnh – ảnh, với liên kết đến: file văn bản, hình ảnh khác, audio, video file đa phương tiện, trang Web khác hay Web site khác Bạn tạo hiệu ứng Rollover vùng đồ ảnh Sự khác sử dụng đồ ảnh sử dụng slice để tạo liên kết nguồn ảnh truy xuất trang Web chảng hạn Sử dụng đồ ảnh giữ cho hình ảnh truy xuất nguyên vẹn file đơn lẻ, sử dụng slice nguyên nhân làm cho ảnh truy xuất file riêng rẽ Một khác đồ ảnh slice đồ ảnh cho phép bạn liên kết vùng tròn, vùng đa giác hay vùng chữ nhật ảnh, slice cho phép bạn liên kết vùng hình chữ nhật Nếu bạn cần liên kết vùng hình chữ nhật, sử dụng slice thích hợp việc sử dụng đồ ảnh Chú ý: Để tránh kết không mong đợi, không tạo vùng đồ ảnh slice chứa liên kết URL – liên kết đồ ảnh liên kết slice bị bỏ qua vài trình duyệt Sử dụng lớp tạo đồ ảnh Trong thao tác này, bạn tạo đồ ảnh ảnh có sẵn Bạn định nghĩa hostpots sử dụng lớp số công cụ đồ ảnh Sau đó, bạn gán cho hostpots đến URL, liên kết đến vị trí máy cục mạng Internet Bạn sử dụng phiên ảnh đồ vườn thú mà đặt vùng màu thuộc lớp riêng Bạn chuyển đổi lớp thành hostpots đồ ảnh Bằng việc sử dụng lớp để định nghĩa hostpots, bạn dễ dàng tăng thêm việc kiểm sốt tồn hình dạng vùng Trong ImageReady, chọn File > Open mở file 14Start4.psd từ thư mục Lessons/Lesson14 Trong menu Settings palette Optimize, chọn GIF 64 Dithered Trong palette Layers, chọn lớp African Savannah Chọn Layer > New Layer Based Image Map Area Một vùng hình chữ nhật mờ ảo xung quanh có viền đỏ ra, bao quanh toàn khu vực African Savannah ảnh Đường màu đỏ vùng hình chữ nhật mờ ảo xác định vùng hostpot có chứa đồ ảnh Trong nhóm palette Animation, click Image Map chọn Polygon từ menu trình đơn Shape mở (Bạn mở palette Image Map việc chọn Window > Show Image Map) Bây giờ, viền đỏ bên bao gần hết vùng Savannah Trong tuỳ chọn Quality palette Image Map, Drag chạy gõ 90 để làm cho đường màu đỏ bao kín xung quanh hình ảnh vùng Savannah Bây giờ, bạn xác định vùng hostpots, công việc liên kết đến file khác Web site bạn vị trí khác Web site Mục đích học bạn liên kết hostpots đến URL tưởng tượng cho vường thú Trong tuỳ chọn URL palette Image Map, gõ địa ảo Web site http://www.adobe.com/african_savannah.html, hộp thoại URL Trong palette Layers, biểu tượng trỏ hình ngón tay xuất lớp African Savannah lớp có lớp sở đồ ảnh Chú ý: Nếu bạn thích, bạn sử dụng URLs khác cho tập này, việc liên kết hostpots đến trang mạng nội vài vị trí yêu thích bạn mạng Internet (Tuỳ chọn) Nếu bạn muốn thực hành nhiều với đồ ảnh, chọn vùng khác số bốn vùng đồ vuờn thú (Exotic Asia, Tropical Rainforest, Himalayan Highlands, Northern Wilderness), lớp lặp lại từ bước đến bước để tạo nhiều lớp sở đồ ảnh Sử dụng thông số chọn tương tự, thay “african_savannah” URL thành tên lớp bạn sử dụng để tạo đồ ảnh Đừng lo lắng lỗi bạn gõ URL bạn Bạn tìm hiểu việc sử chữa thơng tin đồ ảnh sau, phần “Tạo file định dạng HTML chỉnh sửa thông tin đồ ảnh” Chọn File > Save Điều chỉnh dải Gamma Trước bạn thực nốt bước cuối để xuất hình minh hoạ cho đồ ảnh ảnh vườn thú mạng hay Web site bạn, dù muốn hay không, bạn phải kiểm tra lại ánh sáng ảnh có tương thích với giao diện hình sở cơng nghệ máy tính Máy sử dụng hệ điều hành Windows thông thường hiển thị độ sáng nửa tông tối, hay gamma, máy tính sử dụng Macintosh Chú ý: Trước bắt đầu phần học, bạn điều chỉnh hình máy tính để hiển thị thông tin màu Để hiểu rõ hơn, xem chương 17, “Thiết lập thơng số máy tính bạn cho việc quản lý màu sắc” Trong hộp thoại ImageReady, click nút Toggle Image Visibility để đường biên giới hình đa giác đồ ảnh Chọn View > Preview sau chọn lệnh sau để xem trước hình ảnh xuất máy tính, bạn khơng sử dụng: · Nếu bạn dùng Windows, chọn Standard Macintosh Color · Nếu bạn dùng Mac OS, chọn Standard Windows Color Chọn Image > Adjustment > Gamma Click vào nút thích hợp: · · Windows, click Windows to Macintosh click OK Mac OS, click Macintosh to Windows click OK Chọn Five > Save Optimized As Trong hộp thoại Save Optimized As, chọn Images Only từ menu Format, dùng tên mặc định 14Start4.gif, click Save Bây bạn đồ ảnh bạn trình duyệt Chọn File > Preview In chọn trình duyệt từ menu phụ Trong sổ trình duyệt, di chuyển trỏ đến vùng khác vườn thú, ý rằng, thành phần chứa nhiều liên kết siêu văn Nếu bạn có modern kết nối Internet có URLs đúng, bạn click vào hostpots để truy cập đến trang vị trí vườn thú Thốt khỏi trình duyệt quay lại Adobe ImageReady Tạo file định dạng HTML sửa chữa thông tin đồ ảnh Khi bạn lưu đồ ảnh file HTML, liên kết HTML sở cần hiển thị ảnh trang Web cách tự động Cách dễ dàng để thực điều chọn cách đơn giản tuỳ chọn HTML and Images Format bạn lưu ảnh tối ưu hoá Chỉ bạn tạo file HTML, bạn dễ dàng cập nhật thông tin nào, thêm sử chữa vùng đồ ảnh URLs Trong ImageReady, chọn File > Save Optimized As Chú ý: Trong Photoshop, bạn tạo file HTMl hộp thoại Save Optimized As hộp thoại xuất sau q trình tối ưu hố ảnh sau click OK hộp thoại Save For Web Trong hộp thoại Save Optimized As, chọn tuỳ chọn HTML and Images menu As Type trình duyệt mở (Windows) menu Format (Mac OS) Sử dụng tên mặc định 14Start4.psd lưu thư mục Lessons/Lesson14 Nếu hộp thoại Replace Files xuất hiện, click Replace Khi bạn chọn tuỳ chọn HTML and Images, trang định dạng HTML chứa đựng hình ảnh lưu tự động, thêm vào file đồ hoạ File HTML có tên với tên ảnh, có phần mở rộng html Bây giờ, bạn sử dụng ImageReady để thay đổi số liên kết cập nhật cho file HTML Trong hộp công cụ, chọn công cụ Image Map Select ( ), công cụ ẩn công cụ Rectangle Image Map ( Trong sổ hiển thị ảnh, click chọn vùng đồ ảnh African Savannah ) Trong palette Image Map, thay đổi URL thành http://www.adobe.com/newafrica.html Nếu bạn có thơng tin đồ ảnh khác mà bạn muốn sửa chữa, dùng công cụ Image Map Select để chọn vùng đồ ảnh mà bạn muốn cập nhật, sau cập nhật thông tin thay đổi tuỳ chọn palette Image Map Khi kết thúc thay đổi, chọn File > Update HTML Trong hộp thoại Update HTML, chọn file 14Start4.html, click Open Sau click Replace hộp thoại Replace Files xuất click OK để bỏ qua tin xác nhận cập nhật Chọn File > Close để đòng ảnh Đừng lưu thay đổi, có lời nhắc Bạn sử dụng trình duyệt bạn để mở xem file 14Start4.html Bạn mở file trình soạn thảo văn bản, chương trình xử lý từ ngữ hay chương trình sửa chữa HTML để sửa chữa mã HTML Đối với trang Web: Tên file quy uớc định dạng HTML) Hãy sử dụng quy ước tên file UNIXå, nhiều chương trình mạng tự cắt xén tên file dài Quy ước quy định tên file đến ký tự, theo sau phần mở rộng Sử dụng phần mở rộng html htm Không sử dụng ký tự đặc biệt dấu chấm hỏi (?), dấu (*) dầu cách ký tự tên file - vài trình duyệt không công nhận tên đường dẫn Nếu bạn phải sử dụng ký tự đặc biệt hay dấu cách tên file, kiểm tra hướng dẫn sửa chữa file định dạng HTML để biết mã để dùng Ví dụ, để tạo dấu cách từ, bạn cần đặt vào đoạn mã “%20” tương ứng với ký tự trống Tối ưu hố file xử lý bó ImageReady hỗ trợ q trình xử lý bó qua việc sử dụng Droplets - biểu tượng chứa hành động ImageReady để thực nhiều file Droplets dễ dàng tạo sử dụng Dể tạo droplets, bạn drag biểu tuợng droplets khỏi palette Optimization đặt hình Để sử dụng droplets, drag file hay thư mục khắp biểu tượng droplets hình Trong ImageReady, chọ File > Open mở file thư mục Lessons/Lessons14/Photos Thử nghiệm với file có định dạng khác với thông số chọn khác palette Optimize mong muốn bạn hài lịng với kết Chúng tơi sử dụng với JPEG, High quality (60) Progressive Drag biểu tượng droplets ( ) khỏi palette Optimize đặt vào nơi hình (Nếu bạn dùng hệ điều hành Windows, bạn định lại kích thước cho cửa sổ ImageReady để làm cho hình bạn nhìn thấy được) Đóng file (khơng lưu file) Từ hình mày tính, drag thư mục Photos từ thư mục Lessons/Lesson14 đặt lên droplets để xử lý bó hình đồ hoạ thư mục ImageReady tối ưu hố file bổ sung thê, hình ảnh Web đến thư mục Photos Mở file ảnh Web thư mục Photos Chú ý chúng tối ưu hố hồn tồn hay khơng phụ thuộc vào thông số chọn lý thuyết droplets tạo Thốt ImageReady bạn hồn tất Câu hỏi ôn tập Đối với tối ưu hố hình ảnh, sử dụng ImageReady thuận lợi sử dụng Photoshop điểm nào? Bảng màu gì? Khi xảy hồ sắc trình duyệt? Và làm bạn tối thiểu lượng hồ sắc ảnh? Mục đích việc gán màu đục đến ảnh định dạng GIF gì? Tổng quan trình tạo đồ ảnh Trả lời câu hỏi ôn tập Thực khơng có thuận lợi việc sử dụng ứng dụng ứng dụng khác cho việc tối ưu hố hình ảnh Cả Photoshop ImageReady thực phạm vi rộng nhiệm vụ tối ưu hố hình ảnh ImageReady có nhiều tính đặc biệt cho Web site, mà tính bạn khơng thể tìm thấy Photoshop, việc tối ưu hố hình ảnh khơng phải số tính riêng biệt Một bảng màu bảng chứa đựng màu sử dụng ảnh 8-bit màu Bạn chọn bảng màu cho file ảnh định dạng GIF hay PNG-8, bạn thêm, xố bỏ hay chỉnh sửa màu sắc bảng màu Hoà sắc trình duyệt xảy trình duyệt mơ màu sắc xuất palette màu ảnh khơng hiển thị hệ thống trình duyệt Để bảo vệ màu sắc khỏi hồ sắc trình duyệt, bạn chọn màu palette Color Table, sau click vào nút Web-shift phần palette để biến đổi màu đến màu tương đương gần palette Web Bằng việc định màu mở đục, bạn hồ trộn phần pixel suốt ảnh với màu trang Web Làm mở đục giúp bạn tạo file ảnh định dạng GIF với cạnh có cưa cạnh chống cưa điều tạo hoà trộn cách mềm mại vào màu trang Web Nhưng với ImageReady 7.0, bạn định hồ sắc đến suốt Để tạo đồ ảnh, bạn định nghĩa vùng hostpot ảnh cách sử dụng công cụ Image Map chọn lớp chọn Layer > New Layer Based Image Map Area Sau đó, bạn dùng palette Image Map để xác định hình dáng hostpot kết nối hostpot đến địa URL ... hiển thị hình ảnh hiển thị hình ảnh phóng đại thơng tin hữu ích khác ảnh gốc tối ưu hoá ảnh A Kích thước file thời gian tải ảnh tối ưu hố B Kích thước ảnh gốc ảnh tối ưu hoá Bạn tuỳ chọn loại thơng... nguồn ảnh truy xuất trang Web chảng hạn Sử dụng đồ ảnh giữ cho hình ảnh truy xuất nguyên vẹn file đơn lẻ, sử dụng slice nguyên nhân làm cho ảnh truy xuất file riêng rẽ Một khác đồ ảnh slice đồ ảnh. .. vùng đồ ảnh – ảnh, với liên kết đến: file văn bản, hình ảnh khác, audio, video file đa phương tiện, trang Web khác hay Web site khác Bạn tạo hiệu ứng Rollover vùng đồ ảnh Sự khác sử dụng đồ ảnh