Giáo trình Photoshop CS - Chương 17: Tạo hiệu ứng Rollover cho trang web

ormal vẫn 
nhìn như cũ và tất nhiên bạn không cần phải chỉnh sửa nó khi bạn phải làm với slice Exhibit Info. 
Tạo ra hiệu ứng Rollover từ xa 
Hiệu ứng Rollover từ xa là sự kết hợp của một slice này với một slice khác, do vậy khi một tác động 
nào của người dùng vào slice này sẽ gây ra thay đổi về hình ảnh hoặc hiệu ứng ở slice kia. Để cho dễ 
hiểu hơn tôi đặt tên cho slice bị thay đổi là slice Đích và slice gây ra thay đổi dựa trên tác động của 
người dùng là slice Nguồn. 
Với hiệu ứng Rollover từ xa, bạn không thể chỉ đơn giản thay đổi sự ẩn hiện của một layer được. Mà 
bạn phải tạo ra mối liên hệ giữa hai slice. Trong Photoshop CS tính năng Pickwick với khả năng dễ 
sử dụng và trực quan có thể giúp bạn dễ dàng làm được việc này. 
1. Trong Web Content Palette, làm những điều sau: 
• Trong bảng Menu Slices, mở rộng tập hợp slice Exhibits và Members để bạn có thể nhìn thấy 
trạng thái Rollover Over và Click được đặt nằm dưới nhau ở mỗi một slice. 
• Chọn trạng thái Rollover Click cho slice Exhibit. 
2. Trong Layer Palette, chọn layer Exhibit_info và nhấp vào ô vuông có biểu tượng con mắt để hiển thị 
layer này. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 22
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
3. Trong Web Content Palette, kéo Pickwick từ trạng thái Rollover Click của slice Exhibits sang layer 
Exhibit_info trong cửa sổ hình, do đó đường biên của slice sẽ được hiện sáng với một màu tối. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 23
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
Khi bạn thả chuột, chú ý đến một thẻ tên mới trong tập hợp biểu tượng cho slice Exhibit ở cửa sổ 
hình ảnh và trong Web Content Palette. Bạn cũng để ý tới thẻ tên xuất hiện gần slice Exhibit Info. 
Chú ý: Thay vì kéo Pickwick từ slice đích trong cửa sổ hình ảnh, bạn có thể kéo tới slice đó trong Web 
Content Palette. Cả hai cách đều có kết quả giống nhau. 
4. Chọn Normal trong Web Content Palette, và nhấp vào mũi tên trong slice Exhibits để đóng những 
trạng thái Rollover nằm dưới nó lại. 
5. Chọn trạng thái Rollover Click cho slice Member. 
6. Lập lại bước 2-4 nhưng sử dụng slice Membes Info như là đích cho hiệu ứng Rollover từ xa. 
Cho hiển thị layer đó và kéo Pickwick từ trạng thái Click từ hình "Members Discount". Và hãy nhớ là 
chọn trạng thái Normal sau cùng. 
7. Trong Layer Palette, nhấp vào mũi tên để đóng tập hợp layer Info Panels. 
Nếu bạn không may thả Pickwick vào một slice khác hoặc sau này bạn quyết định không muốn sử 
dụng hiệu ứng Rollover từ xa nữa, bạn có thể loại bỏ nó. Bạn chọn trạng thái Rollover nào mà mình 
muốn chỉnh sửa, ví dụ là một trạng thái Over hoặc Down nằm dưới những layer Nguồn. Sau đó tìm thẻ 
tên Remote ở giữa biểu tượng con mắt và tên của slice nguồn trong Web Content Palette. Nhấp vào 
thẻ tên Remote để xoá nó, sau khi xoá bạn đã xoá đi mối liên hệ giữa nó và hiệu ứng Rollover từ xa. 
Xem trước hiệu ứng Rollover để tìm kiếm sai sót 
Tìm kiếm sai sót cũng không hoàn toàn phải là lý do chính để bạn kiểm tra hiệu ứng Rollover. Đôi khi 
những kết quả không đoán trước xảy ra đòi hỏi bạn phải có thêm những chỉnh sửa hợp lý, đặc biệt là 
khi bạn mới chỉ làm quen với hiệu ứng Rollover. 
1. Trong Web Content Palette, mở rộng slice Exhibts và Members trong Menu Button của tập hợp Slice 
để bạn có thể nhìn thấy những trạng thái nằm dưới nó. 
2. Mỗi lần chọn 2 trạng thái Rollover Click và để ý xem kết quả của nó ở cửa sổ hình ảnh. Đặc biệt chú 
ý đến hình hiệu ứng bán trong suốt, vùng quầng tối xuất hiện xunh quanh layer Info Panels. 
3. Nhấp vào một vùng trống bất kỳ trong Layer Palette để bỏ chọn tất cả layer và chọn Normal trong 
Web Content Palette. 
4. Trong hộp công cụ, chọn nút Toggle Slices Visibility và sau đó chọn nút Preview Document. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 24
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
5. Di chuyển con trỏ qua cửa sổ hình ảnh, và nhấn vào nút Exhibit. Để con chuột nằm trong nút navi 
một lúc để bạn có thể xem thông tin của nó xuất hiện. Và bạn có thể thấy rằng vùng quầng tối xung 
quanh nó sẽ không xuất hiện nữa. 
6. Nhấp vào nút Members để thấy hiệu ứng tương tự xảy ra. 
7. Nhấp vào nút Toggle Slices Visibility và Preview Document để thoát khỏi trạng thái xem trước. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 25
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
Chỉnh lại kích thước của slice để sửa chữa lỗi về sự ẩn hiện 
Để sửa chữa cách xuất hiện của thanh navi để người dùng có thể thấy được những Layer Style được 
áp dụng, bạn phải cho hiển thị những layer này. Sau khi bạn đã sửa chữa xong, bạn cần phải hiển thị 
lại nó để bạn không thay đổi gì đến trạng thái Normal. 
1. Trong Web Content Palette, chọn trạng thái Click cho slice Exhibits 
2. Trong hộp công cụ, chọn công cụ Slice Select và nhấp vào slice Exhibit Info trong cửa sổ hình 
ảnh. (Nếu bạn đã ẩn đường dẫn đi rồi thì hãy hiển thị nó bằng cách vào View > Show > Guides để hiển 
thị nó) 
3. Chọn một điểm neo bất kỳ ở phần trên của slice sau đó kéo nó lên phía trên cho đến khi nó hoàn 
toàn che phủ vùng bóng đen. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 26
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
Chú ý: Bạn có thể kéo đường biên của slice đến đường dẫn nằm ngang bên trên hoặc bên dưới tâm 
khoảng 1/3, bởi vì trong vùng đó không có slice nào hết. Điều này là không thực sự cần thiết, nhưng nó 
có thể giảm số lượng slice bắt buộc để bao phủ hoàn toàn tấm hình khi xuất ra HTML. Nếu trong cùng 
một vùng đó mà có một User Slice khác, thì khi bạn chồng đường viền của chúng lên nhau nó sẽ tạo ra 
những kết quả không như mong muốn. 
4. Chọn một điểm neo khác ở phía đối diện và kéo xuống dưới để che phủ hoàn toàn bóng đen ở phía 
dưới. 
5. Trong Web Content Palette, chọn trạng thái Click của slice Members. Sau đó, lập lại bước 2-4 để 
slice đó bao phủ hoàn toàn vùng bóng đen xunh quanh. 
6. Trong Web Content Palette, chọn Normal. Trong Layer Palette, nhấp vào một điểm trong bất kỳ để 
bỏ chọn các layer. 
7. Sử dụng nút Toggle Slices Visibility và Preview Document để xem trước hình và kiểm tra xem việc 
thay đổi độ lớn của slice có sửa chữa được vấn đề hay không. Khi làm xong chọn hai nút ở trên lần 
nữa để thoát khỏi chế độ xem trước. 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 27
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
Tạo một trang web từ hình ảnh 
ImageReady sẽ làm tất cả những công việc khó khăn cho bạn bắt đầu từ chuyển hình ảnh thành trang 
web bao gồm các file HTML và các thư mục chứa hình ảnh. Nhưng có một bước rất quan trọng mà 
bạn phải làm để cho trang web nhận dạng được hiệu ứng Rollover và do đó nó có thể hiển thị đúng 
cách trên web. Bạn sẽ làm bước đầu tiên 
1. Nhấp vào mũi tên để mở Web Content Palette, và chọn Find All Remote Slices. 
2. Một thông báo xuất hiện báo cho bạn biết những thay đổi mà ImageReady đã tạo ra cho tài liệu. 
Nhấn OK. 
3. Chọn File > Save Optimized As. 
4. Trong hộp thoại Save Optimized As, tìm đến nơi mà bạn muốn lưu lại tài liệu hoặc lưu nó trực tiếp 
vào thư mục Lesson17. 
5. Cứ giữ nguyên tên file như thế và thiết lập những tuỳ chọn sau: 
• HTML And Images cho Save As Type 
• Default Settings cho tuỳ chọn Settings. 
• All Slices cho tuỳ chọn Slice 
6. Nhấn Save 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 28
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
7. Cuối cùng bạn tìm đến file 17Start.html mà bạn vừa tạo ra và xem nó với trình duyệt của mình. 
Vậy là chúng ta đã có thể kết thúc chương 17 ở đây! Nhưng còn rất nhiều điều mà bạn phải học với 
Rollover, bảng và cách sử dụng chúng sao cho thật hiểu quả tren trang web. Rollover không phải chỉ 
được tạo ra bằng slice mà bạn còn có thể tạo Rollover cho các bản đồ ảnh, như là bản đồ ảnh bạn tạo 
ra trong chương 15 "Thêm đường liên kết vào một tấm hình". 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 29
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 
Câu hỏi ôn tập 
1. Kể tên hai trạng thái Rollover phổ biến và những tác động của chuột liên quan đến nó. 
2. Có bao nhiêu trạng thái Rollover một slice có thể có? 
3. Bạn có thể tạo ra hiệu ứng Rollover cho image map (bản đồ ảnh) thay vì slice không? 
3. Rollover từ xa là gì? 
4. Rollover chỉ có thể thay đổi trạng thái của tấm hình thôi hay còn gì khác nữa? 
Đáp án 
1. Normal và Over là hai trạng thái phổ biến nhất của hiệu ứng Rollover. Normal là trạng thái mặc định 
của trang web, là khi nó được mở ra và chưa có một tác động nào của người dùng. Over là trạng thái 
khi người dùng di chuột qua một vùng được xác định trước nhưng không nhấp chuột hay bất cứ một 
tác động nào khác ngoài di chuột. Có tất cả 8 trạng thái Rollover bạn có thể tạo ra trong ImageReady, 
nếu bạn tính cả Custom và None. Tuy nhiên, bởi vì bạn có thể tạo những trạng thái riêng cho bạn vậy 
nên hiệu ứng Rollover là không có giới hạn. 
2. Một slice có thể có nhiều trạng thái Rollover, nhưng chỉ một hiệu ứng. Ví dụ, một slice không thể có 
hai trạng thái Over khác nhau, nhưng một trạng thái Over có thể tạo ra nhiều thay đổi cho một Slice và 
một hoặc nhiều slice Đích. Bởi vì những trạng thái khác nhau có liên quan đến những tác động khác 
nhau của chuột, do vậy chẳng có lý do gì là chúng không thể tồn tại cả. 
3. Có! xiềng luôn! bạn có thể tạo ra những thay đổi về ẩn hiện layer, vị trí layer hoặc hiệu ứng như bạn 
làm với Slice. 
4. Rollover từ xa là khi người dùng tác động chuột đến một slice này sẽ tạo ra sự thay đổi ở slice khác. 
Nó có đôi khi được gọi là hiệu ứng Rollover thứ cấp. 
5. Bạn có thể sử dụng hiệu ứng Rollover để làm nhiều việc khác, như là chạy một chương trình hoặc 
một hình động. 
© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 
|Trang chủ| |Photoshop CS| |Chương 18| 
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 30