Bài giảng Photoshop - Chương 15: Thêm các Slice tương tác và Rollovers cung cấp các kiến thức 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; ứ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.
Chương 15: Thêm Slice tương tác Rollovers Các Slice phần chia vùng ảnh mà bạn xác định cách sử dụng Adobe Photoshop ImageReady Bạn làm sống động Slice bạn, kết nối chúng đến địa URL sử dụng chúng cho nút Rollover Một ứng dụng khác sử dụng Slice tối ưu hoá chúng cách riêng lẻ định dạng hình ảnh khác cho Web site để tối đa hiệu ứng cho hình ảnh Web site bạn thời gian tải nhỏ Trong Chương này, bạn tìm hiểu về: · Tạo Slice ảnh phương pháp khác · Tối ưu hoá slice ảnh riêng rẽ sử dụng tuỳ chọn riêng biệt định dạng file · Tạo slice “khơng hình ảnh” cho mục đích chứa văn HTML · Tạo nút Rollover · Ứng dụng dạng chữ biến dạng Layer văn · Tạo Rollover trạng thái trên, lựa chọn cho slice · Chỉ định kết hợp khác layer ẩn suốt điều kiện định trạng thái rollover khác · Tạo trang HTML chứa đựng hình ảnh phân cắt bảng Bạn khoảng 90 phút để hoàn thành chương Chương biên soạn cho Adobe Photoshop ImageReady Một số phần chương bạn phải thực ImageReady Nếu cần thiết, xoá bỏ thu mục học trước máy tính bạn copy thu mục Lesson15 thay vào Vì bạn thực chương này, bạn ghi chồng lên file mở đầu Nếu muốn khôi phục file này, copy chúng từ Học Adobe Photoshop CD kèm theo Chú ý: Người sử dụng Windows cần giải nén học trước sử dụng Để hiểu rõ hơn, xem phần “Sao chép học” trang Bắt đầu Trước bắt đầu học này, khôi phục tuỳ chọn ứng dụng mặc định cho Adobe Photoshop Adobe ImageReady Xem “Phục hồi thông số mặc định” trang Bạn bắt đầu học cách xem ví dụ biểu ngữ (banner) HTML hoàn chỉnh mà bạn tạo Đồ họa biểu ngữ phản ứng với thao tác bạn sử dụng chuột Ví dụ ảnh thay đổi hình thức trỏ chuột di chuyển qua số vùng ảnh bạn click vào vùng Khởi động trình duyệt, mở file kết thúc Banner.html từ thư mục Lessons/Lesson15/15End/Architech Pages File chứa đựng bảng HTML liên kết đến số hình ảnh khác mà tất chúng tạo từ slice Photoshop ImageReady Di chuyển trỏ chuột qua nút “designs”, “structures”, “art” “contact” banner Chú ý hình đồ hoạ nhỏ xuất bên trái nút bạn di chuyển trỏ chuột qua nút Cũng ý thay đổi từ Architech bạn di chuyển trỏ chuột qua nút cuối Giữ chuột drag trỏ qua ba nút đầu tiên, để ý xem từ Architech thay đổi nhu lần Nhả chuột Di chuyển trỏ chuột qua vòng tròn màu xanh lớn gần rung tâm ảnh để trỏ chuột khu vực bạn nhìn thấy hộp văn mở với vài thông tin bổ sung Sau click vào vịng trịn xanh để đến trang Team Trên trang Team, thủ cuộn trỏ chuột qua nút khác để ý thay đổi Hãy thủ click vào nút sau click vào nút Team Chú ý thay đổi Nếu bạn muốn quay trở lại trang banner, dùng nút Back trình duyệt Bạn xem xong file này, đóng khỏi trình duyệt Thế Slice Slice vùng ảnh mà bạn xác định sở lớp, hướng dẫn hay vùng chọn xác ảnh, cách dùng công cụ Slice Khi bạn xác định Slice ảnh, Photoshop ImageReady tạo bảng HTML tờ mẫu xếp tầng để chứa canh lề cho slice Nếu bạn muốn, bạn tạo file HTML chứa ảnh slice theo dạng bảng dạng tờ mẫu xếp chồng Bạn tối ưu hố Slice hình ảnh cho trang Web riêng biệt, thêm HTML hay văn đến slice liên kết slice đến địa URL Trong ImageReady, bạn làm sinh động slice tạo rollover với chúng Trong chương này, bạn khám phá cách khau để tạo slice ảnh Photoshop ImageReady, tối ưu hoá slice tạo bốn nút rollover cho banner Bạn tìm hiểu cách để làm sinh động slice, bạn xem thêm chương 16, “Tạo hình ảnh động cho Web site” Phân chia ảnh Photoshop Adobe Photoshop cho phép bạn xác định slice sử dụng công cụ Slice biến đổi lớp thành slice Bạn đặt tên cho Slice liên kết chúng đến địa Url sau tối ưu hố chúng Sau nữa, bạn tiếp tục phân chia hình ảnh banner ImageReady tạo rollover cho nút slice Thiết kế trang Web với Photoshop ImageReady Khi bạn thiết kế trang Web sử dụng Adobe Photoshop ImageReady, hình dung cơng cụ tính mà bạn dùng ứng dụng · Photoshop cung cấp công cụ cho phép bạn tạo thao tác ảnh tĩnh dùng cho trang Web Bạn chia ảnh thành slice, bổ sung thêm liên kết văn dạng HTML, tối ưu hố slice lưu hình ảnh 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 Photoshop Thêm vào đó, ImageReady có cơng cụ Palette cho thao tác nâng cao với trang Web tạo hình ảnh động cho Web site ảnh động rollover Thử nghiệm với Slice Photoshop Trong phần thực hành này, bạn học khơng số cách để bạn tạo Slice mà bạn học cách khác slice người dùng (user slices) slice tự động (auto slices) Slice người dùng Slice tự động có cơng dụng khác nhau, lý quan trọng để hiểu biết nét độc đáo riêng chúng · User Slice vùng mà người sử dụng định Slice · Auto Slice phần chia hình chữ nhật phần lại ảnh - tất phần mà không thuộc user slice Photoshop ImageReady tạo slice cho bạn Khởi động Adobe Photoshop Nếu có ý xuất hỏi bạn có muốn tuỳ chỉnh tuỳ chọn màu sắc, click No Chọn File > New, click OK chấp nhận tuỳ chọn mặc định Chọn View > Show > Slices để đánh dấu kiểm tra lệnh Slices Trong hộp công cụ, chọn công cụ Slice ( ), drag hình chữ nhật nhỏ đâu sổ hiển thị hình ảnh Bạn vừa tạo User slice Để ý hình chữ nhật chọn (có khung bật rõ) Ngoài ra, bạn ý cịn có nhiều slice khác mà xác định nhãn màu khác Có slice khác auto slice Mỗi slice đánh số Tạo user slice khác cách drag công cụ Slice vùng khác ảnh hiển thị Slice đánh số liên tục, di chuyển từ đỉnh đến phần từ trái sang phải qua ảnh Khi bạn định user slice mới, tất slice ảnh đánh số lại Trong hộp công cụ, chọn công cụ Slice Select ( · ) ẩn công cụ Slice, thử theo bước sau: Chọn số user slice vừa tạo Drag đến vị trí khác, sau drag số điểm neo để đặt lại kích thước cho slice · Chọn auto slice, sau thử drag đặt lại kích thước cho Mặc dù bạn chọn hai loại user slice auto slice, bạn drag định lại kích thước user slice Auto slice khơng có lựa chọn cho thao tác Chọn số slice lớn (bạn chọn auto slice user slice), sau sử dụng cơng cụ tuỳ chọn thủ làm theo thao tác sau: · Click vào nút Hide Auto Slice, sau click lại lần (lúc nút Show Auto Slices) · Click nút Slice Options xem xét tuỳ chọn hộp thoại Slice Options Click Cancel để đóng hộp thoại Bạn thao tác với nhiều cách nhanh chóng · Click vào nút Divide Slice, sau chắn nút Preview chọn hộp thoại bạn xem slice chọn cửa sổ hiển thị Sau đó, hộp thoại này, bạn chọn hộp kiểm tra Divide Horizontally Into nhập vào số lớn cho số khoảng trống slice mà bạn muốn Để ý kết Lặp lại với tuỳ chọn Divide Vertically Into Khi bạn thử xong, đóng hộp thoại Chú ý: Trong ImageReady, chọn Slices > Divide Slice để thực trình Chọn File > Close không lưu thay đổi Các loại Slice Các slice bạn tạo sử dụng công cụ slice gọi Slice người sử dụng (User slice); slice bạn tạo tưg lớp gọi Slice lớp (Layer-based slices) Khi bạn tạo User slice hay Layer-based slice mới, Slice tự động (Auto Slice) bổ sung sinh để thích cho vùng cịn lại ảnh Nói cách khác, Auto slicesẽ lấp đầy chỗ trống ảnh mà chõ trống không định User slice Layer-based slice Auto slice tạo thành lúc bạn thêm hay sửa chữa User slice hay Layer-based slice User slice, Layer-based slice Auto slice nhìn khác – User slice Layer-based slice xác định đường rắn, Auto slice lại xác định đường chấm Thêm vào đó, loạ slice hiển thị với biểu tượng riêng Bạn chọn hay ẩn Auto slice, với tính này, việc quan sát User slice Layer-based slice dễ dàng Một Subslice (Slice phụ) Auto slice mà Auto slice hình thành bạn tạo slice trùng khớp Subslice cho bạn ảnh phân chia bạn lưu file tối ưu hoá Mặc dù Subslice đánh số hiển thị với biểu tượng slice riêng bạn chọn hay sửa chữa chúng cách độc lập từ slice sở Subslice tạo thành vào thời điểm bạn xếp lại thứ tự ngăn xếp slice - Nguồn: Hỗ trợ trực tuyến Adobe Photoshop 7.0 - Sử dụng công cụ Slice để tạo slice Bây bạn biết sơ lược slice hoạt động nào, bạn bắt đầu tạo thay đổi cho công việc đơn giản học Sử dụng công cụ Slice, bạn xác định bốn User slice cho nút banner Chọn File > Open, mở file 15Start.psd từ thư mục Lessons/Lesson15/!5Start Nếu có ý xuất hỏi bạn có muốn nâng cấp lớp văn cho liệu đầu dạng vector sở, click Update File học bao gồm đường định hướng nằm ngang dọc màu xanh Bạn dùng đường định hướng lệnh lề tạo vùng hình chữ nhật chúgn canh lề cách sít Chọn View > Show chọn hai tuỳ chọn Guides Slices (kiểm tra xem chọn chưa) Chọn View > Snap To > Guides chọn View > Snap To > Slice Chọn công cụ Slice ( ) vẽ vùng hình chữ nhật quanh vùng hình chữ nhật chứa từ designs Ngay lúc này, vẽ vùng slice bao quanh từ khác dòng: structures, art contact để tạo slice cho ba nút Hãy chắn khơng có khoảng trống slice, khoảng trống trở thành Auto slice (Nếu cần, bạn dùng cơng cụ Zoom ( ) để xem xác hơn, sau click đúp vào cơng cụ để lại kichs thước xem 100%) Bạn thay đổi cách trỏ chuột xuất hình cho cơng cụ Slice cách thay đổi thông số Photoshop Để thay đổi trỏ chuẩn công cụ Slice ( ) thành trỏ chuột xác, bạn chọn Edit > Preferences > Display & Cursors (Windows, Mac OS 9) Photoshop > Preferences > Display & Cursors (Mac OS 10) click OK Nếu bạn cần chỉnh lại kích thước cho Slice, chọn công cụ Slice Select () ẩn bên cạnh cơng cụ Slice drag góc vùng chọn Chọn File > Save Các tuỳ chọn cho Slice Photoshop Trước tối ưu hoá slice ảnh cho trang Web, bạn thiết lập tuỳ chọn cho chúng, ví dụ đặt tên cho chúng, gán URL liên kết đến chúng Các tên mà bạn đặt cho slice định tên fle ảnh tối ưu hoá Với user slice mà bạn tạo trước đây, bạn đặt tên chúng liên kết đến trang web khác thị frame đích Chú ý: Việc thiết lập tuỳ chọn cho auto slice tự động biến thành user slice Chọn công cụ Slice Select ( Trong tuỳ ) dùng để chọn cơng cụ Designs slice chọn công cụ, click vào nút Slice Options Theo mặc định, Photoshop đặt tên Slice dựa tên file số slice, tên file hiên “15Start_03” mô tả số slice file 15Start.psd Trong hộp thoại Slice Options, nhập thông tin sau: ô Name, gõ Design_button; URL, gõ Designs.html; Target, gõ _blank Sau click OK Chú ý: Tuỳ chọn Target kiểm sốt việc file liên kết mở bạn click vào kết nối, file mở cửa sổ trình duyệt thay file hiển thị trình duyệt mở Để tìm hiểu kỹ hơn, bạn xem thêm Hỗ trợ trực tuyến Adobe Photoshop 7.0 tham khảo dạng HTML (hoặc bạn in bạn xem Internet) Nhập thông tin khác user slice khác mà bạn tạo: · Chọn Slice Structures gõ Structures_button ô Name, Structures.html ô URL _blank Target · Chọn Slice Art gõ Art_button ô Name, Art.html ô URL _blank Target · Chọn Slice Contacts gõ Contacts_button ô Name, Contacts.html ô URL _blank Target Chọn File > Save Trong hộp thoại Slice Options, bạn nhập đoạn văn ngắn mà dòng văn xuất vùng ảnh) Bạn thử giá trị khác cho tuỳ chọn dạng Bulge khác chọn dạng khác để tạo phối hợp mà bạn thấy hấp dẫn Khi bạn hài lòng với mẫu tuỳ chọn đó, đảm bảo chúng chọn click OK Hiệu ứng Warped Text ứng dụng trạng thái Over nút Trạng thái Nomal nút Contact Trạng thái Over nút contact Trong plalette Rollover, click trạng thái Nomal Tù xuất dạng không bị biến dạng Chọn File > Save Xem trước Rollovers ImageReady ImageReady cung cấp phương pháp để xem trước nhanh Rollovers cửa sổ hiển thị hình ảnh mà khơng cần sử dụng trình duyệt Chức xem trước rollover ImageReady phù hợp với Internet Explorer phiên 5.0 trở lên cho Windows Trong hộp công cụ, chọn nút Toggle Slices Visibility để ẩn đường biên slice Cũng hộp công cụ này, bạn chọn nút Preview Document Chi chuyển trỏ chuột qua nút Contact ảnh để ý thay đổi dòng chữ Architech Bạn ý vùng chọn plalette Rollovers chuyển đổi từ trạng thái Nomal thành Over State bên Contact_button bạn di chuyển trỏ chuột Click nút Preview Document lần nứa để bỏ chọn Click nút Toggles Slices Visibility để biên slice Hiện ẩn lớp trạng thái rollover Over Khi bạn xem trước file hoàn chỉnh đơn giản trình duyệt bạn bắt đầu học học này, bạn xem hình ảnh xuất phía bên trái nút bạn di chuyển chuột qua nút Đó ví dụ rollovers thứ cấp trạng thái Over (Over State), thay đổi hiển thị xảy cách chuyển đổi lớp khác đến Over State slice Dùng công cụ Silce Select chọn slice Designs_button sổ hình ảnh Trong plalette Rollover, click vào nút Creates Rollover State để tạo Over State cho slice Designs_button Trong plalette Layers, chọn mở rộng thiết lập lớp Image Rollovers Nếu cần thiết, click vào biểu tượng mắt ( ) cho lớp để hiển thị Trong bảng lớp Image Rollovers, click để bỏ biểu tượng hình mắt ( ) từ lớp For Structures lớp For Art cần để lớp For Designs lớp nảng lớp Sử dụng công cụ Slice Select, chọn slice Structures_button vfa lắp lại bước 4, lúc bạn làm cho lớp For Structures ẩn lớp For Designs lớp For Art Chọn slice Art_button lặp lại bước lấn nữa, lần này, bạn lớp For Art hiện, lớp khác ẩn bảng lớp Image Rollovers Trong hộp công cụ, chọn nút Toggle Slices Visibility nút Preview Document di chuyển trỏ qua lại nút để xem kết Sau đó, bạn click vào hai nút hộp công cụ lần để thơi kích hoạt chúng Trong pallette Layers, click vào mũi tên nhỏ để thu nhỏ bảng lớp Image Rollovers Sau đó, chọn File > Save Hiện ẩn lớp trạng thái rollover Down Tiếp theo đây, bạn tạo trạng thái Down (Down state) cho ba nút Trạng thái Down state kích hoạt người sử dụng nhấn chuột (mà không nhả ra) trỏ chuột qua slice Dùng công cụ Slice Select, chọn slice Designs_button cửa sổ hiển thị Trong palette Rollover, click vào nút Creates Rollover State Ngay lúc này, ImageReady tự động tạo Down State cho slcie Designs_button Trong palette Layers, chọn nhóm lớp Architech Highlights sau bạn click vào nút mũi tên nhỏ để mở rộng nhóm lớp Nếu cần, bạn click vào biểu tượng mắt lớp để làm cho tất lớp nhóm lớp cửa sổ hiển thị Bạn để ý dòng chữ màu xanh xuất với từ Architech ảnh Bạn làm ẩn phần dòng chữ màu xanh để vẽ tạo ý cho phần khác từ Click vào biểu tượng mắt bốn lớp phần để ẩn ký tự màu xanh bật “t-e-c-h” Các lớp ẩn trạng thái Down nút Design Trạng thái Down state nút Designs ký tự “a-r-c-h-i” có màu xanh ký tự “t-e-c-h” có màu trắng Trong palette Rollovers, chọn slice Structures_button, sau click nút New Rollover State phần cuối palette Sau đó, palette Layers, click vào biểu tượng mắt lớp Architech Highlight để ký tự “a-r-c-h-i” bị ẩn ký tự “t-e-c-h” Lặp lại bước cho slice Art_button, glần này, bạn ẩn ký tự “a-r” “t” để nguyên lớp khác nhóm lớp Architech Highlight Trong palette Rollovers, click vào trạng thái rollover Nomal Trong hộp công cụ, chọn nút Toggle Slices Visibility button, giữ chuột bạn drag trỏ chuột qua slice Khi bạn hoàn tất việc xem trước, bỏ lựa chọn Toggle Slices Visibility nút Preview Document Chọn File > Save Thao tác với nhiều trạng thái rollover Bạ cải thiện tiện lợi cho trang Web bạn cách thêm gợi ý định hướng phù hợp cho người xem trang Web bạn Trong học này, bạn thao tác số trang hỗ trợ cho web site Architech bạn tạo loại kết nối trực quan khác để giúp cho người xem web site tìm kiếm thơng tin Tạo trạng thái rollover sơ cấp Tất rollover mà bạn tạo rollover thứ cấp thay đổi xuất bên ngồi slice Bây giờ, bạn tạo trạng thái rollover Over để tác động trực tiếp lên xuất slice Chọn File > Open chọn file team.psd thư mục Lessons/Lesson15/15Start/Architech File mở trang mơ tả nhóm Architech Một số cơng việc hồn thành cho bạn, đo có việc tạo slice Trong palette Layers, chọn nhóm lớp Names Glowing click vào mũi tên để mở rộng để bạn xem lớp xếp chồng lên nhóm lớp bao gồm lớp dick glo, jayne glo sal glo Trong palette Rollovers chọn nút dick_button, sau click vào nút Create Rollover State phần palette ImageReady tạo chọn rollover Over State slice dick_button Trong palette Layers, nhóm lớp Names Glowing, click đểchọn biểu tượng mắt cho lớp dick glo để (giữ nguyên lớp jayne glo sal glo ẩn) Lặp lại bước cho slice jayne_button, cho lớp jayne glo nhóm lớp Name Glowing, giữ nguyên lớp dick glo sal glo ẩn Lặp lại bước lần cho slice sal_button, cho lớp sal glo nhóm lớp Name Glowing Hãy kiểm chứng kết bạn cách chọn nút Toggle Slices Visibility Preview Document hộp cơng cụ, sau di chuyển trỏ chuột qua ba tên Nếu bạn hoàn thành thao tác cách xác, tên sáng rực lên trỏ chuột di chuyển qua quay trở lại trạng thái bình thường trỏ chuột di chuyển xa slice Trong hộp công cụ, click vào nút Toggle Slices Visibility nút Preview Document để bỏ chọn chúng 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, người sử dụng mong đợi với việc click chuột vào điểm nóng trình duyệt mở trang web liên kết Trạng thái rollover Selected thực hữu dụng bạn click vào slice không liên quan đến URL khác Trong palette Rollovers, chọn slice dick_button, click vào nút Create Rollover State phần palette ImageReady tạo rollover Down State cho slice Hãy click đúp vào rollover Down State để mở hộp thoại Rollover State Options Trong hộp thoại, chọn tuỳ chọn Selection click OK Bây giờ, rollover diễn tả rollover Selected State Trong palette Layers, click vào mũi tên nhỏ đển mở rộng nhóm lớp Text Block Hãy ý đến biểu tượng mắt, bạn thấy: nhóm lớp Text Blocks lớp Team hiện, ba lớp khác ẩn Chú ý: Mặc dù hình nhỏ lớp nhóm lớp Text Blocks nhìn giống lớp suốt giống hệt Mỗi lớp chứa chữ màu trắng mà gần khơng thể xem hình nhỏ Click vào biểu tượng mắt để ẩn lớp Team_text, sau click vào mắt lớp dick_text Bây giờ, khối chữ lớn nằm bên phải ảnh thay đổi, hiển thị đoạn văn sắn dành cho số chi tiết Dick Lặp lại bước đến cho jayne_button bạn cho lớp jayne_text nhóm lớp Text Blocks Lặp lại bước đến cho slice sal_button bạn cho lớp sal_text nhóm lớp Text Blocks Hãy kiểm chứng kết bạn cách chọn nút Toggle Slices Visibility Preview Document hộp công cụ, click vào slice ba slice Sau bỏ chọn hai nút Click vào mũi tên nhỏ để thu nhỏ nhóm lớp Text Blocks, chọn File > Save Bổ sung văn thay Văn thay xuất hai trường hợp sau: ảnh hiển thị cửa sổ trình duyệt người sử dụng cho phép trỏ chuột trạng thái treo qua điểm nóng (hotspot) Trong trường hợp đề cập đến vấn đề bổ sung văn thay để tiện lợi cho trang Web bạn Bạn bổ sung thêm số văn thay cho slice ảnh file Team.psd Trong palette Rollovers, chọn slice dick_button Trong tuỳ chọn Alt palette Slice , gõ Read about Dick, our Chairman Trong palette Rollovers, chọn slice Jayne_button, sau chuyển đến tuỳ chọn Alt palette Slice gõ Read about Jayne, our President Trong palette Rollovers, chọn slice Sal_button, sau chuyển đến tuỳ chọn Alt palette Slice gõ Read about Sal, our Founder Trong palette Rollovers, chọn slice Team_button, sau chuyển đến tuỳ chọn Alt palette Slice gõ Read about our expert team Hãy kiểm chứng kết bạn cách chọn nút Toggle Slices Visibility Preview Document hộp công cụ, để trỏ chuột trạng thái chờ vài giây slice Sau bỏ chọn hai nút Chọn File > Save Xem trước trang Web hồn chỉnh trình duyệt Trước bạn lưu slice tối ưu hoá, bạn xem trước rollover hoàn chỉnh cho banner trang team trình duyệt Web Tuy nhiên, URL giả định mà bạn gán đến slice không làm việc mẫu Preview in Browser, bạn kiểm tra chúng sau bạn hoàn chỉnh file định dạng HTML cuối mở chúng trình duyệt Chọn Window > Documents > 15Start.psd để chuyển chúng trở lại ảnh banner Trong hộp công cụ, click vào nút Preview In Default Browser chọn trình duyệt từ menu phụ mở Khi trang mở sổ trình duyệt, bạn di chuyển trỏ chuột qua nút rollover banner Một hình ảnh khác xuất cho nút ba nút đầu tiên, dòng chữ biến dạng xuất nút cuối Hãy giữ chuột trỏ di chuyển qua nút Khi bạn giữ chuột, bạn thấy: Trên nút Design, chữ màu trắng “tech” hiển thị; nút Structures, chữ màu trắng “arch” hiển thị nút Art, chưa màu trắng “art” hiển thị Click vào vòng tròn xanh ảnh để mở trang Team.html Hãy di chuyển trỏ qua tên dick, jayne sal để kiểm tra trạng thái Over State hoạt động cách đắn Bạn click vào nút sal, jayne, dick Team để kiểm chứng trạng thái Selected hoạt động Khi bạn xem xong Rollovers, khỏi trình duyệt quay lại ImageReady Lưu hình ảnh phân chia ImageReady Bây giờ, banner trang team hoàn thành, bạn lưu slice tối ưu hoá chuyển chúng thành file định dạng HTML chứa mọt bảng HTML hình ảnh slice ImageReady cho phép bạn lưu slice bảng mẫu xếp tầng (tốt lưu bảng) Để xếp file cho bảng mẫu xếp tầng, bạn chọn File > Output Settings > HTML For Slice Output, chọn Generate CSS, click OK Với file 15Start.psd kích hoạt, chọn File > Save Optimized Trong hộp thoại Save Optimized, nhập tên Banner.html Trên sổ trình đơn mở ra, chọn HTML Images, chọn All Slice từ menu Slices Chỉ định vị trí thư mục Lesson/Lesson15/15Start/Architech Pages click Save Hộp thoại Replace Files xuất cho hình ảnh bốn nút mà bạn lưu trước Photoshop Click Replace để lưu phiên cho hình ảnh ImageReady lưu bảng HTML slice ảnh đầu vào file HTML lưu hình ảnh tối ưu hoá cho tất auto slice, user slice, layer-base slices trạng thái rollover thư mục Images Tên file ảnh dựa tên chúng mà bạn đặt cho slice tên mặc định kèm số slice Chọn Window > Documents > Team.psd để chuyển chúgn thành file psd lặp lại bước bạn nhập tên Team.html làm tên file cho phiên tối ưu hoá Để kiểm tra URL kết nối mà bạn gán cho slice, bắt đầu với trình duyệt Web sử dụng để mở file Banner.html Một lần kiểm tra hiệu ứng rollover slices, bạn nhớ phải click vào vòng tròn xanh để mở kết nối đến trang Team kiểm tra hiệu ứng rollover cho trang web Đóng trình duyệt, đóng file, bạn khỏi ImageReady Photoshop Bạn hoàn tất học chương 15 Để tìm hiểu kỹ sử dụng hình động với slice rollover, bạn xem chương 16 “Tạo hình ảnh động cho trang Web” Câu hỏi ơn tập Slice gì? Hãy mô tả cách tạo slice cho ảnh Thuân lợi việc liên kết slice lại với nhau? Mô tả phương pháp tạo slice với đường biên bao quanh xác đối tượng xác định có hình dạng đối tượng nhỏ Làm để tạo slice Khơng hình ảnh? Mục đích cho slice sử dụng gì? Tên hai trạng thái rollover phổ biến hoạt động chuột tạo tác động lên trạng thái rollover Có trạng thái Slice? Mô tả cách đơn giản để tạo trạng thái Rollover cho ảnh? Trả lời câu hỏi ôn tập Slice vùng hình chữ nhật ảnh mà bạn tạo ImageReady Photoshop cho việc tối ưu hoá riêng rẽ hình ảnh cho trang Web Với Slice, bạn tạo hình động dạng GIFs, kết nối URL rollover Các slice tạo bạn xác định vùng ảnh công cụ slice, bạn chuyển đổi đường định hướng, vùng chọn thánh slice Chũng tạo cách tự động cho vùng ảnh phân chia (slice) mà bạn để nguuyên không xác định Thuận lợi việc kết nối slice lại với chúng chia sẻ tuỳ chọn tói ưu hố, điều có nghĩa bạn thay đổi tuỳ chọn slice liên kết, thơng số tuỳ chọn tự động thay đổi tất slice nhóm Sử dụng cơng cụ Magic Wand (hoặc công cụ chọn tương đương khác) ImageReady để chọn đối tượng chọn Slices > Create Slice from Selection Chọn Slice với công cụ Slice Selection Trong hộp thoại Slice Option (Photoshop) palette Slice (ImageReady), chọn No Image từ menu Type Slice khơng hình ảnh chứa màu nền, văn mã nguồn HTML chúng sử dụng trình chỗ cho hình đồ hoạ bổ sung sau Nomal Over Nomal kích hoạt khơng có hoạt động chuột cịn Over kích hoạt việc di chuyển trỏ chuột qua slice Selected trạng thái khác, kích hoạt cách click vào slice Có trạng thái rollover xác định trước, tính Custom None Nhưng bạn tạo trạng thái riêng bạn nên thực khơng có giới hạn số lượng trạng thái slice có Sử dụng hình ảnh đa lớp, ẩn lớp để tạo phiên khác ảnh cho trạng thái rollover ... User slice Layer-based slice Auto slice tạo thành lúc bạn thêm hay sửa chữa User slice hay Layer-based slice User slice, Layer-based slice Auto slice nhìn khác – User slice Layer-based slice. .. Slice ImageReady thay auto slice layer-based slice lớp Để ý biểu tượng góc bên trái phía slice layer-based slice Chú ý: Bạn ứng dụng loại slice lớp mà bạn tạo layer-based slice Khoảng cách slice. .. Click vào biểu tượng mắt bốn lớp phần để ẩn ký tự màu xanh bật “t-e-c-h” Các lớp ẩn trạng thái Down nút Design Trạng thái Down state nút Designs ký tự “a-r-c-h-i” có màu xanh ký tự “t-e-c-h” có