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 sẽ dễ dàng tăng thêm việc kiểm soát toàn bộ các hình dạng của các vùng.

  1. Trong ImageReady, chọn File > Open và mở file 14Start4.psd từ thư mục Lessons/Lesson14

  2. Trong menu Settings trên palette Optimize, chọn GIF 64 Dithered

  3. Trong palette Layers, chọn lớp African Savannah.

  4. 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 đỏ hiện ra, bao quanh toàn bộ khu vực African Savannah của bức ảnh. Đường màu đỏ và vùng hình chữ nhật mờ ảo xác định vùng hostpot có chứa trong bản đồ ảnh.

  1. Trong nhóm palette Animation, click và thanh Image Map và chọn Polygon từ menu của trình đơn Shape mở ra (Bạn có thể mở palette Image Map bằng việc chọn Window > Show Image Map)

Bây giờ, viền đỏ bên ngoài bao gần hết vùng Savannah

 

  1. Trong tuỳ chọn Quality trên palette Image Map, Drag con chạy hoặc gõ 90 để làm cho đường màu đỏ bao kín hơn xung quanh hình ảnh của vùng Savannah.

Bây giờ, bạn đã xác định vùng hostpots, và công việc tiếp theo là liên kết nó đến một file khác trong Web site của bạn hoặc một vị trí khác trên Web site. Mục đích của bài học này là bạn sẽ liên kết các hostpots đến các URL tưởng tượng cho vường thú.

  1. Trong tuỳ chọn URL của palette Image Map, gõ địa chỉ ảo của Web site là http://www.adobe.com/african_savannah.html, trong hộp thoại URL

Trong palette Layers, một biểu tượng con trỏ hình ngón tay xuất hiện trên lớp African Savannah chỉ ra rằng lớp này có một lớp cơ sở bản đồ ảnh.


Chú ý: Nếu bạn thích, bạn có thể sử dụng URLs khác cho bài tập này, việc liên kết hostpots đến các trang mạng nội bộ hoặc một vài vị trí yêu thích của bạn trên mạng Internet.

  1. (Tuỳ chọn) Nếu bạn muốn thực hành nhiều hơn với bản đồ ảnh, hãy chọn một vùng khác trong số bốn vùng của bản đồ vuờn thú (Exotic Asia, Tropical Rainforest, Himalayan Highlands, và Northern Wilderness), và trên mỗi lớp lặp lại từ bước 3 đến bước 7 để tạo ra nhiều hơn các lớp cơ sở bản đồ ảnh. Sử dụng các thông số chọn tương tự, nhưng thay thế “african_savannah” trong URL  thành các tên của các lớp bạn sử dụng để tạo bản đồ ảnh.

Đừng lo lắng về bất kỳ lỗi nào khi bạn gõ trong URL của bạn. Bạn sẽ tìm hiểu về việc sử chữa các thông tin bản đồ ảnh sau, trong phần “Tạo file định dạng HTML và chỉnh sửa thông tin bản đồ ảnh”.

  1. Chọn File > Save

 

Điều chỉnh dải Gamma

 Trước khi bạn thực hiện nốt những bước cuối cùng để xuất bản hình minh hoạ cho bản đồ ảnh của bức ảnh vườn thú trên mạng hay Web site của bạn, dù muốn hay không, bạn cũng sẽ phải kiểm tra lại ánh sáng của bức ảnh có tương thích với giao diện của màn hình trên cơ sở công nghệ của 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, hơn máy tính sử dụng Macintosh.

Chú ý: Trước khi bắt đầu phần này của bài học, hãy chắc rằng bạn điều chỉnh màn hình máy tính để hiển thị thông tin màu. Để hiểu rõ hơn, hãy xem chương 17, “Thiết lập các thông số của máy tính của bạn cho việc quản lý màu sắc”

  1. Trong hộp thoại ImageReady, click nút Toggle Image Visibility để hiện đường biên giới của hình đa giác của bản đồ ảnh.

 

  1. Chọn View > Preview sau đó chọn lệnh như sau để xem trước hình ảnh sẽ xuất hiện trên nền máy tính, bạn sẽ 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

3.       Chọn Image > Adjustment > Gamma

4.       Click vào nút thích hợp:

·         Windows, click Windows to Macintosh và click OK

·         Mac OS, click Macintosh to Windows và click OK

       5.     Chọn Five > Save Optimized As

6.       Trong hộp thoại Save Optimized As, chọn Images Only từ menu Format, dùng tên mặc định là 14Start4.gif, và click Save

Bây giờ bạn sẽ bản đồ ảnh của bạn trong trình duyệt

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

8.       Trong của sổ trình duyệt, di chuyển con trỏ đến vùng khác của vườn thú, chú ý rằng, các thành phần này chứa nhiều liên kết siêu văn bản. Nếu bạn có một modern và một kết nối Internet và có các URLs đúng, bạn có thể click vào các hostpots để truy cập đến các trang tại các vị trí của vườn thú.

 

 9.       Thoát khỏi trình duyệt và quay lại Adobe ImageReady.


Tạo file định dạng HTML và sửa chữa thông tin bản đồ ảnh

Khi bạn lưu một bản đồ ảnh trong một file HTML, các liên kết HTML cơ sở cần hiển thị bức ảnh trên trang Web một cách tự động. Cách dễ dàng nhất để thực hiện điều này là chọn một cách đơn giản tuỳ chọn HTML and Images Format khi bạn lưu bức ảnh đã tối ưu hoá. Chỉ khi bạn tạo file HTML, bạn mới dễ dàng cập nhật bất cứ thông tin nào, như thêm hoặc sử chữa các vùng bản đồ ảnh hoặc URLs.

1.       Trong ImageReady, chọn File > Save Optimized As

Chú ý: Trong Photoshop, bạn có thể tạo một file HTMl trong hộp thoại Save Optimized As và hộp thoại này sẽ xuất hiện sau quá trình tối ưu hoá một bức ảnh và sau đó click OK trong hộp thoại Save For Web.

2.       Trong hộp thoại Save Optimized As, chọn tuỳ chọn HTML and Images trên menu As Type của trình duyệt mở ra (Windows) hoặc menu Format (Mac OS). Sử dụng tên mặc định 14Start4.psd và lưu nó trong thư mục Lessons/Lesson14. Nếu hộp thoại Replace Files xuất hiện, hãy click Replace.

Khi bạn chọn tuỳ chọn HTML and Images, một trang định dạng HTML chứa đựng hình ảnh được lưu tự động, thêm vào file đồ hoạ. File HTML này sẽ có cùng tên với tên bức ảnh, nhưng có phần đuôi mở rộng là .html

Bây giờ, bạn sẽ sử dụng ImageReady để thay đổi một trong số các liên kết và cập nhật cho file HTML

3.       Trong hộp công cụ, hãy chọn công cụ Image Map Select (), công cụ này ẩn dưới công cụ Rectangle Image Map ().

4.       Trong của sổ hiển thị bức ảnh, click chọn vùng bản đồ ảnh African Savannah.

5.       Trong palette Image Map, thay đổi URL thành http://www.adobe.com/newafrica.html.

           

 Nếu bạn có thông tin bản đồ ảnh khác mà bạn muốn sửa chữa, hãy dùng công cụ Image Map Select để chọn vùng bản đồ ảnh mà bạn muốn cập nhật, sau đó cập nhật các thông tin thay đổi trong tuỳ chọn của palette Image Map.

6.       Khi kết thúc các thay đổi, chọn File > Update HTML

7.       Trong hộp thoại Update HTML, chọn file 14Start4.html, và click Open. Sau đó click Replace khi hộp thoại Replace Files xuất hiện và click OK để bỏ qua tin xác nhận cập nhật.

8.       Chọn File > Close để đòng bức ảnh. Đừng lưu các thay đổi, nếu có lời nhắc.

Bạn có thể sử dụng trình duyệt của bạn để mở và xem file 14Start4.html. Bạn cũng có thể mở file trong một trình soạn thảo văn bản, hoặc một chương trình xử lý từ ngữ hay một chương trình sửa chữa HTML để sửa chữa các 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å, vì nhiều chương trình mạng tự cắt xén các tên file quá dài. Quy ước này quy định một tên file chỉ đến 8 ký tự, theo sau nó là một phần đuôi mở rộng. Sử dụng phần mở rộng là .html hoặc .htm.

Không sử dụng các ký tự đặc biệt như dấu chấm hỏi (?), dấu sao (*) hoặc dầu cách giữa các ký tự trong tên file - một vài trình duyệt sẽ không công nhận tên đường dẫn. Nếu bạn phải sử dụng các ký tự đặc biệt hay dấu cách trong tên file, hãy kiểm tra hướng dẫn sửa chữa file định dạng HTML để biết mã đúng để dùng. Ví dụ, để tạo ra các dấu cách giữa các từ, bạn sẽ cần đặt vào một đoạn mã là “%20” tương ứng với một ký tự trống.


Tối ưu hoá file xử lý bó

ImageReady hỗ trợ quá trình xử lý bó qua việc sử dụng Droplets - biểu tượng chứa các hành động của ImageReady để thực hiện trên một hoặc nhiều file. Droplets rất dễ dàng tạo ra và sử dụng. Dể tạo một droplets, bạn hãy drag biểu tuợng droplets ra khỏi palette Optimization và đặt nó trên màn hình nền. Để sử dụng droplets, hãy drag file hay thư mục trên khắp biểu tượng droplets trên màn hình nền.

  1. Trong ImageReady, chọ File > Open và mở bất kỳ file nào trong thư mục Lessons/Lessons14/Photos.

  2. Thử nghiệm với các file có định dạng khác nhau và với các thông số chọn khác nhau trong palette Optimize như mong muốn cho đến khi bạn hài lòng với kết quả.

Chúng tôi sử dụng với JPEG, High quality (60) và Progressive.

  1. Drag biểu tượng droplets () ra khỏi palette Optimize và đặt vào bất kỳ nơi nào trên màn hình nền (Nếu bạn dùng hệ điều hành Windows, bạn có thể định lại kích thước cho cửa sổ ImageReady để làm cho màn hình nền của bạn nhìn thấy được)

  1. Đóng file (không lưu file)

  2. Từ màn hình nền của mày tính, hãy drag thư mục Photos từ thư mục Lessons/Lesson14 và đặt nó lên trên droplets để xử lý bó các hình đồ hoạ trong cả thư mục. ImageReady sẽ tối ưu hoá từng file và bổ sung thê, hình ảnh Web đến thư mục Photos

  3. Mở bất kỳ file ảnh Web nào trong thư mục Photos

Chú ý rằng chúng được tối ưu hoá hoàn toàn hay không phụ thuộc vào các thông số chọn lý thuyết khi droplets được tạo ra.

  1. Thoát ImageReady khi bạn hoàn tất.

  

Câu hỏi ôn tập

  1. Đối với sự tối ưu hoá hình ảnh, sử dụng ImageReady thuận lợi hơn sử dụng Photoshop ở điểm nào?

  2. Bảng màu là gì?

  3. Khi nào xảy ra hoà sắc trình duyệt? Và làm thế nào bạn có thể tối thiểu lượng hoà sắc trong một bức ảnh?

  4. Mục đích của việc gán màu đục đến một bức ảnh định dạng GIF là gì?

  5. Tổng quan về quá trình tạo một bản đồ ảnh

 

Trả lời câu hỏi ôn tập

  1. Thực sự không có bất kỳ thuận lợi nào trong việc sử dụng một ứng dụng này hơn một ứng dụng khác cho việc tối ưu hoá hình ảnh. Cả Photoshop và ImageReady đều có thể thực hiện một phạm vi rộng của nhiệm vụ tối ưu hoá hình ảnh. ImageReady có nhiều tính năng đặc biệt cho Web site, mà các tính năng này bạn không thể tìm thấy trong Photoshop, nhưng việc tối ưu hoá hình ảnh không phải là một trong số các tính năng riêng biệt này.

  2. Một bảng màu là một bảng chứa đựng các màu sử dụng ảnh 8-bit màu. Bạn có thể chọn một bảng màu cho file ảnh định dạng GIF hay PNG-8, và bạn có thể thêm, xoá bỏ hay chỉnh sửa màu sắc trong bảng màu.

  3. Hoà sắc trình duyệt xảy ra khi một trình duyệt mô phỏng màu sắc xuất hiện trong palette màu của bức ảnh nhưng không hiển thị trong hệ thống của trình duyệt. Để bảo vệ màu sắc khỏi hoà sắc trình duyệt, bạn có thể chọn màu trong palette Color Table, sau đó click vào nút Web-shift tại phần giữa của palette này để biến đổi màu đến màu tương đương gần nhất trong palette Web.

  4. Bằng việc chỉ định một màu mở đục, bạn có thể hoà trộn từng phần các pixel trong suốt trong một bức ảnh với màu nền của trang Web. Làm mở đục sẽ giúp bạn tạo ra file ảnh định dạng GIF với các cạnh có răng cưa hoặc cạnh chống răng cưa và điều này tạo ra sự hoà trộn một cách mềm mại vào màu nền của trang Web. Nhưng với ImageReady 7.0, bạn cũng có thể chỉ định một hoà sắc đến trong suốt.

  5. Để tạo một bản đồ ảnh, bạn định nghĩa một vùng hostpot của bức ảnh bằng cách sử dụng công cụ Image Map hoặc chọn lớp và chọn Layer > New Layer Based Image Map Area. Sau đó, bạn dùng palette Image Map để xác định hình dáng của hostpot và kết nối mỗi hostpot đến một địa chỉ URL

© Final Fantasy - www.bantayden.com

  
     

© Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ nguồn khi bạn phát hành lại thông tin từ trang này.