Giáo trình Photoshop CS - Chương 15: Tạo lập các liên kết bên trong một bức ảnh

Nội dung text: Giáo trình Photoshop CS - Chương 15: Tạo lập các liên kết bên trong một bức ảnh

1. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 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.vietphotoshop.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.vietphotoshop.com Bài học này sẽ đề cập về các lát cắt và các ánh xạ ảnh căn bản - những đặc trưng mà bạn sẽ dùng để khởi tạo những mối liên kết siêu văn bản phức tạp ngay trong phạm vi một file đồ họa đơn giản. Người sử dụng có thể chỉ cần click vào một phần đồ thị đã bị cắt lát hoặc được gán ánh xạ ảnh trong một trang Web để mở một site và click vào một vùng khác để đi đến một site khác. Có 2 kỹ thuật mà bạn sẽ đùng để khởi tạo các mảnh chia được gán liên kết trong một bức ảnh mà người dùng có thể click vào để mở những site khác nhau trong một trình duyệt Web. Một trong 2 phương pháp đó là định nghĩa lát cắt (từ đây về sau sẽ được viết theo nguyên bản tiếng Anh là slice), là những mảnh nhỏ hình chữ nhật thu được từ quá trình chia cắt một bức ảnh trong Adobe Photoshop hay trong Adobe ImageReady. Phương pháp còn lại là khởi tạo các ánh xạ ảnh (từ đây về sau sẽ được viết theo nguyên bản tiếng Anh là image maps), không nhất thiết phải là hình chữ nhật. Trong bài này, bạn sẽ được học các chủ điểm sau : • Một số phương pháp khởi tạo image slices. • Phân biệt sự khác nhau giữa user slices và auto slices. • Liên kết user slices với các trang hay địa chỉ HTML. • Khởi tạo các lát cắt “không phải là ảnh” (”no image” slice) để chứa text có thể biên tập được trong HTML. • Định nghĩa các vùng ánh xạ ảnh (image-map areas) bằng 3 phương pháp khác nhau. • Liên kết image-map areas với các trang hay địa chỉ HTML. www.vietphotoshop.com - Lê Thuận 1
2. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS • Bằng một qui trình tự động, tạo ra một trang HTML chứa bức ảnh bị cắt trong một bảng table nào đó. Bạn sẽ phải dành ra khoảng 90 phút để hoàn thành bài học này. Bạn có thể thực hiện việc tạo các slices trong cả Adobe Photoshop lẫn Adobe ImageReady, nhưng chỉ trong ImageReady mới có những công cụ tạo lập image maps. Lưu ý rằng, những người dùng Windows 2000 cần phải unlock những tập tin bài học trước khi dùng chúng. Để có thêm thông tin, xin tham khảo trang 3 “Copying the Classroom in a Book files” (Điều này không cần thiết đối với người dùng Windows XP hoặc Mac OS). Khởi đầu Trong bài học này bạn sẽ làm việc trên những đồ thị được trù liệu sẵn cho một Web home page. Mục tiêu của bạn là nhúng các liêu kết siêu văn bản vào bên trong 1 bức ảnh phức hợp vốn là 1 file .psd đơn lẻ. Những vùng khác, hoặc các điểm nóng (hotspots - khu vực ảnh hoặc đồ thị mà bạn có thể click vào để nhảy đến 1 địa chỉ được xác định bằng 1 URL) của 1 image map liên kết với những file khác, sao cho người dùng có thể click lên 1 vùng nào đó của trang chủ để mở 1 trang liên kết hoặc click lên 1 vùng khác của trang chủ để mở 1 trang liên kết khác. Sẽ có cả những vùng không liên kết của trang chủ mà không mang lại một thay đổi nào nếu người dùng click một cách ngẫu nhiên hay hú họa. Bài học sau trong cuốn sách này sẽ bao trùm quy trình tối ưu hóa các lát cắt riêng lẻ với các thiết lập khác nhau từ vùng tĩnh của bức ảnh và cách làm cho các slices trở nên sinh động bằng cách định nghĩa các hiệu ứng tương tác động (rollover effects). Đôi điều về slices và image maps Phương pháp đầu tiên là khởi tạo các slices. Slices là những vùng trên một tấm ảnh được bạn định nghĩa dựa trên các lớp (layers), các đường dẫn (guides), hoặc các vùng chọn đặc biệt trong một tấm ảnh, hoặc bằng cách dùng công cụ Slice. Khi bạn định nghĩa 1 slice trên một bức ảnh, Photoshop hay ImageReady sẽ tạo một bảng (table) HTML hoặc 1 tấm rèm kiểu dáng (cascading style sheet) để chứa và gióng hàng các slices. Nếu muốn, bạn có thể tạo ra (bằng một quy trình tự động) và xem trước 1 file HTML chứa tấm ảnh đã bị cắt lát cùng với table hoặc cascading style sheet. Một image map cũng là 1 vùng ảnh phục vụ cho việc hỗ trợ 1 liên kết siêu văn bản. Những quá trình quản lý việc tạo lập các image maps chỉ diễn ra trong Adobe ImageReady; vì vậy, bạn phải chuyển sang ImageReady để làm việc này nếu file được mở từ Photoshop. ImageReady sẽ khởi tạo cả client- side image maps lẫn server-side image maps. Không như Slice vốn luôn luôn là hình chữ nhật, image maps có thể mang hình dạng bất kỳ. www.vietphotoshop.com - Lê Thuận 2
3. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Xem trước kết quả Bạn sẽ bắt đầu bài học bằng cách xem trước một ví dụ về 1 trang chủ HTML đã hoàn thành mà bạn sẽ phải khởi tạo. Về tiến trình này, bạn sẽ dùng ứng dụng duyệt Web quen thuộc của mình (Chẳng hạn, Netscape, Internet Explorer, hoặc Safari) thay vì Photoshop hay ImageReady. Bạn cũng không cần phải kết nối Internet. 1. Khởi động 1 trình duyệt Web và file kết thúc 15End.html trong thư mục Lesson15/15End. File này chứa 1 HTML table vốn đã liên kết với một số ảnh Web, tất cả đều được tạo lập từ Photoshop và ImageReady slices. 2. Click nút lệnh “why organic?”ở đỉnh trang Web Organic Foods. Một cửa sổ duyệt Web mới mở ra để mở 1 trang mới. (Không phải là 1 trang mở rộng đầy đủ; Nó còn hơn 1 trang giữ chỗ (placeholder page) để chỉ ra rằng những gì bạn click vào thực sự trình bày các liên kết). 3. Đóng file Why page được đưa ra làm ví dụ trong Web browser. 4. Cũng trong Web browser, hãy mở trang Organic Foods, click nút lệnh “products” ở đỉnh trang web. Kế đến, hãy đóng file ví dụ mới của Web browser đang chỉ thị trang “Product”. 5. Một lần nữa, hãy mở trang Organic Foods trong Web browser, di chuyển trỏ chuột bên trên bức ảnh măng tây ở cạnh phải trang web. Chú ý rằng đầu trỏ chuột sẽ chuyển thành biểu tượng bàn tay đang trỏ ( ), biểu thị rằng vùng nay đã được liên kết. Di chuyển trỏ chuột lên trên và lướt qua những vùng khác của trang và chú ý rằng khi thì trỏ chuột hiển thị như 1 mũi tên, khi thì hiển thị như một bàn tay. 6. Click vào bó măng tây để mở thêm một trang liên kết khác. Đoạn đóng Web browser để xem trang www.vietphotoshop.com - Lê Thuận 3
4. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS chủ. Click thêm một vài liên kết khác mà bạn tìm thấy trên trang web. 7. Khi đã xem xong các files kết thúc, hãy đóng tất cả cửa sổ trình duyệt web và thoát ra khỏi ứng dụng. Trong tiến trình này, bạn đã được chứng kiến 2 dạng thức liên kết khác nhau : slices (Trong các nút lệnh ở đỉnh trang Web) và image maps (bó măng tây, quả đu đủ, và các vùng ảnh thảo mộc, trong đó vùng liên kết phù hợp với dạng của đề mục được mô tả). Bạn sẽ bắt đầu công việc với Slices, vốn luôn là những hình chữ nhật. Cắt lát một tấm ảnh trong Photoshop Bạn có thể định nghĩa Slices trong Photoshop bằng cách rê công cụ Slice hoặc chuyển đổi các lớp hoặc vùng chọn thành Slices. Bạn sẽ bắt đầu bài học bằng việc cắt lát các nút lệnh menu cho trang Web, dùng công cụ Slice trong Photoshop. Về việc thiết kế trang Web với Photoshops và ImageReady Khi dùng Photoshop và ImageReady để thiết kế Web pages, phải luôn nhớ như in trong đầu các công cụ và đặc trưng khả thi trong từng ứng dụng. • Photoshop cung cấp những công cụ khởi tạo và thao tác trên những ảnh tĩnh dùng cho Web. Bạn có thể chia nhỏ bức ảnh thành nhiều Slices , đặt các mối liên kết và HTML text, tối ưu hóa các slices, và lưu ảnh như là 1 trang Web. • ImageReady cung cấp nhiều - nhưng không phải tất cả - những công cụ biên tập ảnh tương tự như Photoshop. Thêm vào đó, nó còn bao hàm cả những công cụ và pallettes dành cho việc xử lý và khởi tạo các ảnh Web động chẳng hạn animations và rollovers. Chuẩn bị tạo lập Slices Trước khi bắt đầu công việc, bạn nên tùy biến các tùy chọn công việc sao cho mọi thứ ở vào trạng thái sẵn sàng hoạt động. 1. Khởi động Adobe Photoshop, ấn tổ hợp Ctrl+Alt+Shift (Windows)/ Command+Option+Shift (Mac OS) để trả về các thiết lập mặc định. 2. Click nút File Browser ( ) và dùng palette File Browser Folders để định vị và chọn folder Lessons/Lesson15 3. Double-click lên ảnh nhỏ biểu thị file 15Start.psd, hoặc chọn file ấy và bấm lệnh File > Open trên thanh menu của trình duyệt File Browser. Nếu 1 thông báo xuất hiện hỏi liệu rằng bạn có muốn update các text layers cho kết xuất vectơ không, hãy chọn Update. File bài học này bao hàm những đường dẫn ngang và dọc màu blue. Bạn sẽ dùng những đường dẫn này để bắt dính các lệnh khi vẽ các vùng chọn sao cho chúng được gióng hàng một cách ngay ngắn. 4. Click nút lệnh close trên thanh tiêu đề File Browser hoặc click nút lệnh File Browser trên thanh tùy www.vietphotoshop.com - Lê Thuận 4
5. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS chọn công cụ 2 lần để đóng File Browser để giảm thiểu cản trở trong không gian làm việc. 5. Hãy đảm bảo rằng các lệnh sau đây đã được chọn (có dấu kiểm), nếu không, hãy chọn chúng ngay lúc này. • View > Show > Guides • View > Show > Slices • View > Snap • View > Snap To > Guides • View > Snap To > Slices Đường dẫn blue đã được tạo lập trước nhằm giúp bạn vẽ chính xác các slices. Khi tạo lập các slices gần các đường dẫn, các mép biên của nó sẽ bắt dính đường dẫn sao cho các slices luôn đồng nhất và hiệu quả. Dùng công cụ Slice để khởi tạo các slices. Bạn có thể tự hỏi tại sao ở đầu chủ đề này lại dùng “slices” thay vì “a slice”. Câu trả lời là, trừ phi bạn tạo ra 1 slice bao hàm toàn bộ tấm ảnh - vốn rõ ràng là một điều vô ích, nhất là vì lẽ slice đó được tạo ra một cách tự động - bạn không thể nào khởi tạo chỉ duy nhất 1 slice được. Bất kỳ 1 slice mới nào bên trong 1 bức ảnh (1 user slice nào đó) cũng đều gây ra sự hình thành những slices khác (auto slice) phủ kín mọi vùng ảnh phía ngoài user slice mà bạn vừa tạo ra. Hãy chú ý đến hình chữ nhật rất nhỏ màu xám ở góc trên bên trái ảnh. Trong vùng đó, bạn sẽ thấy số 01 và 1 icon thậm chí còn nhỏ hơn hoặc 1 huy hiệu (badge), tương tự như một dãy núi thu nhỏ. Hình chữ nhật này xác định slice 01 vốn bào hàm toàn bộ tấm ảnh. Màu xám thông báo cho bạn biết rằng nó là một auto slice, không phải là 1 user slice. Còn cái biểu tượng chỉ ra rằng slice này hàm chứa một nội dung hình ảnh bên trong nó www.vietphotoshop.com - Lê Thuận 5
6. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS .1. Trên hộp công cụ, hãy chọn công cụ Slice ( ). 2. Rê công cụ Slice theo đường chéo từ ên này sang bên kia khu vực text “why organic?”, với điểm đầu và điểm cuối gần sát bên các đườ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 sẽ xuất hiện ở góc trên bên trái của Slice 02 mà bạn vừa khởi tạo. Màu xanh của nó nhắc nhở bạn rằng đây là 1 user slice, không phải là auto slice. Màu xám nguyên thủy biểu thị auto slice 01 vẫn còn nguyên, không thay đổi gì, nhưng vùng được chứa bên trong slice 01 đã nhỏ đi, chỉ bao phủ cạnh trái của trang. Slice 03 - một auto slice khác, cũng được biểu thị bởi màu xám cố hữu - bao phủ vùng còn lại của thanh menu ở bên phải của slice 03. Một auto slice thứ ba, slice 04, bao phủ khu vực bên dưới của thanh menu và ở về phía bên phải của slice 01. Tạo lập thêm nhiều user slices Giờ thì bạn đã thấy rằng các slices được tạo ra thật là dễ dàng, bạn sẽ cắt rời những khoảng dừng của dòng text trên thanh menu thành 4 nút lệnh nữa. 1. Cũng bằng công cụ Slice được chọn trên thanh công cụ, bạn hãy rê chuột từ bên này sang bên kia dòng text “products” để tạo lập một user slice khác. Slice mới này sẽ trở thành slice 03. Con số biểu thị mỗi slice đứng sau slice 03 sẽ tự động tăng mỗi lần 1 đơn vị. www.vietphotoshop.com - Lê Thuận 6
7. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Bạn có thể thay đổi cách thức con trỏ hiển thị trên màn hình đối với công cụ Slice bằng cách thay đổi các thiết lập ưu tiên cho Photoshop. Để chuyển đổi con trỏ chuẩn biểu thị công cụ Slice ( ) thành con trỏ presice - chính xác, hãy vào menu Edit > Preferences > Display & Cursors (Windows) hoặc Photoshop > Preferences > Display & Cursors (Mac OS 10), chọn Pricise for Other Cursors option, và click OK. 2. Từng lần 1 kế tiếp nhau, hãy kẻ các nét vẽ bằng công cụ Slice quanh từng mỗi đề mục text một trong cùng 1 dòng như sau : bao quanh các từ “shop online”, “contacts”, và “help” để khởi tạo thêm 3 slices nữa cho các nút lệnh menu. Bức ảnh của bạn sẽ có cả thay 8 slices : 5 user slices và 3 auto slices. Nếu con số của bạn không đúng như vậy, hãy đừng lo gì cả vì bạn sẽ sửa điều đó ngay đây thôi ! 3. Trên hộp công cụ, hãy chọn công cụ Zoom ( ) và click lên khu vực các button slices để mở rộng khung ảnh lên 300% hoặc 400% 4 . Hãy khảo sát thật cẩn thận các user slice mà bạn đã tạo lập để xem coi có bất kỳ khoảng trống nào giữa chúng không. (Nếu có, những khoảng trống này sẽ là các auto slices.) Nếu không có khoảng trống nào giữa chúng, bạn có thể bỏ qua bước 5 và 6. Có khoảng trống giữa các slices Không có khoảng trống giữa các slices 5. Trên hộp công cụ, Hãy chọn công cụ Slice Select ( ) ẩn bên dưới công cụ Slice và chọn trong những user slices không bị bắt dính đường dẫn, nghĩa là, 1 slice mà giữa nó và user slice sát bên tồn tại 1 khoảng trống. 6. Kéo rê 1 handle nào đó đánh dấu slice được chọn cho đến khi đường biên của slice này bắt dính vị trí áp sát các đường dẫn và những slices khác. Chú ý : Bạn cũng có thể dùng công cụ Slice Select để kéo rê slice từ vị trí này đến vị trí khác. www.vietphotoshop.com - Lê Thuận 7
8. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 7. Nhấp đúp công cụ Zoom để trả về độ phóng đại 100%, chọn File > Save. Nếu bạn nhận thấy rằng những biểu tượng chỉ thị của các auto slices đang làm rối rắm tầm nhìn, hãy chọn công cụ Slice Select đoạn click vào nút lệnh Hide Auto Slices trên thanh tùy chọn công cụ. Bạn cũng có thể ẩn các đường dẫn bằng cách chọn View > Show > Guides, bởi vì bạn sẽ không còn cần đến chúng nữa. Thiết lập các tùy chọn cho slice trong Photoshop Các slices sẽ không đặc biệt hữu dụng cho tới khi bạn thiết lập các tùy chọn cho chúng. Các tùy chọn slices bao hàm tên slice và URL được mở ra khi người dùng click vào slice. Tiến trình thiết lập các tùy chọn slice trong Photoshop có hơi khác một ít so với cách bạn sẽ áp dụng trong ImageReady. Trong Photoshop, bạn sẽ thiết lập các tùy chọn trong 1 hộp đối thoại. Còn trong ImageReady, bạn sẽ thiết lập chúng trong 1 palette. Dẫu bằng cách nào đi chăng nữa, quy trình này cũng khá đơn giản, nhưng điều quan trọng là bạn có thể thực hiện được công việc trong từng ứng dụng nếu bạn đang chuẩn bị các thứ cho việc xây dựng 1 trang Web. Chú ý : Bạn có thể thiết lập các tùy chọn cho 1 auto slice, nhưng làm như vậy sẽ làm cho 1 auto slice tự động chuyển thành 1 user slice. 1. Chọn công cụ Slice Select ( ), và dùng nó để chọn slice 02, với dòng text “why organics?”. 2. Trên thanh tùy chọn công cụ, click nút lệnh Slice Options. Photoshop mặc nhiên đặt tên cho từng slice dựa trên tên file hay con số biểu thị slice, vì vậy, filename hiện hành là “15Start_02,”biểu thị slice số hai trong file 15Stard.psd. 3. Trong hộp thoại Slice Options, hãy gõ vào các thông tin : Trong Name, gõ Why_button ; trong URL, gõ pages/why.html ; và trong 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 8
9. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Chú ý : Tùy chọn Target sẽ quản lý cách mở 1 file liên kết khi bạn click vào đường link. Tùy chọn _blank sẽ mở trang liên kết trong 1 tình huống mới của 1 Web browser. Nếu bạn muốn đường link mở đến tình huống nguyên thủy của Web browser, bạn có thể gõ 1 code khác thay vì _blank. Để có thêm thông tin, hãy xem Adobe Photoshop Help hoặc 1 HTML reference (chẳng hạn, 1 cuốn sách in hoặc là 1 Web site diễn giải HTML code) 4. Dùng công cụ Slice Select , chọn slice 03, là slice có chứa text “products” , đọan click Slice Options trên thanh tùy chọn công cụ 5. Nhập vào các thông tin sau đây: • Trong Name, gõ Products_button. • Trong URL, gõ pages/products.html. • Trong Target, gõ _blank. 6. Click OK để đóng hộp thọai. 7. Chọn File > Save. Bạn đừng đóng tài liệu vội vì chúng ta cần đến nó trong phần kế tiếp Có thể bạn sẽ nhận thấy là có nhiều hơn 3 tùy chọn trong hộp thọai mà bạn đã điền thông tin cho những slices này. Thí dụ, bạn có thể gõ gì đó vào tùy chọn Alt Tag nếu muốn. Thường thì Alt Tag text được dùng để xác định 1 slice có nội dung không thể nhìn thấy được hoặc nó khá khó hiểu. Nó có thể xuất hiện trong tooltips của 1 vài Web browser hoặc như 1 trình giữ chỗ (placeholder) trong suốt 1 quá trình download dài. Nó cũng có thể được đọc thành tiếng bằng một vài ứng dụng screen-reader. Để có thêm thông tin về cách dùng tùy chọn này, hãy xem Photoshop Help. www.vietphotoshop.com - Lê Thuận 9
10. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Làm việc với slices trong ImageReady Mặc dầu bạn có thể tiếp tục thiết lập các tùy chọn slice trong Photoshop, nhưng thực hiện công việc đặc biệt này trong ImageReady sẽ hiệu quả hơn. Bạn sẽ dùng nút lệnh Jump To để chuyển sang ImageReady. Nút lệnh Jump To không chỉ đơn giản là bắt đầu vào ImageReady mà còn là “nhảy tót” luôn vào file đang mở trong Photoshop, chuyển đổi luôn các tác vụ quản lý sang ImageReady cho tới khi, hoặc là bạn đóng file, hoặc là bạn “nhảy” trở về Photoshops. Một khi mở ImageReady, bạn sẽ phải định nghĩa lại không gian làm việc (Workspace) thích hợp để phục vụ những nhu cầu cụ thể cho bài học này. Bạn sẽ bắt đầu tiến trình với file 15Start.psd đã mở Photoshop. Chú ý : Workspace xác định những palettes nào được mở, và những vị trí của chúng trong vùng làm việc. Sự minh định Workspace không ảnh hưởng gì đến kích thước, vị trí hay các thiết lập view của cửa sổ ảnh. 1. Hãy chắc chắn rằng bạn đã lưu file. Kế tiếp, trong hộp công cụ Photoshops, click nút lệnh Jump to ImageReady ( ). ImageReady mở ra cùng với file 15Start.psd. Lưu ý rằng, ImageReady có 1 menu Slices và 1 palette Slices, những cái này không có trong Photoshop. 2. Chọn Window > Workspace > Interactivity Palette Locations để đóng một vài palettes bạn không cần cho bài học này. 3. Đóng nhóm palettes Animation và Web Content bằng cách click các nút lệnh close trên thanh tiều đề của từng palette hoặc không chọn các palettes này trong menu Windows. 4. Rê nhóm palette Slice về phía bên phải cho đến khi nó bắt dính vị trí cạnh biên của vùng làm việc. Khu vực làm việc của bạn sẽ trông giống như minh họa dưới đây www.vietphotoshop.com - Lê Thuận 10
11. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 5. Chọn Window > Workspace > Save Workspace. 6. Trong hộp thọai Save Workspace, hãy gõ : 15_Links, và click OK. Giờ thì 15_Links Workspace đã xuất hiện trong trình đơn phụ của menu Windows. Bạn có thể kiểm tra điều này bằng cách chọn 1 workspace khác và sau đó chọn 15_Links 1 lần nữa. Lưu ý : Custom workspaces bạn vừa khởi tạo và lưu lại cho hoặc ImageReady hoặcPhotoshops sẽ không mất đi khi đóng ứng dụng hoặc tái thiết lập các chế độ mặc định. Workspace của bạn sẽ luôn luôn khả thi trên trình đơn phụ Workspace cho tới khi bạn chủ động xóa chúng. Tất nhiên là, ImageReady workspace sẽ không chuyển sang Photoshop hoặc ngược lại bởi vì 2 ứng dụng này có những palettes khác nhau. Thiết lập các tùy chọn slice trong ImageReady Không gian làm việc của ImageReady có 1 thuận lợi hơn so với Photoshops trong tác vụ ấn định các tùy chọn slice. Palette Slice trong ImageReady làm cho nó hợp lý hơn để nhập các tùy biến slice bạn muốn mà không cần phải đòi hỏi các tác vụ mở rộng như phải mở một hộp đối thoại để rồi lại phải mất công đóng nó lại. Tiến trình liền theo đây sẽ tiếp tục công việc thiết lập các tùy chọn còn dang dở đối với 3 user slices trên thanh menu. www.vietphotoshop.com - Lê Thuận 11
12. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 1. Trong hộp công cụ, hãy chọn công cụ Slice Select thường nằm dưới công cụ Slice hơn là ẩn phía dưới nó. 2. Chọn slice 04, vốn chứa text “shop online”. 3 . Trong Slice palette, nhập vào các 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. 4. Chọn slice 05 và gõ Contact_button đối với Name và pages/contact.html cho URL. Chọn _blank cho Target. 5. Chọn slice 06 và gõ Help_button cho Name và pages/help.html cho URL. Chọn _blank cho Target. 6. Chọn File > Save. Một khi bạn gõ một URL nào đó cho bất kỳ slice nào, ImageReady sẽ gán việc liệt kê ấy trên URL pop-up menu trong Slices và Image Maps palettes. Nếu bạn khởi tạo một liên kết khác trên cùng 1 trang, bạn có thể chọn URL đó từ danh sách thay vì phải gõ tên vào. Tạo lập một layer-based slice Một phương pháp khác để định nghĩa slices trong Photoshop và ImageReady là chuyển đổi (convert) layers thành slices. Một layer-based slice (slice có nguồn gốc từ layer) sẽ bao gồm tất cả dữ liệu pixel trong layer được chọn. Khi bạn biên tập lại layer đó, hoặc di chuyển nó, hoặc áp dụng lên nó một hiệu ứng layer, layer-based slice sẽ hiệu chỉnh để hoàn thiện các pixels mới. Để tách liên kết 1 layer-based slice ra khỏi layer tạo ra nó, bạn có thể convert nó thành 1 user slice. Bạn sẽ khởi tạo 1 slice dựa trên text layer về bản quyền, và rồi áp dụng 1 hiệu ứng layer cho nó sao cho bạn có thể thấy slice này hiệu chỉnh phù hợp với hiệu ứng mới. www.vietphotoshop.com - Lê Thuận 12
13. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 1. Trong Layers palette, hãy chọn “To edit in Slice palette” text layer. 2. Chọn Layer > New Layer Based Slice. ImageReady sẽ đổi chỗ những vùng của các auto slices bằng một layer-based slice cho toàn bộ layer. Hãy chú ý biểu tượng layer ( ) ở góc trên bên trái của slice, chỉ ra rằng nó có nguồn gốc từ layer. Cũng vậy, 1 slice icon ( ) xuất hiện trên “To edit in Slice palette” text layer, nhắc nhở bạn rằng layer nay là nguồn gốc của 1 slice. Lưu ý : Bạn vẫn có thể áp dụng các layer styles cho layer mà bạn dùng để khởi tạo một layer-based slice. Các kích thước của slice này sẽ tự động tăng lên để ăn khớp với bất kỳ không gian mở rộng cần có để hiển thị hiệu ứng nếu bạn áp dụng chúng trong trình tự này. Nếu không, có thể bạn cần phải quay trở lại các bước trước đó và định lại kích cỡ các slices, như bạn sẽ thấy trong Bài 17, “Tạo hiệu ứng Rollover cho trang web”. 3. Chon File > Save để lưu lại công việc của bạn trong ImageReady. Tạo lập No Image slices Trong ImageReady và Photoshop, bạn có thể tạo lập các No Image slices và sau đó đặt thêm text hoặc mã nguồn HTML vào đó. No Image slices có thể có màu nền và được lưu giữ như là một phần của file HTML. Thuận lợi đầu tiên của việc dùng No Image slices đối với văn bản là văn bản đó có thể được biên tập trong bất kỳ trình biên tập HTML nào, tránh cho bạn sự phiền hà phải quay trở lại Photoshops hoặc ImageReady để biên tập nó. Điều bất tiện là, nếu văn bản phát triển đến mức quá lớn cho 1 slice, nó sẽ bị bẻ gãy thành bảng table HTMLvà bắt đầu tạo ra những khoảng trống không mong muốn. Giải pháp là phải làm cho slice đủ rộng để có thể điều chỉnh cho phù hợp với những thay đổi và phải chọn các thuộc tính font thích hợp với kích thước của slice. www.vietphotoshop.com - Lê Thuận 13
14. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 1. Hãy chắc chắn rằng layer-based slice mà bạn đã tạo ra cho thông tin về bản quyền được chọn trong cửa sổ ảnh. Nếu chưa, hãy dùng công cụ Slice Select để chọn nó ngay. 2. Trong Slice palette, chọn No Image từ Type pop-up menu. 3. Dùng Text box trong Slice palette (chứ không phải trong cửa sổ ảnh). gõ vào đó vài thông tin về bản quyền. (Ở đây chúng tôi dùng ©2004 Organic Support Group). Hãy đảm bảo rằng tùy chọn Text is HTML đã được xác nhận. Bạn có thể đặt thêm một biểu tượng bản quyền bằng cách nhấn giữ phím Alt và gõ 0169 trên dãy phím số (Windows) hoặc nhấm giữ phím Option và gõ G (Mac OS). Do bạn đã chọn No Image cho dạng thức slice, nên layer của trình giữ chỗ văn bản (“To edit in Slice palette”) mà giờ đây bạn thấy trong cửa sổ ảnh sẽ không xuất hiện trong trang Web. Còn dòng text mà bạn đã gõ vào trong Slice palette sẽ hiện ra trong trang Web; tuy nhiên, nó sẽ không xuất hiện trong bức ảnh đã bị cắt lát của bạn trong ImageReady hay Photoshop. www.vietphotoshop.com - Lê Thuận 14
15. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 4. Click vào một vùng trống trong Layers palette để khử chọn slice. 5. Chọn File > Save. Xem trước 1 No Image slice trong 1 trình duyệt Web Giờ thì bạn nên đảm bảo rằng đoạn text bạn gõ sẽ lấp đầy trong ô table, vì vậy bạn nên xem trước bức ảnh trong 1 trình duyệt Web. Để thực hiện nhiệm vụ này, bạn phải có 1 Web browser được cài đặt sẵn trong máy tính. Lưu ý : (Chỉ trong Mac OS ) Hãy đảm bảo rằng bạn có 1 bí danh (alias) của trình duyệt Mac OS 10 đang được đặt chỗ sẵn sao cho trình duyệt không mở được trong dạng thức cổ điển. 1. Trong hộp công cụ, click nút lệnh Preview In Default Browser (như là hoặc ) hoặc chọn 1 trình duyệt từ pop-up menu của nút lệnh. Bức ảnh sẽ xuất hiện trong cửa sổ duyệt, và nguồn HTML để xem trước cũng sẽ xuất hiện bảng table bên dưới bức ảnh 2. Hãy đọc dòng text về bản quyền ở góc dưới bên phải của ảnh và đảm bảo rằng nó phù hợp với những thông tin mà bạn đã gõ vào Slice palette (chứ không phải trong placeholder text) trong cửa sổ ảnh ImageReady. 3. Thoát khỏi trình duyệt. 4. Trong ImageReady, hãy chọn nút lệnh Toggle Slices Visibility trên hộp công cụ (hoặc nhấn phím Q) để ẩn các vạch đánh dấu slice và loại bỏ vết mờ khỏi bức ảnh. Chú ý : Việc thêm chọn lựa về các trình duyệt của bạn vào nút lệnh Preview In Default Browser là 1 tác vụ đơn giản mà bạn có thể thực hiện được ngay trên desktop. Bạn chỉ cần khởi tạo 1 shortcut (Windows) hoặc 1 alias (Mac OS) cho ứng dụng Web browser của bạn, đọan rê nó vào trong folder Preview In trên desktop. Folder nay sẽ được đặt bên trong folder Helpers trong thư mục Photoshop CS. Nói thêm về việc tạo lập các slices Bạn vừa hoàn thành bài thực hành đối với bài học này. Bạn cũng đã khám phá được một vài cách cắt lát 1 tấm ảnh và thiết lập được các tùy chọn slice trong Photoshop và ImageReady, nhưng không phải là tất cả. Có nhiều phương pháp khởi tạo các slices khác mà bạn có thể tự mình làm thử. Chẳng hạn : • Nếu dùng các đường dẫn quen thuộc trong công việc thiết kế của mình, bạn có thể chia cắt ngay tức khắc toàn bộ tấm ảnh thành nhiều users slices với 1 tùy chọn trên thanh tùy chọn công cụ (Photoshops) hoặc trong Slices menu (ImageReady). Tuy nhiên, kỹ thuật này nên được dùng một cách có cân nhắc, bởi lẽ nó sẽ hủy bỏ tất cả các slices nào đã được khởi tạo trước đó cũng như các tùy chọn có liên quan tới các slices ấy. Hơn nữa, mọi slices mà nó tạo ra đều là user slices, mà bạn lại có thể không cần nhiều như vậy. www.vietphotoshop.com - Lê Thuận 15
16. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS • Khi bạn cần khởi tạo các slices có kích thước (thậm chí cả lề và khoảng cách) y hệt nhau, hãy thử xây dựng thật chính xác 1 user slice riêng lẻ bao quanh toàn bộ khu vực. Sau đó, dùng đặc trưng Divide Slice trên thanh tùy chọn công cụ Slice Select (Photoshop) hoặc trong Slices menu (ImageReady) để chia cắt slice gốc thành nhiều slices theo chiều ngang và chiều dọc mà bạn muốn. • Nếu bạn đã chọn sẵn 1 vùng nào đó bằng các công cụ tạo vùng chọn (marquee) của ImageReady mà bạn cần phân hoạch như là phạm vi của 1 slice, bạn có thể dùng lệnh Create Slice From Selection trên menu Select. Hãy luôn ý thức rằng, cho dù vùng chọn có hình dạng gì đi chăng nữa, thì slice mà bạn tạo ra cũng sẽ luôn là một hình chữ nhật. Làm việc với with image maps (ImageReady) Khởi tạo các image maps là một trong những chức năng bạn phải thực hiện trong Adobe ImageReady. Bạn có thể dùng Photoshop để khởi tạo các slices, mà trong chừng mực nào đó có thể chia sẻ chức năng với image maps, nhưng bạn không thể tạo lập được các image maps bằng Photoshop được. Trong phần này, bạn sẽ khởi tạo 1 image map trong một bức ảnh tương tự mà bạn đã từng thao tác cũng trong bài học này, đó là trang chủ organic food. Nhiệm vụ của bạn là tạo ra các liên kết đến các trang Web khác nhau sao cho phù hợp với hình dạng của các đề mục được biểu thị bằng những hình ảnh của sản phẩm - điều mà sẽ không dễ làm với các slices bởi vì tính chất luôn là hình chữ nhật của nó. Nếu ImageReady chưa được mở sẵn, hãy khởi động chúng ngay, nhấn và giữ tổ hợp phím phù hợp với hệ điều hành của bạn để phục hồi các thiết lập mặc định. (Xem “Restoring default preferences - Phục hồi các thiết lập mặc định” ở trang 4). Đoạn, chọn lấy workspace mà bạn đã định nghĩa trước đó từ trình đơn phụ Workspace trong menu Window. (Xem “Working with slices in ImageReady - làm việc với slices trong ImageReady”.) Dùng layers để khởi tạo image maps Bạn sẽ định nghĩa các vùng image-map dựa trên một số layers tạo nên bản thiết kế trang chủ. Bằng cách dùng các layers để định nghĩa các hotspots, bạn sẽ dễ dàng áp đặt sự kiểm soát lên những hình ảnh của những vùng đó. Nếu file 15Start.psd vẫn chưa được mở ra trong ImageReady, thì đây là lúc phải mở nó. 1. Trong Layers palette, chọn Asparagus layer. Hãy lưu ý rằng 1 layer style, Drop Shadow effect, đã được áp dụng sẵn cho layer này. www.vietphotoshop.com - Lê Thuận 16
17. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 2. Chọn Layer > New Layer Based Image Map Area. Một hình chữ nhật mờ mờ viền đỏ xung quanh sẽ hiện ra, bao quanh phạm vi bó măng tây trong bức ảnh. đường viền đỏ mờ này xác định khu vực hotspot được hàm chứa trong image map. 3. Trong nhóm Slice palette, click tab Image Map để đem Image Map palette lên phía trên. 4. Click vào mũi tên để mở rộng tùy chọn Layer Based Settings (nếu cần), và chọn Polygon từ Shape pop-up menu. Giờ thì đường viền màu đỏ trở nên gần giống với hình dạng của bó măng tây, bao gồm cả bóng đổ ở cạnh thấp bên phải của nó. www.vietphotoshop.com - Lê Thuận 17
18. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 5. Trong tùy chọn Quality trên Image Map palette, kéo thanh trượt hoặc gõ vào giá trị 90 để làm cho đường viền đỏ ôm sát hơn hình dạng vùng ảnh bó măng tây. 6. Trong Image Map palette, gõ Asparagus trong Name, gõ pages/veggies.html cho URL, và chọn _blank cho Target pop-up menu. Bây giờ, trong Layers palette, một icon hình bàn tay xuất hiện trên layer Asparagus, biểu thị rằng có 1 layer-based image map. 7. Click vào vùng trống của Layers palette để khử chọn layer Asparagus, và rồi chọn File > Save. Sử dụng các công cụ image map Khi những thành tố bạn cần dùng cho image maps đã được bố trí một cách thuận lợi trên những layer riêng biệt, thì việc định nghĩa các vùng image-map này đã trở nên thật đơn giản, như bạn đã thấy trong tiến trình trước. Tiến trình này và tiến trình sau nữa sẽ trình bày cho bạn một cặp kỹ thuật định nghĩa các image maps bên trong 1 layer đơn giản. www.vietphotoshop.com - Lê Thuận 18
19. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Phương pháp thứ nhất cũng tương tự như kỹ thuật Photoshop mà bạn đã dùng trước đây trong cuống sách này khi bạn chọn 1 thành phần bằng công cụ Pen. Trước khi bắt đầu làm việc, bạn sẽ phải tắt các tùy chọn snap-to, vốn có chức năng làm cho dễ dàng hơn việc bố trí thật chính xác các điểm neo ở nơi mà bạn muốn. 1. Chọn View > Snap sao cho lệnh không được chọn (tắt dấu kiểm). 2. Trong hộp công cụ, hãy chọn công cụ Polygon Image Map ( ) ẩn phía dưới công cụ Image Map ( ). 3. Click vào mép của trái đu đủ để thiết lập 1 điểm neo. 4. Di chuyển trỏ chuột dọc theo biên ngoài của hình quả và nhãn đu đủ, click liên tục nhiều lần để thiết lập nhiều điểm neo hơn. Đừng lo lắng nếu những điểm này không được bố trí hoàn hảo lắm vì bạn sẽ thực hiện một số biến đổi để hiệu chỉnh nó sau. www.vietphotoshop.com - Lê Thuận 19
20. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 5. Khi các điểm neo hầu như đã viền hoàn toàn xung quanh quả đu đủ, hãy click lên điểm neo ban đầu để đóng kín hình dạng của image-map. (icon con trỏ sẽ biến đổi khi bạn trỏ sang bên phải, cho thấy 1 vòng tròn nhỏ biểu thị cú nhấp chuột sẽ làm hình vẽ đóng kín) Đường biên image-map màu đỏ sẽ xuất hiện xung quanh quả đu đủ với các các điểm neo ở chỗ bạn thiết lập cho nó. Dùng các vùng chọn để tạo các image maps Bạn cũng có thể convert các vùng chọn(do bạn tạo ra bằng các công cụ chọn) thành các image maps. Bây giờ bạn sẽ thử với nhánh thìa là, chọn nó với công cụ Magic Wand. 1. Chọn công cụ Zoom và click lên cành thìa là (“HERBS”) cho tới khi độ phóng đại là có giá trị là 300%. 2. Trong Layers palette, chọn Background layer. 3. Chọn công cụ Magic Wand ( ), ẩn đàng sau công cụ Marquee ( ). www.vietphotoshop.com - Lê Thuận 20
21. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Đoạn, trên thanh tùy chọn công cụ, gõ giá trị 42 vào tùy chọn Tolerance và đảm bảo rằng hộp kiểm Contiguous cũng đang được chọn, hoặc là phải chọn nó ngay lúc này. 4. Click lên nhánh thìa là ở chỗ nhãn “Herbs” vắt ngang qua nó. 5. Nhấn và giữ phím Shift, sao cho con trỏ công cụ Magic Wand xuất hiện dấu cộng (+) kế bên, và cẩn thận click lên 1 vùng “không được chọn” của nhánh thìa là. Lặp lại 2 hoặc 3 lần cho tới khi hầu hết nhánh thìa là đều được chọn — vùng chọn không nhất thiết phải thật hoàn hảo. www.vietphotoshop.com - Lê Thuận 21
22. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Lưu ý : Nếu vùng chọn có vẻ như không xuất hiện sau cú nhấp chuột, bạn có thể đã click một cách ngẫu nhiên lên thớ gỗ, làm cho vùng chọn gộp thành một khu vực quá rộng. Trong trường hợp này, hãy chọn Edit > Undo và thử lại 1 lần nữa. 6. Chọn Select > Create Image Map From Selection để mở hộp thoại Create Image Map. Xác nhận tùy chọn Polygon, with Quality, và nhập giá trị 80, click OK. Trong cửa sổ ảnh, hình ảnh nhánh thìa là sẽ mờ đi. 1 đường viền đỏ xác định hình dạng của image map xuất hiện bao quanh nhánh thìa là. 7. Chọn Select > Deselect để gỡ bỏ vùng chọn. Trau chuốt hình dạng image map và ấn định liên kết Trong hai tiến trình trước ta đã không thử khởi tạo các dạng image-map phù hợp một cách thật hoàn hảo với các đề mục được mô tả. Bạn sẽ cải thiện các hình dạng này ngay đây thôi, và sau đó ấn định URL và đặt tên tin cho các image maps của bạn. Bạn sẽ bắt đầu với image map đó từ thời điểm nhánh thìa là đã hiển thị và được phóng đại lên 300%. 1. Chọn công cụ Image Map Select ( ). Nếu image map xác định nhánh thìa là chưa được chọn sẵn (đến mức đường biên của image-map hiện ra như là một đường viền đỏ cùng với các điểm neo), thì hãy chọn nó. 2. Chọn 1 trong những điểm neo chưa ôm khít hình dạng của nhánh thìa là và rê nó đến 1 vị trí tốt hơn. www.vietphotoshop.com - Lê Thuận 22
23. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Dragging an anchor point Finished image map area 3. Từng bước 1, chọn những điểm neo khác và kéo rê chúng đến các vị trí màbạn cảm thấy hài lòng với hình dáng của image map. Bạn có thể thêm vào những điểm neo riêng lẻ bằng cách Shift-click : Đầu tiên, định vị con trỏ ở chỗ bạn muốn xác định 1 điểm đặt.Nhấn và giữ phím Shift, cho đến khi xuất hiện một dấu cộng (+) nhỏ nơi icon trỏ chuột rồi hẵng click. Để gỡ bỏ điểm neo, Alt-click (Windows) hoặc Option-click (Mac OS). Trong trường hợp này, 1 dấu trừ (-) xuất hiện ở vị trí icon trỏ chuột. 4. Trong Image Map palette, gõ Herbs cho Name, pages/herbs.html cho URL, và chọn _blank cho Target. 5. Hoàn tất phần còn lại của công việc với image map xác định trái đu đủ bằng cách làm theo các bước sau : • Nhấn giữ phím spacebar để tạm thời chuyển sang công cụ Hand và rê chuột cho đến khi bạn có thể thấy được vùng image-map quả đu đủ. • Chọn và di chuyển các điểm neo cho tới khi bạn hài lòng với hình dáng của image-map. www.vietphotoshop.com - Lê Thuận 23
24. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS • Chọn các tùy biến trong Image Map palette, và gõ Papaya cho Name, pages/fruits.html cho URL, và chọn _blank cho Target. 6. Chọn Select > Deselect Image Maps. 7. Double-click lên công cụ Hand ( ) hoặc công cụ Zoom để thu nhỏ khung ảnh. 8. Chọn File > Save. Lưu ý : Nếu bạn muốn xem ảnh mà bỏ qua đường viền mờ màu blue sáng của image-map, hãy chọn nút lệnh Toggle Image Maps Visibility [ ] trong hộp công cụ, hoặc nhấn phím A. Chọn lại nút lệnh này hoặc nhấn phím A một lần nữa để xem các chỉ thị image-map. Trong chừng mực của bài học này bạn đã tạo 3 liên kết image map và 5 liên kết slice trong bức ảnh cho trang Web của bạn. Bạn có thể thừa thắng xông lên tạo thêm các image maps cho quả lê và chùm nho nếu muốn có thêm cơ hội thực hành, hoặc là bạn có thể tiếp tục chuyển sang chủ đề mới tại đây cũng được. Khảo sát tất cả các vùng liên kết và tạo 1 file HTML Khi bạn lưu 1 image map trong 1 file HTML, những thẻ (tags) HTML cần thiết để hiển thị ảnh này trong 1 trang Web sẽ tự động được sinh ra. Cách dễ nhất để làm điều này đơn giản chỉ là xác nhận tùy chọn HTML And Images khi bạn lưu lại bức ảnh hoàn chỉnh. Một khi bạn đã tạo xong 1 file HTML, thì việc cập nhật để phản ánh các thay đổi (chẳng hạn, các URLs hoặc vùng image-map đã được hiệu chỉnh hay tạo mới) đã trở nên thật dễ dàng. 1. Trong ImageReady, chọn Window > Web Content để mở palette có liên quan. Nếu cần, hãy click vào mũi tên để mở rộng Image Maps và Slices categories, và kéo góc dưới bên phải của palette xuống để nhìn thấy được toàn bộ các đề mục được liệt kê. 2. Xem trước bảng liệt kê Web Content vốn đã bao gồm các ảnh nhỏ (thumbnails) biểu thị các slices và image maps. Lưu ý rằng các image-map thumnails cũng bao gồm luôn cả các đường biên của các www.vietphotoshop.com - Lê Thuận 24
25. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS vùng image map. 3. Đóng Web Content palette hoặc chuyển nó khỏi đường đi của bạn. 4. Chọn File > Save Optimized As. (Hãy cẩn thận đừng chọn nhầm Save As) 5. Trong hộp thọai Save Optimized As, hãy chấp nhận tên mặc định, 15Start.html, và làm theo các bước sau : • Chọn HTML And Images trong pop-up menu Save As Type (Windows) hoặc pop-up menu Format (Mac OS). • Định vị và chọn folder Lessons/Lesson15/15MyPage làm địa chỉ đích. • Click Save. 6. Chuyển ra desktop và double-click để mở file 15Start.html trong ứng dụng Web browser mặc định của bạn. 7. Click vào vài vùng slices hoặc image maps mà bạn đã tạo được và kiểm tra xem coi liệu có bất kỳ đối tượng nào trong chúng không liên kết được một cách đúng đắn không (tức là có một số không kết nối được). Khi bạn xong việc, hãy chuyển trở về ImageReady, thoát khỏi Web browser đang mở trang 15Start.html. Lưu ý : Trong Photoshop, bạn tạo lập 1 file HTML trong hộp thọai Save Optimized As xuất hiện sau khi hoàn thiện file ảnh và click OK trong hộp thoại Save For Web. Biên tập thông tin liên kết và cập nhật file HTML Vài image maps trong file HTML không liên kết được một cách đúng đắn, bởi vì ta đã thay đổi tên của một số trang đích để có những mô tả cụ thể hơn đối với các loại rau quả trong file ảnh. Trục trặc này cũng dễ được khắc phục trong file ImageReady nguyên thủy và sau đó tiến hành cập nhật cho file HTML. 1. Trong hộp công cụ của ImageReady, chọn công cụ Image Map Select ( ). 2. Trong cửa sổ ảnh, click chọn vùng image-map của quả đu đủ. 3. Trong Image Map palette, đổi the URL sang pages/papaya.html. www.vietphotoshop.com - Lê Thuận 25
26. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS 4. Trong cửa sổ ảnh, chọn image-map của bó măng tây, đoạn đổi URL trong Image Map palette thành pages/asparagus.html. Lưu ý : Bằng cách tương tự, bạn có thể đổi thông tin liên kết cho slices, bằng cách dùng công cụ Slice Select (thay vì công cụ Image Map Select) và Slice palette (thay vì Image Map). 5. Chọn File > Update HTML. 6. Trong hộp thọai Update HTML, chọn file 15Start.html, và click Open. Click Replace khi hộp thoại Replace Files xuất hiện, và click OK trong thông báo update. 7. Trở lại trình duyệt Web và chọn icon refresh hay reload tùy trình duyệt, hoặc lệnh View menu. Click các liên kết để chắc chắn rằng chúng hoàn hảo, và sau đó trở về ImageReady. 8. Chọn File > Close để đóng file ảnh. Nếu 1 thông báo xuất hiện nhắc nhở bạn rằng file không mở được nữa trong Photoshop, hãy click Yes để cho qua. Bạn có thể dùng trình duyệt Web của mình để mở và xem file 15Start.html. Bạn cũng có thể mở 1 file trong 1 ứng dụng xử lý văn bản hay 1 trình tạo Web để tự mình kiểm tra lại đối với mã HTML. Các quy ước về đặt tên file HTML dành cho Web Dùng quy ước đặt tên file UNIX®, bởi vì nhiều chương trình network sẽ giản lược những tên file dài. Quy ước này đòi hỏi 1 tên file phải có tối đa 8 ký tự, được kéo theo sau bởi 1 phần mở rộng. Dùng phần mở rộng là .html hoặc .htm. Đừng dùng những ký tự đặc biệt như là dấu hỏi (?) hoặc dấu sao (*), hoặc các khoảng cách giữa những chữ cái trong tên file của bạn—một số trình duyệt có thể không nhận biết tên dài. Nếu phải dùng những ký tự đặ biệt hoặc các khoảng trống trong tên file, hãy kiểm tra bằng 1 tài liệu hướng dẫn việc biên tập HTML để dùng cho chính xác. Chẳng hạn, để tạo khoảng trống giữa các chữ cái bạn sẽ cần rút ngắn 1 đơn vị khoảng cách xuống 20%. Bạn vừa hoàn thành chương 15. Để học thêm cách dùng hoạt hình cho slices và rollovers, hãy xem chương 18, “Tạo hình động cho trang Web” và ImageReady Help. www.vietphotoshop.com - Lê Thuận 26
27. Chương 15: Tạo lập các liên kết bên trong một bức ảnh Photoshop CS Câu hỏi ôn tập 1. Slices là gì? 2. Mô tả 5 cách tạo lập image slices. 3. Mô tả phương pháp khởi tạo1 slice với đường biên chính xác ôm khít 1 đối tượng có hình dạng dạng nhỏ bé hoặc bất thường. 4. Làm thể nào để khởi tạo một slice không chứa hình ảnh ? Một slice như vậy được tạo ra nhằm mục đích gì ? 5. Những điểm khác nhau và giống nhau giữa các slices và image maps? Đáp án 1. Slices là những vùng hình chữ nhật của 1 bức ảnh mà bạn có thể định nghĩa trong Photoshop hoặc ImageReady nhằm mục đích tối ưu hóa trang Web. Với slices, bạn có thể tạo lập các hình động, các liên kết URLs, hoặc các hiệu ứng rollovers. 2. Bạn có thể chủ động tạo image slices bằng cách chọn các vùng ảnh với công cụ Slice. Những phương pháp linh họat khác để tạo các slices bao gồm : chuyển đổi các layers, đường dẫn hoặc vùng chọn thành các slices bằng cách dùng các lệnh trong các menu Layers, Slices, hoặc Select. Một cách gián tiếp, các auto slices sẽ được tự động tạo ra đối với những vùng ảnh bị cắt lát mà bạn bỏ qua không định nghĩa khi dùng các phương pháp tạo lập user slice khác. 3. Dùng công cụ Magic Wand (hoặc công cụ vùng tạo chọn thích hợp) trong ImageReady, hãy xác định 1 đối tượng, và chọn lệnh Select > Create Slice From Selection. 4. Xác định slice với công cụ Slice Select. Trong hộp thoại Slice Options (trong Photoshop) hoặc Slice palette (trong ImageReady), chọn No Image từ menu Type. No Image slices có thể chứa 1 màu nền, văn bản và mã nguồn HTML, hoặc là chúng có nhiệm vụ như 1 trình giữ chỗ (placeholder) dành cho các đồ thị sẽ được thêm vào sau đó. 5. Các Slices có thể được tạo lập hoặc trong Photoshop hoặc trong ImageReady; chúng luôn có dạng chữ nhật; chúng cũng có thể được định nghĩa như là có ảnh, hoặc không có ảnh, hoặc có nội dung Table. Còn các Image maps chỉ có thể được tạo ra trong ImageReady ; chúng có thể mang hình dạng bất kỳ; và chúng luông có nội dung ảnh. Cả slices và image maps đều có thể được định hình với các trạng thái rollover mà bạn có thể nghiên cứu thêm trong Chương 17, “Tạo hiệu ứng Rollovers cho trang Web.” © www .vietphotoshop.com - Dịch bởi Lê Thuận www.vietphotoshop.com - Lê Thuận 27