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ữ

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
2. Chọn File > New, và click OK chấp nhận các tuỳ chọn mặc định.
3. Chọn View > Show > Slices để đánh dấu kiểm tra về lệnh Slices
4. 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ố.
5. 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.
6. 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:

--- 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.
2. 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)
3. Chọn View > Snap To > Guides và hãy chọn View > Snap To > Slice
4. 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.5. 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.
6. 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

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

5. 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.
6. 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.
2. 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


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.

3. 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.
4. 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.