Tạo hiệu ứng Rollover cho trang web
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Những viết in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn phát hành lại trang web bạn làm ơn liên lạc với tơi phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Hiệu ứng Rollover làm thay đổi vùng hình trang web thành hình khác, màu khác dạng khác người dùng di chuột qua vùng Hiệu ứng Rollover làm cho trang web bạn thân thiện giúp bạn đạt mục tiêu cho trang web cách thêm hiệu ứng sinh động vào đường liên kết thành phần khác trang Trong chương bạn học điều sau: • Chia Slice thành nhiều slice nhỏ • Nhóm Slice chọn vào bảng • Áp dụng hiệu ứng Wrap Text cho layer chữ • Xác định trạng thái Rollover cho layer, layer style layer chữ Wrap • Tạo trạng thái Over, Down Selected • Xác định kết hợp khác layer ẩn trại thái Rollover • Tạo trang HTML chứa hình Slice bảng Chương kéo dài khoảng 60 phút phải làm Adobe ImageReady Về hiệu ứng Rollover Rollover dạng hiệu ứng phổ biến nay, thay đổi giao diện trang web www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS mà không cần phải đưa người đọc sang mộ trang web khác Khi người dùng di chuột qua điểm xác định trước trang web, điểm thay đổi sang trạng thái hồn tồn khác Thường hiệu ứng ám vùng thay đổi dạng lệnh, nhấp chuột vào có điều xảy mở trang mới, vào form v.v Hiện có vài hiệu ứng Rollover phổ biến, bạn di chuột qua nút thay đổi bạn nhấn vào nút đó, nút thay đổi hình dạng Hiệu ứng R trạng thái biểu thị điều kiện khác Layer Palette Những điều kiện bao hàm ẩn layer, vị trí layer, Layer Style vài định dạng khác Bài học hướng dẫn cho bạn thấy, R giúp bạn Chú ý: Để theo học bạn phải có kiến thức Slice mà bạn học từ chương 15 bạn biết cách sử dụng Slice theo kinh nghiệm Bắt đầu Bạn bắt đầu học cách xem ví dụ trang HTML mà bạn tạo dựa hình psd Một vài vùng hình phản ứng lại với di chuyển chuột bạn Viídụ vài vùng hình thay đổi giao diện bạn trỏ qua bạn nhấn vào điểm Tìm đến thư mục Lesson 17 nhấp đúp vào file 17End.html để mở trình duyệt web bạn Di chuyển trỏ qua trang web đó, đặc biệt qua vùng bên trái Chú ý quan sát: • Những thay đổi hình • Thay đổi hình trỏ (từ mũi tên thành hình bàn tay) Nhấn vào nut menu phía bên tay trái hình, ý đến phản ứng xảy trang web Chú ý: Trang mang ý nghĩa tượng trưng khơng có đường link thật sự, nên bạn nhấn vào nút không mở trang khác Tuy nhiên, vài nút tạo thay đổi trang web Để biết thêm thông tin Slice liên kết đến địa URL cho trang web, đọc thêm chương 15 Đóng trình duyệt lại bạn xem xong trang web Tạo trạng thái Rollover Trạng thái Rollover đặt tên theo kiện, ví dụ bạn di nhấn chuột vào vùng www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS hình, tạo thay đổi hình phần hình Tất trạng thái Rollover ImageReady miêu tả phần "Các trạng thái Rollover ImageReady" Dạng R từ xa (remote R) tạo thay đổi vùng khác vùng bị kích hoạt Ví dụ bạn di chuột qua nút trang web, banner có chữ Nói nơm na, tạo thay đổi khơng thân nút mà đối tượng khác Chỉ có User Slice có trạng thái Rollover Tuy nhiên, bạn chọn Slices > Promote để biến slice tự động thành User Slice, sau thêm hiệu ứng R vào slice Các trạng thái Rollover ImageReady ImageReady tự động định trạng thái R sau slice bạn tạo: Over Activates làm thay đổi hình người dùng di chuột qua slice đồ ảnh (image map) chưa nhấn chuột Down Activates làm thay đổi hình ảnh người dùng nhấn chuột nút slice vùng đồ ảnh Trạng thái xuất sau người dùng nhấn vào nút Click Activates làm thay đổi hình ảnh người dùng nhấp chuột vào slice vùng đồ ảnh Trạng thái xuất người dùng di chuột khỏi vùng R Chú ý: trình duyệt web khác nhau, phiên khác nhau, xử lý chuột trái nhấp đúp khác Custom Activate làm thay đổi tên cụ thể hình mà tác động người dùng định dạng đoạn mã JavaScript kèm tho (Bạn phải tạo đoạn mã JavaScript thêm vào trang HTML bạn để tạo hiệu ứng Custome Rollover) None Preserve giữ lại trạng thái hình để dùng sau này, lại không cung cấp kết đầu tài liệu lưu lại dạng trang web Selected Activates kích hoạt trạng thái R người dùng nhấp chuột lên slice vùng đồ ảnh Trạng thái xuất người dùng kích hoạt trạng thái R khác trạng thái R xuất trạng thái Selected kích hoạt Out Activate kích hoạt hình người dùng di chuột khỏi slice vùng đồ ảnh (đây trạng thái Normal State) Up Activate kích hoạt thay đổi hình người dùng thả chuột slice vùng đồ ảnh Thiết lập không gian làm việc cho học Nếu bạn hoàn thành chương khác sách này, bạn hẳn có nhiều kinh nghiệm việc thiết lập khơng gian làm việc ImageReady có vài mơi trường làm việc thiết lập sẵn www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS mà bạn sử dụng chúng cho cơng việc cụ thể mình, chắn bạn dùng số để bắt đầu học Nhưng bạn tạo môi trường làm việc phù hợp với bạn lưu lại dạng "môi trường làm việc tuỳ biến", chuẩn bị làm Khởi động ImageReady Nếu Palette khơng nằm vị trí mặc định, chọn Window > Workspace > Default Palette Location Kéo nhóm pallete Web Content sang phía bên trái Info Palette, vùng làm việc Đóng Info Palette Color Palette lại Hoặc bạn đóng chúng cách chọn Info Color menu View Kéo nhóm Layer Palette lên phía bên phải vùng làm việc đặt bên cạnh nhóm palette Web Content (nơi mà bạn vừa đóng Info Palette lại) Trong nhóm Slice Palette, chọn thẻ Talbe để mang phía trước sau nhấp vào mũi tên hai đầu thẻ để mở rộng tồn Palette Sau kéo xuống phía dưới, bên phải vùng làm việc Kéo góc phía bên phải Web Content Layer Palette để tận dụng hết khoảng trống nằm www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Chọn Window > Workspace > Save Workspace đặt tên 17_Rollover hộp thoại Save Workspace Thiết lập tuỳ biến vùng làm việc cho học Một công đoạn chuẩn bị quan khác bạn phải thiết lập cách vùng làm việc ImageReady Một vài số khơng thể thiết lập trừ tài liệu phải mở ra, bạn bắt đầu với việc mở tài liệu trước Chọn File > Open Trong hộp thoại Open bạn tìm đến thư mục Lesson17 Chọn file 17Start.psd nhấp Open Nếu cần, định lại kích thước cửa sổ anh phong to thu nhỏ để bạn nhìn thấy tồn hình Mở View Menu menu phụ chắn lệnh sau chọn chọn chúng chưa: www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web • Extras • Snap • Guides Slices menu phụ Snap To • Photoshop CS Guides Slices menu phụ Show Tạo hiệu Rollover với chữ uốn cong Một điều thú vị mà ImageReady làm với chữ khả uốn cong chữ Ví dụ, bạn làm cho chữ nhìn giống tạo hiệu ứng không gian chiều Bạn kết hợp chữ uốn cong với trạng thái Rollover Và kết quả, chữ uốn cong xuất tài liệu HTML người dùng tiến hành thao tác Chọn cơng cụ Slice kéo đường hình vng bao quanh chữ "Museo Arte" sử dụng đường guide làm dẫn đường biên Slice dính vào Trong Web Content Palette, nhấp đúp vào tên tự động đặt User Slice (17Start_02) để chọn Gõ chữ Museo Arte để đặt lại tên cho nhấn Enter www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Chọn nút Creat Rollover State Photoshop CS Một trạng thái Over xuất bên Slice Museo Arte Web Content Palette Trong Layer Palette, chọn layer Museo Arte Trong hộp công cụ, chọn Type Tool để hiển thị tuỳ chọn text thành tuỳ biến công cụ chọn nút Create Warrped Text Chú ý: Bạn không cần phải sử dụng công cụ Type chọn chữ Hiệu ứng uốn cong ln áp dụng cho tồn layer chữ khơng cho từ chữ đơn lẻ Chọn Fisheye menu xổ Style kéo trượt Bend đến 30% Để hai trượt lại Vertical Horizontal Distortion 0%, nhấn OK Bạn thấy chữ Museo Arte uốn cong Trong Web Content Palette, nhấn Normal để bỏ chọn trạng thái R hiển thị cửa sổ hình ảnh www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Chú ý: Uốn công chữ không giống viết chữ theo path - tính Photoshop Để biết thêm thơng tin viết chữ theo quỹ đạo định sẵn xem Photoshop HeLayer Palette Tính khơng có ImageReady Xem trước hiệu ứng Rollover Mặc dù kết cuối học trang web, bạn kiểm tra tương tác Slice ImageReady Bạn thoát khỏi chế độ làm việc vào chế độ xem trước Trong bạn xem trước, vài palette, Layer palette bị ẩn bạn khơng thể chọn layer tạo chỉnh sửa Palette chế độ xem trước Trong Layer Palette, nhấn vào khoảng trống để bỏ chọn layer Meseo Art Trong hộp công cụ, chọn nút Toggle Slices Visibility nhấn nút Q để ẩn đường biên slice loại bỏ đường "ngoằn nghèo" hình Chọn nút Preview Document nhấn Y để kích hoạt chế độ Preview Chú ý: Những đường guide đường hiển thị cửa sổ hình ảnh Bạn ẩn cách chọn View > Show > Guides, với tổ hợp phím Ctrl+; Nếu bạn muốn ẩn chúng, bạn phải thị chúng sau bạn xem xong bạn cần phần Di chuyển trỏ qua chữ Museo Arte cửa sổ hình ảnh, sau di chuyển ngồi để bạn thấy hiệu ứng R chữ bị uốn cong Bạn ý đến hiệu ứng mà vị trí trỏ có vùng tô sáng Web Content Palette Khi bạn di chuyển trỏ qua slice Museo Arte cửa sổ hình, lựa chọn Slice Web Conntent Palette thay đổi từ Normal thành Meseo Arte Over state Nhấp vào nút Preview Document and Toggle Slices Visibility lần để bỏ chọn chúng, nhấn Q Y bạn muốn sử dụng phím tắt Đường biên slice đường ngoằn nghèo xuất lại cửa sổ hình ảnh Trong Web Content Palette, chọn Normal nhấp vào mũi tên slice Museo Arte để ẩn danh sách R www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Bạn cố gằng tổ chức Web Content layer Palette gọn gàng tốt bạn làm việc với hiệu ứng R Bằng cách bạn mắc lỗi hơn, bạn kéo lên kéo xuống nhiều lần bạn tìm tập trung vào phần cần nhiều ý Trong học này, chúng tơi thường xun nhắc bạn đóng thành phần nhóm với bạn hồn thành tác vụ với chúng, cho dù khơng ảnh hưởng đến kết cuối học Trong học này, bạn không cần thêm đường liên kết vào cho slice Museo Arte việc bạn tự làm sau này, bạn muốn Hơn nữa, cách làm đươc rõ ràng chương 15 "Tạo đường liên kết hình" Tạo chia slice để xây dựng bảng Slice sau trở thành cột bảng HTML Bạn sử dụng tính cải tiến bảng Table Palette có ImageReady CS để tạo bẳng nằm bảng HTML trang web Nó xuất bảng có code HTML gọn dễ quản lý tất nhiên dễ dàng cho bạn làm việc với slice Chọn công cụ Slice hộp công cụ Kéo để tạo slice mới, vùng giao hai đường guide dọc ngang bên chữ "About Museo Arte" kết thúc đường guide bên chữ "Contact" gặp đường biên bên trái www.vietphotoshop.com - Dịch Bá tước Monte Cristo Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Chọn View > Show > Guides để loại bỏ điểm đánh dấu đường guide Chọn Slices > Divide Slice để mở hộp thoại Divide Slice Dưới Divide Slice Horizontally Into gõ lựa chọn Slices Down, Evenly Spaced Nhấn OK Với năm slice vừa chọn, nhấn vào nút Group Slices Into Table Web Content Palette Bạn ý đến slice gộp lại bảng tên Talbe 02 Web Content Palette màu đường biên thay đổi cửa sổ hình ảnh, bảng Slice Museo Arte bảng Đặt lại tên tái xếp slice Như bạn đoan được, bạn thay đổi thứ tự slice Web Content Palette giống bạn thay đổi thứ tự layer Layer Palette Ở bao gồm việc tái xếp slice bảng định dạng, bảng bạn vừa tạo cho Mune hình Trong Web Content Palette, nhấp đúp vào tên Table_02 để chọn gõ chữ Menu Slice để đặt lại tên cho Nhấn Enter Chọn cột (slice) gộp bảng Menu Slice, ý vùng lựa chọn có màu sắc khác xuất xung quanh nút Contact www.vietphotoshop.com - Dịch Bá tước Monte Cristo 10 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS xuất hình ảnh trỏ di qua slice Một vài tác động chuột khác tạo hiệu ứng Rollover Bạn định trạng thái Rollover cho slice, để có nhiều hiệu ứng xảy hình phụ thuộc vào người dùng làm, nhấp chuột, chọn slice cụ thể Trong Layer Palette, nhấp vào mũi tên để mở rộng tập hợp Button Text Nếu cần, nhấp vào mũi tên để mở rộng layer chữ "About Museo Arte" nằm tập hợp đó, để bạn nhìn thầy hiệu ứng nằm layer Trong Web Content Palette, chọn About slice bảng Menu Slices Chọn nút Create Rollover State phía palette Một trạng thái Rollover có tên Down chọn Nhấp đúp vào trạng thái Rollover Down để mở hộp thoại Rollover State Options Chọn tuỳ chọn Click sau nhấn Ok để đóng hộp thoại lại Trong Layer Palette, nhấp vào vng có biểu tượng mắt cho Effects nằm layer chữ "About Moseo Arte" Một màu vàng nhạt xuất bao quanh từ About Museo Arte hình www.vietphotoshop.com - Dịch Bá tước Monte Cristo 16 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Nhấp vào trạng thái Normal Web Content Palette sau đóng About Slice để ẩn trạng thái Rollover Sau đó, Layer Palette, đóng "About Museo Arte" layer để ẩn danh sách hiệu ứng Effects www.vietphotoshop.com - Dịch Bá tước Monte Cristo 17 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Hoàn thiện đặt lại tên cho nút xem trước hiệu ứng Rollover Bạn luôn nên xem trước hiệu ứng Rollover chế độ Preview để kiểm tra trước tiếp tục Sử dụng kỹ học phần "tạo trạng thái Rollover khác cách sử dụng Layer Style", tạo trạng thái Click Rollover cho slice cịn lại bảng Menu Slice Khi hồn thành, chữ Tour toả sáng người dùng nhấp chuột vào nút Tour, nút Exhibit v.v Trong Layer Palette, nhấp vào mũi tên để đóng tập hợp layer Button Text lại, sau nhấp vào khoảng trống Layer Palette để br chọn toàn layer Chọn Normal Web Content Palette Trong hộp công cụ, chọn nút Toggle Slices Visibility sau nút Preview Document Di chuyển trỏ từ từ qua cửa sổ hình ảnh, tập trung ý vào thay đổi màu sắc hình trạng thái Over Nhấp vào nút ý hiệu ứng toả sáng nhìn thấy chữ bạn di chuyển chuột vùng nút Bạn nên ý sau nhấp chuột, màu sáng biến mất, để lại nút với tông màu tối Nhấp vào nút Toggle Slices Visibility nút Preview Document để trở lại chế độ làm việc bình thường Bước chuẩn bị để làm việc với nhiều hiệu ứng Rollover Bạn tạo tập hợp cho slice, bạn làm với layer Những tập hợp slice thu gọn danh sách Web Content Palette, giúp bạn tìm nhanh xác dãy phức tạp hiệu ứng Rollover slice Trong Web Content Palette, chắn trạng thái Normal chọn chọn bây giờ, sau chọn New Slice Set phía Palette Nhấp đúp vào tên tập hợp slice vừa tạo để chọn gõ chữ Info Slice để đặt lại tên cho Nhân Enter Cứ giữ nguyên tập hợp slice Info Slices chọn Web Content Palette Trong Layer Palette, làm việc sau: • Nhấp vào mũi tên tập hợp layer Info Panelss để mở rộng www.vietphotoshop.com - Dịch Bá tước Monte Cristo 18 Chương 17: Tạo hiệu ứng Rollover cho trang web • Photoshop CS Chọn layer Exhibit_info Thêm slice tập hợp Slice Bạn ln ln kéo slice ngồi vào tập hợp slice Web Content Palette, bạn kéo layer vào tập hợp layer Nhưng bạn có chuẩn bị từ trước, bạn tránh nhiều rắc cách tự động đặt slice vào tập hợp slice cụ thể bạn tạo chúng Phần hướng dẫn bạn cách làm Trong Layer Palette, nhấn vào biểu tượng mắt layer Exhibit_info tập hợp layer Info Panelss hình "Spanish Master" hiển thị cửa sổ hình ảnh Layer hiển thị cửa sổ hình ảnh Chọn Select > Load Selection > Exhibit_info Transparency Một vùng kiến bò xuất cho bạn biết layer chọn Chọn Select > Create Slice From Selection Một đường viền xuất layer Slice, vùng lựa chọn nhìn thấy Chọn Select > Deselect nhấn Ctrl-D Trong Web Content Palette, mở rộng tập hợp Info Slice cách nhấn vào mũi tên cạch tên Bởi Info Slice chọn Web Content Palette bạn tạo slice, slice xuất tập hợp slice www.vietphotoshop.com - Dịch Bá tước Monte Cristo 19 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Nhấp đúp vào slice (17Start_11) gõ Exhibit Info để đặt tên cho Nhấn Enter Sửa chữa sai sót tạo hiệu ứng Rollover Khi tạo hiệu ứng Rollover đòi hỏi tập trung cao đến chi tiết mơi trường có nhiều lựa chọn Một lỗi thường gặp bạn thay đổi trạng thái Normal không dự định Trong Web Content Palette, chọn Normal Bạn thấy phần trước có vấn đề layer Exhibit_info hiển thị trạng thái Normal Nhưng sửa chữa dễ dàng Với trạng thái Normal chọn, nhấn vào biểu tượng mắt Layer Palette layer Exhibit Info để ẩn Kiểm tra xem sửa lỗi chua cách chọn trạng thái Rollover slice (bạn phải mở rộng tập hợp slice để thấy hiệu ứng Rollover ẩn), nhấn vào Normal lần Bây hình bạn xuất cách rồi! Tạo slice từ layer ẩn Trong phần này, bạn tạo slice từ layer Member_info, trình làm giống bạn làm với slice Exhibits Info - cách sau hiệu cách trước Bạn tạo slice từ layer ẩn Bởi khơng thay đổi cách nhìn trạng thái Normal, bạn không cần phải quay lại để sửa chữa trạng thái Normal bạn hoàn thành Trong Layer Palette, chọn layer Member_Info đừng nhấp vào mắt để hiển thị www.vietphotoshop.com - Dịch Bá tước Monte Cristo 20 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Trong Web Content Palette, chọn tập hợp slice Info Slices Chọn Select > Load Selection > Member_info Transparency Ở trung tâm cửa sổ hình ảnh, đường viền kiến bị xuất layer ẩn cho bạn biết layer đươc chọn, cho dù bạn không thấy thay đổi hình hết Chọn Select > Create Slice From Selection Chọn Select > Deselect nhấn Ctrl-D để bỏ chọn www.vietphotoshop.com - Dịch Bá tước Monte Cristo 21 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Trong Web Content Palette, nhấp đúp vào slice tên (17Start_14) gõ chữ Member Info để đặt lại tên cho slice Nhấn Enter Nhấp chọn Normal Bởi bạn khơng cho hiển thị layer Member_Info trình làm, trạng thái Normal nhìn cũ tất nhiên bạn khơng cần phải chỉnh sửa bạn phải làm với slice Exhibit Info Tạo hiệu ứng Rollover từ xa Hiệu ứng Rollover từ xa kết hợp slice với slice khác, tác động người dùng vào slice gây thay đổi hình ảnh hiệu ứng slice Để cho dễ hiểu đặt tên cho slice bị thay đổi slice Đích slice gây thay đổi dựa tác động người dùng slice Nguồn Với hiệu ứng Rollover từ xa, bạn đơn giản thay đổi ẩn layer Mà bạn phải tạo mối liên hệ hai slice Trong Photoshop CS tính Pickwick với khả dễ sử dụng trực quan giúp bạn dễ dàng làm việc Trong Web Content Palette, làm điều sau: • Trong bảng Menu Slices, mở rộng tập hợp slice Exhibits Members để bạn nhìn thấy trạng thái Rollover Over Click đặt nằm slice • Chọn trạng thái Rollover Click cho slice Exhibit Trong Layer Palette, chọn layer Exhibit_info nhấp vào vng có biểu tượng mắt để hiển thị layer www.vietphotoshop.com - Dịch Bá tước Monte Cristo 22 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Trong Web Content Palette, kéo Pickwick từ trạng thái Rollover Click slice Exhibits sang layer Exhibit_info cửa sổ hình, đường biên slice sáng với màu tối www.vietphotoshop.com - Dịch Bá tước Monte Cristo 23 Chương 17: Tạo hiệu ứng Rollover cho trang web Khi bạn thả chuột, ý đến thẻ tên Photoshop CS tập hợp biểu tượng cho slice Exhibit cửa sổ hình ảnh Web Content Palette Bạn để ý tới thẻ tên xuất gần slice Exhibit Info Chú ý: Thay kéo Pickwick từ slice đích cửa sổ hình ảnh, bạn kéo tới slice Web Content Palette Cả hai cách có kết giống Chọn Normal Web Content Palette, nhấp vào mũi tên slice Exhibits để đóng trạng thái Rollover nằm lại Chọn trạng thái Rollover Click cho slice Member Lập lại bước 2-4 sử dụng slice Membes Info đích cho hiệu ứng Rollover từ xa Cho hiển thị layer kéo Pickwick từ trạng thái Click từ hình "Members Discount" Và nhớ chọn trạng thái Normal sau 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 slice khác sau bạn định không muốn sử dụng hiệu ứng Rollover từ xa nữa, bạn loại bỏ Bạn chọn trạng thái Rollover mà muốn chỉnh sửa, ví dụ trạng thái Over Down nằm layer Nguồn Sau tìm thẻ tên Remote biểu tượng mắt tên slice nguồn Web Content Palette Nhấp vào thẻ tên Remote để xố nó, sau xố bạn xố mối liên hệ 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 khơng hồn tồn phải lý để bạn kiểm tra hiệu ứng Rollover Đôi kết khơng đốn trước xảy địi hỏi bạn phải có thêm chỉnh sửa hợp lý, đặc biệt bạn làm quen với hiệu ứng Rollover Trong Web Content Palette, mở rộng slice Exhibts Members Menu Button tập hợp Slice để bạn nhìn thấy trạng thái nằm Mỗi lần chọn trạng thái Rollover Click để ý xem kết cửa sổ hình ảnh Đặc biệt ý đến hình hiệu ứng bán suốt, vùng quầng tối xuất xunh quanh layer Info Panels Nhấp vào vùng trống Layer Palette để bỏ chọn tất layer chọn Normal Web Content Palette Trong hộp cơng cụ, chọn nút Toggle Slices Visibility sau chọn nút Preview Document www.vietphotoshop.com - Dịch Bá tước Monte Cristo 24 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Di chuyển trỏ qua cửa sổ hình ảnh, nhấn vào nút Exhibit Để chuột nằm nút navi lúc để bạn xem thơng tin xuất Và bạn thấy vùng quầng tối xung quanh khơng xuất Nhấp vào nút Members để thấy hiệu ứng tương tự xảy Nhấp vào nút Toggle Slices Visibility Preview Document để thoát khỏi trạng thái xem trước www.vietphotoshop.com - Dịch 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 slice để sửa chữa lỗi ẩn Để sửa chữa cách xuất navi để người dùng thấy Layer Style áp dụng, bạn phải cho hiển thị layer Sau bạn sửa chữa xong, bạn cần phải hiển thị lại để bạn khơng thay đổi đến trạng thái Normal Trong Web Content Palette, chọn trạng thái Click cho slice Exhibits Trong hộp công cụ, chọn công cụ Slice Select nhấp vào slice Exhibit Info cửa sổ hình ảnh (Nếu bạn ẩn đường dẫn hiển thị cách vào View > Show > Guides để hiển thị nó) Chọn điểm neo phần slice sau kéo lên phía hồn tồn che phủ vùng bóng đen www.vietphotoshop.com - Dịch Bá tước Monte Cristo 26 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Chú ý: Bạn kéo đường biên slice đến đường dẫn nằm ngang bên bên tâm khoảng 1/3, vùng khơng có slice hết Điều khơng thực cần thiết, giảm số lượng slice bắt buộc để bao phủ hồn tồn hình xuất HTML Nếu vùng mà có User Slice khác, bạn chồng đường viền chúng lên tạo kết không mong muốn Chọn điểm neo khác phía đối diện kéo xuống để che phủ hồn tồn bóng đen phía Trong Web Content Palette, chọn trạng thái Click slice Members Sau đó, lập lại bước 2-4 để slice bao phủ hồn tồn vùng bóng đen xunh quanh Trong Web Content Palette, chọn Normal Trong Layer Palette, nhấp vào điểm để bỏ chọn layer Sử dụng nút Toggle Slices Visibility Preview Document để xem trước hình kiểm tra xem việc thay đổi độ lớn slice có sửa chữa vấn đề hay không Khi làm xong chọn hai nút lần để thoát khỏi chế độ xem trước www.vietphotoshop.com - Dịch Bá tước Monte Cristo 27 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Tạo trang web từ hình ảnh ImageReady làm tất cơng việc khó khăn cho bạn chuyển hình ảnh thành trang web bao gồm file HTML thư mục chứa hình ảnh Nhưng có bước quan trọng mà bạn phải làm trang web nhận dạng hiệu ứng Rollover hiển thị cách web Bạn làm bước Nhấp vào mũi tên để mở Web Content Palette, chọn Find All Remote Slices Một thông báo xuất báo cho bạn biết thay đổi mà ImageReady tạo cho tài liệu Nhấn OK Chọn File > Save Optimized As 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 lưu trực tiếp vào thư mục Lesson17 Cứ giữ nguyên tên file thiết lập 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 Nhấn Save www.vietphotoshop.com - Dịch Bá tước Monte Cristo 28 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Cuối bạn tìm đến file 17Start.html mà bạn vừa tạo xem với trình duyệt Vậy kết thúc chương 17 đây! Nhưng cịn nhiều điều mà bạn phải học với Rollover, bảng cách sử dụng chúng cho thật hiểu tren trang web Rollover tạo slice mà bạn cịn tạo Rollover cho đồ ảnh, đồ ảnh bạn tạo chương 15 "Thêm đường liên kết vào hình" www.vietphotoshop.com - Dịch 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 Kể tên hai trạng thái Rollover phổ biến tác động chuột liên quan đến Có trạng thái Rollover slice có? Bạn tạo hiệu ứng Rollover cho image map (bản đồ ảnh) thay slice khơng? Rollover từ xa gì? Rollover thay đổi trạng thái hình thơi hay cịn khác nữa? Đáp án Normal Over hai trạng thái phổ biến hiệu ứng Rollover Normal trạng thái mặc định trang web, mở chưa có tác động người dùng Over trạng thái người dùng di chuột qua vùng xác định trước không nhấp chuột hay tác động khác ngồi di chuột Có tất trạng thái Rollover bạn tạo ImageReady, bạn tính Custom None Tuy nhiên, bạn tạo trạng thái riêng cho bạn nên hiệu ứng Rollover khơng có giới hạn Một slice có nhiều trạng thái Rollover, hiệu ứng Ví dụ, slice khơng thể có hai trạng thái Over khác nhau, trạng thái Over tạo nhiều thay đổi cho Slice nhiều slice Đích Bởi trạng thái khác có liên quan đến tác động khác chuột, chẳng có lý chúng khơng thể tồn Có! xiềng ln! bạn tạo thay đổi ẩn layer, vị trí layer hiệu ứng bạn làm với Slice Rollover từ xa người dùng tác động chuột đến slice tạo thay đổi slice khác Nó có đơi gọi hiệu ứng Rollover thứ cấp Bạn sử dụng hiệu ứng Rollover để làm nhiều việc khác, chạy chương trình hình động © www.vietphotoshop.com - Dịch Bá tước Monte Cristo |Trang chủ| |Photoshop CS| |Chương 18| www.vietphotoshop.com - Dịch Bá tước Monte Cristo 30 ... tước Monte Cristo 11 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Nhấn Normal Tạo hiệu ứng Rollover cách ẩn layer Có lẽ cách thông dụng để tạo hiệu ứng động cho hình luân phiên... sách hiệu ứng Effects www.vietphotoshop.com - Dịch Bá tước Monte Cristo 17 Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Hoàn thiện đặt lại tên cho nút xem trước hiệu ứng Rollover. .. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS xuất hình ảnh trỏ di qua slice Một vài tác động chuột khác tạo hiệu ứng Rollover Bạn định trạng thái Rollover cho slice, để có nhiều hiệu