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
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
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
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
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
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
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
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
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
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
Không có nhận xét nào:
Đăng nhận xét