Chương 15: Thêm các Slice tương tác và Rollovers
 

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.bantayden.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.bantayden.com

 Các Slice là các phần chia của một vùng bức ảnh mà bạn có thể xác định bằng cách sử dụng Adobe Photoshop hoặc ImageReady. Bạn cũng có thể làm sống động hơn các Slice của bạn, kết nối chúng đến các địa chỉ URL và sử dụng chúng cho các nút Rollover. Một ứng dụng khác của sử dụng Slice là tối ưu hoá chúng một cách riêng lẻ trong các định dạng hình ảnh khác cho Web site để tối đa các hiệu ứng cho hình ảnh của Web site của bạn trong khi thời gian tải về là nhỏ nhất.

  

Trong Chương này, bạn sẽ tìm hiểu về:

·         Tạo các Slice ảnh bằng các phương pháp khác nhau.

·         Tối ưu hoá các slice ảnh riêng rẽ sử dụng các tuỳ chọn riêng biệt và các định dạng file

·         Tạo các slice “không hình ảnh” cho mục đích chứa văn bản và HTML.

·         Tạo nút Rollover

·         Ứng dụng dạng chữ biến dạng đối với Layer văn bản

·         Tạo Rollover trạng thái trên, dưới và lựa chọn cho các slice

·         Chỉ định sự kết hợp khác nhau của các layer ẩn và trong suốt như các điều kiện chỉ định của các trạng thái rollover khác nhau.

·         Tạo một trang HTML chứa đựng hình ảnh đã phân cắt trong một bảng.

 

Bạn sẽ mất khoảng 90 phút để hoàn thành chương này. Chương này được biên soạn cho Adobe Photoshop và ImageReady. Một số phần trong chương này bạn phải thực hiện trong ImageReady.

Nếu cần thiết, hãy xoá bỏ đi thu mục bài học trước trong máy tính của bạn và copy thu mục Lesson15 thay vào đó. Vì khi bạn thực hiện chương này, bạn sẽ ghi chồng lên file mở đầu. Nếu muốn khôi phục file này, hãy copy chúng từ Học Adobe Photoshop trong CD kèm theo.

Chú ý: Người sử dụng Windows cần giải nén bài học này trước khi sử dụng. Để hiểu rõ hơn, hãy xem phần “Sao chép các bài học” trên trang 4.

 

Bắt đầu

Trước khi bắt đầu bài học này, hãy khôi phục các tuỳ chọn ứng dụng mặc định cho Adobe Photoshop và Adobe ImageReady. Xem “Phục hồi các thông số mặc định” trên trang 5.

Bạn sẽ bắt đầu bài học này bằng cách xem một ví dụ của một biểu ngữ (banner) HTML đã hoàn chỉnh mà bạn sẽ tạo ra. Đồ họa của biểu ngữ này phản ứng với các thao tác của bạn khi sử dụng chuột. Ví dụ như bức ảnh sẽ thay đổi hình thức khi con trỏ chuột di chuyển qua một số vùng trên bức ảnh hoặc khi bạn click vào các vùng đó.

  1. Khởi động một trình duyệt, và mở  file kết thúc Banner.html từ thư mục Lessons/Lesson15/15End/Architech Pages.

File này chứa đựng một bảng HTML được liên kết đến một số hình ảnh khác mà tất cả chúng được tạo ra từ các slice của Photoshop và ImageReady.

  1. Di chuyển con trỏ chuột qua các nút “designs”, “structures”, “art” và “contact” trong banner.

Chú ý về các hình đồ hoạ nhỏ xuất hiện bên trái của các nút khi bạn di chuyển con trỏ chuột qua 3 nút đầu tiên. Cũng chú ý như thế về sự thay đổi của từ Architech khi bạn di chuyển con trỏ chuột qua nút cuối cùng.

  1. Giữ chuột và drag con trỏ qua ba nút đầu tiên, hãy để ý xem từ Architech thay đổi nhu thế nào trong lần này. Nhả chuột.

  2. Di chuyển con trỏ chuột qua vòng tròn màu xanh lớn gần rung tâm của bức ảnh và hãy để con trỏ chuột ở khu vực này cho đến khi bạn nhìn thấy một hộp văn bản mở ra với một vài thông tin bổ sung. Sau đó hãy click vào vòng tròn xanh để đến trang Team.

  3. Trên trang Team, hãy thủ cuộn con trỏ chuột qua 3 nút khác nhau và để ý về sự thay đổi. Hãy thủ click vào mỗi nút và sau đó là click vào nút Team. Chú ý về sự thay đổi.

Nếu bạn muốn quay trở lại trang banner, hãy dùng nút Back trên trình duyệt.

  1. Bạn đã xem xong file này, hãy đóng nó và thoát khỏi trình duyệt.

 

Thế nào là Slice

Slice là các vùng trong một bức ảnh mà bạn xác định trên cơ sở các lớp, hướng dẫn hay các vùng chọn chính xác trong bức ảnh, hoặc bằng cách dùng công cụ Slice. Khi bạn xác định các Slice trong một bức ảnh, Photoshop hoặc ImageReady sẽ tạo một bảng HTML hoặc các tờ mẫu xếp tầng để chứa và canh lề cho các slice. Nếu bạn muốn, bạn có thể tạo một file HTML chứa bức ảnh đã slice theo dạng bảng hoặc dạng các tờ mẫu xếp chồng.

Bạn cũng có thể tối ưu hoá các Slice như các hình ảnh cho các trang Web riêng biệt, thêm HTML hay văn bản đến các slice và liên kết các slice đến các địa chỉ URL. Trong ImageReady, bạn có thể làm sinh động các slice và tạo rollover với chúng.

Trong chương này, bạn sẽ khám phá về các cách khau nhau để tạo slice của một bức ảnh trong Photoshop và ImageReady, tối ưu hoá các slice và tạo bốn nút rollover cho banner. Bạn cũng sẽ tìm hiểu về bằng cách nào để làm sinh động các slice, bạn có thể xem thêm trong chương 16, “Tạo các hình ảnh động cho Web site”.

 

Phân chia một bức ảnh trong Photoshop

Adobe Photoshop cho phép bạn xác định các slice sử dụng công cụ Slice hoặc biến đổi các lớp thành slice. Bạn sẽ đặt tên cho các Slice và liên kết chúng đến các địa chỉ Url sau đó sẽ tối ưu hoá chúng. Sau nữa, bạn sẽ tiếp tục phân chia hình ảnh của banner trong ImageReady và tạo rollover cho các nút slice.

Thiết kế các trang Web với Photoshop và ImageReady

Khi bạn thiết kế các trang Web sử dụng Adobe Photoshop và ImageReady, hãy hình dung về các công cụ và các tính năng mà bạn có thể dùng trong mỗi ứng dụng.

·          Photoshop cung cấp các công cụ cho phép bạn tạo và thao tác trên các bức ảnh tĩnh dùng cho các trang Web. Bạn có thể chia một bức ảnh thành các slice, bổ sung thêm các liên kết và văn bản dạng HTML, tối ưu hoá các slice và lưu hình ảnh như một trang Web.

·          ImageReady cung cấp cho bạn nhiều công cụ tương tự cho việc chỉnh sửa ảnh như Photoshop. Thêm vào đó, ImageReady cũng có các công cụ và các Palette cho các thao tác nâng cao với các trang Web và tạo các hình ảnh động cho Web site như các ảnh động và rollover. 

Thử nghiệm với các Slice trong Photoshop

Trong phần thực hành này, bạn sẽ học không chỉ một số cách để bạn có thể tạo Slice mà bạn còn học về các cách khác nhau giữa slice người dùng (user slices) và các slice tự động (auto slices). Slice người dùng và Slice tự động có công dụng khác nhau, đây là lý do quan trọng để hiểu biết về các nét độc đáo riêng của chúng.

·         User Slice là những vùng mà người sử dụng chỉ định như các Slice

·         Auto Slice là các phần chia hình chữ nhật của phần còn lại của bức ảnh - tất cả các phần mà không thuộc một user slice. Photoshop và ImageReady tạo ra các slice này cho bạn.

  1. Khởi động Adobe Photoshop

Nếu có một chú ý xuất hiện hỏi bạn có muốn tuỳ chỉnh các tuỳ chọn màu sắc, hãy click No

  1. Chọn File > New, và click OK chấp nhận các tuỳ chọn mặc định.

  2. Chọn View > Show > Slices để đánh dấu kiểm tra về lệnh Slices

  3. Trong hộp công cụ, chọn công cụ Slice (), và hãy drag một hình chữ nhật nhỏ ở bất kỳ đâu trong của sổ hiển thị hình ảnh. Bạn vừa tạo ra một User slice.

Để ý rằng hình chữ nhật được chọn (có khung nổi bật và hiện rõ). Ngoài ra, bạn hãy chú ý rằng còn có nhiều slice khác mà đã được xác định bởi các nhãn màu khác nhau. Có các slice khác là auto slice. Mỗi slice đã được đánh số.

  1. Tạo một user slice khác bằng cách drag công cụ Slice trong một vùng khác của bức ảnh hiển thị.

Slice được đánh số liên tục, di chuyển từ đỉnh đến phần giữa và từ trái sang phải qua bức ảnh. Khi bạn chỉ định một user slice mới, tất cả các slice trong bức ảnh được đánh số lại.

  1. Trong hộp công cụ, chọn công cụ Slice Select () ẩn dưới công cụ Slice, và hãy thử theo các bước sau:

·         Chọn một trong số các user slice vừa tạo. Drag nó đến một vị trí khác, sau đó drag một trong số các điểm neo để đặt lại kích thước cho slice.

·         Chọn một auto slice, sau đó hãy thử drag nó hoặc đặt lại kích thước cho nó.

Mặc dù bạn có thể chọn cả hai loại user slice và auto slice, nhưng bạn chỉ có thể drag và định lại kích thước đối với user slice. Auto slice không có sự lựa chọn cho các thao tác trên.

  1. Chọn một trong số các slice lớn hơn cả (bạn có thể chọn hoặc auto slice hoặc user slice), sau đó sử dụng thanh công cụ tuỳ chọn và thủ làm theo các thao tác sau:

·         Click vào nút Hide Auto Slice, sau đó click nó lại lần nữa (lúc này nó sẽ là nút Show Auto Slices).

 

·         Click nút Slice Options và xem xét các tuỳ chọn có thể trong hộp thoại Slice Options. Click Cancel để đóng hộp thoại này. Bạn sẽ thao tác với nó nhiều hơn một cách nhanh chóng.

·         Click vào nút Divide Slice, sau đó hãy chắc chắn rằng nút Preview được chọn trong hộp thoại và bạn hãy xem slice được chọn trong cửa sổ hiển thị. Sau đó, trong hộp thoại này, bạn hãy chọn hộp kiểm tra Divide Horizontally Into và nhập vào một số lớn hơn một cho số khoảng trống bằng nhau giữa các slice mà bạn muốn. Để ý kết quả. Lặp lại với tuỳ chọn Divide Vertically Into. Khi bạn đã thử xong, hãy đóng hộp thoại này.

Chú ý: Trong ImageReady, chọn Slices > Divide Slice để thực hiện quá trình này.

  1. Chọn File > Close và không lưu các thay đổi.

Các loại Slice

Các slice bạn tạo sử dụng công cụ slice được gọi là các Slice người sử dụng (User slice); các slice bạn tạo tưg một lớp được gọi là Slice lớp cơ bản (Layer-based slices). Khi bạn tạo một User slice mới hay một Layer-based slice mới, các Slice tự động (Auto Slice)  bổ sung được sinh ra để chú thích cho các vùng còn lại của bức ảnh. Nói một cách khác, các Auto slicesẽ lấp đầy các chỗ trống trong bức ảnh mà các chõ trống này không được chỉ định bởi User slice hoặc Layer-based slice. Auto slice được tạo thành bất cứ lúc nào bạn thêm hay sửa chữa User slice hay Layer-based slice.

User slice, Layer-based slice và Auto slice nhìn cũng khác nhau – User slice và Layer-based slice được xác định bởi một đường rắn, trong khi Auto slice lại được xác định bởi một đường chấm. Thêm vào đó, mỗi loạ slice được hiển thị với một biểu tượng riêng. Bạn có thể chọn hiện hay ẩn Auto slice, và với tính năng này, việc quan sát các User slice và Layer-based slice dễ dàng hơn.

Một Subslice (Slice phụ) là một Auto slice mà Auto slice này được hình thành khi bạn tạo các slice trùng khớp. Subslice chỉ cho bạn bức ảnh sẽ được phân chia thế nào khi bạn lưu file đã tối ưu hoá. Mặc dù Subslice cũng được đánh số và hiển thị với một biểu tượng slice riêng nhưng bạn không thể chọn hay sửa chữa chúng một cách độc lập từ các slice cơ sở. Subslice được tạo thành vào bất cứ thời điểm nào bạn sắp xếp lại thứ tự các ngăn xếp của các slice. 

--- Nguồn: Hỗ trợ trực tuyến Adobe Photoshop 7.0 ---

Sử dụng công cụ Slice để tạo các slice

Bây giờ bạn đã biết sơ lược các slice sẽ hoạt động thế nào, bạn sẽ bắt đầu tạo các thay đổi cho một công việc đơn giản trong bài học này. Sử dụng công cụ Slice, bạn sẽ xác định bốn User slice cho các nút trong banner.

  1. Chọn File > Open, và mở file 15Start.psd từ thư mục Lessons/Lesson15/!5Start.

Nếu có một chú ý xuất hiện hỏi bạn có muốn nâng cấp các lớp văn bản cho dữ liệu đầu ra dạng vector cơ sở, hãy click Update.

File bài học của chúng ta bao gồm các đường định hướng nằm ngang và dọc màu xanh. Bạn sẽ dùng các đường định hướng và các lệnh căn lề khi tạo các vùng hình chữ nhật và vì vậy chúgn sẽ được canh lề một cách sít nhau.

  1. Chọn View > Show và hãy chọn cả hai tuỳ chọn Guides và Slices (kiểm tra xem đã chọn chưa)

  2. Chọn View > Snap To > Guides và hãy chọn View > Snap To > Slice

  3. Chọn công cụ Slice () và vẽ một vùng hình chữ nhật quanh vùng hình chữ nhật chứa từ designs.
     

 

  1. Ngay lúc này, vẽ các vùng slice bao quanh mỗi từ khác trong cùng một dòng: structures, art và contact để tạo các slice cho ba nút. Hãy chắc chắn rằng không có khoảng trống giữa các slice, vì các khoảng trống sẽ trở thành một Auto slice. (Nếu cần, bạn hãy dùng công cụ Zoom ( ) để xem chính xác hơn, sau đó hãy click đúp vào công cụ này để về lại kichs thước xem là 100%).

Bạn có thể thay đổi cách con trỏ chuột xuất hiện trên màn hình cho công cụ Slice bằng cách thay đổi các thông số của Photoshop. Để thay đổi con trỏ chuẩn của công cụ Slice () thành con trỏ chuột chính xác, bạn hãy chọn Edit > Preferences > Display & Cursors (Windows, Mac OS 9) hoặc Photoshop > Preferences > Display & Cursors (Mac OS 10) và click OK.

Nếu bạn cần chỉnh lại kích thước cho các Slice, chọn công cụ Slice Select () ẩn bên cạnh công cụ Slice và hãy drag ở góc nào đó của vùng được chọn.

  1. Chọn File > Save.

Các tuỳ chọn cho Slice trong Photoshop

Trước khi tối ưu hoá các slice như các bức ảnh cho trang Web, bạn có thể thiết lập các tuỳ chọn cho chúng, ví dụ như đặt tên cho chúng, gán các URL liên kết đến chúng. Các tên mà bạn đặt cho các slice sẽ quyết định các tên fle của các bức ảnh được tối ưu hoá.

Với 4 user slice mà bạn đã tạo ra trước đây, bạn sẽ đặt tên chúng và liên kết nó đến các trang web khác và chỉ thị các frame đích.

Chú ý: Việc thiết lập các tuỳ chọn cho một auto slice sẽ tự động biến nó thành một user slice.

  1. Chọn công cụ Slice Select () và dùng nó để chọn công cụ Designs slice.

  2. Trong thanh tuỳ chọn công cụ, click vào nút Slice Options
     

 
 

Theo mặc định, Photoshop sẽ đặt tên mỗi Slice dựa trên tên file và số slice, vì vậy tên file hiên tại là “15Start_03” và mô tả số slice là 3 trong file 15Start.psd.

  1. Trong hộp thoại Slice Options, nhập các thông tin như sau: trong ô Name, gõ Design_button; trong URL, gõ Designs.html; và trong Target, hãy gõ _blank. Sau đó click OK.

 Chú ý: Tuỳ chọn Target kiểm soát việc một file liên kết sẽ mở như thế nào khi bạn click vào kết nối, hoặc một file mở trong một cửa sổ trình duyệt mới hoặc thay thế file hiển thị hiện tại trong trình duyệt đang mở. Để tìm hiểu kỹ hơn, bạn hãy xem thêm Hỗ trợ trực tuyến Adobe Photoshop 7.0 hoặc tham khảo dạng HTML (hoặc bạn in hoặc bạn xem nó trên Internet)

  1. Nhập các thông tin khác 3 user slice khác mà bạn đã tạo:

·         Chọn Slice Structures và gõ Structures_button trong ô Name, Structures.html trong ô URL và _blank trong Target.

·         Chọn Slice Art và gõ Art_button trong ô Name, Art.html trong ô URL và _blank trong Target.

·         Chọn Slice Contacts và gõ Contacts_button trong ô Name, Contacts.html trong ô URL và _blank trong Target.

  1. Chọn File > Save

Trong hộp thoại Slice Options, bạn có thể nhập một đoạn văn bản ngắn mà dòng văn bản này sẽ xuất hiện trong vùng trạng thái của trình duyệt, bạn có thể nhập một đoạn văn bản thay thế để đoạn văn bản này xuất hiện tại vị trí của bức ảnh nếu chúng không thể hiện thị trong trình duyệt, bạn cũng có thể xác định kích thước để di chuyển hay định lại kích thước và bạn có thể thay đổi slcie thành một slice dạng Không hình ảnh mà slice này chỉ chứa HTML và van bản. Các tuỳ chọn đầu ra bổ sung cho việc thay đổi màu nền của slice cũng có thể thực hiện khi bạn mở hộp thoại Slice Options từ hộp thoại Save For Web hoặc hộp thoại Save Optimized.
Tối ưu hoá các slice trong Photoshop

Bạn có thể sử dụng slice trog Photoshop để tối ưu hoá các vùng riêng rẽ của bức ảnh, điều này thực sự hữu dụng khi một vài vùng của bức ảnh đòi hỏi độ phân giải cao hơn hoặc các tuỳ chọn cao hơn những vùng còn lại. Bạn có thể tối ưu hoá một hay nhiều slice bằng cách lựa chọn chúng trong hộp thoại Save For Web, lựa chọn các tuỳ chọn tối ưu hoá và lưu các file đã tối ưu hoặc chỉ riêng các slice đã chọn hay cho toàn bộ slice. Photoshop sẽ tạo một thư mục các hình ảnh có chứa các file đã tối ưu hoá.

Bây giờ, bạn sẽ tối ưu 4 slice mà bạn đã tạo:

  1. Chọn File > Save For Web.

  2. Trên phần bên trái của cửa sổ hộp thoại Save For Web, chọn công cụ Slice Select

  3. Trong phiên bản đã tối ưu hoá của bức ảnh, hãy giữ phím Shift và click để chọn cả 4 slice mà bạn đã tạo.

  4. Trong trình đơn mở ra, chọn GIF Web Palette, sau đó click Save

 

  1. Trong hộp thoại Save Optimized As, bạn hãy thực hiện thứ tự các thao tác sau:

·         Trên menu của trình đơn Format, chọn Images Only

·         Trên menu của trình đơn Slices, chọn Selêctd Slices

·         Chọn thư mục Lessons/Lesson15/15Start/Architech Pages ngay tại vị trí file đã lưu.

·         Để tên tuỳ chọn như vậy (15Start.gif) và click Save

 

Photoshop sẽ lưu bức ảnh đã được tối ưu hoá trong thư mục Images trong thư mục Architech Pages và sẽ sử dụng tên mà bạn xác định trong hộp thoại Slice Options cho tên file. Nếu có bất kỳ khoảng trống nào trong bảng, Photoshop sẽ tạo file Spacer.gif.

  1. Chọn File > Save

Phân chia hình ảnh trong ImageReady

Bạn đã biết một vài cách để tạo và thao tác với Slice trong Photoshop, tất cả những gì bạn đã làm cũng có thể được thực hiện trong ImageReady. Mặc dù một vài lựa chọn có thể xuất hiện ở vị trí khác nhau trong hai ứng dụng, nhưng bạn vẫn có thể sử dụng hoặc ImageReady hoặc Photoshop để tạo các Slice từ các đường định hướng hay các lớp và tối ưu hoá từng slice riêng rẽ. Trong phần này, bạn sẽ sử dụng ImageReady để chuyển đổi một lớp thành slice, tạo một slice Không hình ảnh (No Image slice) và tạo một slice có hình dáng chính xác từ một vùng chọn. Phần cuối của bài học, bạn sẽ thao tác với palette Rollovers - một tính năng độc đáo của ImageReady - để xây dựng các vùng linh động trong bức ảnh của bạn.

Bạn sẽ bắt đầu bằng việc chuyển nhanh từ Photoshop sang ImageReady. Khi bản sử dụng nút chuyển nhanh để chuyển đổi qua lại giữa Photoshop và ImageReady, các file đang kích hoạt hiên tại sẽ xuất hiện đồng thời trong cả hai ứng dụn.

  1. Trong hộp công cụ của Photoshop, hãy click vào nút Jump to ImageReady ()

File 15Start.psd được mở trong ImageReady.

  1. Chọn Window > Workspace > Reset Palette Locations để đảm bảo rằng các palette được đặt ở các vị trí mặc định.

Chú ý rằng các menu của ImageReady bao gồm một menu Slice và một bảng palette Slice xuất hiện trong nhóm palette Animations nằm ở vùng dưới bên trái của vùng làm việc. Đây là menu và nhóm palette xuất hiện chỉ trong ImageReady, không có trong Photoshop.

 

Tạo một vùng làm việc tuỳ chọn trong ImageReady

Để chuẩn bị cho các thao tác của bạn với các slice và Rollovers trong ImageReady, bạn sẽ tổ chức lại tối ưu hơn cho vùng làm việc của bạn bằng cách đóng các palette mà bạn sẽ không cần cho bài học này và định lại kích thước cũng như sắp xếp lại các palette mà bạn cần sử dụng. Bạn hãy bỏ đi các palette không cần thiết, và hãy tối đa hiệu quả của bạn với các loại thao tác khác nhau. Bạn sẽ lưu lại sự sắp xếp này làm một vùng làm việc tuỳ chọn và bạn có thể sử dụng lại lần sau.

Để có được hình dung về sự sắp xếp của một vùng làm việc mà bạn muốn, bạn có thể xem hình ảnh về bước cuối cùng của bài học này.

  1. Hãy phân tách các palette từ các nhóm palette như sau:

·         Drag palette Slice ra ngoài từ nhóm palette Animation


 

·         Drag palette Info ra ngoài từ nhóm palette Optimize

·         Drag palette Rollovers ra ngoài từ nhóm palette của nó (để palette Color Table và Layer Options cùng một nhóm)

·         Drag palette Layers ra khỏi nhóm palette của nó (để palette History và palette Actions cùng một nhóm)

  1. Bạn sẽ không sử dụng các palette sau trong bài học này, vì vậy hãy đóng chúng lại bằng cách click vào nút đóng trên thanh tiêu đề của palette: nhóm palette Animation, palette Info, nhóm palette Color, nhóm palette Color Table và nhóm palette History. Bây giờ chỉ 4 palette được mở là palette Slice, Rollovers, Layers và palette Optimize.

  2. Drag palette Optimize lên góc bên phải phía trên của vùng làm việc, sau đó mở menu của palette Optimize và chọn Show Options để mở rộng palette.

  3. Drag palette Layers xuống dưới palette Optimize một chút, sau đó drag gõ dưới bên phải của palette này xuống để làm tăng chiều cao cho palette này và thuận lợi hơn cho các vùng trống cần thiết.

  4. Drag palette Rollovers đến bên trái của palette Optimize. Drag một góc nào đó để palette có chiều cao lớn nhất có thể.

  5. Trên menu của palette Slice, chọn Show Options để mở rộng palette, sau đó bạn hãy drag nó đến góc dưới bên trái của vùng làm việc.

Vùng làm việc của bạn bây giờ bao gồm tất cả các palette mà bạn càn sử dụng trong bài học này, mỗi một palette đều có kcúh thước tốt nhất cho các thao tac của bạn.

 

 

 

  1. Chọn Window > Workspace > Save Workspace. Sau đó, trong hộp thoại Workspace, gõ Rollovers_15 và click OK.

Bạn có thể chọn lại vùng làm việc Rollovers_15 bằng cách chọn Window > Workspace và trên menu này, hãy chọn tên Rollovers_15 khi bạn cần, vì bạn có thể sẽ đóng ImageReady trước khi bạn kết thúc bài học này.

Chú ý: Vùng làm việc tuỳ chọn mà bạn tạo ra và lưu trog hoặc ImageReady hoặc Photoshop đều không mất khi bạn thiết lập lại các tuỳ chọn của nó về trạng thái mặc định.

 

Thử nghiệm các slice tạo ra từ các đường định hướng

Trong Photoshop và ImageReady, bạn có thể chuyển đổi tất cả các vùng giữa các đường định hướng thành các user slice. Khi bạn chuyển đổi các đường định hướng thành các slcie, bức ảnh của bạn được phân chia và bạn sẽ mất đi bất ký slice nào đã tồn tại trước đó.

  1. Chọn File > Save, sau đó chọn View > Show và hãy đảm bảo rằng các dấu chọn đã xuất hiện ở các lệnh Slices, Autoslices và Guides. Nếu không, hãy tích chọn vào các lệnh này.

  2. Trong hộp công cụ, chọn công cụ Slice Select, sau đó chọn Designs_button slice trong cửa sổ hiển thị hình ảnh.

Trong palette Slice, để ý rằng tên slice, URL, Target và Alt text mà bạn đã nhập trong Photoshop cũng xuất hiện trong palette này của ImageReady.

 

  1. Chọn Slices > Create Slice From Guiges.

 Đây là một phương pháp nhanh để tạo slice từ rất nhiều các vùng chữ nhật tạo ra bởi các đường định hướng.

  1. Dùng công cụ Slice select để chọn Designs_button slice một lần nữa.

Để ý rằng các tuỳ chọn trong palette Slice cho Designs_button slice đã thay đổi thành các tên mặc định dựa trên các tên file và số slice, bạn sẽ mất đi các tuỳ chọn mà bạn đã thiết lập trong Photoshop. Nếu đây là điều bạn không mong muốn, bán sẽ chuyển lại bằng lệnh Undo Create Slice From Guides cho thao tác này.

  1. Chọn Edit > Undo Create Slices From Guides

  2. Chọn View > Show > Guides để chọn lại lệnh Guides và ẩn đi các đường định hướng.

Trong Photoshop, bạn có thể thực hiện thao tác tương tự bằng cách chọn công cụ Slice () trong hộp công cụ và click vào nút Slices From Guides trên thanh tuỳ chọn của công cụ.

Tạo một slice trên cơ sở lớp (layer-based slice)

Một phương pháp khác để tạo các slice trong Photoshop và ImageReady là chuyển đổi các lớp thành slice. Một Layer-based slice bao gồm tất cả các điểm (pixel) dữ liệu trong lớp. Khi bạn chỉnh sửa lớp, di chuyển chúng hoặc hoặc áp dụng một hiệu ứng lớp trên đó, layer-based slice dẽ điều chỉnh để chứa các pixel mới. Để ngưng liên kết một Layer-based slice từ lớp của nó, bạn có thể chuyển đổi nó thành một user slice. Bạn sẽ tạo một slice dựa trên lớp Copyright Strip, sau đó sẽ áp dụng một hiệu ứng lớp lên lớp này, vì vậy mà bạn có thể xem slice điều chỉnh như thế nào đối với hiệu ứng mới.

  1. Trong palette Layers, mở rộng lớp Copyright Strip để thiết lập và chọn lớp Strip Background.

Lớp Strip Background chứa hình ảnh một con tàu màu trắng băng qua phần dưới của banner.

  1. Chọn Layer > New Layer Based Slice

ImageReady thay thế auto slice bởi một layer-based slice đối với lớp mới. Để ý về biểu tượng  trong góc bên trái phía trên chỉ ra rằng slice này là một layer-based slice.

 Chú ý: Bạn vẫn có thể ứng dụng các loại slice đối với lớp mà bạn tạo layer-based slice. Khoảng cách của các slice sẽ tăng lên một cách tự động để thích hợp với bất kỳ khoảng trống thêm vào nào đòi hỏi để hiển thị hiệu ứng.

  1. Chọn File > Save để lưu lại các tháo tác của bạn đã thực hiện trong ImageReady.
     

Tạo các slice Không hình ảnh (No Image slice)

Trong ImageReady và Photoshop, bạn có thể tạo No Image slice và thêm các văn bản hay mã nguồn HTML đến các slice này.

Thuận lợi đầu tiên của việc sử dụng các No Image Slice là áp dụng cho văn bản mà bạn có thể chỉnh sửa chúng bất kỳ trình soạn thảo HTML nào, bạn có thể chuyển đổi giữa Photoshop hoặc ImageReady để chỉnh sửa chúng. Nhưng điểm bất lợi là nếu văn bản bạn tạo ra quá lớn cho một slcie thì văn bản này sẽ bị ngắt thành bảng HTML và hình thành các đoạn trống không mong muốn.

Bây giờ, bạn sẽ chuyển đổi slice Copyright Strip thành No Image Slice và thêm văn bản vào đây.

  1. Hãy đảm bảo rằng Layer-based slice mà bạn đã tạo sử dụng cho các thông tin về bản quyền được chọn trong cửa sổ hiển thị hình ảnh.

  2. Trong palette Slice, chọn No Image slice từ menu của trình đơn Type mở ra.

  3. Nhập một vài thông tin về bản quyền cho banner của bạn trong ô Text (chúng tôi dùng ©2003 architech art and structure).

 Bạn có thể thêm ký tự bản quyền bằng cách ấn Alt + 0169 trên bàn phím (Windows) hoặc Option + G (Mac OS).

Vì bạn chọn No Image cho loại slice này nên lớp của văn bản giữ chỗ (“đặt thông tin bản quyền vào slice”) mà bạn làm trong ImageReady sẽ không xuất hiện trên trang Web. Văn bản mà bạn gõ sẽ xuất hiện trong trang Web; tuy nhiên, nó sẽ không xuất hiện trong hình ảnh của slice trong ImageReady hoặc Photoshop.

  1. Trong palette Layers, click vào mũi tên để thu nhỏ bớt lớp Copyright Strip.

  2. Chọn File > Save

 

Xem trước trong trình duyệt Web

Hãy đảm bảo rằng van bản mà bạn gõ sẽ khít trong các ô của bảng, bạn sẽ xem trước bức ảnh trong trình duyệt.

Chú ý: (Chỉ với Mac OS) Hãy chắc chắn rằng bạn có một trình duyệt bí danh Web trên Mac OS 10 để trình duyệt không mở trong chế độ gốc.

  1. Trong hộp công cụ, click Preview In Default Browser hoặc chọn một trình duyệt từ nút của menu trong tringh đơn mở ra.

Bức ảnh sẽ xuất hiện trong cửa sổ trình duyệt và nguồn HTML cho quá trình xem trước này cũng xuất hiện trong bảng bên dưới bức ảnh. Không ấn chuột mà hãy di chuyển con trỏ chuột qua các nút.

Chú ý: Để thêm trình duyệt của bạn đến nút Preview In Default Browser, hãy drag lối tắt (shortcut) của nó (Windows) hoặc drag bí danh (alias) của nó (Mac OS) vào trong thư mục Preview In đặt trong thư mục Helpers trong thư mục Photoshop 7.0

  1. Khi bạn đã xem xong dòng văn bản chứa thông tin bản quyền, bạn hãy thoát khỏi trình duyệt và quay trở lại ImageReady.

 

Tạo slice từ các vùng chọn

Trong ImageReady, cách dễ nhất để tạo một slice cho các thành phần đồ hoạ nhỏ hay khác thường được xác định là chọn một thành phần và sử dụng vùng chọn như làm cơ sở cho một slice. Đây cũng là phương pháp hữu dụng cho quá trinhg phân cắt các đối tượng mà chúng được xếp khít nhau. Đối với các thành phần mà chúgn có màu rõ ràng, Công cụ Magic Wand () có thể là một sự lụa chọn tốt để tạo nên vùng chọn ban đầu. Trong bài học này, bạn sẽ sử dụng các phím tắt từ bàn phím để chọn một thành phần đồ hoạ mà thành phần này nằm trên chính lớp của nó.

  1. Trong palette Layer, mở rộng thiết lập của lớp Logo

  2. Giữ Ctrl (Windows) hoặc Command (Mac OS) và chọn lớp Big Circle. Hình vòng tròng màu xanh bây giờ đã được chọn trong cửa sổ hiển thị của bức ảnh.

 3.       Chọn Select > Creat Slice From Selection

 Hãy để ý về các auto slice bổ sung được tạo ra xung quanh logo để hoàn chỉnh thành một bảng.

  1. Trong Palette Slice, hãy nhập các giá trị như sau: Trong ô name, gõ Logo; trong URL gõ Team.html và trong Alt, gõ Read about the team. Gõ _blank trong ô Target bằng cách chọn ô này từ menu của trình đơn Target mở ra.

 

  1. Trong hộp công cụ, hãy đảm bảo rằng công cụ slice hoặc Slice selection không được chọn hoặc chọn bất kỳ công cụ nào khác.

  2. Chọn Select > Deselect để bỏ đi các đường bao quanh vùng chọn từ Logo. Khung của vùng chọ slice đã được chọn.

Nếu công cụ slice hay slice select vẫn được chọn, thì lệnh Deselect Slices sẽ xuất hiện trên menu Select thay vì lệnh Deselect.

  1. Chọn File > Save

Bạn có thể chọn URLs mà bạn thực sự đã nhập trước đó từ menu phụ URL trong palette Slice.

 

Tối ưu hoá các Slice trong ImageReady

ImageReady sẽ ghi lại các tuỳ chọn tối ưu hoá riêng biệt cho tất cả các slice trong bức ảnh. Bạn có thể chỉ định các tuỳ chọn tối ưu hoá cho một slice bằng cách chọn nó và nhập các giá trị trong palette Optimize. Sau đó, bạn có thể lưu lại file hình ảnh đã được tối ưu hoá cho slice được chọn trong ImageReady, và bạn sẽ kết nối các slice lại với nhau để chia sẻ các tuỳ chọn tối ưu hoá.

 

Thiết lập các tuỳ chọn tối ưu hoá các các slice được chọn

Các slice sử dụng cho các tuỳ chọn tối ưu hoá của bức ảnh đầu vào cho đến khi bạn chọn chúng và chỉ định chúng với các tùy chọn mới.

  1. Trong hộp công cụ, chọn công cụ Silice Select, sau đó chọn auto slice số 02 trong bức ảnh.

 

  1. Click vào thanh 2-UP trong cửa sổ hiển thị bức ảnh gốc để có bức ảnh đã được tối ưu hoá.

  2. Hãy phóng to đến 200% từ menu Zoom Level trong góc dưới bên trái của cửa sổ hiển thị hình ảnh. Để ý về chất lượng của bức ảnh đã tối ưu hoá tại các tuỳ chọn mặc định (GIF Web Palette) của nó so với bức ảnh gốc.

  3. Trong palette Optimized, chọn GIF 32 Dithered từ menu Settings. Bây giờ chất lượng của slice được chọn đã tốt hơn tại tuỳ chọn mặc định GIF Web Palette.

 

       Tuỳ chọn GIF Palette Web     Tuỳ chọnGIF 32 Dithered

  1. Xem xét hình ảnh đã được tối ưu hoá tại kích thước thực của nó bằng cách chọn 100% từ menu Zoom Level. Bạn có thể click vào nút Toggle Slices Visibility trong hộp công cụ để ẩn đi số slice trong khi bạn xem bức ảnh đã tối ưu hoá.

  2. Trong bức ảnh, chọn một auto slice khác.

Trong palette Optimized, để ý rằng slice được chọn có cùng tuỳ chọn IF 32 Dithered. Đây là kết quả do tất cả các auto slice được liên kết với nhau và vì vậy, bất kỳ thông số tối ưu hoá nào mà bạn chọn đối với một slice cũng sẽ tự động áp dụng cho các slice khác.

  1. Chọn File > Save

Bạn sẽ lưu lại các slice được tối ưu hoá sau, sau khi bạn tạo vài Rollover. Để tìm hiểu thêm về các tuỳ chọn tối ưu hoá và các định dạng Web sẵn có cho các slice của bức ảnh, bạn hãy xem chương14, “Tối ưu hoá hình ảnh cho Web site và Bản đồ ảnh”.

Với ImageReady, bạn có thể kết nối các slice lại với nhau để chia sẻ cùng tuỳ chọn tối ưu hoá. Sau đó, trong cả ImageReady hay Photoshop, bạn có thể thay đổi các tuỳ chọn cho một slice được liên kết và các tuỳ chọn mới được ứng dụng ngay tức khắc đối với các tuỳ chọn đầu vào của các slice liên kết với slice đó. Các thiết lập liên kết được mã hoá bởi màu sắc để giúp cho việc xác định các slice tương ứng với một thiết lập.

Tạo Rollovers

Rollovers là hiệu ứng phổ biến trong các trang Web. Ví dụ, nhiều hoặc thậm chí hầu hết tính năng của các trang Web trong hiển thị chuyển đổi vài dạng khác nhau của một nút hoặc các điểm nóng khi bạn di chuyển chuột qua, thậm chí bạn không cần phải click chuột. Đó là một trạng thái Rollover điển hình.

Một trạng thái rollover được xác định bằng một sự kiện mà gây ra sự chuyển trạng thái biểu hiện, do một click chuột, nhấn chuột (không phải click chuột), hoặc di chuyển con trỏ chuột qua vùng của bứ ảnh. Để mô tả kỹ hơn các trạng thái rollover có thể có trong ImageReady, bạn hãy xem trong phần “Các trạng thái rollover trong ImageReady”, như sau:

Các rollover thứ cấp tác động lên sự xuất hiện hoặc phản ứng của các vùng khác nhau của bức ảnh khi bạn thực hiện một tác động nào đó lên nút rollover bằng việc sử dụng chuột.

Chỉ với user slice mới có thể có các trạng thái rollover. Tuy nhiên, bạn có thể chuyển một auto slice thành một user slice bằng cách sử dụng lệnh Slices > Promote to User slice, sau đó gán các trạng thái rollover đối với slice này.

Các trạng thái rollover trong ImageReady 

Khi bạn tạo một trạng thái rollover, ImageReady sẽ gán trạng thái mặc định cho rollover này, tuy nhiên, bạn có thể thay đổi trạng thái này một cách dễ dàng. Bạn cũng có thể sử dụng palette Rollovers để chỉnh sửa nội dung hình ảnh của trạng thái.

Trạng thái kích hoạt lên (Over Activates) là trạng thái khi người sử dụng cuộn con trỏ qua slice hoặc vùng bản đồ ảnh trong khi không nhấn chuột (Trạng thái này được chọn một cách tự động cho trạng thái rollover thứ hai)

Kích hoạt xuống (Down Activates) là trạng thái khi người sử dụng ấn chuột trên slice hoặc vùng bản đồ ảnh. Trạng thái này xuất hiện đủ thời gian để người xem dùng chuột nhấn vào slice hoặc vùng bạn đồ ảnh đó.

Trạng thái click (Click Activates) là trạng thái khi người sử dụng click chuột trên slice hoặc vùng bản đồ ảnh. Trạng thái này xuất hiện cho đến khi người dùng di chuột ra khỏi vùng rollover.

Chú ý: Với các trình duyệt khác nhau, hoặc các phiên bản trình duyệt khác nhau, có thể các thao tác click và click đúp chuột sẽ thể hiện các trạng thái khác nhau.

Ví dụ, một số trình duyệt trả lại trạng thái slice trong trạng thái kích hoạt Click sau khi click chuột, hay trả lại trạng thái Slice trong trạng thái kích hoạt Up sau một lần click đúp chuột. Một số trình duyệt khác chỉ sử dụng trạng thái Up như một sự chuyển tiếp thành trạng thái kích hoạt Click, mà không chú ý tới việc bạn click chuột một lần hay click đúp chuột. Để chắc chắn rằng trang Web của bạn sẽ hoạt động đúng chức năng, bạn hãy xem trước rollovers trong các trình duyệt phổ biến.

Trạng thái kích hoạt Tuỳ chọn (Custom Activates) là trạng thái với một tên được chỉ định khi người sử dụng thực hiện một hoạt động xác định phù hợp với mã JavaScrip (Bạn phải tạo mã JavaScrip và bổ sung nó vào file định dạng HTML cho trong Web để tuỳ chọn chức năng cho rollover Tuỳ chọn. Hãy xem hướng dẫn về JavaScrip để có thêm thông tin.)

Trạng thái Không duy trì trạng thái hiện tại (None Preserves) cho lần sử dụng sau, nhưng không truy xuất hình ảnh khi file được lưu dạng một trang Web.

Trạng thái được chọn (Selected Activates) là trạng thái khi người sử dụng click chuột trên slice hoặc vùng bản đồ ảnh. Trạng thái này sẽ hiển thị cho đến khi người xem kích hoạt một trạng thái rollover được chọn khác, và các hiệu ứng của rollovers khác có thể xẩy ra trong khi trạng thái được chọn đó đang được kích hoạt.

Trạng thái kích hoạt ngoài (Out Activates) khi người sử dụng thanh cuộn con trỏ chuột ra ngoài vùng slice hoặc bản đồ ảnh. (Trạng thái thông thường luôn phù hợp với mục đích này).

Trạng thái kích hoạt trên (Up Activates) là trạng thái khi người sử dụng giải phóng nút chuột trên vùng slice hoặc vùng bản đồ ảnh. 

--- Nguồn: Hỗ trợ trực tuyến Adobe Photoshop 7.0 ---  

Hiển thị văn bản bị biến dạng trong trạng thái kích hoạt Over

Phần tiếp theo trong chương này, bạn sẽ tạo một số hiệu hứng rollovers sơ cấp và thứ cấp cho các tác động rollover phổ biến. Bạn sẽ bắt đầu với một rollover dành cho trạng thái Over của nút Contact. Mục đích của bạn là làm cho lớp văn bản architech xuất hiện bị biến dạng khi con trỏ chuột di chuyển qua nút Contact. Vì bạn sẽ tạo rollover này cho nút Contact và kết quả sẽ là một sự thay đổi trong một vùng mà vùng này nằm ngoài slice kia nên nó cần ăn khớp với sự xác định về ranh giới với rollover thứ cấp.

  1. Click vào bảng Original trong cửa sổ hiển thị bức ảnh.

  2. Sử dụng công cụ Slice Select, chọn slice Contact_button trong cửa sổ hoặc, chọn nó trong plalette Rollover. Trong mỗi trường hợp, hãy chọn nó trong một vị trí này và cũng chọn nó trong một vị trí khác.

  3. Trong plalette Rollover, hãy click vào nút Create Rollover State. Một trạng thái rollover  là Over State xuất hiện đặt vào bên dưới slice Contact_button trong plalette.

 

  1. Trong plalette Layers, chọn lớp có từ Architech.

  2. Chọn công cụ Type (T) để hiện ra các tuỳ chọn về văn bản trong thanh tuỳ chọn của công cụ và click vào nút Create Warped Text.

  3. Trong menu của trình đơn Style mở ra trong hộp thoại Warp Text, chọn Bulge. Chọn Preview và chờ một lúc để xem hiệu ứng được áp dụng đối với văn bản. (Bạn có thể cần di chuyển họphương pháp thoại để bạn có thể xem được dòng chữ trong bức ảnh). Bạn hãy thử các giá trị khác nhau cho các tuỳ chọn dạng Bulge khác nhau hoặc chọn các dạng khác để tạo được một sự phối hợp mà bạn thấy hấp dẫn. Khi bạn đã hài lòng với một mẫu và các tuỳ chọn nào đó, hãy đảm bảo chúng đã được chọn và click OK.

 

Hiệu ứng Warped Text đã được ứng dụng chỉ đối với trạng thái Over của nút này.

 

Trạng thái Nomal của nút Contact      Trạng thái Over của nút contact

  1. Trong plalette Rollover, click trạng thái Nomal. Tù đó bây giờ xuất hiện dưới dạng không bị biến dạng.

  2. Chọn File > Save

 

Xem trước Rollovers trong ImageReady

ImageReady cung cấp các phương pháp để xem trước nhanh các Rollovers trong cửa sổ hiển thị hình ảnh mà không cần sử dụng trình duyệt. Chức năng xem trước rollover trong ImageReady phù hợp với Internet Explorer phiên bản 5.0 trở lên cho Windows.

  1. Trong hộp công cụ, chọn nút Toggle Slices Visibility để ẩn đi đường biên của slice.

  2. Cũng trong hộp công cụ này, bạn hãy chọn nút Preview Document.

  3. Chi chuyển con trỏ chuột qua nút Contact trong bức ảnh và để ý về sự thay đổi của dòng chữ Architech. Bạn hãy cũng chú ý về vùng chọn trong plalette Rollovers chuyển đổi từ trạng thái Nomal thành Over State như thế nào bên dưới Contact_button khi bạn di chuyển con trỏ chuột.

  4. Click nút Preview Document một lần nứa để bỏ chọn.

  5. Click nút Toggles Slices Visibility để hiện các biên của slice.

 

Hiện và ẩn các lớp trong trạng thái rollover Over

Khi bạn đã xem trước một file hoàn chỉnh đơn giản trong trình duyệt ngay khi bạn mới bắt đầu học bài học này, bạn đã xem các hình ảnh xuất hiện ở phía bên trái các thanh của nút khi bạn di chuyển chuột qua các nút này. Đó cũng là các ví dụ về rollovers thứ cấp đối với trạng thái Over (Over State), nhưng đây cũng là sự thay đổi hiển thị xảy ra bằng cách chuyển đổi các lớp khác nhau đến Over State của các slice.

  1. Dùng công cụ Silce Select chọn slice Designs_button trong của sổ hình ảnh.

  2. Trong plalette Rollover, click vào nút Creates Rollover State để tạo một Over State cho slice Designs_button.

  3. Trong plalette Layers, chọn và mở rộng thiết lập của lớp Image Rollovers. Nếu cần thiết, hãy click vào biểu tượng con mắt () cho lớp đó để nó được hiển thị.

  4. Trong bảng lớp Image Rollovers, click để bỏ đi biểu tượng hình con mắt () từ lớp For Structures và lớp For Art nếu cần để lớp For Designs chỉ là lớp hiện ra trong nảng các lớp.

 

  1. Sử dụng công cụ Slice Select, chọn slice Structures_button vfa lắp lại các bước 3 và 4, đây là lúc bạn làm cho lớp For Structures hiện ra và ẩn đi lớp For Designs và lớp For Art.

  

 

  1. Chọn slice Art_button và lặp lại các bước 3 và 4 một lấn nữa, nhưng lần này, bạn chỉ để cho lớp For Art hiện, còn các lớp khác ẩn đi trong bảng các lớp Image Rollovers.

 

  1. Trong hộp công cụ, chọn nút Toggle Slices Visibility và nút Preview Document và di chuyển con trỏ qua lại các nút này để xem kết quả. Sau đó, bạn hãy click vào hai nút trên trong hộp công cụ một lần nữa để thôi kích hoạt chúng.

  2. Trong pallette Layers, hãy click vào mũi tên nhỏ để thu nhỏ bảng các lớp Image Rollovers. Sau đó, chọn File > Save.

 

Hiện và ẩn các lớp trong trạng thái rollover Down

Tiếp theo đây, bạn sẽ tạo một trạng thái Down (Down state) cho ba nút. Trạng thái Down state được kích hoạt khi người sử dụng nhấn chuột (mà không nhả ra) khi con trỏ chuột qua một slice.

  1. Dùng công cụ Slice Select, chọn slice Designs_button trong cửa sổ hiển thị.

  2. Trong palette Rollover, click vào nút Creates Rollover State. Ngay lúc này, ImageReady sẽ tự động tạo một Down State cho slcie Designs_button.

  3. Trong palette Layers, chọn nhóm  lớp Architech Highlights sau đó bạn hãy click vào nút mũi tên nhỏ để mở rộng nhóm  lớp này. Nếu cần, bạn hãy click vào biểu tượng con mắt của lớp để làm cho tất cả các lớp trong nhóm  lớp này có thể hiện ra trong cửa sổ hiển thị.

Bạn hãy để ý về dòng chữ màu xanh xuất hiện với từ Architech trong bức ảnh. Bạn sẽ làm ẩn một phần dòng chữ màu xanh này để vẽ tạo sự chú ý cho một phần khác của từ này.

  1. Click vào biểu tượng con mắt của bốn lớp ở phần dưới để ẩn đi các ký tự màu xanh nổi bật “t-e-c-h”. Các lớp được ẩn trong trạng thái Down của nút Design. Trạng thái Down state của nút Designs bây giờ sẽ là các ký tự “a-r-c-h-i” có màu xanh và các ký tự “t-e-c-h” có màu trắng.

  1. Trong palette Rollovers, chọn slice Structures_button, sau đó click nút New Rollover State ở phần cuối của palette. Sau đó, trong palette Layers, hãy click vào các biểu tượng con mắt của các lớp Architech Highlight để các ký tự “a-r-c-h-i” bị ẩn đi và các ký tự “t-e-c-h” hiện ra.

  2. Lặp lại bước 5 cho slice Art_button, như glần này, bạn hãy ẩn các ký tự “a-r” và “t” và để nguyên các lớp khác trong nhóm  lớp Architech Highlight hiện ra.

  3. Trong palette Rollovers, click vào trạng thái rollover Nomal.

  4. Trong hộp công cụ, chọn nút Toggle Slices Visibility button, giữ chuột khi bạn drag con trỏ chuột qua 3 slice.

  5. Khi bạn đã hoàn tất việc xem trước, hãy bỏ sự lựa chọn Toggle Slices Visibility và nút Preview Document. Chọn File > Save.

 

Thao tác với nhiều trạng thái rollover

Bạ có thể cải thiện sự tiện lợi cho các trang Web của bạn bằng cách thêm các gợi ý định hướng phù hợp cho những người xem trang Web của bạn. Trong bài học này, bạn sẽ thao tác trên một trong số các trang hỗ trợ cho web site Architech và bạn sẽ tạo 3 loại kết nối trực quan khác nhau để giúp cho những người xem web site tìm kiếm thông tin.

 

Tạo trạng thái rollover sơ cấp

Tất cả các rollover mà bạn tạo đều là các rollover thứ cấp vì sự thay đổi xuất hiện bên ngoài của chính slice. Bây giờ, bạn sẽ tạo một trạng thái rollover Over để tác động trực tiếp lên chính sự xuất hiện của slice.

  1. Chọn File > Open và chọn file team.psd trong thư mục Lessons/Lesson15/15Start/Architech

  

File mới mở là một trang mô tả nhóm Architech. Một số công việc đã hoàn thành cho bạn, trong đo có việc tạo các slice.

  1. Trong palette Layers, chọn nhóm  lớp Names Glowing và click vào mũi tên để mở rộng nó để bạn có thể xem được các lớp xếp chồng lên nhau trong nhóm  lớp này bao gồm các lớp dick glo, jayne glo và sal glo.

  2. Trong palette Rollovers chọn nút dick_button, sau đó hãy click vào nút Create Rollover State tại phần dưới của palette.

 

ImageReady sẽ tạo và chọn một rollover Over State dưới slice dick_button.

  1. Trong palette Layers, dưới nhóm lớp Names Glowing, click đểchọn biểu tượng con mắt cho lớp dick glo để nó hiện ra (giữ nguyên các lớp  jayne glo và sal glo ẩn).

 

  1. Lặp lại bước 3 và 4 cho slice jayne_button, hãy chỉ cho lớp jayne glo hiện ra trong nhóm lớp Name Glowing, giữ nguyên lớp dick glo và sal glo ẩn.

  2. Lặp lại các bước 3 và 4 một lần nữa cho slice sal_button, hãy chỉ cho lớp sal glo hiện ra trong nhóm lớp Name Glowing.

  3. Hãy kiểm chứng kết quả của bạn bằng cách chọn nút Toggle Slices Visibility và Preview Document trong hộp công cụ, sau đó hãy di chuyển con trỏ chuột qua cả ba tên. Nếu bạn hoàn thành các thao tác này một cách chính xác, thì mỗi tên sẽ sáng rực lên khi con trỏ chuột di chuyển qua và quay trở lại trạng thái bình thường khi con trỏ chuột đã di chuyển ra xa slice.

  4. Trong hộp công cụ, click vào nút Toggle Slices Visibility và nút Preview Document để bỏ chọn chúng.

  5. Click vào mũi tên nhỏ để thu nhỏ nhóm lớp Names Glowing. Chọn File > Save.

 

Tạo trạng thái  rollover Selected

Nói chung, những người sử dụng mong đợi rằng với việc click chuột vào một điểm nóng thì trình duyệt có thể mở một trang web đã được liên kết. Trạng thái rollover Selected thực sự hữu dụng khi bạn click vào một slice không liên quan đến một URL khác.

  1. Trong palette Rollovers, chọn slice dick_button, và click vào nút Create Rollover State ở phần dưới của palette.

 

ImageReady sẽ tạo một rollover Dow