- Trong Rollovers, 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[r]
(1)65 BÀI 5
TẠO HIỆU ỨNG ROLLOVER CHO TRANG WEB
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 thân thiện giúp cho trang web có thêm hiệu ứng sinh động vào đường liên kết thành phần khác
1 Thiết lập không gian làm việc
Sử dụng ImageReady với vài môi trường làm việc thiết lập sẵn sử dụng chúng cho cơng việc cụ thể, Nhưng tạo môi trường làm việc phù hợp dạng "môi trường làm việc tuỳ biến"
- Khởi động ImageReady Nếu Palette khơng nằm vị trí mặc định, chọn Window > Workspace > Reset Palette Location
hình 5.1 Khởi tạo mơi trường làm việc
- Kéo nhóm pallete sang phía bên trái Info Palette, vùng làm việc
- Đóng Info Palette Color Palette lại
- 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 để hiển thị 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
(2)66
Hình 5.2 Ghi lại trình thực
2 Thiết lập tuỳ biến vùng làm việc cho học
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ắ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ổ ảnh phóng to thu nhỏ để 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:
3 Tạo hiệu Rollover với chữ uốn cong
Trong ImageReady làm với chữ khả uốn cong chữ Ví dụ: làm cho chữ nhìn giống tạo hiệu ứng không gian chiều
- Chọn cơng cụ Slice kéo đường hình vuông bao quanh chữ "Photoshop" sử dụng đường guide làm dẫn đường biên Slice dính vào
(3)
67
- Trong Rollovers, nhấp đúp vào tên tự động đặt User Slice
(17Start_02) để chọn Gõ chữ Photoshop để đặt lại tên cho nhấn Enter
- Chọn nút Creat Rollover State Một trạng thái Over xuất bên Slice Photoshop Rollover
- Trong Layer Palette, chọn layer Photoshop
- 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ọn Fisheye menu xổ Style kéo trượt Bend đến 30% Để hai trượt lại Vertical Horizontal Distortion 0%, nhấn OK Kết thấy chữ Photoshop uốn cong
- Trong Rollover, nhấn Normal để bỏ chọn trạng thái R hiển thị cửa sổ hình ảnh
4 Xem trước hiệu ứng Rollover
Để kiểm tra tương tác Slice ImageReady, thoát khỏi chế độ làm việc vào chế độ xem trước Trong xem trước, vài palette, Layer palette 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 Photoshop
- 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 - Di chuyển trỏ qua chữ Photoshop cửa sổ hình ảnh, sau di chuyển ngồi để thấy hiệu ứng R chữ bị uốn cong ý đến hiệu ứng mà vị trí trỏ có vùng tô sáng Rollover Khi di chuyển trỏ qua slice Photoshop cửa sổ hình, lựa chọn Slice Rollover thay đổi từ Normal thành Photoshop 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 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 Rollover, chọn Normal nhấp vào mũi tên slice Photoshop để ẩn danh sách
5 Tạo chia slice để xây dựng bảng
(4)68
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 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ữ "Photoshop" kết thúc đường guide bên chữ "Contact" gặp đường biên bên trái
- 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
6 Đặt lại tên tái xếp slice
Thay đổi thứ tự slice Rollover 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 vừa tạo cho Mune hình
- Trong Rollover, 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
- Nhấp đúp vào tên slice chọn, gõ Contact để đặt lại tên cho Nhấn Enter
- Lập lại bước để đặt lại tên cho slice lại bảng, gõ chữ Member, Exhibits, Tour About cho slice
- Chọn slice About bảng kéo lên bảng nằm Nested Slice, cẩn thận để giữ cho slice chọn, khơng bạn xố slice khỏi bảng
- Chọn kéo slice khác để thứ tự Web Content Palette phù hợp với thứ tự cửa sổ hình ảnh theo thứ tự sau: About, Tour, Exhibits, Members, Contact
- Nhấn Normal
7 Tạo hiệu ứng Rollover cách ẩn layer
Để tạo hiệu ứng động cho hình luân phiên ẩn layer khác
(5)69
- Trong Layer palette, mở tập hợp layer Menu Color Bkgds, nhấp vào biểu tượng mắt layer Cell Hình đằng sau chữ Photoshop nhìn sáng sủa chút
- Trong Web Content Palette, nhấp Normal nhấp vào mũi tên bên cạnh Slice About để đóng nội dung lại Biểu tượng mắt biến từ layer Cell 1, nút About cửa sổ hình ảnh trở lại trạng thái
màu xanh đơn sắc
- Lập lại bước 1-2, tạo trạng thái R cho slice lại: Chọn Slice Tour, tạo R mới, hiển thị layer Cell Chọn Slice Exhibits, tạo R mới, hiển thị layer Cell Chọn Slice Member, tạo R mới, hiển thị layer Cell Chọn Slice Contact, tạo R mới, hiển thị layer Cell
- Ẩn tất trạng thái R slice cách nhấn vào mũi tên slice
Hình 5.4 ẩn trạng thái Slide
- Trong Layer palette, đóng tập hợp layer Menu Colored Bkgds
8 Xem trước hiệu ứng Rollover
Kiểm tra hiệu ứng Rollover cách xem trước hình ảnh
- Nhấp vào vùng trống Layer Palette để chắn khơng chọn layer Sau chọn nút Preview Document hộp công cụ
(6)70
Sự thay đổi màu hình trỏ di chuyển qua nút khác Thẻ Active Slice xuất tập hợp biểu tượng cửa sổ hình ảnh danh sách slice Rollovers, ô vuông gần với biểu tượng mắt
- Nhấn vào nút Preview Document lần để thoát - Chọn File > Save
9 Về biểu tượng slice
Những biểu tượng slice tên hiệu xuất Web Content Palette cửa sổ hình ảnh dấu hiệu nhắc nhỏ có ích bạn hiểu chúng Một slice có tên hiệu phù hợp Những tên hiệu sau xuất trạng thái
- Số lượng slice (Số đếm theo thứ tự từ trái sang từ xuống) - Trạng thái Rollover kích hoạt nằm trong slice
- Slice có chứa hình - Slice khơng chứa hình
- Slice dựa layer (nó tạo tạo từ layer) - Slice bao gồm hiệu ứng Rollover - Slice tập hợp bảng
- Slice gây thay đổi slice khác
- Slice đích thay đổi slice khác Ngược lại nguồn, đối tượng bị thay đổi
- Slice liên kết với slice khác (cho mục đích tối ưu hố)
10 Tạo trạng thái Rollover cách sử dụng Layer Style
Tất hiệu ứng Rollover tạo Over State, có ảnh hưởng đến 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 đị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 Photoshop" nằm tập hợp đó, để bạn nhìn thấy hiệu ứng nằm layer
- Trong Rollover, 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
(7)71
Hình 5.5 Bảng lựa chọn cửa sổ Rollover State Options
- Trong Layer Palette, nhấp vào vng có biểu tượng mắt cho Effects nằm layer chữ "About Photoshop " Một màu vàng nhạt xuất bao quanh từ About Photoshop hình
- Nhấp vào trạng thái Normal Rollover sau đóng About Slice để ẩn trạng thái Rollover Sau đó, Layer Palette, đóng "About photoshop" layer để ẩn danh sách hiệu ứng Effects
11 Hoàn thiện đặt lại tên cho nút xem trước hiệu ứng Rollover
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 Rollovers
- 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ữ di chuyển chuột vùng nút
- 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
12 Bước chuẩn bị để làm việc với nhiều hiệu ứng Rollover
(8)72
Rollovers, giúp tìm nhanh xác dãy phức tạp hiệu ứng Rollover slice
- Trong Rollover, 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 Rollovers
- 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 Chọn layer Exhibit_info
13 Thêm slice tập hợp Slice
Có thể kéo slice vào tập hợp slice Rollovers, kéo layer vào tập hợp layer Tự động đặt slice vào tập hợp slice cụ thể tạo chúng sau:
- 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 Rollovers, 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 Rollovers bạn tạo slice, slice xuất tập hợp slice
- Nhấp đúp vào slice (17Start_11) gõ Exhibit Info để đặt tên cho Nhấn Enter
14 Sửa chữa sai sót tạo hiệu ứng Rollover
Khi tạo hiệu ứng Rollovers đò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 thay đổi trạng thái Normal không dự định
- Trong Rollovers, chọn Normal, 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
(9)73
- 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
15 Tạo slice từ layer ẩn
Tạo slice từ layer ẩn Bởi khơng thay đổi cách nhìn trạng thái Normal, không cần phải quay lại để sửa chữa trạng thái Normal hoàn thành
- Trong Layer Palette, chọn layer Member_Info đừng nhấp vào mắt để hiển thị
- 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
- Trong Rollovers, 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
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 phải làm với slice Exhibit Info
16 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
Với hiệu ứng Rollover từ xa, đơn giản thay đổi ẩn layer Mà phải tạo mối liên hệ hai slice
- Trong Rollovers, thực theo yêu cầu sau:
Trong bảng Menu Slices, mở rộng tập hợp slice Exhibits Members để 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
(10)74
Hình 5.6 ẩn/hiện layer thực
- Trong Rollovers, 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 Khi bạn thả chuột, ý đến thẻ tên tập hợp biểu tượng cho slice Exhibit cửa sổ hình ảnh Rollovers
- Chọn Normal Rollovers, 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 không muốn sửdụng hiệu ứng Rollover từ xa nữa, loại bỏ chọn trạng thái Rollover muốn chỉnh sửa, ví dụ trạng thái Over Down nằm layer Nguồn Sau tìm tên Remote biểu tượng mắt tên slice nguồn Rollovers Nhấp vàthẻ tên Remote để xố nó, sau xố mối liên hệ hiệu ứng Rollover từ xa
17 Xem trước hiệu ứng Rollover để tìm kiếm sai sót
Những kết khơng đốn trước xảy địi hỏi phải có thêm chỉnh sửa hợp lý, đặc biệt làm quen với hiệu ứng Rollover Vậy cần xem trước hiệu ứng để tìm kiếm sai sót để sửa chữa trước đưa
- Trong Rollover, mở rộng slice Exhibts Members Menu Button tập hợp Slice để nhìn thấy trạng thái nằm