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ú[r]
(1)Chương 15: Thêm các Slice tương tác và Rollovers
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 hố 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 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
(2)∙ Tạo trang HTML chứa đựng hình ảnh phân cắ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 trình duyệt, mở file kết thúc Banner.html từ thư mục Lessons/Lesson15/15End/Architech Pages.
(3)2. 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
3. Giữ chuột drag trỏ qua ba nút đầu tiên, để ý xem từ Architech thay đổi nhu lần Nhả chuột.
4. 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.
5. 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
6. Bạn xem xong file này, đóng khỏi trình duyệt.
Thế Slice
(4)ho c d ng các t m u x p ch ng.ặ ẫ ế
B n cũng có th t i u hố 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 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 có thể chia ảnh thành slice, bổ sung thêm liên kết văn dạng HTML, tối ưu hoá 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
(5)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 vùng mà người sử dụng định Slice
∙ Auto Slice phần chia hình chữ nhật phần cịn lại ảnh - tất phần mà không thuộc user slice Photoshop ImageReady tạo slice 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, click OK chấp nhận tuỳ chọn mặc định.
3. Chọn View > Show > Slices để đánh dấu kiểm tra lệnh Slices
4. 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.
Đ ý r ng hình ch nh t để ằ ữ ậ ược ch n (có khung n i b t và hi n rõ). Ngồ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 ố
(6)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 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 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.ự ự ọ
7. 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:
(7)∙ 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 hi n quá trình này.ọ ể ự ệ
8. 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 là 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 bất lúc bạn thêm hay sửa chữa User slice hay Layer-based slice.
(8)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
1. Chọn File > Open, 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 chọn hai tuỳ chọn Guides Slices (kiểm tra xem chọn chưa)
3. Chọn View > Snap To > Guides chọn View > Snap To > Slice
4. 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.
(9)
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 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 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 ( ) dùng để chọn cơng cụ Designs slice.
2. Trong tuỳ chọn công cụ, click vào nút Slice Options
(10)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.ả ố
3. 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 soát việc file liên kết mở bạn click vào kết nối, file mở một 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)
4. Nhập thông tin khác user slice khác mà bạn tạo: