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

Nội dung của trang này thuộc bản quyền của © Bá tước Monte Cristo - Final Fantasy và www.bantayden.com. Những bài viết trong này có thể được in ra để dùng với mục đích cá nhân và phi thương mại. Nếu bạn muốn phát hành lại trong trang web của bạn làm ơn liên lạc với tôi hoặc ít nhất phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy và www.bantayden.com

Để việc xuất bản Web đạt hiệu quả, những bức ảnh của bạn cần đảm bảo có sự cân bằng tốt giữa kích thước file và chất lượng hiển thị. Với việc sử dụng Adobe Photoshop và ImageReady, bạn có thể tối ưu hoá kích thước các hình ảnh của bạn, vì vậy các bức ảnh này có thời gian tải về hợp lý từ máy chủ của trang web mà không làm mất các chi tiết, màu sắc, sự trong sáng và các thành phần định hướng cần thiết như các bản đồ ảnh chẳng hạn.

Trong chương này, bạn sẽ học cách thực hiện:

  • Tối ưu hoá file ảnh dạng JPEG và GIF, điều chỉnh các thông số tối ưu hoá để đạt được sự cân bằng mong muốn giữa kích thước file và chất lượng hình ảnh.

  • Hiệu chỉnh lượng phối màu áp dụng cho một bức ảnh.

  • Tạo nền trong suốt cho một bức ảnh.

  • Tạo một bản đồ ảnh siêu văn bản.

  • Xử lý bó các file để tự động thực hiện quá trình tối ưu hoá.

 

Bạn sẽ tìm hiểu bài học này trong khoảng một giờ ba mươi phút. Bài học này cũng được biên soạn cho Adobe Photoshop và ImageReady. Cũng như trong bài học trước (chương 13), bạn sẽ ghi lại file mở đầu. Nếu bạn muốn phục hồi file mở đầu, hãy copy nó từ Học Adobe Photoshop trên CD  kèm theo.

Chú ý: Người dùng Windows sẽ phải giải nén các file bài học trước khi sử dụng chúng. Để hiểu rõ hơn, hãy tham khảo “Copy các bài học từ CD” trên trang 4.

 

Tối ưu hoá một bức ảnh bằng Photoshop và ImageReady

Adobe Photoshop và 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 của file ảnh trong khi vẫn tối ưu hoá chất lượng hiển thị trên màn hình. Các lụa chọn cho sự nén các file ảnh phụ thay đổi thuộc vào định dạng file mà bạn đã lưu bức ảnh.

  • Định dạng JPEG được thiết kế để bảo toàn dải màu lớn và sự biến đổi ánh sáng tinh tế của những bức ảnh tín hiệu số liên tục (như các bức ảnh chụp hoặc các hình ảnh với độ dốc). Định dạng này có thể 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 quả cao khi nén các bức ảnh dạng màu đặc và các bức ảnh với các vùng màu lặp đi lặp lại (ví dụ nghệ thuật vẽ nét đơn, các logo và các hình minh hoạ có văn bản). Định dạng này sử dụng một bảng màu có 256 màu để hiển thị hình ảnh và có hỗ trợ nền trong suốt.

  • Định dạng PNG mang lại hiệu quả khi nén các bức ảnh có màu đặc và bảo toàn chi tiết sắc nét. Định dạng PNG-8 sử dụng bảng màu có 256 màu để hiện 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ũ sẽ không hỗ trợ file định dạng PNG.

Trong chuơng này bạn sẽ học cách sử dụng Adobe Photoshop và ImageReady để tối ưu hoá và lưu file ảnh ở định dạng JPEG và GIF cho việc xuất bản trên Web. Bạn cũng sẽ thao tác với một tập hợp các bức ảnh được thiết kế cho một Web site ảo với một vườn thú ảo.

Photoshop (qua hộp thoại Save For Web) và ImageReady (qua bảng Optimize) sẽ mở ra nhiều khả năng cho việc tối ưu hoá hình ảnh, vì vậy các file của bạn nhỏ hơn và hiệu quả hơn nhưng vẫn được quan sát tốt.Ví dụ bạn có thể dùng các ứng dụng để chọn từ một tập hợp lớn của các định dạng và phân bố file, để đạt được mục đích cho công việc của bạn. Bạn cũng có thể dùng một ứng dụng để so sánh với một file được tối ưu theo một cách khác đặt cạnh nhau. Sử dụng sự tối ưu hoá các nét đặc trưng và các bảng màu hoặc dùng Photoshop hoặc dùng ImageReady, bạn có thể bào toàn tối đa màu sắc trong khi kích thước file của bạn là tối thiểu.

 

Bắt đầu

Trước khi bắt đầu bài học này, bạn hãy phục hồi các thông số mặc định cho Adobe Photoshop và Adobe ImageReady. Hãy xem “Phục hồi các thông số mặc định” trong trang 5.

  1. Khỏi động Adobe Photoshop

Nếu một chú ý xuất hiện hỏi bạn có tối ưu hoá các thông số màu sắc hay không, hãy click No

  1. Chọn Open > Browser hoặc click vào bảng File Browser in bảng để mở nó.

  2. Trong File Browser, dùng ô bên trái phía trên để chọn thư mục Lesson/Lesson14 và chọn thư mục Lession14.

Hình nhỏ của 4 file Start và End xuất hiện trong ô bên phải, nhiều file xuất hiện hoàn toàn tương tự nhau. Bạn cũng có thể chọn thư mục Photos trong thư mục Lesson14 đẻ xem 5 bức ảnh mà bạn sẽ dùng để làm nền cho file 14Start1.psd, nhưng sau đó nhớ chọn lại thư mục Lesson14.

  1. Chọn hình nhỏ của file 14Start1.psd, vì vậy hình nhỏ và biến dữ liệu của file xuất hiện trong ô bên trái của trình duyệt file (File Browser). Nếu cần, bạn hãy định lại kích thước cho ô File Browser để có ô hình nhỏ lớn hơn.
     

 

Đây là file của phiên bản đã được sửa chữa cho bản đồ vườn thú, là file mà bạn sẽ sử dụng sau trong chuơng này. Phiên bản của bản đồ này đã được bổ sung các bức ảnh chụp động vật được quét vào máy và đã được chế tác bằng Photoshop. Trong ô thấp hơn bên trái của File Browser, hãy cuộn xuống biến dữ liệu và chú ý rằng kích thước file đã thực sự lớn hơn.

  1. Chọn hình nhỏ của file 14End1.psd. Chú ý rằng kích thước file được chỉ ra trong biến dữ liệu nhỏ hơn một nhưng bức ảnh nhìn vẫn như hình ảnh của file 14Start1.psd

  2. Lần lượt, hãy chọn các file Start và End khác đã được đánh số trong thư mục Lesson14 để xem trước chúng.

  3. Click đúp file 14Start1.psd để mở nó trong Photoshop

 

Tối ưu hoá một bức ảnh định dạng JPEG

Trong bài học này, bạn sẽ tối ưu hoá các file ở cả định dạng JPEG và GIF. Bạn có thể sử dụng hoặc Photoshop hoặc ImageReady để nén các file trong một định dạng JPEG hoặc GIF.

Hiện tại, kích thước file 14Start1.psd là quá lớn để dùng cho trang Web, bạn hãy so sánh với một định dạng file nén khác để xem file nén nào sẽ tạo cho bạn hình ảnh nén tốt nhấ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 của Photoshop có đầy đủ tất cả các tính năng tối ưu hoá như ImageReady. Bạn có thể so sánh hai hay nhiều bản của một file khi bạn làm việc, vì vậy bạn có thể điều chỉnh các lựa chọn tối ưu hoá cho đến khi bạn có được sự phối hợp có thể tốt nhất giưũa kích thước file và chất lượng hình ảnh.

  1. Với file Start1.psd đã được mở và kích hoạt trong Photoshop, chọn File > Save for Web

  2. Trong hộp thoại Save for Web, hãy click vào bảng 4-Up để có 4 bản của hình ảnh.

Photoshop sẽ tự động tạo ra ba tập hợp lựa chọn tối ưu hoá khác nhau bên cạnh hình ảnh gốc. Các thông tin quan trọng được đặt ngay dưới mỗi hình ảnh xem trước, bao gồm kích thước file, thời gian tính bằng giây để tải hình ảnh. Ô đầu tiên là hình ảnh file gốc. Các ô thứ hai, ba và bốn diễn giải ba lụa chọn tối ưu hoá khác nhau bao gồm định dạng file (JPEG hay GIF) và thuật toán giảm thiểu màu sắc (như Lựa chọn (Selective), Cảm quan (Perceptual) hay Web).

 

  1. Trong góc trái bên dưới của hộp thoại Save for Web, hãy chọn 200% hoặc lớn hơn trong trình đơn Level Zoom mở ra để bạn có thể quan sát được chi tiết của bức ảnh, sau đó click để xem trước ở phía trên bên phải ngừng kích hoạt các lựa chọn cho sự phóng đại hình ảnh.

So sánh với các lựa chọn tối ưu hoá định sẵn khác.

  1. Giữ phím cách (Space), con trỏ chuột trở thành hình bàn tay, hãy drag hình ảnh đến vị trí có dòng chữ Tropical Rainforest (ở tâm của bức ảnh, trên con vẹt xanh) để dòng chữ này hiện ra trong cả bốn phần xem trước của bức ảnh. Một lần nữa, hãy xem xét một cách thật tỷ mỷ để thấy được sự khác biệt trong các hình ảnh tại các ô xem trước đã được tối ưu hoá.

 


So sánh các định dạng JPEG, GIF và PNG đã tối ưu hoá

Bạn có thể tối ưu hoá bất kỳ hỉnh ảnh nào trong các ô hình ảnh mà bạn quan sát thấy trong hộp thoại Save for Web. Để thực hiện điều này, bạn hãy chọn một bức ảnh đã được tối ưu hoá để xem trước và hãy chọn các thiết lập của nó ở cạnh bên phải của hộp thoại. Bằng việc thử nghiệm với các thiết lập nén khác nhau, bạn sẽ rút ra được thiết lập nào là tốt nhất để đạt được mục đích của bạn.

Trước khi bắt đầu, bạn hãy đảm bảo rằng hình ảnh xem trước đã tối ưu hoá nằm ở phía trên bên phải đã được chọn.

1.       Trong phần Settings của trình đơn mở ra ở phía bên phải của hộp thoại Save for Web, chọn GIF 128 Dithered (Nếu nó thực sự chưa được chọn)

Thông tin chỉ ra bên dưới dành cho các thay đổi trong phần xem trước của bức ảnh được chọn.

 
Hãy chú ý về nhóm các điểm ảnh tối xung quanh phần văn bản và trên mỏ của con vẹt (Có thể bạn sẽ phải giữ phím Shift và Drag bức ảnh để xem phần mỏ của con vẹt)

Bạn sẽ dùng bản thứ hai ở dưới cùng để so sánh giữa sự tối ưu hoá của GIF 128 Dithered với sự tối ưu hoá của định dạng JPEG và GIF.

  1. Click vào phiên bản thấp hơn bên trái của bức ảnh để chọn nó và chọn theo các lựa chọn của dạng thức JPEG, ngay tại thời điểm này, trong phần Settings của trình đơn mở ra, sẽ có các lựa chọn sau:

    • JPEG Low: hãy chú ý rằng chi tiết của bức ảnh và văn bản biến đổi một cách không thể chấp nhận được.

    • JPEG High: chất lượng của hình ảnh được cải thiện, nhưng kích thước của bức ảnh tăng lên một chút.

                                                                 JPEG Low                                JPEG High

    • JPEG Medium: trong thiết lập này, chất lượng hình ảnh có thể chấp nhận được và kích thước file thì nhỏ hơn so với trong trường hợp dạng thức JPEG High hay GIF

 

Chú ý: Bạn có thể lựa chọn mức độ trung bình khác cho chất lượng file ở định dạng JPEG bằng cách gỗ hoặc Drag con trượt của lựa chọn Quality trong phần bên phải của hộp thoại Save for Web.

Bây giờ bạn sẽ thử thay đổi các thiết lập khác của định dạng JPEG và GIF, bạn sẽ dùng bức ảnh xem trước thú tư để thử với một định dạng khác.

  1. Chọn phiên bản của hình ảnh thấp hơn bên phải và chọn menu Settings để chọn PNG-8 128 Dithered

Mặc dù lựa chọn này mang lại kích thước file nhỏ hơn bức ảnh gốc nhưng chất lượng hình ảnh không tốt như trong trường hợp JPEG Medium (trường hợp JPEG Medium cũng cho kích thước file nhỏ hơn), hơn thế nữa, nhiều trình duyệt cũa lại không thể đọc được file có định dạng PNG. Để làm cho bức ảnh này tương thích với các trình duyệt cũ, bạn se lưu file này dùng tối ưu hoá JPEG Medium cho mục đích sử dụng cho Web.

  1. Chọn phiên bản JPEG Medium của bức ảnh đã tối ưu hoá (nó nằm ở góc bên trái thấp hơn trong hộp thoại), bạn hãy chọn hộp chọn Progressive.

Chú ý: Khi Progressive đã được chọn, bất cứ sự tải xuống nào của hình ảnh thành công thì với mỗi lần đều làm tăng chất lượng hình ảnh.

                                                                         Progressive JPEG được tải xuống

  1. Click Save. Trong hộp thoại Save Optimized As, sử dụng tên mặc định là 14Start1.jpg và hãy lưu vào cùng thư mục với hình gốc.

  2. Chọn File > Close, và không lưu lại các thay đổi.

 

Tối ưu hoá hình ảnh định dạng GIF

Bây giờ, bạn sẽ tối ưu hoá hình ảnh màu phẳng trong định dạng GIF và so sánh với kết quả của các bảng màu khác và các chế độ hoà sắc khác. Mặc dù bạn có thể thực hiện toàn bộ bài học này trong Photoshop nhưng bạn sẽ dùng ImageReady.

Photoshop và ImageReady chia sẻ nhiều tính năng, nhưng một vài công việc có thể thích hợp hơn nếu sử dụng Photoshop và công việc khác lại thích hợp hơn với ImageReady phụ thuộc vào mục đích sử dụng file ảnh của bạn. Cũng có những việc chỉ thực hiện được bằng Photoshop và có những việc chỉ thực hiện được bằng ImageReady. Đó là lý do giữa hai công cụ có những cách thuận lợi để chuyển đổi lẫn nhau. Nếu bạn mở một file khi bạn chuyển từ Photoshop sang ImageReady hoặc ngược lại, thì file đó cũng được mở trong ứng dụng mà bạn đã chuyển qua. Nếu bạn mở nhiều hơn một file, thì chỉ file bạn mở đang được kích hoạt được mở trong ứng dụng mà bạn chuyển qua. Nếu không có file nào được mở, bạn vẫn có thể chuyển đổi qua lại từ ứng dụng này sang ứng dụng khác.

Chuẩn bị vùng làm việc với ImageReady

Trước khi bạn bắt đầu với một file mới, bạn sẽ chuyển đổi từ Photoshop sang ImageReady và sau đó xác định một vùng làm việc với ImageReady cho công việc mà bạn sẽ thực hiện trong bài học này.

1.       Trong Photoshop, click vào nút Jump To ImageReady tại phần giữa của hộp công cụ để chuyển từ Photoshop sang ImageReady.

 

 

 

 

 Chú ý: Nếu bạn không có đủ bộ nhớ để chạy cả hai ứng dụng cùng lúc, hãy đóng Photoshop và bắt đầu với ImageReady.

2.       Trong ImageReady, chọn Windows > Workspace > Reset Pallette Loactions để đảm bảo rằng tất cả các Pallette đều được đặt ở vị trí mặc định của chúng.

3.       Hãy Drag các nhãn trong các Palette ra khỏi các nhóm palette để tách riêng chúng thành các palette riêng biệt, bao gồm:

·         Palette Info (từ nhóm palette Optimize)

·         Palette Color Table (từ nhóm Palette Rollovers)

4.       Click vào hộp đóng trong nhóm các palette để ẩn các palette:

·         Nhóm palette Color (gồm palette Color, Swatches và Styles)

·         Nhóm palette Rollovers (gồm palette Rollovers và Layer Option)

5.       Drag các palette Optimize, Color Table và Layers để sắp xếp lại chúng trong vùng làm việc như mong muốn và định lại kích thước của chúng cho thuận lợi khi bạn làm việc.

6.       Chọn Windows > Workspace > Save Workspace

7.       Trong hộp thoại Save Workspace, gõ Optimize_14 và click OK.

8.       Vùng làm việc đặt tên là Optimize_14 bây giờ xuất hiện trên menu Windows > Workspace, cái tên này sẽ giúp bạn nhớ rằng bạn đã tạo ra vùng làm việc cho chương 14 để làm việc về việc tối ưu hoá (Optimize). Bạn có thể 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 của các palette này hoặc quay trở lại với vùng làm việc mặc định ngay bất cứ lúc nào bằng cách bạn chọn một tên mà bạn muốn dùng trên menu phụ của Workspace.

 

Chọn các thông số tối ưu hoá cơ bản trong ImageReady

Phần trước trong bài học này, bạn đã sử dungj các thông số tối ưu hoá trong Photoshop bằng cách sử dụng hộp thoại Save For Web. Trong ImageReady, các lựa chọn tương tự cũng xuất hiện trong palette Optimize.

  1. Trong ImageReady, chọn File > Open, và mở file 14Start2.psd từ thư mục Lesson/Lesson14. Bức ảnh này được tạo ra từ Adobe Illustrator và sau đó được raster (mành) hoá bằng Photoshop. Bức ảnh này chứa nhiều vùng màu đặc.

  2. Click vào bảng 2-Up trong của sổ chứa hình ảnh.

Bản đã được tối ưu hoá của bức ảnh được họn nằm ở bên phải của của sổ.

  1. Trong trình đơn mở ra trên palette Optimize, chọn GIF 128 No Dither.

 

 

 

  1. Trong menu Color Reduction Algorithm, chọn Perceptual.

 

Lựa chọn một thuật toán giản lược màu (Color reduction algorithm)

Một trong những cách để giảm kích thước file là giảm số màu trong bức ảnh. Photoshop có thể tính toán số màu cần thiết nhất cho bạn, dựa trên bất kỳ thuật toán nào có thể. Bạn cần chỉ định thuật toán nào được sử dụng bằng cách tạo ra một vùng chọn từ menu Color Reduction Algorithm, nó sẽ bao gồm các lựa chọn sau:

Perceptual: Tạo một bảng màu tuỳ chọn bằng cách đưa ra các ưu tiên màu dành cho mắt nguời có độ nhạy cao

Selective: Tạo ra một bảng màu tương tự bảng màu Perceptual, nhưng các vùng màu phổ biến hơn và giữ nguyên màu sắc trên trang Web. Đây là bảng màu thường tạo ra ảnh với tính nguyên vẹn màu sắc cao nhất. Selective được chọn làm mặc định.

Adaptive: Tạo một bảng màu tuỳ chọn bằng cách lấy mẫu màu từ dải màu xuất hiện phổ biến nhất trong bức ảnh. Ví dụ một bức ảnh chỉ với hai màu xanh lá cây và xanh da trời sẽ tạo ra bảng màu gồm hai màu xanh lá cây và da trời là phổ biến. Đây là tuỳ chọn tốt nhất để mô tả màu sắc tập trung trong các vùng riêng biệt của phổ màu.

Web: Dùng bảng màu chuẩn 256 màu phổ biến của bảng màu trong Windows và Mac OS 8-bit (256 màu). Hệ thống này đảm bảo rằng không có sự hoà sắc của trình duyệt được ứng dụng đối với các màu sắc khi bức ảnh được hiển thị sử dụng 8-bit màu. (bảng màu này gọi là palette Web-safe). Nếu bức ảnh của bạn có  ít màu hơn tổng số màu lý thuyết trong bảng màu này, thì những màu không sử dụng đã bị loại bỏ.

Custom: Bảo toàn bảng màu hiện tại như một bảng màu đã hoà trộn và bảng màu này không cập nhật các thay đổi đến bức ảnh.

Windows or Mac OS: Sử dụng bảng màu mặc định của hệ thống 8-bit (256 màu), đây là bảng màu dựa trên sự lấy mẫu nguyên gốc của chế độ màu RGB. Nếu bức ảnh của bạn có ít màu hơn tổng số màu lý thuyết trong bảng màu, thì n

 

Thanh trạng thái nằm giữa của cửa sổ hiển thị hình ảnh sẽ hiển thị hình ảnh phóng đại và các thông tin hữu ích khác về bức ảnh gốc và bản đã tối ưu hoá của bức ảnh

A.       Kích thước file và thời gian tải về của bức ảnh đã được tối ưu hoá

B.      Kích thước của ảnh gốc và ảnh đã được tối ưu hoá

Bạn có thể tuỳ chọn loại thông tin xuất hiện tại đây.

5.       Trong thanh trạng thái, chọn Image Dimensions từ trình đơn mở ra về bên phải.

 Lựa chọn này sẽ hiển thị kích thước hình ảnh bằng pixels (điểm ảnh), đây là điều quan trọng khi bạn lên kế hoạch làm thế nào để làm khớp một bức ảnh vào một vị trí có kích thước định sẵn trong khuôn mẫu (template) của trang Web.

Khám phá bảng màu (Color Table)

Palette Color Table hiển thị màu sắc chỉ thuật toán giản lược màu sắc được chọn hiên tại cho file thao tác, trong trường hợp này, thuật toán được chọn là Perceptual cho bức ảnh bản đồ vườn thú. Màu xuất hiện được chỉ ra là thứ tự ngẫu nhiên palette.

Tổng số màu được chỉ ra tại phần giữa của palette. Bạ có thể định lại kích thước cho 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ác màu dạc sắp xếp trong palette.

Trong palette Color Table, một ít màu có thể có một chấm nhỏ hình hình thoi màu trắng tại tâm của mẫu. Hình thoi đó chỉ ra rằng đó là màu Web-safe.

      

 Trên menu của palette Color Table, chọn Sort By Hue, và chú ý về sự sắp xếp của các mẫu màu đã thay đổi

  1. Trong palette Optimize, chọn Web từ menu Color Reduction Algorithm.

     

Chú ý rằng, màu sắc đã thay đổi trong bức ảnh và palette Color Table, màu sắc đã được cập nhật các phản hồi đến palette Web.

  1. Thử nghiệm bằng cách chọn các thông số tối ưu hoá khác nhau và chú ý tới các hiệu ứng trên bức ảnh và trên palette Color Table.

  2. Khi đã kết thúc thử nghiệm, hãy nhập vào lại các lựa chọn mà bạn thực hiện đầu tiên: GIF 128 No Dither và Perceptual (Bạn có thể rời khỏi sự sắp xếp màu bằng bất kỳ cách nào: unsorted, by hue, by luminance hay by popularity)

 

Cho Web site: Xem các giá trị thuộc hệ sơ số 16 cho màu sắc trong palette Info

Trong Photoshop, gí trị màu cơ số 16 được hiển thị trong palette Info khi bạn chọn chế độ Web Color cho một hoặc cả hai màu chỉ thị. Trong ImageReady, giá trị màu hệ cơ số 16 được hiển thị tự động trong phần bên pahỉ của palette Info, kế tiếp là giá trị màu RGB. Palette Info của cả Photoshop và ImageReady cũng hiển thị các thông tin khác, phụ thuộc vào công cụ sử dụng.

Để xem giá trị màu hệ cơ số 16 trong palette Info của Photoshop, bạn làm như sau:

1.        Chọn Windows > Info hoặc Click vào thanh palette Info để xem palette

2.        Chọn Palette Option từ menu palette

3.        Trên First Color Readout, Second Color Readout, hoặc cả hai, chọn Web Color từ menu Mode.

4.        Click OK

Palette Info hiển thị các giá trị tương đương của hệ cơ số 16 của chế độ RGB ở dưới con trỏ trong hình ảnh

 

Giản lược màu trong bảng màu

Để so sánh kích thước file, bạn có thể giảm tổng số màu trong palette Color Table. Thang màu được giảm thường giữ chất lượng hình ảnh tốt trong khi giảm độp ngột khoảng trống file đồi hỏi lưu trữ thêm màu sắc.

  1. Đảm bảo rằng bản hình ảnh đã tối ưu hoá được chọn, phóng to đến 200% hoặc cao hơn, và hãy đảm bảo chọn Perceptual trong palette Optimization. Chú ý về kích thước file hiện tại.

  2. Giữ phím cách và Drag bức ảnh để ít nhất phần chữ Tropical Rainforest và một ít vùng Northern Wilderness (vùng hoang vu phía Bắc) hiện ra trong vùng hình ảnh hiển thị.
     

     

 

  1. Trong lựa chọn Colors của palette Optimization, gõ hoặc chọn 32 từ menu của trình đơn mở ra. 

       

Để ý rằng có sự giảm nhẹ trong kích thước file, nhưng chất lượng hình ảnh thấp hơn nhiều ở một vài chi tiết, ví dụ một số bóng của các con vật, có thể bị mất đi hoặc bị ảnh hưởng.

 Khoá màu để bảo toàn chi tiết của bức ảnh

Trong thao tác trước, bạn đã được xem việc giản lược số lượng màu sắc làm mất đi chi tiết của hình minh hoạ như thế nào. Đặc biệt là khi bạn giảm số lượng màu từ 128 xuóng 32 màu, bóng của vài con vật bị thay đổi màu sắc và một vài cong vật khác gần như biến mất vì màu sắc mới của chúng gần như màu của nền phía sau chúng.

Bạn sẽ tìm hiểu như thế nào là khoá màu sắc để đảm bảo màu sắc không bị mất đi khỏi bảng màu.

1.       Trong menu phóng đại của trình đơn mở ra, chọn 100% để bạn có thể xem được hầu hết bức ảnh.

2.       Trong palette Optimizetion, thay đổi giá trị Colors trở lại giá trị 128

3.       Chọn công cụ Eyedroper () và llick vào bóng của con lạc đà trong vùng African Savannah để lấy mẫu màu.

 Màu nâu sẫm được chọn trong palette Color Table.

4.       Click vào nút Lock tại phần giưũa của palette Color Table để khoá màu đã chọn.

 Một hình vuông nhỏ xuất hiện trong gốc phải bên dưới của mẫu màu chỉ ra rằng màu đã bị khoá.

Chú ý: Để bỏ khoá màu đã chọn, chọn mẫu màu và click vào nút Lock một lần nữa.

5.       Sử dụng công cụ Eyedropper và nút Lock trên palette Color Table, chọn và khoá màu xanh sẫm của bóng con gấu trong vùng Northern Wilderness.

6.       Trong palette Optimize, nhập giá trị màu 32.

Chú ý rằng, những màu đã khoá sẽ vẫn còn lại trong bảng màu sau khi đã giản lược màu sắc và trong bức ảnh. Tuy nhiên, một số vấn đề về màu xuất hiện: Vết chân trong vùng Northern Wilderness bây giờ tương tự như màu nền, và các con vật trong Tropicals Rainforest bây giờ là màu nâu, thay vì màu xanh lá cây sẫm.

7.       Trong palette Optimize, chọn số lượng màu trở lại là 128.

8.       Dùng lại công cụ Eyedropper và nút Lock trong palette Color Table, chọn và khoá màu con vẹt trong Tropical Rainforest và cả màu vết chân và màu nền trong Northern Wilderness. Bạn đã có tất cả 5 màu đã bị khoá.

9.       Trong palette Optimize, thiết lập giá trị màu là 32.

10.   Chọn File > Save

Nếu bạn thử nghiệm với sự tối ưu hoá các file ảnh, bạn hãy chú ý rằng sự hơi nhạt màu của bức ảnh có thể xảy ra khi palette Optimize giảm màu xuống dưới 32 màu. Trên thực tế, là giảm trong tất cả trường hợp cho dù với một bức ảnh đơn giản nhất, thậm chí ngay cả khi 32 màu có thể là quá nhiều cho một lần giản lược. Đối với file nén tốt nhất của một file ảnh định dạng GIF, hãy thử sử dụng với số lượng màu ít nhất mà vẫn giữu được chất lượng hình ảnh bạn muốn.

Ø       Đối với hình minh hoạ của một bức ảnh hãy thiết lập giá trị khác trong palette Optimize, xem hình 14-1 trong phần màu sắc.

Kiểm soát hoà sắc

Bạn có thể để ý rằng, vùng hiện thời của bức ảnh xuất hiện có những đốm màu khi tối ưu hoá với bảng màu khác và số lượng màu khác. Các đốm màu xuất hiện làm kết quả của việc hoà sắc, kỹ thuật này được dùng để mô phỏng màu xuất hiện mà các màu đó không chứa trong bảng màu. Ví dụ, màu xanh da trời và màu vàng có thể hoà sắc trong kiểu khảm để tạo ra minh hoạ cho màu xanh lá cây, mà màu xanh này không có trong bảng màu.

Khi tối ưu hóa một bức ảnh hãy luôn nhớ có hai loại hoà sắc có thể xảy ra:

·           Hoà sắc ứng dụng (Application dither) xảy ra khi ImageReady hoặc Photoshop cố gắng mô phỏng màu sắc xuất hiện trong bức ảnh gốc nhưng không thể trong bảng màu đã tối ưu hoá mà bạn chỉ định. Bạn có thể kiểm soát lượng ứng dụng hoá sắc bằng cách Drag thanh trượt trong palette Optimize.

·           Hoà sắc trình duyệt (Browser dither) có thể xảy ra khi bổ sung thêm một ứng dụng hoà sắc. Một trình duyệt hoà sắc có thể xảy ra khi trình duyệt Web của bạn sử dụng màu mô phỏng hiển thị 8-bit (256 màu) xuất hiện trong bảng màu của bức ảnh đã được tối ưu hoá nhưng không hiển thị trong bảng hệ thống được sử dụng của trình duyệt. Bạn có thể kiểm soát lượng hoà sắc trình duyệt bằng cách thay đổi màu chọn thành màu Web-safe trong palette Color Table

Trong hộp thoại Save For Web của Photoshop và của ImageReady, bạn có thể xem hoà sắc ứng dụng trực tiếp lên một bức ảnh đã được tối ưu hoá. Bạn cũng có thể xem trước hoà sắc trình duyệt bổ sung mà nó sẽ xuất hiện trong bức ảnh cuối cùng khi bạn xem nó trong trình duyệt dùng hiển thị màu 8-bit.

 

Kiểm soát hoà sắc ứng dụng (Application dither)

Hoà sắc tạo ra hình thức nhiều màu sắc hơn và nhiều chi tiết hơn, nhưng cũng có thể làm tăng kích thước file ảnh. Tuỳ chọn Dither kiểm soát dải màu mà ImageReady mô phỏng bằng quá trình hoà sắc. Đối với việc nén tối ưu, dùng phần trăm ứng dụng hoà sắc thấp nhất nhưng vẫn đảm bảo được chi tiết màu mà bạn mong muốn.

  1. Nếu cần, hãy mở file 14Start2.psd và phóng to nó đến 200% hoặc cao hơn.

  2. Đảm bảo rằng bản hình ảnh được chọn đã được tối ưu hoá, tại palette Optimize hãy thiết lập định dạng GIF, Perceptual và 32 màu. Chú ý về bóng đổ dưới văn bản.

  3. Trong palette Optimze, nhập vào các tuỳ chọn sau:

·         Chọn Diffusion là thuật toán hoà sắc (thay thế No Dither)

·         Drag con chạy hoặc gõ giá trị 100% vào Dither Values

            

Dùng một sự kết hợp màu sắc khác, ImageReady sẽ thử mô phỏng màu sắc và sắc điệu xuất hiện trong ảnh gốc nhưng không mô tả trong bảng màu 32 màu. Để ý về các mẫu có các đốm màu thay thế bóng đổ dưới văn bản. Mẫu này là một cải thiện chút ít và có thể chấp nhận được. Màu nền xanh lá cây đã được hoà sắc cho Tropical Rainforest, tuy nhiên không thể chấp nhận được.

  1. Drag con chạy của Dither đến 50%, và thử nghiệm với phần trăm Dither khác. ImageReady tối thiểu hoá lượng hoà sắc trong hình ảnh, nhưng không có gí trị % nào của Dither sẽ giữ nguyên bóng đổ mà không làm ảnh hưởng đến nền xanh lá cây.

Ø       Đối với một minh hoạ của các hiệu ứng với % hoà sắc khác trên bức ảnh, bạn hãy xem trong hình 14-2 trong phần màu sắc.

  1. Thiết lập Dither về 100%.

  2. Thay đổi số lượng màu về 128.

  3. Sử dụng công cụ Eyedropper ()để chọn màu nền màu xanh lá cây trong Tropical Rainforest và dùng nút Lock () trong palette Color Table để khoá màu đó lại. Trong palette Optimize, thay lại giá trị Colors là 32.

  4. Trong cửa sổ hình ảnh, thay đổi sự phóng đại về 100%

Mặc dù thay đổi này có thể khá tinh vi, nhưng vẫn không chấp nhận được.

 

Tối thiểu hoá hoà sắc trình duyệt (Browser dither)

Như bạn đã tìm hiểu, bức ảnh chứa màu Non-Web safe (không an toàn cho trang Web) phải trải qua một quá trình hoà sắc khi hiển thị trong một trình duyệt Web dùng hiển thị màu 8-bit, vì trình duyệt mô phỏng các màu sắc mà chúng không xảy ra trong bảng hệ thống màu 8-bit. Từ ImageReady, bạn có thể xem trước một bức ảnh được tối ưu hoá sẽ nhìn như thế nào khi được hoà sắc trong một trình duyệt Web.

Để bảo vệ một màu từ hoà sắc trình duyệt, bạn có thể chuyển dịch màu Web, chuyển đổi nó thành các giá trị màu tương đương gần nhất trong palette Web. Vì palette Web bao gồm các tập hợp con của màu sắc xuất hiện trong bảng màu hệ thống của Windows và Mac OS, nên màu palette Web sẽ hiển thị không hoà sắc trong trình duyệt trên nền này.

  1. Với bức ảnh đã được tối ưu hoá 14Start2.psd mở, chọn View > Preview > Browser Dither (để dấu chọn xuất hiện trong lệnh kế tiếp). Để ý rằng, hoà sắc trình duyệt xảy ra trong nền màu nâu của African Savannah. Bạn sẽ di chuyển màu Web mà màu này làm giảm lượng hoà sắc của trình duyệt trong bức ảnh.

Chú ý: Nếu bạn không nhìn thấy hoà sắc, hãy làm tăng độ phóng đại lên 300 lần hoặc tắt cửa sổ xem trước của trình duyệt hoà sắc và sau đó quay lại xem các hiệu ứng. Bạn có thể bật tắt qua lại chức năng xem truớc bằng cách ấn tổ hợp phím Ctrl + Shift + Y (Windows) hoặc Command + Shift + Y (Mac OS)

  1. Chọn công cụ Eyedropper () và click vào bất kỳ vị trí nào trên nền màu nâu. Màu lấy mẫu xuất hiện trong palette Color Table.

  1. Click vào nút Web-shift () tại phần giữa của palette Color Table.

            

 Mẫu màu thay đổi vị trí trong palette và một hình thoi nhỏ xuất hiện trong tâm của mẫu màu chỉ ra rằng màu này đã được chuyển tương đương gần nhất với màu trong palette Web. Bằng việc chuyển màu Web màu nâu của nền hình, bạn đã thay đổi màu của bức ảnh thành màu có thể thiển thị mà không hoà sắc bằng trình duyệt Web trên hệ thống màu 256 màu.

  1. Chọn File > Save

Chú ý: Trong Photoshop 7.0 và ImageReady 7.0, bạn cũng có thể thực chuyển nhanh một màu thành một màu khác hoặc thành trong suốt. Đây là tính năng gán trở lại tất cả các điểm ảnh mà chúng đã xuất hiện trong màu chọn thành một màu mới hoặc trong suốt. Để hiểu rõ hơn, bạn hãy xem thêm Hỗ trợ trực tuyến Adobe Photoshop 7.0

 

Chỉ định nền trong suốt

Nền trong suốt sẽ giúp bạn đặt những đối tượng đồ hoạ không có hình chữ nhật mà tương phản vơi nền của trang Web. Vùng nằm ngoài của đối tượng được xác định là trong suốt, cho phép màu nền của trang Web nhìn xuyên qua. Bạn có thể chỉ định nền trong suốt cho cả hai định dạng ảnh GIF hay PNG.

 

Chuyển đổi lớp nền thành một lớp gốc

Trước khi bạn sử dụng một file có thể ở định dạng GIF để bảo toàn độ trong suốt, bạn phải tạo một vài điểm trong suốt trong bức ảnh của bạn. Bạn sẽ thực hiện bằng cách bỏ đi các phần màn màu trắng xung quanh bản đồ ảnh. Để bắt đầu, bạn hãy chuyển đổi layer nền thành một layer bình thường.

  1. Hãy mở file 14Start2.psd trong ImageReady

  2. Chọn bảng Original at đỉnh của cửa sổ hiện thị hình ảnh.

  3. Chọn Fit on Screen từ menu Zoom Level trong góc trái bên dưới của cửa sổ hình ảnh.

  4. Trên menu của palette Layers, chọn Layer Options. Không thay đổi các thông số mặc định (Bao gồm tên, Layer 0), click OK. Bây giờ lớp này xuất hiện trong palette Layer là Layer 0.

            

 

 
Một lớp nền không thể chứa bất kỳ thông tin rỗng nào bởi vì, theo định nghĩa, không có gì sau nó để có thể nhìn thấy. Nếu bạn thử dùng một trong số các kỹ thuật mà thường thay thế các điểm ảnh màu bằng các điểm ảnh trong suốt, kết quả chỉ ra rằng các điểm ảnh gốc sẽ biến đổi thành màu nền đã được chọn hiện tại thay vì trở thành các điểm ảnh trong suốt.

 

Sử dụng công cụ Magic Wand tạo phần trong suốt

Một phần của bài học này, bạn sẽ dùng công cụ Magic Erase để chuyển đổi nhanh màu nền của bản đồ vườn thú thành các điểm ảnh trong suốt.

Công cụ Magic Eraser sẽ xoá đi tất cả các điểm ảnh của một chi tiết màu chỉ với một lần click chuột. Bạn sẽ dùng nhóm công cụ này để xoá đi tất cả các điểm màu trắng trong lớp này. Tuy nhiên, bạn chỉ muốn xoá đi các điểm màu trắng bên ngoài của bản đồ vườn thú (không xoá màu trắng của các chữ), vì vậy, đầu tiên, bạn sẽ tạo một vùng chọn ngăn phần trắng phía trong của bức ảnh không bị xoá.

  1. Chọn công cụ Rectangular Marquee ()

  2. Vẽ một vùng chọn hình chữ nhật chứa tất cả các chữ trong vùng năm màu của bản đồ vườn thú, như chỉ ra trong hình minh hoạ phía dưới.

  1. Chọn Select > Inverse để chọn tất cả các phần nằm ngoài vùng chọn hình chữ nhật.

  2. Chọn công cụ Magic Eraser (), ẩn dưới công cụ Erase ()

  3. Trong thanh tuỳ chọn của công cụ, hãy bỏ đi tuỳ chọn Contigous để tất cả các điểm màu trắng trong vùng chọn sẽ được xoá, kể cả mỗi phần màu trắng riêng biệt trong những chiếc lá.
     

  1. Click vào màu nền trắng bên ngoài bản đồ vườn thú.
     


Bây giờ, tất cả nền màu trắng đều bị xoá bỏ, thay vào đó là các điểm trong suốt vì vậy mà bạn có thể nhìn thấy mẫu ô hình bàn cờ bên dưới bức ảnh.

 Duy trì và xem trước vùng trong suốt

Bây giờ, bạn sẽ xác nhận rằng vùng trong suốt trong bức ảnh sẽ phải chứa các điểm ảnh trong suốt trong file ảnh đã tối ưu hoá định dạng GIF. Sau đó, bạn sẽ xem trước nó trong trình duyệt của bạn.

Vì tính năng xem trước của ImageReady hiển thị bức ảnh trên trang Web với màu nền màu trắng, nên bạn sẽ thay đổi màu sẫm của bức ảnh để có thể xem được phần trong suốt.

1.       Trên palette Optimize, hãy 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 trên menu của palette Optimize).

Việc chọn Transparency sẽ chuyển đổi các vùng của bức ảnh gốc nếu có độ mờ đục dưới 50% thành nền trong suốt trong bức ảnh được tối ưu hoá.

2.       Chọn Select > Deselect, sau đó chọn File > Save

3.       Click vào Matte trong palette Optimize để mở bảng màu, sau đó chọn bất kỳ màu nào loại trừ màu trắng. Click OK để đóng bảng màu.

4.       Chọn File > Preview In, và chọn một trình duyệt Web từ menu phụ.

Chú ý: Để sử dụng lệnh Preview IN, bạn phải có một trình duyệt Web đã được cài đặt trên máy của bạn

Nếu không mở được khi bạn chọn trình duyệt, thì trình duyệt thứ nhất khởi động và sau đó hiển thị hình ảnh đã được tối ưu hoá trong góc trên bên trái của cửa số trình duyệt. Trình duyệt cũng sẽ hiển thị kích thước tính bằng điểm ảnh, kích thước file, định dạng file và các thông số tối ưu hoá của bức ảnh, cùng với mã được sử dụng để tạo nên hình xem trước này.

   

                  Tuỳ chọn Transparency được chọn              Tuỳ chọn Transparency được bỏ đi

5.       Thoát khỏi trình duyệt khi bạn đã xem trước xong hình ảnh của bạn.

Cắt tỉa thêm các vùng nền

Mặc dù nền của bức ảnh bản đồ vườn thú bây giờ đã chứa đựng các điểm trong suốt và các điểm ảnh này sẽ không được hiển thị, nhưng các điểm ảnh này vẫn chiếm chỗ trốn của file, như vậy làm tăng thêm kích thước của bức ảnh. Bạ có thể cắt xén hết những phần nền không cần thiết để cải thiện việc xếp đặt hình ảnh và tối ưu hoá kích thước file.

1.       Trong ImageReady, chọn Image > Trim

Lệnh Trim sẽ giúp bạn cắt tỉa bức ảnh của bạn, theo độ trong suốt hoặc các điểm ảnh màu ở phần khung mở rộng.

2.       Trong hộp thoại Trim, chọn Transparent Pixels nếu nó không thực sự được chọn và click OK

ImageReady sẽ cắt đi phần trong suốt phía ngoài của bức ảnh

3.       Chọn File > Save Optimized As

4.       Trong hộp thoại Save Optimized As, dùng tên mặc định (14Start2.gif) và click Save.

5.       Trong hộp thoại Raplace Files, chọn Replace (nếu nó hiện ra)

6.       Chọn File > Close

Bạn sẽ thấy mọt lời nhắc khi bạn lưu file 14Start2.psd trước khi đóng. Kể từ khi bạn hoàn tất với file đó cho bài học này, đừng bao giờ lưu lại thay đổi cuối cùng.

Tạo một vùng trong suốt được hoà sắc

Trong phần này, bạn sẽ tạo ra một vùng trong suốt được hoà sắc cho một hình đồ hoạ sẽ đóng vai trò như một điểm truy cập từ một trang web khác vào bản đồ vườn thú. Bằng cách tạo ra một hoà sắc từ một điểm bóng đổ mờ thành trong suốt, bạn sẽ làm cho nó khả dĩ hơn bằng cách tạo ra một sự chuyển tiếp mềm mại từ hình ảnh cho đến bất kỳ nền màu nào trên trang Web mà không phải làm lại mới.

Bạn sẽ thực hiện điều đó với hai bước. Đầu tiên, bạn sẽ tạo một bóng đổ trên bức ảnh. Sau đó, bán sẽ thêm hoà sắc vào bóng đổ để hoàn trộn thành màu nền cho trang web.

Bạn có thể thực hiện bằng Photoshop hoặc ImageReady với cùng thao tác nhưng khác nhau một chút ở vị trí.

Thêm bóng đổ

File bạn sẽ làm việc sẽ đón vai trò là nút bấm để truy cập đến một web site là vườn thú. Bạn sẽ thêm một bóng đổ cho cái bút để làm cho hình ảnh xuất hiện trôi trên nền, nhấn mạnh đây là một thành phần liên kết của trang web.

1.       Chọn File > Open, và chọn 14Start3.psd trong thư mục Lesson/Lesson14.

2.       Trong palette Layers, click vào nút Add A Layer Style () tại phần giữa của palette, sau đó chọn Drop Shadow từ trình đơn mở ra.

3.       Trong hộp thoại Layer Style (Photoshop) hoặc palette Drop Shadow (ImageReady), nhập vào các giá trị sau:

·         Với Distance, drag con trượt hoặc gõ 15

·         Với Spread, drag con trượt hoặc gõ 7%

·         Với Size, drag con trượt hoặc gõ 15

4.       (Chỉ với Photoshop), Click OK để đóng hộp thoại Drop Shadow

 5.       Chọn File > Save

Thêm hoà sắc trong suốt đến bóng đổ

Như bạn đã tìm hiểu, hoà sắc là một phương pháp tạo sự chuyển trạng thái màu với một bảng màu giới hạn. Điều này làm cho nó hữu dụng đối với các trang Web vì bạn có thể mô phỏng trạng thái chuyển mềm mại hơn mà không làm ảnh hưởng đến kích thước file và thời gian tải về nhanh hơn.

1.       Kích hoạt file 14Start3.psd, chọn File > Save fỏ Web để mở hộp thoại Save For Web. (Bước này không cần thiết với ImageReady)

2.       Click vào thanh Optimized trong hộp thoại Save For Web (Photoshop) hoặc cửa sổ hiển thj hình ảnh (ImageReady)

3.       Trên phần bên phải của hộp thoại Save For Web (Photoshop) hoặc palette Optimize (ImageReady), thiết lập các thông số sau:

·         Trong menu Settingsnh đơn mở ra, chọn GIF 128 Dithred.

·         Chọn xem hộp kiểm tra Transparency đã được chọn hay chưa, nếu chưa, hãy tchs chọn nó.

Chú ý: Trong ImageReady, nếu bạn không nhìn thấy hộp kiểm tra Transparency, hãy mở menu của palette Optimize và chọn Show Options hoặc click đúng vào hình có hình hai mũi tên trên thanh Optimize để mở rộng palette để bạn có thể nhìn thấy tất cả các tuỳ chọn.

·         Trong menu của trình đơn mở ra dưới hộp kiểm tra Transparency, chọn Diffusion Transparency Dither.

·         Trong tuỳ chọn Amount, dùng con trượt mở ra hoặc gõ 55%

  

  Hộp thoại Save For Web          Palette Optimize

(Photoshop)                            (ImageReady)

4.       Click Matter để mở bảng màu, chọn  bất kỳ màu nào trừ màu trắng và click OK (Chúng tôi chọn màu nâu sáng: R=220, G=190 và B=150)

Để xem hiệu ứng của tuỳ chọn Matter, hãy thử phóng đại hình ảnh đến mức bạn có thể nhìn thấy các điểm ảnh riêng biệt trong hoà sắc, có thể đến 400% hoặc cao hơn. Để ý rằng các pixel gần cạnh của vùng màu xanh nhất là màu đen và các pixel khác sẽ được tăng cường hoà trộn với màu mờ như chúng xảy ra xa hơn từ cạnh của vùng màu xanh. Sau đó, cho độ phóng đại về 100%

      5.       Tại phần giữa của hộp thoại Save For Web, click vào nút với biểu tượng của trình duyệt hoặc click vào mũi tên để chọn trình duyệt của bạn từ menu của trình đơn bật lên. (Trong ImageReady sử dụng nút Preview In Default Browser trong hộp công cụ để mở file trong trình duyệt)

6.       Trong trình duyệt, chú ý bóng đổ phải hoà trộn thế nào để tương phản với màu mờ của nền. Khi bạn kết thúc việc xem tài liệu của bạn, hãy đógn trình duyệt và chuyển quay trở lại Photoshop (hoặc ImageReady)

7.       Click vào nút Save trong hộp thoại Save for Web (Trong ImageReady, chọn File > Save Optimized)

8.       Trong hộp thoại Save Optimized As, chấp nhận các thông số chọn mặc định và tên file (14Start3.gif) và lưu file này trong thư mục essons/Lessons14

9.       Chọn File > Save để lưu file 14Start3.psd hoặc đóng file mà không lưu.


Làm việc với bản đồ ảnh (ImageReady)

Một bản đồ ảnh là một bức ảnh chứa các siêu văn bản liên kết đến các file khác trên trang Web. Tại các vùng khác nhau, hay điểm nóng (hotspost), của bản đồ ảnh sẽ liên kết đến các file khác. Adobe ImageReady tạo các bản đồ ảnh trên máy khách và trên mày chủ.

Việc tạo bản đồ ảnh là một trong số các chức năng phải thực hiện trong ImageReady. Bạn có thể sử dụng Photoshop để tạo các slice, các slice này chia sẻ các chức năng chính với bản đồ ảnh, nhưng bạn không thể tạo bản đồ ảnh trong Photoshop.

Chú ý: Để có thêm thông tin về cắt một bức ảnh thành nhiều các file ảnh và liên kết mỗi phần được cắt đến trang Web khác, hãy xem chưong 15, “Thêm các Slice tương tác và Rollovers”

 

Tạo và xem bản đồ ảnh (ImageReady)

Bản đồ ảnh cho phép bạn có thể liên kết một vùng của bức ảnh đến một URL (address to an Internet or intranet site). Bạn có thể thiết lập các vùng đa liên kết - gọi là vùng bản đồ ảnh – trong một bức ảnh, với các liên kết đến: file văn bản, các hình ảnh khác, audio, video hoặc các file đa phương tiện, các trang Web khác hay các Web site khác. Bạn cũng có thể tạo hiệu ứng Rollover trong các vùng của bản đồ ảnh.

Sự khác nhau chính giữa sử dụng bản đồ ảnh và sử dụng slice để tạo các liên kết là nguồn ảnh được truy xuất thế nào như trang Web chảng hạn. Sử dụng bản đồ ảnh giữ cho các hình ảnh được truy xuất nguyên vẹn như một file đơn lẻ, khi sử dụng slice là nguyên nhân làm cho bức ảnh được truy xuất như một file riêng rẽ. Một sự khác nhau nữa giữa bản đồ ảnh và slice là bản đồ ảnh cho phép bạn liên kết một vùng tròn, vùng đa giác hay vùng chữ nhật trong một bức ảnh, trong khi slice cho phép bạn chỉ liên kết các vùng hình chữ nhật. Nếu bạn chỉ cần liên kết các vùng hình chữ nhật, sử dụng slice có thể thích hợp hơn việc sử dụng bản đồ ảnh.

Chú ý: Để tránh các kết quả không mong đợi, không tạo các vùng bản đồ ảnh trong các slice chứa các liên kết URL – vì hoặc các liên kết của bản đồ ảnh hoặc các liên kết slice có thể bị bỏ qua trong một vài trình duyệt

 

Sử dụng các lớp tạo bản đồ ảnh

Trong thao tác này, bạn sẽ tạo ra bản đồ ảnh trong một bức ảnh có sẵn. Bạn sẽ định nghĩa hostpots sử dụng các lớp hoặc một trong số các công cụ bản đồ ảnh. Sau đó, bạn sẽ gán cho mỗi hostpots đến một URL, liên kết nó đến một vị trí trên hoặc một máy cục bộ hoặc mạng Internet.

Bạn sẽ sử dụng một phiên bản của bức ảnh bản đồ vườn thú mà đã được đặt mỗi một vùng màu thuộc một lớp riêng. Bạn sẽ chuyển đổi mỗi lớp thành một hostpots bản đồ ảnh. Bằng việc sử dụng lớp để định nghĩa hostpots, bạn