Tạo lập các liên kết bên trong một bức ảnh

Tạo lập các liên kết bên trong một bức ảnh

Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Click vào vùng trống Layers palette để khử chọn slice Chọn File > Save Xem trước No Image slice trình duyệt Web Giờ bạn nên đảm bảo đoạn text bạn gõ lấp đầy ô table, bạn nên xem trước ảnh trình duyệt Web Để thực nhiệm vụ này, bạn phải có Web browser cài đặt sẵn máy tính Lưu ý : (Chỉ Mac OS ) Hãy đảm bảo bạn có bí danh (alias) trình duyệt Mac OS 10 đặt chỗ sẵn cho trình duyệt khơng mở dạng thức cổ điển Trong hộp công cụ, click nút lệnh Preview In Default Browser (như ) chọn trình duyệt từ pop-up menu nút lệnh Bức ảnh xuất cửa sổ duyệt, nguồn HTML để xem trước xuất bảng table bên ảnh Hãy đọc dòng text quyền góc bên phải ảnh đảm bảo phù hợp với thơng tin mà bạn gõ vào Slice palette (chứ placeholder text) cửa sổ ảnh ImageReady Thốt khỏi trình duyệt Trong ImageReady, chọn nút lệnh Toggle Slices Visibility hộp công cụ (hoặc nhấn phím Q) để ẩn vạch đánh dấu slice loại bỏ vết mờ khỏi ảnh Chú ý : Việc thêm chọn lựa trình duyệt bạn vào nút lệnh Preview In Default Browser tác vụ đơn giản mà bạn thực desktop Bạn cần khởi tạo shortcut (Windows) alias (Mac OS) cho ứng dụng Web browser bạn, đọan rê vào folder Preview In desktop Folder đặt bên folder Helpers thư mục Photoshop CS Nói thêm việc tạo lập slices Bạn vừa hoàn thành thực hành học Bạn khám phá vài cách cắt lát ảnh thiết lập tùy chọn slice Photoshop ImageReady, khơng phải tất Có nhiều phương pháp khởi tạo slices khác mà bạn tự làm thử Chẳng hạn : • Nếu dùng đường dẫn quen thuộc công việc thiết kế mình, bạn chia cắt tức khắc toàn ảnh thành nhiều users slices với tùy chọn tùy chọn công cụ (Photoshops) Slices menu (ImageReady) Tuy nhiên, kỹ thuật nên dùng cách có cân nhắc, lẽ hủy bỏ tất slices khởi tạo trước tùy chọn có liên quan tới slices Hơn nữa, slices mà tạo user slices, mà bạn lại khơng cần nhiều www.vietphotoshop.com - Lê Thuận 15 Chương 15: Tạo lập liên kết bên ảnh • Photoshop CS Khi bạn cần khởi tạo slices có kích thước (thậm chí lề khoảng cách) y hệt nhau, thử xây dựng thật xác user slice riêng lẻ bao quanh tồn khu vực Sau đó, dùng đặc trưng Divide Slice tùy chọn công cụ Slice Select (Photoshop) Slices menu (ImageReady) để chia cắt slice gốc thành nhiều slices theo chiều ngang chiều dọc mà bạn muốn • Nếu bạn chọn sẵn vùng cơng cụ tạo vùng chọn (marquee) ImageReady mà bạn cần phân hoạch phạm vi slice, bạn dùng lệnh Create Slice From Selection menu Select Hãy ln ý thức rằng, cho dù vùng chọn có hình dạng nữa, slice mà bạn tạo ln hình chữ nhật Làm việc với with image maps (ImageReady) Khởi tạo image maps chức bạn phải thực Adobe ImageReady Bạn dùng Photoshop để khởi tạo slices, mà chừng mực chia sẻ chức với image maps, bạn tạo lập image maps Photoshop Trong phần này, bạn khởi tạo image map ảnh tương tự mà bạn thao tác học này, trang chủ organic food Nhiệm vụ bạn tạo liên kết đến trang Web khác cho phù hợp với hình dạng đề mục biểu thị hình ảnh sản phẩm - điều mà không dễ làm với slices tính chất ln hình chữ nhật Nếu ImageReady chưa mở sẵn, khởi động chúng ngay, nhấn giữ tổ hợp phím phù hợp với hệ điều hành bạn để phục hồi thiết lập mặc định (Xem “Restoring default preferences Phục hồi 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 menu Window (Xem “Working with slices in ImageReady - làm việc với slices ImageReady”.) Dùng layers để khởi tạo image maps Bạn định nghĩa vùng image-map dựa số layers tạo nên thiết kế trang chủ Bằng cách dùng layers để định nghĩa hotspots, bạn dễ dàng áp đặt kiểm soát lên hình ảnh vùng Nếu file 15Start.psd chưa mở ImageReady, lúc phải mở Trong Layers palette, chọn Asparagus layer Hãy lưu ý layer style, Drop Shadow effect, áp dụng sẵn cho layer www.vietphotoshop.com - Lê Thuận 16 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Chọn Layer > New Layer Based Image Map Area Một hình chữ nhật mờ mờ viền đỏ xung quanh ra, bao quanh phạm vi bó măng tây ảnh đường viền đỏ mờ xác định khu vực hotspot hàm chứa image map Trong nhóm Slice palette, click tab Image Map để đem Image Map palette lên phía Click vào mũi tên để mở rộng tùy chọn Layer Based Settings (nếu cần), chọn Polygon từ Shape pop-up menu Giờ đường viền màu đỏ trở nên gần giống với hình dạng bó măng tây, bao gồm bóng đổ cạnh thấp bên phải www.vietphotoshop.com - Lê Thuận 17 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Trong tùy chọn Quality Image Map palette, kéo trượt gõ vào giá trị 90 để làm cho đường viền đỏ ôm sát hình dạng vùng ảnh bó măng tây Trong Image Map palette, gõ Asparagus Name, gõ pages/veggies.html cho URL, chọn _blank cho Target pop-up menu Bây giờ, Layers palette, icon hình bàn tay xuất layer Asparagus, biểu thị có layer-based image map Click vào vùng trống Layers palette để khử chọn layer Asparagus, chọn File > Save Sử dụng công cụ image map Khi thành tố bạn cần dùng cho image maps bố trí cách thuận lợi layer riêng biệt, việc định nghĩa vùng image-map trở nên thật đơn giản, bạn thấy tiến trình trước Tiến trình tiến trình sau trình bày cho bạn cặp kỹ thuật định nghĩa image maps bên layer đơn giản www.vietphotoshop.com - Lê Thuận 18 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Phương pháp thứ tương tự kỹ thuật Photoshop mà bạn dùng trước cuống sách bạn chọn thành phần công cụ Pen Trước bắt đầu làm việc, bạn phải tắt tùy chọn snap-to, vốn có chức làm cho dễ dàng việc bố trí thật xác điểm neo nơi mà bạn muốn Chọn View > Snap cho lệnh không chọn (tắt dấu kiểm) Trong hộp công cụ, chọn công cụ Polygon Image Map ( ( ) ẩn phía cơng cụ Image Map ) Click vào mép trái đu đủ để thiết lập điểm neo Di chuyển trỏ chuột dọc theo biên ngồi hình nhãn đu đủ, click liên tục nhiều lần để thiết lập nhiều điểm neo Đừng lo lắng điểm khơng bố trí hồn hảo bạn thực số biến đổi để hiệu chỉnh sau www.vietphotoshop.com - Lê Thuận 19 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Khi điểm neo viền hoàn toàn xung quanh đu đủ, click lên điểm neo ban đầu để đóng kín hình dạng image-map (icon trỏ biến đổi bạn trỏ sang bên phải, cho thấy vòng tròn nhỏ biểu thị cú nhấp chuột làm hình vẽ đóng kín) Đường biên image-map màu đỏ xuất xung quanh đu đủ với các điểm neo chỗ bạn thiết lập cho Dùng vùng chọn để tạo image maps Bạn convert vùng chọn(do bạn tạo công cụ chọn) thành image maps Bây bạn thử với nhánh thìa là, chọn với cơng cụ Magic Wand Chọn công cụ Zoom click lên cành thìa (“HERBS”) độ phóng đại có giá trị 300% Trong Layers palette, chọn Background layer Chọn công cụ Magic Wand ( www.vietphotoshop.com - Lê Thuận ), ẩn đàng sau công cụ Marquee ( ) 20 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Đoạn, tùy chọn công cụ, gõ giá trị 42 vào tùy chọn Tolerance đảm bảo hộp kiểm Contiguous chọn, phải chọn lúc Click lên nhánh thìa chỗ nhãn “Herbs” vắt ngang qua Nhấn giữ phím Shift, cho trỏ công cụ Magic Wand xuất dấu cộng (+) kế bên, cẩn thận click lên vùng “khơng chọn” nhánh thìa Lặp lại lần hầu hết nhánh thìa chọn — vùng chọn khơng thiết phải thật hồn hảo www.vietphotoshop.com - Lê Thuận 21 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Lưu ý : Nếu vùng chọn khơng xuất sau cú nhấp chuột, bạn click cách ngẫu nhiên lên thớ gỗ, làm cho vùng chọn gộp thành khu vực rộng Trong trường hợp này, chọn Edit > Undo thử lại lần 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, nhập giá trị 80, click OK Trong cửa sổ ảnh, hình ảnh nhánh thìa mờ đường viền đỏ xác định hình dạng image map xuất bao quanh nhánh thìa Chọn Select > Deselect để gỡ bỏ vùng chọn Trau chuốt hình dạng image map ấn định liên kết Trong hai tiến trình trước ta khơng thử khởi tạo dạng image-map phù hợp cách thật hồn hảo với đề mục mơ tả Bạn cải thiện hình dạng thơi, sau ấn định URL đặt tên tin cho image maps bạn Bạn bắt đầu với image map từ thời điểm nhánh thìa hiển thị phóng đại lên 300% Chọn công cụ Image Map Select ( ) Nếu image map xác định nhánh thìa chưa chọn sẵn (đến mức đường biên image-map đường viền đỏ với điểm neo), chọn Chọn điểm neo chưa ơm khít hình dạng nhánh thìa rê đến vị trí tốt www.vietphotoshop.com - Lê Thuận 22 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Dragging an anchor point Finished image map area Từng bước 1, chọn điểm neo khác kéo rê chúng đến vị trí màbạn cảm thấy hài lịng với hình dáng image map Bạn thêm vào điểm neo riêng lẻ cách Shift-click : Đầu tiên, định vị trỏ chỗ bạn muốn xác định điểm đặt.Nhấn giữ phím Shift, xuất dấu cộng (+) nhỏ nơi icon trỏ chuột click Để gỡ bỏ điểm neo, Alt-click (Windows) Option-click (Mac OS) Trong trường hợp này, dấu trừ (-) xuất vị trí icon trỏ chuột Trong Image Map palette, gõ Herbs cho Name, pages/herbs.html cho URL, chọn _blank cho Target Hoàn tất phần cịn lại cơng việc với image map xác định trái đu đủ cách làm theo bước sau : • Nhấn giữ phím spacebar để tạm thời chuyển sang công cụ Hand rê chuột bạn thấy vùng image-map đu đủ • Chọn di chuyển điểm neo bạn hài lịng với hình dáng image-map www.vietphotoshop.com - Lê Thuận 23 Chương 15: Tạo lập liên kết bên ảnh • Photoshop CS Chọn tùy biến Image Map palette, gõ Papaya cho Name, pages/fruits.html cho URL, chọn _blank cho Target Chọn Select > Deselect Image Maps Double-click lên công cụ Hand ( ) công cụ Zoom để thu nhỏ khung ảnh 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 image-map, chọn nút lệnh Toggle Image Maps Visibility [ ] hộp cơng cụ, nhấn phím A Chọn lại nút lệnh nhấn phím A lần để xem thị image-map Trong chừng mực học bạn tạo liên kết image map liên kết slice ảnh cho trang Web bạn Bạn thừa thắng xơng lên tạo thêm image maps cho lê chùm nho muốn có thêm hội thực hành, bạn tiếp tục chuyển sang chủ đề Khảo sát tất vùng liên kết tạo file HTML Khi bạn lưu image map file HTML, thẻ (tags) HTML cần thiết để hiển thị ảnh trang Web tự động sinh Cách dễ để làm điều đơn giản xác nhận tùy chọn HTML And Images bạn lưu lại ảnh hoàn chỉnh Một bạn tạo xong file HTML, việc cập nhật để phản ánh thay đổi (chẳng hạn, URLs vùng image-map hiệu chỉnh hay tạo mới) trở nên thật dễ dàng Trong ImageReady, chọn Window > Web Content để mở palette có liên quan Nếu cần, click vào mũi tên để mở rộng Image Maps Slices categories, kéo góc bên phải palette xuống để nhìn thấy tồn đề mục liệt kê Xem trước bảng liệt kê Web Content vốn bao gồm ảnh nhỏ (thumbnails) biểu thị slices image maps Lưu ý image-map thumnails bao gồm đường biên www.vietphotoshop.com - Lê Thuận 24 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS vùng image map Đóng Web Content palette chuyển khỏi đường bạn Chọn File > Save Optimized As (Hãy cẩn thận đừng chọn nhầm Save As) Trong hộp thọai Save Optimized As, chấp nhận tên mặc định, 15Start.html, làm theo bước sau : • Chọn HTML And Images pop-up menu Save As Type (Windows) pop-up menu Format (Mac OS) • Định vị chọn folder Lessons/Lesson15/15MyPage làm địa đích • Click Save Chuyển desktop double-click để mở file 15Start.html ứng dụng Web browser mặc định bạn Click vào vài vùng slices image maps mà bạn tạo kiểm tra xem coi liệu có đối tượng chúng không liên kết cách đắn khơng (tức có số khơng kết nối được) Khi bạn xong việc, chuyển trở ImageReady, thoát khỏi Web browser mở trang 15Start.html Lưu ý : Trong Photoshop, bạn tạo lập file HTML hộp thọai Save Optimized As xuất sau hoàn thiện file ảnh click OK hộp thoại Save For Web Biên tập thông tin liên kết cập nhật file HTML Vài image maps file HTML không liên kết cách đắn, ta thay đổi tên số trang đích để có mơ tả cụ thể loại rau file ảnh Trục trặc dễ khắc phục file ImageReady nguyên thủy sau tiến hành cập nhật cho file HTML Trong hộp công cụ ImageReady, chọn công cụ Image Map Select ( ) Trong cửa sổ ảnh, click chọn vùng image-map đu đủ Trong Image Map palette, đổi the URL sang pages/papaya.html www.vietphotoshop.com - Lê Thuận 25 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Trong cửa sổ ảnh, chọn image-map bó măng tây, đoạn đổi URL Image Map palette thành pages/asparagus.html Lưu ý : Bằng cách tương tự, bạn đổi thơng tin liên kết cho slices, cách dùng công cụ Slice Select (thay cơng cụ Image Map Select) Slice palette (thay Image Map) Chọn File > Update HTML Trong hộp thọai Update HTML, chọn file 15Start.html, click Open Click Replace hộp thoại Replace Files xuất hiện, click OK thông báo update Trở lại trình duyệt Web chọn icon refresh hay reload tùy trình duyệt, lệnh View menu Click liên kết để chắn chúng hoàn hảo, sau trở ImageReady Chọn File > Close để đóng file ảnh Nếu thơng báo xuất nhắc nhở bạn file không mở Photoshop, click Yes qua Bạn dùng trình duyệt Web để mở xem file 15Start.html Bạn mở file ứng dụng xử lý văn hay trình tạo Web để tự kiểm tra lại mã HTML Các quy ước đặt tên file HTML dành cho Web Dùng quy ước đặt tên file UNIX®, nhiều chương trình network giản lược tên file dài Quy ước đòi hỏi tên file phải có tối đa ký tự, kéo theo sau phần mở rộng Dùng phần mở rộng html htm Đừng dùng ký tự đặc biệt dấu hỏi (?) dấu (*), khoảng cách chữ tên file bạn—một số trình duyệt khơng nhận biết tên dài Nếu phải dùng ký tự đặ biệt khoảng trống tên file, kiểm tra tài liệu hướng dẫn việc biên tập HTML để dùng cho xác Chẳng hạn, để tạo khoảng trống chữ bạn cần rút ngắn đơ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 rollovers, xem chương 18, “Tạo hình động cho trang Web” ImageReady Help www.vietphotoshop.com - Lê Thuận 26 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Câu hỏi ôn tập Slices gì? Mơ tả cách tạo lập image slices Mô tả phương pháp khởi tạo1 slice với đường biên xác ơm khít đối tượng có hình dạng dạng nhỏ bé bất thường Làm thể để khởi tạo slice khơng chứa hình ảnh ? Một slice tạo nhằm mục đích ? Những điểm khác giống slices image maps? Đáp án Slices vùng hình chữ nhật ảnh mà bạn định nghĩa Photoshop ImageReady nhằm mục đích tối ưu hóa trang Web Với slices, bạn tạo lập hình động, liên kết URLs, hiệu ứng rollovers Bạn chủ động tạo image slices cách chọn vùng ảnh với công cụ Slice Những phương pháp linh họat khác để tạo slices bao gồm : chuyển đổi layers, đường dẫn vùng chọn thành slices cách dùng lệnh menu Layers, Slices, Select Một cách gián tiếp, auto slices tự động tạo vùng ảnh bị cắt lát mà bạn bỏ qua không định nghĩa dùng phương pháp tạo lập user slice khác Dùng công cụ Magic Wand (hoặc cơng cụ vùng tạo chọn thích hợp) ImageReady, xác định đối tượng, chọn lệnh Select > Create Slice From Selection Xác định slice với công cụ Slice Select Trong hộp thoại Slice Options (trong Photoshop) Slice palette (trong ImageReady), chọn No Image từ menu Type No Image slices chứa màu nền, văn mã nguồn HTML, chúng có nhiệm vụ trình giữ chỗ (placeholder) dành cho đồ thị thêm vào sau Các Slices tạo lập Photoshop ImageReady; chúng ln có dạng chữ nhật; chúng định nghĩa có ảnh, khơng có ảnh, có nội dung Table Cịn Image maps tạo ImageReady ; chúng mang hình dạng bất kỳ; chúng lng có nội dung ảnh Cả slices image maps định hình với trạng thái rollover mà bạn nghiên cứu thêm Chương 17, “Tạo hiệu ứng Rollovers cho trang Web.” © www vietphotoshop.com - Dịch Lê Thuận www.vietphotoshop.com - Lê Thuận 27 ... www.vietphotoshop.com - Lê Thuận 26 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Câu hỏi ơn tập Slices gì? Mô tả cách tạo lập image slices Mô tả phương pháp khởi tạo1 slice với đường biên xác ơm khít... Select ( ) Trong cửa sổ ảnh, click chọn vùng image-map đu đủ Trong Image Map palette, đổi the URL sang pages/papaya.html www.vietphotoshop.com - Lê Thuận 25 Chương 15: Tạo lập liên kết bên ảnh Photoshop... hình dạng bó măng tây, bao gồm bóng đổ cạnh thấp bên phải www.vietphotoshop.com - Lê Thuận 17 Chương 15: Tạo lập liên kết bên ảnh Photoshop CS Trong tùy chọn Quality Image Map palette, kéo trượt