Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
7. Chọn Window > Workspace > Save Workspace và đặt tên nó là 17_Rollover trong hộp thoại Save
Workspace.
Thiết lập tuỳ biến vùng làm việc cho bài học
Một công đoạn chuẩn bị quan trong khác nữa là bạn phải thiết lập đúng cách vùng làm việc của
ImageReady. Một vài trong số đó không thể thiết lập trừ khi tài liệu phải được mở ra, cho nên bạn sẽ
bắt đầu với việc mở tài liệu trước.
1. Chọn File > Open
2. Trong hộp thoại Open bạn tìm đến thư mục Lesson17
3. Chọn file 17Start.psd và nhấp Open.
4. Nếu cần, định lại kích thước cửa sổ anh và phong to hoặc thu nhỏ để bạn có thể nhìn thấy toàn bộ
tấm hình.
5. Mở View Menu và menu phụ của nó và chắc chắn những lệnh sau được chọn hoặc chọn chúng nếu
chưa:
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
5
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
• Extras
• Snap
• Guides và Slices trong menu phụ Snap To
• Guides và Slices trong menu phụ Show
Tạo hiệu Rollover với chữ được uốn cong
Một điều khá thú vị mà ImageReady có thể làm với chữ là khả năng uốn cong chữ. Ví dụ, bạn có thể
làm cho chữ nhìn giống như nó được tạo ra bởi hiệu ứng không gian 3 chiều.
Bạn sẽ kết hợp chữ được uốn cong đó với một trạng thái Rollover. Và ở kết quả, chữ được uốn cong
đó sẽ xuất hiện trong tài liệu HTML khi người dùng tiến hành một thao tác nào đó.
1. Chọn công cụ Slice
và kéo một đường hình vuông bao quanh chữ "Museo Arte" sử dụng đường
guide làm chỉ dẫn để cho đường biên của Slice dính vào nó.
2. Trong Web Content Palette, nhấp đúp vào tên được tự động đặt của User Slice (17Start_02) để
chọn nó. Gõ chữ Museo Arte để đặt lại tên cho nó và nhấn Enter.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
6
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
3. Chọn nút Creat Rollover State . Một trạng thái Over sẽ xuất hiện bên dưới Slice Museo Arte trong
Web Content Palette.
4. Trong Layer Palette, chọn layer Museo Arte.
5. Trong hộp công cụ, chọn Type Tool để hiển thị tuỳ chọn text trên thành tuỳ biến công cụ và chọn nút
Create Warrped Text
.
Chú ý: Bạn không cần phải sử dụng công cụ Type hoặc chọn chữ. Hiệu ứng uốn cong luôn luôn áp
dụng cho toàn bộ layer chữ chứ không cho từng từ hoặc chữ đơn lẻ.
6. Chọn Fisheye trong menu xổ ra Style và kéo thanh trượt Bend đến 30%. Để hai thanh trượt còn lại là
Vertical và Horizontal Distortion là 0%, nhấn OK. Bạn sẽ thấy chữ Museo Arte được uốn cong đi.
7. Trong Web Content Palette, nhấn Normal để bỏ chọn trạng thái R hiển thị trên cửa sổ hình ảnh.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
7
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
Chú ý: Uốn công chữ không giống như viết chữ theo path - là một tính năng của Photoshop. Để biết
thêm thông tin về viết chữ theo quỹ đạo định sẵn xem Photoshop HeLayer Palette. Tính năng này
không có trong ImageReady.
Xem trước hiệu ứng Rollover
Mặc dù kết quả cuối cùng của bài học này là một trang web, bạn có thể kiểm tra những tương tác của
Slice trong ImageReady. Bạn sẽ thoát ra khỏi chế độ làm việc và vào chế độ xem trước. Trong khi bạn
xem trước, một vài palette, như là Layer palette bị ẩn bởi vì bạn không thể chọn layer hoặc tạo ra
những chỉnh sửa trong những Palette này khi còn đang trong chế độ xem trước.
1. Trong Layer Palette, nhấn vào một khoảng trống để bỏ chọn layer Meseo Art.
2. Trong hộp công cụ, đầu tiên chọn nút Toggle Slices Visibility hoặc nhấn nút Q để ẩn đường biên của
slice và loại bỏ những đường "ngoằn nghèo" của tấm hình.
3. Chọn nút Preview Document
hoặc nhấn Y để kích hoạt chế độ Preview.
Chú ý: Những đường guide vẫn đường hiển thị trong cửa sổ hình ảnh. Bạn có thể ẩn hoặc hiện nó
bằng cách chọn View > Show > Guides, hoặc với tổ hợp phím Ctrl+;. Nếu bạn muốn ẩn chúng, thì bạn
phải hiện thị chúng sau khi bạn đã xem xong bởi vì bạn sẽ cần nó trong phần tiếp theo.
4. Di chuyển con trỏ qua chữ Museo Arte trong cửa sổ hình ảnh, và sau đó di chuyển nó ra ngoài để
bạn có thể thấy được hiệu ứng R của chữ bị uốn cong. Bạn hãy chú ý đến hiệu ứng mà vị trí của con
trỏ có trong vùng được tô sáng ở Web Content Palette. Khi bạn di chuyển con trỏ qua và ra ngoài slice
Museo Arte của cửa sổ hình, lựa chọn Slice trong Web Conntent Palette thay đổi từ Normal thành
Meseo Arte Over state.
5. Nhấp vào nút Preview Document and Toggle Slices Visibility lần nữa để bỏ chọn chúng, hoặc nhấn
Q và Y nếu bạn muốn sử dụng phím tắt.
Đường biên của slice và những đường ngoằn nghèo xuất hiện lại trên cửa sổ hình ảnh.
6. Trong Web Content Palette, chọn Normal và nhấp vào mũi tên trên slice Museo Arte để ẩn danh
sách R.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
8
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
Bạn hãy cố gằng tổ chức Web Content và layer Palette càng gọn gàng càng tốt khi bạn làm việc
với các hiệu ứng R. Bằng cách đó bạn sẽ mắc ít lỗi hơn, bạn không phải kéo lên kéo xuống nhiều lần
và bạn có thể tìm và tập trung vào những phần cần nhiều sự chú ý hơn. Trong bài học này, chúng tôi
sẽ thường xuyên nhắc bạn đóng những thành phần được nhóm với nhau khi bạn hoàn thành một tác
vụ với chúng, cho dù nó không ảnh hưởng gì đến kết quả cuối cùng của bài học.
Trong bài học này, bạn sẽ không cần thêm đường liên kết vào cho slice Museo Arte bởi vì việc đó bạn
có thể tự làm sau này, nếu bạn muốn. Hơn nữa, cách làm này đã đươc chỉ ra rất rõ ràng trong chương
15 "Tạo đường liên kết trong một tấm hình"
Tạo và chia một slice để xây dựng một bảng
Slice sau này sẽ trở thành cột của bảng HTML. Bạn có thể sử dụng tính năng cải tiến của bảng và một
Table Palette mới có trong ImageReady CS để tạo bẳng nằm trong bảng HTML của trang web. Nó sẽ
xuất ra những bảng có code HTML gọn hơn và dễ quản lý hơn và tất nhiên sẽ dễ dàng hơn cho bạn khi
làm việc với slice.
1. Chọn công cụ Slice
trong hộp công cụ.
2. Kéo để tạo một slice mới, bắt đầu từ vùng giao nhau của hai đường guide dọc và ngang ở ngay bên
trên chữ "About Museo Arte" và kết thúc ở đường guide bên dưới chữ "Contact" và gặp đường biên
bên trái.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
9
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
3. Chọn View > Show > Guides để loại bỏ những điểm đánh dấu và đường guide.
4. Chọn Slices > Divide Slice để mở hộp thoại Divide Slice.
5. Dưới Divide Slice Horizontally Into gõ 5 trong lựa chọn Slices Down, Evenly Spaced. Nhấn OK.
6. Với năm slice vừa vẫn được chọn, nhấn vào nút Group Slices Into Table ở dưới cùng của Web
Content Palette.
Bạn hãy chú ý đến 5 slice bây giờ đã được gộp lại dưới một bảng mới tên là Talbe 02 trong Web
Content Palette và do đó màu của những đường biên đã thay đổi trong cửa sổ hình ảnh, chỉ ra rằng nó
là một bảng. Slice Museo Arte vẫn ở ngoài bảng.
Đặt lại tên và tái sắp xếp slice
Như bạn đã có thể đoan ra được, bạn có thể thay đổi thứ tự của slice trong Web Content Palette giống
như khi bạn thay đổi thứ tự của các layer trong Layer Palette vậy. Ở đây bao gồm việc tái sắp xếp slice
trong một bảng đã được định dạng, như là bảng bạn vừa tạo cho Mune của tấm hình.
1. Trong Web Content Palette, nhấp đúp vào tên của Table_02 để chọn nó và gõ chữ Menu Slice để
đặt lại tên cho nó. Nhấn Enter.
2. Chọn cột đầu tiên (slice) được gộp dưới bảng Menu Slice, và chú ý rằng một vùng lựa chọn có màu
sắc khác xuất hiện xung quanh nút Contact
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
10
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
3. Nhấp đúp vào tên của slice được chọn, gõ Contact để đặt lại tên cho nó. Nhấn Enter.
4. Lập lại các bước trên để đặt lại tên cho 4 slice còn lại trong bảng, gõ chữ Member, Exhibits, Tour
hoặc About cho từng slice một.
5. Chọn slice About trong bảng và kéo nó lên trên cùng của bảng nằm dưới Nested Slice, bạn phải cẩn
thận để giữ cho slice đó được chọn, nếu không bạn sẽ xoá slice đó khỏi bảng.
6. Chọn và kéo một slice khác để thứ tự của nó trong Web Content Palette phù hợp với thứ tự bạn thấy
trong cửa sổ hình ảnh và theo thứ tự sau: About, Tour, Exhibits, Members, và Contact.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
11
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
7. Nhấn Normal.
Tạo hiệu ứng Rollover bằng cách ẩn hiện layer
Có lẽ cách thông dụng nhất để tạo hiệu ứng động cho một hình là luân phiên ẩn hoặc hiện những layer
khác nhau.
Trong phần thiết kế này, phiên bản gốc của hình chính được bao phủ bởi một màu đặc thay vì phiên
bản được bao phủ bởi một màu xanh đậm như bạn thấy trong trạng thái Normal. Một vài phần của
phiên bản gốc được copy sang tài liệu này, nằm trên layer Background của phiên bản màu xanh.
Những phần của phiên bản gốc kết hợp hoàn hảo với tấm hình màu xanh, cho nên hiển thịn nó để làm
sáng vùng của tấm hình bằng cách loại bỏ vùng màu xanh.
1. Trong Web Content Palette, chọn Slice About, và nhấn vào nút Create Rollover State ở dưới cùng
của Palette để tạo một trạng thái Over mới cho slice đó.
2. Trong Layer palette, mở tập hợp layer Menu Color Bkgds, và nhấp vào biểu tượng con mắt
trên
layer Cell 1.
Hình nền đằng sau chữ Museo Arte bây giờ nhìn sáng sủa hơn một chút.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
12
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
3. Trong Web Content Palette, nhấp Normal và nhấp vào mũi tên bên cạnh Slice About để đóng nội
dung của nó lại.
Biểu tượng con mắt biến mất từ layer Cell 1, và nút About trong cửa sổ hình ảnh trở lại trạng thái một
màu xanh đơn sắc.
4. Lập lại bước 1-2, tạo trạng thái R cho những slice còn lại:
• Chọn Slice Tour, tạo một R mới, và hiển thị layer Cell 2.
• Chọn Slice Exhibits, tạo một R mới, và hiển thị layer Cell 3
• Chọn Slice Member, tạo một R mới, và hiển thị layer Cell 4
• Chọn Slice Contact, tạo một R mới, và hiển thị layer Cell 5
5. Ẩn tất cả những trạng thái R của slice bằng cách nhấn vào mũi tên ở từng slice.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
13
Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS
6. Trong Layer palette, đóng tập hợp layer Menu Colored Bkgds.
Xem trước hiệu ứng Rollover
Bây giờ bạn sẽ kiểm tra hiệu ứng Rollover bằng cách xem trước hình ảnh.
1. Nhấp vào một vùng trống bất kỳ trong Layer Palette để chắc chắn rằng bạn không chọn layer nào.
Sau đó chọn nút Preview Document
trong hộp công cụ.
Chú ý: Đừng chọn nút Toggle Slices Visibility trong lần này, do vậy những đường biên của slice và
những ô vuông con vẫn được hiển thị khi bạn xem trước.
2. Di con trỏ từ từ lên và xuống những nút khác nhau trong bảng và chú ý những điểm sau:
• Sự thay đổi ở màu hình nền khi con trỏ di chuyêể qua những nút khác nhau
• Thẻ Active Slice xuất hiện trong tập hợp biểu tượng ở cửa sổ hình ảnh và danh sách các slice
trong Web Content Palette, và cả những ô vuông gần với biểu tượng con mắt.
www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
14
Không có nhận xét nào:
Đăng nhận xét