Tạo các liên kết bên trong của một bức ảnh

Tạo các liên kết bên trong của một bức ảnh

Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Nội dung trang thuộc quyền © Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Những viết in để dùng với mục đích cá nhân phi thương mại Nếu bạn muốn phát hành lại trang web bạn làm ơn liên lạc với tơi phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy www.vietphotoshop.com Bài học đề cập lát cắt ánh xạ ảnh - đặc trưng mà bạn dùng để khởi tạo mối liên kết siêu văn phức tạp phạm vi file đồ họa đơn giản Người sử dụng cần click vào phần đồ thị bị cắt lát gán ánh xạ ảnh trang Web để mở site click vào vùng khác để đến site khác Có kỹ thuật mà bạn đùng để khởi tạo mảnh chia gán liên kết ảnh mà người dùng click vào để mở site khác trình duyệt Web Một phương pháp định nghĩa lát cắt (từ sau viết theo nguyên tiếng Anh slice), mảnh nhỏ hình chữ nhật thu từ trình chia cắt ảnh Adobe Photoshop hay Adobe ImageReady Phương pháp lại khởi tạo ánh xạ ảnh (từ sau viết theo nguyên tiếng Anh image maps), khơng thiết phải hình chữ nhật Trong này, bạn học chủ điểm sau : • Một số phương pháp khởi tạo image slices • Phân biệt khác user slices auto slices • Liên kết user slices với trang hay địa HTML • Khởi tạo lát cắt “không phải ảnh” (”no image” slice) để chứa text biên tập HTML • Định nghĩa vùng ánh xạ ảnh (image-map areas) phương pháp khác • Liên kết image-map areas với trang hay địa HTML www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh • Photoshop CS Bằng qui trình tự động, tạo trang HTML chứa ảnh bị cắt bảng table Bạn phải dành khoảng 90 phút để hoàn thành học Bạn thực việc tạo slices Adobe Photoshop lẫn Adobe ImageReady, ImageReady có cơng cụ tạo lập image maps Lưu ý rằng, người dùng Windows 2000 cần phải unlock tập tin học trước dùng chúng Để có thêm thơng tin, xin tham khảo trang “Copying the Classroom in a Book files” (Điều không cần thiết người dùng Windows XP Mac OS) Khởi đầu Trong học bạn làm việc đồ thị trù liệu sẵn cho Web home page Mục tiêu bạn nhúng liêu kết siêu văn vào bên ảnh phức hợp vốn file psd đơn lẻ Những vùng khác, điểm nóng (hotspots - khu vực ảnh đồ thị mà bạn click vào để nhảy đến địa xác định URL) image map liên kết với file khác, cho người dùng click lên vùng trang chủ để mở trang liên kết click lên vùng khác trang chủ để mở trang liên kết khác Sẽ có vùng khơng liên kết trang chủ mà không mang lại thay đổi người dùng click cách ngẫu nhiên hay hú họa Bài học sau sách bao trùm quy trình tối ưu hóa lát cắt riêng lẻ với thiết lập khác từ vùng tĩnh ảnh cách làm cho slices trở nên sinh động cách định nghĩa hiệu ứng tương tác động (rollover effects) Đôi điều slices image maps Phương pháp khởi tạo slices Slices vùng ảnh bạn định nghĩa dựa lớp (layers), đường dẫn (guides), vùng chọn đặc biệt ảnh, cách dùng công cụ Slice Khi bạn định nghĩa slice ảnh, Photoshop hay ImageReady tạo bảng (table) HTML rèm kiểu dáng (cascading style sheet) để chứa gióng hàng slices Nếu muốn, bạn tạo (bằng quy trình tự động) xem trước file HTML chứa ảnh bị cắt lát với table cascading style sheet Một image map vùng ảnh phục vụ cho việc hỗ trợ liên kết siêu văn Những trình quản lý việc tạo lập image maps diễn Adobe ImageReady; vậy, bạn phải chuyển sang ImageReady để làm việc file mở từ Photoshop ImageReady khởi tạo clientside image maps lẫn server-side image maps Không Slice vốn ln ln hình chữ nhật, image maps mang hình dạng www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Xem trước kết Bạn bắt đầu học cách xem trước ví dụ trang chủ HTML hoàn thành mà bạn phải khởi tạo Về tiến trình này, bạn dùng ứng dụng duyệt Web quen thuộc (Chẳng hạn, Netscape, Internet Explorer, Safari) thay Photoshop hay ImageReady Bạn không cần phải kết nối Internet Khởi động trình duyệt Web file kết thúc 15End.html thư mục Lesson15/15End File chứa HTML table vốn liên kết với số ảnh Web, tất tạo lập từ Photoshop ImageReady slices Click nút lệnh “why organic?”ở đỉnh trang Web Organic Foods Một cửa sổ duyệt Web mở để mở trang (Không phải trang mở rộng đầy đủ; Nó cịn trang giữ chỗ (placeholder page) để bạn click vào thực trình bày liên kết) Đóng file Why page đưa làm ví dụ Web browser Cũng Web browser, mở trang Organic Foods, click nút lệnh “products” đỉnh trang web Kế đến, đóng file ví dụ Web browser thị trang “Product” Một lần nữa, mở trang Organic Foods Web browser, di chuyển trỏ chuột bên ảnh măng tây cạnh phải trang web Chú ý đầu trỏ chuột chuyển thành biểu tượng bàn tay trỏ ( ), biểu thị vùng liên kết Di chuyển trỏ chuột lên lướt qua vùng khác trang ý trỏ chuột hiển thị mũi tên, hiển thị bàn tay Click vào bó măng tây để mở thêm trang liên kết khác Đoạn đóng Web browser để xem trang www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS chủ Click thêm vài liên kết khác mà bạn tìm thấy trang web Khi xem xong files kết thúc, đóng tất cửa sổ trình duyệt web khỏi ứng dụng Trong tiến trình này, bạn chứng kiến dạng thức liên kết khác : slices (Trong nút lệnh đỉnh trang Web) image maps (bó măng tây, đu đủ, vùng ảnh thảo mộc, vùng liên kết phù hợp với dạng đề mục mô tả) Bạn bắt đầu công việc với Slices, vốn ln hình chữ nhật Cắt lát ảnh Photoshop Bạn định nghĩa Slices Photoshop cách rê công cụ Slice chuyển đổi lớp vùng chọn thành Slices Bạn bắt đầu học việc cắt lát nút lệnh menu cho trang Web, dùng công cụ Slice Photoshop Về việc thiết kế trang Web với Photoshops ImageReady Khi dùng Photoshop ImageReady để thiết kế Web pages, phải nhớ in đầu công cụ đặc trưng khả thi ứng dụng • Photoshop cung cấp công cụ khởi tạo thao tác ảnh tĩnh dùng cho Web Bạn chia nhỏ ảnh thành nhiều Slices , đặt mối liên kết HTML text, tối ưu hóa slices, lưu ảnh trang Web • ImageReady cung cấp nhiều - khơng phải tất - công cụ biên tập ảnh tương tự Photoshop Thêm vào đó, cịn bao hàm công cụ pallettes dành cho việc xử lý khởi tạo ảnh Web động chẳng hạn animations rollovers Chuẩn bị tạo lập Slices Trước bắt đầu công việc, bạn nên tùy biến tùy chọn công việc cho thứ vào trạng thái sẵn sàng hoạt động Khởi động Adobe Photoshop, ấn tổ hợp Ctrl+Alt+Shift (Windows)/ Command+Option+Shift (Mac OS) để trả thiết lập mặc định Click nút File Browser ( ) dùng palette File Browser Folders để định vị chọn folder Lessons/Lesson15 Double-click lên ảnh nhỏ biểu thị file 15Start.psd, chọn file bấm lệnh File > Open menu trình duyệt File Browser Nếu thông báo xuất hỏi liệu bạn có muốn update text layers cho kết xuất vectơ không, chọn Update File học bao hàm đường dẫn ngang dọc màu blue Bạn dùng đường dẫn để bắt dính lệnh vẽ vùng chọn cho chúng gióng hàng cách ngắn Click nút lệnh close tiêu đề File Browser click nút lệnh File Browser tùy www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS chọn công cụ lần để đóng File Browser để giảm thiểu cản trở không gian làm việc Hãy đảm bảo lệnh sau chọn (có dấu kiểm), khơng, chọn chúng lúc • View > Show > Guides • View > Show > Slices • View > Snap • View > Snap To > Guides • View > Snap To > Slices Đường dẫn blue tạo lập trước nhằm giúp bạn vẽ xác slices Khi tạo lập slices gần đường dẫn, mép biên bắt dính đường dẫn cho slices ln đồng hiệu Dùng công cụ Slice để khởi tạo slices Bạn tự hỏi đầu chủ đề lại dùng “slices” thay “a slice” Câu trả lời là, bạn tạo slice bao hàm toàn ảnh - vốn rõ ràng điều vơ ích, lẽ slice tạo cách tự động - bạn khởi tạo slice Bất kỳ slice bên ảnh (1 user slice đó) gây hình thành slices khác (auto slice) phủ kín vùng ảnh phía ngồi user slice mà bạn vừa tạo Hãy ý đến hình chữ nhật nhỏ màu xám góc bên trái ảnh Trong vùng đó, bạn thấy số 01 icon chí cịn nhỏ huy hiệu (badge), tương tự dãy núi thu nhỏ Hình chữ nhật xác định slice 01 vốn bào hàm tồn ảnh Màu xám thơng báo cho bạn biết auto slice, khơng phải user slice Cịn biểu tượng slice hàm chứa nội dung hình ảnh bên www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Trên hộp công cụ, chọn công cụ Slice ( Photoshop CS ) Rê công cụ Slice theo đường chéo từ ên sang bên khu vực text “why organic?”, với điểm đầu điểm cuối gần sát bên đường dẫn (guides) bao quanh text Một hình chữ nhật màu xanh tương tự với hình chữ nhật biểu thị Slice 01 xuất góc bên trái Slice 02 mà bạn vừa khởi tạo Màu xanh nhắc nhở bạn user slice, auto slice Màu xám nguyên thủy biểu thị auto slice 01 cịn ngun, khơng thay đổi gì, vùng chứa bên slice 01 nhỏ đi, bao phủ cạnh trái trang Slice 03 - auto slice khác, biểu thị màu xám cố hữu - bao phủ vùng lại menu bên phải slice 03 Một auto slice thứ ba, slice 04, bao phủ khu vực bên menu phía bên phải slice 01 Tạo lập thêm nhiều user slices Giờ bạn thấy slices tạo thật dễ dàng, bạn cắt rời khoảng dừng dòng text menu thành nút lệnh Cũng công cụ Slice chọn công cụ, bạn rê chuột từ bên sang bên dòng text “products” để tạo lập user slice khác Slice trở thành slice 03 Con số biểu thị slice đứng sau slice 03 tự động tăng lần đơn vị www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Bạn thay đổi cách thức trỏ hiển thị hình cơng cụ Slice cách thay đổi thiết lập ưu tiên cho Photoshop Để chuyển đổi trỏ chuẩn biểu thị công cụ Slice ( ) thành trỏ presice - xác, vào menu Edit > Preferences > Display & Cursors (Windows) Photoshop > Preferences > Display & Cursors (Mac OS 10), chọn Pricise for Other Cursors option, click OK Từng lần nhau, kẻ nét vẽ công cụ Slice quanh đề mục text dòng sau : bao quanh từ “shop online”, “contacts”, “help” để khởi tạo thêm slices cho nút lệnh menu Bức ảnh bạn có thay slices : user slices auto slices Nếu số bạn không vậy, đừng lo bạn sửa điều ! Trên hộp công cụ, chọn công cụ Zoom ( ) click lên khu vực button slices để mở rộng khung ảnh lên 300% 400% Hãy khảo sát thật cẩn thận user slice mà bạn tạo lập để xem coi có khoảng trống chúng khơng (Nếu có, khoảng trống auto slices.) Nếu khơng có khoảng trống chúng, bạn bỏ qua bước Có khoảng trống slices Khơng có khoảng trống slices Trên hộp công cụ, Hãy chọn công cụ Slice Select ( ) ẩn bên công cụ Slice chọn user slices khơng bị bắt dính đường dẫn, nghĩa là, slice mà user slice sát bên tồn khoảng trống Kéo rê handle đánh dấu slice chọn đường biên slice bắt dính vị trí áp sát đường dẫn slices khác Chú ý : Bạn dùng cơng cụ Slice Select để kéo rê slice từ vị trí đến vị trí khác www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Nhấp đúp công cụ Zoom để trả độ phóng đại 100%, chọn File > Save Nếu bạn nhận thấy biểu tượng thị auto slices làm rối rắm tầm nhìn, chọn cơng cụ Slice Select đoạn click vào nút lệnh Hide Auto Slices tùy chọn công cụ Bạn ẩn đường dẫn cách chọn View > Show > Guides, bạn khơng cịn cần đến chúng Thiết lập tùy chọn cho slice Photoshop Các slices không đặc biệt hữu dụng bạn thiết lập tùy chọn cho chúng Các tùy chọn slices bao hàm tên slice URL mở người dùng click vào slice Tiến trình thiết lập tùy chọn slice Photoshop có khác so với cách bạn áp dụng ImageReady Trong Photoshop, bạn thiết lập tùy chọn hộp đối thoại Còn ImageReady, bạn thiết lập chúng palette Dẫu cách nữa, quy trình đơn giản, điều quan trọng bạn thực cơng việc ứng dụng bạn chuẩn bị thứ cho việc xây dựng trang Web Chú ý : Bạn thiết lập tùy chọn cho auto slice, làm làm cho auto slice tự động chuyển thành user slice Chọn công cụ Slice Select ( ), dùng để chọn slice 02, với dịng text “why organics?” Trên tùy chọn công cụ, click nút lệnh Slice Options Photoshop đặt tên cho slice dựa tên file hay số biểu thị slice, vậy, filename hành “15Start_02,”biểu thị slice số hai file 15Stard.psd Trong hộp thoại Slice Options, gõ vào thông tin : Trong Name, gõ Why_button ; URL, gõ pages/why.html ; Target, gõ _blank (Hãy cẩn thận đừng để sót dấu gạch chân (_) trước ký tự “b”.) Đoạn click OK www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Chú ý : Tùy chọn Target quản lý cách mở file liên kết bạn click vào đường link Tùy chọn _blank mở trang liên kết tình Web browser Nếu bạn muốn đường link mở đến tình nguyên thủy Web browser, bạn gõ code khác thay _blank Để có thêm thơng tin, xem Adobe Photoshop Help HTML reference (chẳng hạn, sách in Web site diễn giải HTML code) Dùng công cụ Slice Select , chọn slice 03, slice có chứa text “products” , đọan click Slice Options tùy chọn công cụ Nhập vào thơng tin sau đây: • Trong Name, gõ Products_button • Trong URL, gõ pages/products.html • Trong Target, gõ _blank Click OK để đóng hộp thọai Chọn File > Save Bạn đừng đóng tài liệu vội cần đến phần Có thể bạn nhận thấy có nhiều tùy chọn hộp thọai mà bạn điền thông tin cho slices Thí dụ, bạn gõ vào tùy chọn Alt Tag muốn Thường Alt Tag text dùng để xác định slice có nội dung khơng thể nhìn thấy khó hiểu Nó xuất tooltips vài Web browser trình giữ chỗ (placeholder) suốt q trình download dài Nó đọc thành tiếng vài ứng dụng screen-reader Để có thêm thơng tin cách dùng tùy chọn này, xem Photoshop Help www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Làm việc với slices ImageReady Mặc dầu bạn tiếp tục thiết lập tùy chọn slice Photoshop, thực công việc đặc biệt ImageReady hiệu Bạn dùng nút lệnh Jump To để chuyển sang ImageReady Nút lệnh Jump To không đơn giản bắt đầu vào ImageReady mà “nhảy tót” ln vào file mở Photoshop, chuyển đổi tác vụ quản lý sang ImageReady khi, bạn đóng file, bạn “nhảy” trở Photoshops Một mở ImageReady, bạn phải định nghĩa lại khơng gian làm việc (Workspace) thích hợp để phục vụ nhu cầu cụ thể cho học Bạn bắt đầu tiến trình với file 15Start.psd mở Photoshop Chú ý : Workspace xác định palettes mở, vị trí chúng vùng làm việc Sự minh định Workspace không ảnh hưởng đến kích thước, vị trí hay thiết lập view cửa sổ ảnh Hãy chắn bạn lưu file Kế tiếp, hộp công cụ Photoshops, click nút lệnh Jump to ImageReady ( ) ImageReady mở với file 15Start.psd Lưu ý rằng, ImageReady có menu Slices palette Slices, khơng có Photoshop Chọn Window > Workspace > Interactivity Palette Locations để đóng vài palettes bạn khơng cần cho học Đóng nhóm palettes Animation Web Content cách click nút lệnh close tiều đề palette không chọn palettes menu Windows Rê nhóm palette Slice phía bên phải bắt dính vị trí cạnh biên vùng làm việc Khu vực làm việc bạn trông giống minh họa www.vietphotoshop.com - Lê Thuận 10 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Chọn Window > Workspace > Save Workspace Trong hộp thọai Save Workspace, gõ : 15_Links, click OK Giờ 15_Links Workspace xuất trình đơn phụ menu Windows Bạn kiểm tra điều cách chọn workspace khác sau chọn 15_Links lần Lưu ý : Custom workspaces bạn vừa khởi tạo lưu lại cho ImageReady hoặcPhotoshops không đóng ứng dụng tái thiết lập chế độ mặc định Workspace bạn luôn khả thi trình đơn phụ Workspace bạn chủ động xóa chúng Tất nhiên là, ImageReady workspace khơng chuyển sang Photoshop ngược lại ứng dụng có palettes khác Thiết lập tùy chọn slice ImageReady Không gian làm việc ImageReady có thuận lợi so với Photoshops tác vụ ấn định tùy chọn slice Palette Slice ImageReady làm cho hợp lý để nhập tùy biến slice bạn muốn mà không cần phải đòi hỏi tác vụ mở rộng phải mở hộp đối thoại để lại phải cơng đóng lại Tiến trình liền theo tiếp tục công việc thiết lập tùy chọn dang dở user slices menu www.vietphotoshop.com - Lê Thuận 11 Chương 15: Tạo lập liên kết bên ảnh Trong hộp công cụ, chọn công cụ Slice Select Photoshop CS thường nằm công cụ Slice ẩn phía Chọn slice 04, vốn chứa text “shop online” Trong Slice palette, nhập vào thơng tin sau đây: • Đối với Name, gõ Shop_button • Đối với URL, gõ pages/shop.html • Đối với Target, gõ _blank từ pop-up menu Chọn slice 05 gõ Contact_button Name pages/contact.html cho URL Chọn _blank cho Target Chọn slice 06 gõ Help_button cho Name pages/help.html cho URL Chọn _blank cho Target Chọn File > Save Một bạn gõ URL cho slice nào, ImageReady gán việc liệt kê URL pop-up menu Slices Image Maps palettes Nếu bạn khởi tạo liên kết khác trang, bạn chọn URL từ danh sách thay phải gõ tên vào Tạo lập layer-based slice Một phương pháp khác để định nghĩa slices Photoshop ImageReady chuyển đổi (convert) layers thành slices Một layer-based slice (slice có nguồn gốc từ layer) bao gồm tất liệu pixel layer chọn Khi bạn biên tập lại layer đó, di chuyển nó, áp dụng lên hiệu ứng layer, layer-based slice hiệu chỉnh để hoàn thiện pixels Để tách liên kết layer-based slice khỏi layer tạo nó, bạn convert thành user slice Bạn khởi tạo slice dựa text layer quyền, áp dụng hiệu ứng layer cho cho bạn thấy slice hiệu chỉnh phù hợp với hiệu ứng www.vietphotoshop.com - Lê Thuận 12 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Trong Layers palette, chọn “To edit in Slice palette” text layer Chọn Layer > New Layer Based Slice ImageReady đổi chỗ vùng auto slices layer-based slice cho toàn layer Hãy ý biểu tượng layer ( Cũng vậy, slice icon ( ) góc bên trái slice, có nguồn gốc từ layer ) xuất “To edit in Slice palette” text layer, nhắc nhở bạn layer nguồn gốc slice Lưu ý : Bạn áp dụng layer styles cho layer mà bạn dùng để khởi tạo layer-based slice Các kích thước slice tự động tăng lên để ăn khớp với khơng gian mở rộng cần có để hiển thị hiệu ứng bạn áp dụng chúng trình tự Nếu khơng, bạn cần phải quay trở lại bước trước định lại kích cỡ slices, bạn thấy Bài 17, “Tạo hiệu ứng Rollover cho trang web” Chon File > Save để lưu lại công việc bạn ImageReady Tạo lập No Image slices Trong ImageReady Photoshop, bạn tạo lập No Image slices sau đặt thêm text mã nguồn HTML vào No Image slices có màu lưu giữ phần file HTML Thuận lợi việc dùng No Image slices văn văn biên tập trình biên tập HTML nào, tránh cho bạn phiền hà phải quay trở lại Photoshops ImageReady để biên tập Điều bất tiện là, văn phát triển đến mức lớn cho slice, bị bẻ gãy thành bảng table HTMLvà bắt đầu tạo khoảng trống không mong muốn Giải pháp phải làm cho slice đủ rộng để điều chỉnh cho phù hợp với thay đổi phải chọn thuộc tính font thích hợp với kích thước slice www.vietphotoshop.com - Lê Thuận 13 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Hãy chắn layer-based slice mà bạn tạo cho thông tin quyền chọn cửa sổ ảnh Nếu chưa, dùng cơng cụ Slice Select để chọn Trong Slice palette, chọn No Image từ Type pop-up menu Dùng Text box Slice palette (chứ khơng phải cửa sổ ảnh) gõ vào vài thông tin quyền (Ở dùng ©2004 Organic Support Group) Hãy đảm bảo tùy chọn Text is HTML xác nhận Bạn đặt thêm biểu tượng quyền cách nhấn giữ phím Alt gõ 0169 dãy phím số (Windows) nhấm giữ phím Option gõ G (Mac OS) Do bạn chọn No Image cho dạng thức slice, nên layer trình giữ chỗ văn (“To edit in Slice palette”) mà bạn thấy cửa sổ ảnh không xuất trang Web Còn dòng text mà bạn gõ vào Slice palette trang Web; nhiên, không xuất ảnh bị cắt lát bạn ImageReady hay Photoshop www.vietphotoshop.com - Lê Thuận 14 ... - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Chú ý : Tùy chọn Target quản lý cách mở file liên kết bạn click vào đường link Tùy chọn _blank mở trang liên kết tình Web browser Nếu... tây để mở thêm trang liên kết khác Đoạn đóng Web browser để xem trang www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS chủ Click thêm vài liên kết khác mà bạn tìm... www.vietphotoshop.com - Lê Thuận Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Xem trước kết Bạn bắt đầu học cách xem trước ví dụ trang chủ HTML hoàn thành mà bạn phải khởi tạo Về tiến trình này, bạn dùng