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

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

1. Tạo hiệu ứng Rollover cho trang web
2. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Nội dung của trang này thuộc bản quyền của © Bá tước Monte Cristo - Final Fantasy và www.vietphotoshop.com. Những bài viết trong này có thể được in ra để dùng với mục đích cá nhân và phi thương mại. Nếu bạn muốn phát hành lại trong trang web của bạn làm ơn liên lạc với tôi hoặc ít nhất phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy và www.vietphotoshop.com Hiệu ứng Rollover làm thay đổi một vùng của tấm hình trên trang web thành một hình khác, màu khác hoặc dạng khác khi người dùng di chuột qua vùng đó. Hiệu ứng Rollover làm cho trang web của bạn thân thiện hơn và do đó giúp bạn đạt được mục tiêu cho trang web của mình bằng cách thêm những hiệu ứng sinh động vào đường liên kết hoặc những thành phần khác của trang. Trong chương này bạn sẽ học được nhưng điều sau: • Chia một Slice thành nhiều slice nhỏ hơn và bằng nhau • Nhóm các Slice được chọn vào một bảng • Áp dụng hiệu ứng Wrap Text cho một layer chữ. • Xác định trạng thái Rollover cho các layer, layer style và layer chữ được Wrap. • Tạo ra các trạng thái Over, Down và Selected • Xác định những sự kết hợp khác nhau giữa những layer được ẩn và hiện của từng trại thái Rollover. • Tạo ra trang HTML chứa những hình được Slice trong một bảng. Chương này sẽ kéo dài khoảng 60 phút và phải được làm trong Adobe ImageReady. Về hiệu ứng Rollover. Rollover là một dạng hiệu ứng khá phổ biến hiện nay, nó có thể thay đổi giao diện của một trang web www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 1
3. 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 một điểm được xác định trước trên trang web, thì điểm đó sẽ thay đổi sang một trạng thái hoàn toàn khác. Thường thì hiệu ứng này ám chỉ rằng vùng được thay đổi đó là một dạng lệnh, khi nhấp chuột vào đó sẽ có một điều gì xảy ra kế tiếp như là mở một trang mới, vào một form v.v Hiện nay có một vài hiệu ứng Rollover phổ biến, như là khi bạn di chuột qua một nút nào đó nó sẽ thay đổi hoặc khi bạn nhấn vào nút đó, nút đó sẽ thay đổi hình dạng của nó. Hiệu ứng R hoặc các trạng thái biểu thị những điều kiện khác nhau trong Layer Palette. Những điều kiện này có thể bao hàm sự ẩn hiện của một layer, vị trí layer, Layer Style và một vài định dạng khác. Bài học này sẽ hướng dẫn cho bạn thấy, R có thể giúp bạn như thế nào. Chú ý: Để theo được bài học này bạn phải có kiến thức cơ bản về Slice mà bạn học được từ chương 15 hoặc do bạn đã biết cách sử dụng Slice theo kinh nghiệm của mình. Bắt đầu Bạn sẽ bắt đầu bài học bằng cách xem một ví dụ của một trang HTML mà bạn sẽ tạo dựa trên một hình .psd. Một vài vùng của tấm hình phản ứng lại với những di chuyển chuột của bạn. Viídụ một vài vùng của tấm hình thay đổi giao diện khi bạn chỉ con trỏ qua nó hoặc khi bạn nhấn vào những điểm đó. 1. Tìm đến thư mục Lesson 17 và nhấp đúp vào file 17End.html để mở nó ra trong trình duyệt web của bạn. 2. Di chuyển con trỏ qua trang web đó, đặc biệt là qua vùng bên trái. Chú ý quan sát: • Những thay đổi của tấm hình • Thay đổi hình con trỏ (từ mũi tên thành hình bàn tay) 3. Nhấn vào từng nut trên menu ở phía bên tay trái của tấm hình, chú ý đến những phản ứng xảy ra trên trang web. Chú ý: Trang này chỉ mang ý nghĩa tượng trưng do vậy không có đường link thật sự, nên khi bạn nhấn vào các nút sẽ không mở ra trang khác. Tuy nhiên, một vài nút trong đó có thể tạo ra những thay đổi trên trang web. Để biết thêm thông tin về Slice và liên kết đến một địa chỉ URL cho một trang web, đọc thêm chương 15. 4. Đóng trình duyệt lại khi bạn xem xong trang web. Tạo trạng thái Rollover Trạng thái Rollover được đặt tên theo sự kiện, ví dụ như là khi bạn di hoặc nhấn chuột vào một vùng www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 2
4. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS của một tấm hình, nó sẽ tạo ra những thay đổi trên tấm hình hoặc một phần của tấm hình. Tất cả những trạng thái Rollover của ImageReady được miêu tả ở phần dưới đây "Các trạng thái Rollover trong ImageReady". Dạng R từ xa (remote R) sẽ tạo ra thay đổi ở một vùng khác khi một vùng nào đó bị kích hoạt. Ví dụ như khi bạn di chuột qua một nút nào đó trên trang web, và ở trên banner có chữ hiện ra. Nói nôm na, nó tạo ra thay đổi không trên bản thân nút đó mà trên một đối tượng khác. Chỉ có User Slice mới có trạng thái Rollover. Tuy nhiên, bạn có thể chọn Slices > Promote để biến một slice tự động thành một User Slice, và sau đó thêm hiệu ứng R vào slice đó. Các trạng thái Rollover trong ImageReady ImageReady tự động chỉ định một trong những trạng thái R sau đây và một slice bạn tạo: Over Activates sẽ làm thay đổi hình khi người dùng di chuột qua một slice hoặc một bản đồ ảnh (image map) nhưng chưa nhấn chuột. Down Activates làm thay đổi hình ảnh khi người dùng nhấn chuột trên một nút của một slice hoặc một vùng bản đồ ảnh. Trạng thái này xuất hiện ngay sau khi người dùng nhấn vào nút đó. Click Activates làm thay đổi hình ảnh khi người dùng nhấp chuột vào một slice hoặc một vùng bản đồ ảnh. Trạng thái sẽ xuất hiện cho đến khi người dùng di chuột ra khỏi vùng R. Chú ý: những trình duyệt web khác nhau, hoặc phiên bản khác nhau, có thể xử lý chuột trái và nhấp đúp khác nhau. Custom Activate làm thay đổi tên cụ thể của một tấm hình khi mà những tác động của người dùng được định dạng trong đoạn mã JavaScript kèm tho. (Bạn phải tạo ra đoạn mã JavaScript và thêm nó vào trang HTML của bạn để tạo ra hiệu ứng Custome Rollover) None Preserve giữ lại trạng thái hiện tại của hình để dùng sau này, nhưng lại không cung cấp kết quả đầu ra khi tài liệu được lưu lại dưới dạng trang web. Selected Activates kích hoạt trạng thái R khi người dùng nhấp chuột lên slice hoặc vùng bản đồ ảnh. Trạng thái sẽ xuất hiện cho đến khi người dùng kích hoạt một trạng thái R khác và một trạng thái R có thể xuất hiện trong khi trạng thái Selected đang được kích hoạt. Out Activate kích hoạt một tấm hình khi người dùng di chuột ra khỏi một slice hoặc một vùng bản đồ ảnh. (đây chính là trạng thái Normal State) Up Activate kích hoạt thay đổi một tấm hình khi người dùng thả chuột trên một slice hoặc một vùng bản đồ ảnh. Thiết lập không gian làm việc cho bài học này Nếu bạn đã hoàn thành những chương khác trong cuốn sách này, thì bạn hẳn đã có nhiều kinh nghiệm trong việc thiết lập không gian làm việc. ImageReady có một vài môi trường làm việc được thiết lập sẵn www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 3
5. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS mà bạn có thể sử dụng chúng cho từng công việc cụ thể của mình, và chắc chắn bạn có thể dùng một trong số đó để bắt đầu bài học này. Nhưng bạn cũng có thể tạo ra những môi trường làm việc phù hợp với bạn và lưu lại dưới dạng "môi trường làm việc tuỳ biến", và đó cũng là những gì chúng ta chuẩn bị làm. 1. Khởi động ImageReady. Nếu những Palette không nằm ở những vị trí như mặc định, chọn Window > Workspace > Default Palette Location. 2. Kéo nhóm pallete Web Content sang phía bên trái của Info Palette, ở trên cùng của vùng làm việc. 3. Đóng Info Palette và Color Palette lại. Hoặc bạn có thể đóng chúng bằng cách chọn Info và Color trong menu View. 4. Kéo nhóm Layer Palette lên phía trên bên phải của vùng làm việc đặt nó ngay bên cạnh nhóm palette Web Content (nơi mà bạn vừa đóng Info Palette lại) 5. Trong nhóm Slice Palette, chọn thẻ Talbe để mang nó ra phía trước và sau đó nhấp vào mũi tên hai đầu ở thẻ đó để mở rộng toàn bộ Palette. Sau đó kéo xuống phía dưới, bên phải của vùng làm việc. 6. Kéo góc phía dưới bên phải của Web Content và Layer Palette để tận dụng hết những khoảng trống nằm dưới nó. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 4
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 3. Nhấn vào nút Preview Document lần nữa để thoát ra. 4. Chọn File > Save. Về các biểu tượng slice Những biểu tượng của slice hoặc tên hiệu của nó xuất hiện trong Web Content Palette và trong cửa sổ hình ảnh có thể là những dấu hiệu nhắc nhỏ rất có ích nếu bạn hiểu được chúng. Một slice có thể có bao nhiêu tên hiệu cũng được nếu phù hợp. Những tên hiệu sau đây xuất hiện dưới mỗi một trạng thái. • Số lượng các slice (Số được đếm theo thứ tự từ trái sang và từ trên xuống). • Trạng thái Rollover được kích hoạt đang nằm trong trong slice này. • Slice có chứa hình • Slice không chứa hình • Slice dựa trên layer (nó được tạo tạo từ layer) • Slice bao gồm ít nhất một hiệu ứng Rollover. • Slice là một tập hợp bảng. • Slice gây ra thay đổi ở một slice khác • Slice là đích thay đổi của một slice khác. Ngược lại của cái trên là nguồn, thì cái này là đối tượng bị thay đổi. • Slice được liên kết với một slice khác (cho mục đích tối ưu hoá) Tạo một trạng thái Rollover bằng cách sử dụng Layer Style Tất cả những hiệu ứng Rollover bạn tạo cho đến bây giờ đều là Over State, nó có ảnh hưởng đến sự www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 15
17. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS xuất hiện của hình ảnh khi con trỏ di qua một slice. Một vài sự tác động của chuột khác cũng có thể tạo ra hiệu ứng Rollover. Bạn có thể chỉ định hơn một trạng thái Rollover cho một slice, để có nhiều hiệu ứng xảy ra trên màn hình phụ thuộc vào những gì người dùng sẽ làm, như là nhấp chuột, chọn một slice cụ thể. 1. 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 trong tập hợp đó, để bạn có thể nhìn thầy hiệu ứng nằm trong layer đó. 2. Trong Web Content Palette, chọn About slice trong bảng Menu Slices. 3. Chọn nút Create Rollover State ở phía dưới của palette. Một trạng thái Rollover mới có tên là Down được chọn. 4. Nhấp đúp vào trạng thái Rollover Down để mở hộp thoại Rollover State Options. 5. Chọn tuỳ chọn Click và sau đó nhấn Ok để đóng hộp thoại lại. 6. Trong Layer Palette, nhấp vào ô vuông có biểu tượng con mắt cho Effects nằm dưới layer chữ "About Moseo Arte". Một màu vàng nhạt sẽ xuất hiện bao quanh từ About Museo Arte trong hình. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 16
18. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 7. Nhấp vào trạng thái Normal ở trên cùng của Web Content Palette và sau đó đóng About Slice để ẩn những trạng thái Rollover đi. Sau đó, trong Layer Palette, đóng "About Museo Arte" layer để ẩn danh sách các hiệu ứng Effects. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 17
19. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS Hoàn thiện và đặt lại tên cho nút và xem trước hiệu ứng Rollover Bạn luôn luôn nên xem trước hiệu ứng Rollover trong chế độ Preview để kiểm tra trước khi tiếp tục. 1. Sử dụng những kỹ năng đã học trong phần trên "tạo một trạng thái Rollover khác bằng cách sử dụng Layer Style", tạo trạng thái Click Rollover cho 4 slice còn lại trong bảng Menu Slice. Khi hoàn thành, chữ Tour sẽ toả sáng khi người dùng nhấp chuột vào nút Tour, nút Exhibit cũng vậy v.v 2. 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 một khoảng trống trong Layer Palette để br chọn toàn bộ layer. 3. Chọn Normal trong Web Content Palette. 4. Trong hộp công cụ, chọn nút Toggle Slices Visibility và sau đó là nút Preview Document . 5. Di chuyển con trỏ từ từ qua cửa sổ hình ảnh, tập trung chú ý vào những thay đổi về màu sắc hình nền của trạng thái Over. 6. Nhấp vào từng nút một và chú ý hiệu ứng toả sáng vẫn được nhìn thấy trên chữ cho đến khi bạn di chuyển con chuột ra ngoài vùng nút. Bạn cũng nên chú ý rằng sau khi nhấp chuột, màu nền sáng hơn sẽ biến mất, để lại một nút với tông màu tối hơn. 7. Nhấp vào nút Toggle Slices Visibility và 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 có thể tạo ra một tập hợp cho slice, như là bạn làm với layer. Những tập hợp slice sẽ thu gọn danh sách trong Web Content Palette, giúp bạn tìm nhanh hơn và chính xác hơn trong một dãy phức tạp các hiệu ứng Rollover và slice. 1. Trong Web Content Palette, chắc chắn rằng trạng thái Normal đang được chọn hoặc chọn nó bây giờ, sau đó chọn New Slice Set ở phía dưới của Palette. 2. Nhấp đúp vào tên của tập hợp slice vừa tạo để chọn nó và gõ chữ Info Slice để đặt lại tên cho nó. Nhân Enter. Cứ giữ nguyên tập hợp slice Info Slices được chọn trong Web Content Palette. 3. Trong Layer Palette, làm những việc sau: • Nhấp vào mũi tên trong tập hợp layer Info Panelss để mở rộng nó www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 18
20. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS • Chọn layer Exhibit_info. Thêm một slice mới và một tập hợp Slice Bạn luôn luôn có thể kéo các slice ra ngoài hoặc vào trong một tập hợp slice trong Web Content Palette, như là bạn kéo layer ra hoặc vào tập hợp layer vậy. Nhưng nếu bạn đã có chuẩn bị từ trước, bạn có thể tránh được nhiều rắc rồi bằng cách tự động đặt slice mới vào một tập hợp slice cụ thể nào đó khi bạn tạo chúng. Phần này sẽ hướng dẫn bạn cách làm. 1. Trong Layer Palette, nhấn vào biểu tượng con mắt của layer Exhibit_info trong tập hợp layer Info Panelss do đó hình "Spanish Master" sẽ được hiển thị trong cửa sổ hình ảnh. Layer được hiển thị trong cửa sổ hình ảnh. 2. Chọn Select > Load Selection > Exhibit_info Transparency. Một vùng kiến bò sẽ xuất hiện chỉ cho bạn biết layer đang được chọn. 3. Chọn Select > Create Slice From Selection Một đường viền xuất hiện chỉ ra rằng layer đó bây giờ cũng là một Slice, nhưng vùng lựa chọn cũng vẫn được nhìn thấy. 4. Chọn Select > Deselect hoặc nhấn Ctrl-D. 5. Trong Web Content Palette, mở rộng tập hợp Info Slice bằng cách nhấn vào mũi tên cạch tên của nó. Bởi vì Info Slice đã được chọn trong Web Content Palette khi bạn tạo slice, cho nên slice mới sẽ xuất hiện trong tập hợp slice. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 19
21. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 6. Nhấp đúp vào slice mới (17Start_11) và gõ Exhibit Info để đặt tên cho nó. Nhấn Enter. Sửa chữa sai sót khi tạo hiệu ứng Rollover Khi tạo ra các hiệu ứng Rollover đòi hỏi sự tập trung cao đến các chi tiết trong một môi trường có thể có rất nhiều những lựa chọn. Một lỗi thường gặp nhất là khi bạn thay đổi trạng thái Normal không như dự định. 1. Trong Web Content Palette, chọn Normal Bạn sẽ thấy rằng ở phần trước có một vấn đề là layer Exhibit_info bây giờ đang được hiển thị ở trạng thái Normal. Nhưng cái này có thể sửa chữa rất dễ dàng. 2. Với trạng thái Normal vẫn đang được chọn, nhấn vào biểu tượng con mắt trong Layer Palette của layer Exhibit Info để ẩn nó đi. 3. Kiểm tra xem nó đã sửa được lỗi ở trên chua bằng cách chọn một trạng thái Rollover trong bất cứ slice nào (bạn sẽ phải mở rộng tập hợp slice ra để thấy những hiệu ứng Rollover ẩn), và nhấn vào Normal lần nữa. Bây giờ hình của bạn đã xuất hiện đúng cách rồi! Tạo một slice từ một layer ẩn Trong phần này, bạn sẽ tạo một slice từ layer Member_info, quá trình làm giống như khi bạn làm với slice Exhibits Info - nhưng cách sau đây sẽ hiệu quả hơn cách trước. Bạn có thể tạo một slice từ một layer ẩn. Bởi vì nó sẽ không thay đổi cách nhìn trong trạng thái Normal, do vậy bạn không cần phải quay lại để sửa chữa trạng thái Normal khi bạn hoàn thành. 1. Trong Layer Palette, chọn layer Member_Info nhưng đừng nhấp vào con mắt để hiển thị nó. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 20
22. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 2. Trong Web Content Palette, chọn tập hợp slice Info Slices 3. Chọn Select > Load Selection > Member_info Transparency Ở trung tâm của cửa sổ hình ảnh, đường viền kiến bò xuất ở layer ẩn cho bạn biết rằng layer đó đang đươc chọn, cho dù bạn không thấy thay đổi nào ở hình hết. 4. Chọn Select > Create Slice From Selection. 5. Chọn Select > Deselect hoặc nhấn Ctrl-D để bỏ chọn. www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo 21
23. Chương 17: Tạo hiệu ứng Rollover cho trang web Photoshop CS 6. Trong Web Content Palette, nhấp đúp vào slice tên là (17Start_14) và gõ chữ Member Info để đặt lại tên cho slice. Nhấn Enter. 7. Nhấp chọn Normal. Bởi vì bạn không cho hiển thị layer Member_Info trong quá trình làm, cho nên trạng thái Normal 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
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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