Các Slice tương tác và Rollovers

Chương 15: Thêm các Slice tương tác và Rollovers

Các Slice là các phần chia của một vùng bức ảnh mà bạn có thể xác định bằng cách sử dụng Adobe Photoshop hoặc ImageReady. Bạn cũng có

thể làm sống động hơn các Slice của bạn, kết nối chúng đến các địa chỉ URL và sử dụng chúng cho các nút Rollover. Một ứng dụng khác của

sử dụng Slice là tối ưu hoá chúng một cách riêng lẻ trong các định dạng hình ảnh khác cho Web site để tối đa các hiệu ứng cho hình ảnh của

Web site của bạn trong khi thời gian tải về là nhỏ nhất.

Trong Chương này, bạn sẽ tìm hiểu về:

· Tạo các Slice ảnh bằng các phương pháp khác nhau.

· Tối ưu hoá các slice ảnh riêng rẽ sử dụng các tuỳ chọn riêng biệt và các định dạng file

· Tạo các slice “không hình ảnh” cho mục đích chứa văn bản và HTML.

· Tạo nút Rollover

· Ứng dụng dạng chữ biến dạng đối với Layer văn bản

· Tạo Rollover trạng thái trên, dưới và lựa chọn cho các slice

· Chỉ định sự kết hợp khác nhau của các layer ẩn và trong suốt như các điều kiện chỉ định của các trạng thái rollover khác

nhau.

· Tạo một trang HTML chứa đựng hình ảnh đã phân cắt trong một bảng.

Bạn sẽ mất khoảng 90 phút để hoàn thành chương này. Chương này được biên soạn cho Adobe Photoshop và ImageReady. Một số phần trong

chương này bạn phải thực hiện trong ImageReady.

Nếu cần thiết, hãy xoá bỏ đi thu mục bài học trước trong máy tính của bạn và copy thu mục Lesson15 thay vào đó. Vì khi bạn thực hiện

chương này, bạn sẽ ghi chồng lên file mở đầu. Nếu muốn khôi phục file này, hãy copy chúng từ Học Adobe Photoshop trong CD kèm theo.

Chú ý: Người sử dụng Windows cần giải nén bài học này trước khi sử dụng. Để hiểu rõ hơn, hãy xem phần “Sao chép các bài học” trên trang 4.

Bắt đầu

Trước khi bắt đầu bài học này, hãy khôi phục các tuỳ chọn ứng dụng mặc định cho Adobe Photoshop và Adobe ImageReady. Xem “Phục hồi

các thông số mặc định” trên trang 5.

Bạn sẽ bắt đầu bài học này bằng cách xem một ví dụ của một biểu ngữ (banner) HTML đã hoàn chỉnh mà bạn sẽ tạo ra. Đồ họa của biểu ngữ

này phản ứng với các thao tác của bạn khi sử dụng chuột. Ví dụ như bức ảnh sẽ thay đổi hình thức khi con trỏ chuột di chuyển qua một số vùng

trên bức ảnh hoặc khi bạn click vào các vùng đó.

1. Khởi động một trình duyệt, và mở file kết thúc Banner.html từ thư mục Lessons/Lesson15/15End/Architech Pages.

File này chứa đựng một bảng HTML được liên kết đến một số hình ảnh khác mà tất cả chúng được tạo ra từ các slice của

Photoshop và ImageReady.

2. Di chuyển con trỏ chuột qua các nút “designs”, “structures”, “art” và “contact” trong banner.

Chú ý về các hình đồ hoạ nhỏ xuất hiện bên trái của các nút khi bạn di chuyển con trỏ chuột qua 3 nút đầu tiên. Cũng chú ý như thế

về sự thay đổi của từ Architech khi bạn di chuyển con trỏ chuột qua nút cuối cùng.

3. Giữ chuột và drag con trỏ qua ba nút đầu tiên, hãy để ý xem từ Architech thay đổi nhu thế nào trong lần này. Nhả chuột.

4. Di chuyển con trỏ chuột qua vòng tròn màu xanh lớn gần rung tâm của bức ảnh và hãy để con trỏ chuột ở khu vực này cho

đến khi bạn nhìn thấy một hộp văn bản mở ra với một vài thông tin bổ sung. Sau đó hãy click vào vòng tròn xanh để đến

trang Team.

5. Trên trang Team, hãy thủ cuộn con trỏ chuột qua 3 nút khác nhau và để ý về sự thay đổi. Hãy thủ click vào mỗi nút và sau

đó là click vào nút Team. Chú ý về sự thay đổi.

Nếu bạn muốn quay trở lại trang banner, hãy dùng nút Back trên trình duyệt.

6. Bạn đã xem xong file này, hãy đóng nó và thoát khỏi trình duyệt.

Thế nào là Slice

Slice là các vùng trong một bức ảnh mà bạn xác định trên cơ sở các lớp, hướng dẫn hay các vùng chọn chính xác trong bức ảnh, hoặc bằng

cách dùng công cụ Slice. Khi bạn xác định các Slice trong một bức ảnh, Photoshop hoặc ImageReady sẽ tạo một bảng HTML hoặc các tờ mẫu

xếp tầng để chứa và canh lề cho các slice. Nếu bạn muốn, bạn có thể tạo một file HTML chứa bức ảnh đã slice theo dạng bảng hoặc dạng các

tờ mẫu xếp chồng.

Bạn cũng có thể tối ưu hoá các Slice như các hình ảnh cho các trang Web riêng biệt, thêm HTML hay văn bản đến các slice và liên kết các

slice đến các địa chỉ URL. Trong ImageReady, bạn có thể làm sinh động các slice và tạo rollover với chúng.

Trong chương này, bạn sẽ khám phá về các cách khau nhau để tạo slice của một bức ảnh trong Photoshop và ImageReady, tối ưu hoá các slice

và tạo bốn nút rollover cho banner. Bạn cũng sẽ tìm hiểu về bằng cách nào để làm sinh động các slice, bạn có thể xem thêm trong chương 16,