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

ai 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.
Trong ImageReady, chọn File > Open và mở file 14Start4.psd từ thư mục Lessons/Lesson14 
Trong menu Settings trên palette Optimize, chọn GIF 64 Dithered 
Trong palette Layers, chọn lớp African Savannah. 
Chọn Layer > New Layer Based Image Map Area. 
Một vùng hình chữ nhật mờ ảo xung quanh có viền đỏ 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.
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
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ú.
Trong tuỳ chọn URL của palette Image Map, gõ địa chỉ ảo của Web site là  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.
(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”.
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”
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. 
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  
 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.
Trong ImageReady, chọ File > Open và mở bất kỳ file nào trong thư mục Lessons/Lessons14/Photos. 
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.
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) 
Đóng file (không lưu file) 
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 
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.
Thoát ImageReady khi bạn hoàn tất. 
Câu hỏi ôn tập
Đố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? 
Bảng màu là gì? 
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? 
Mục đích của việc gán màu đục đến một bức ảnh định dạng GIF là gì? 
Tổng quan về quá trình tạo một bản đồ ảnh 
Trả lời câu hỏi ôn tập
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. 
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. 
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. 
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. 
Để 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