Tổng quan về lát cắt

Khi bạn thiết kế đồ họa cho web, các phần khác nhau của hình ảnh thường cần hoạt động độc lập với nhau. Một vùng có thể liên kết đến một URL, vùng khác có thể tải nhanh hơn và vùng khác lại cần các thiết đặt cải tiến khác nhau.Lát cắt chia một hình ảnh thành lưới các phần nhỏ hơn, cùng hoạt động như một trang web trong khi vẫn kiểm soát riêng từng phần.

Photoshop ghép lại các hình ảnh đã cắt trên trang web bằng cách sử dụng bảng HTML hoặc các lớp CSS.Khi bạn xuất hình ảnh đã cắt lát bằng lệnh Tệp > Xuất > Lưu cho web, Photoshop sẽ lưu mỗi lát cắt thành một tệp riêng.Thao tác này cũng tạo ra mã HTML hoặc CSS cần thiết để hiển thị hình ảnh như một bố cục thống nhất trong trình duyệt.

Cách hoạt động của lát cắt

Lát cắt chia hình ảnh theo các đường lưới vô hình, tạo ra các phần hình chữ nhật hoạt động như các tập tin độc lập. Mỗi lát cắt vẫn giữ vị trí của mình trong bố cục tổng thể, đồng thời hoạt động như một thành phần riêng biệt với các thuộc tính, thiết đặt cải tiến và hành vi riêng.

Cách tiếp cận này mang lại một số lợi ích thực tế:

• Gán các liên kết URL khác nhau để tạo các phần tử điều hướng có thể nhấp
• Áp dụng các thiết đặt nén khác nhau để cân bằng chất lượng và kích thước tập tin giữa các vùng
• Cập nhật từng phần riêng lẻ mà không cần xuất lại toàn bộ bố cục

Loại Lát cắt theo cách tạo

Photoshop phân loại các lát cắt dựa trên cách tạo ra chúng và mỗi loại sẽ hoạt động khác nhau khi bạn chỉnh sửa hình ảnh.

• Lát cắt do người dùng tạo: Các phần bạn tự xác định bằng công cụ Lát cắt . Bạn có toàn quyền kiểm soát kích thước, vị trí và thuộc tính của các lát cắt này, và chúng sẽ giữ nguyên vị trí cho đến khi bạn di chuyển hoặc chỉnh sửa.
• Lát cắt dựa trên lớp: Lát cắt này bao gồm tất cả các điểm ảnh trong một lớp. Đường viền của lát cắt sẽ tự động cập nhật khi bạn di chuyển hoặc chỉnh sửa lớp. Loại lát cắt này phù hợp với nội dung thường thay đổi, nhưng mang lại ít quyền kiểm soát về vị trí chính xác hơn so với lát cắt do người dùng tạo.
• Lát cắt tự động: Đây là các lát cắt lấp đầy phần không gian còn lại trong hình ảnh mà không được che phủ bởi lát cắt do người dùng tạo hoặc lát cắt dựa trên lớp. Photoshop tự động tạo các lát cắt này và tạo lại chúng mỗi khi bạn thêm, xóa hoặc sửa đổi các lát cắt khác.Tất cả các lát cắt tự động trong một hình ảnh đều dùng chung thiết đặt tăng cường.
• Lát cắt phụ: Một loại lát cắt tự động đặc biệt xuất hiện khi các lát cắt chồng lên nhau.Lát cắt phụ cho biết cách Photoshop sẽ phân chia các vùng chồng lấn khi bạn lưu tập tin đã tăng cường.Bạn không thể chọn hoặc chỉnh sửa lát cắt phụ một cách độc lập với lát cắt bên dưới của chúng.

Loại lát cắt theo nội dung

Lát cắt còn được phân loại theo loại nội dung mà chúng chứa.

• Lát cắt hình ảnh: Loại lát cắt mặc định cho nội dung hình ảnh, chứa dữ liệu hình ảnh từ tài liệu Photoshop của bạn.
• Lát cắt không hình ảnh: Các ô bảng trống dành cho văn bản HTML hoặc màu đặc.Photoshop không xuất các lát cắt này dưới dạng tập tin hình ảnh, nên chúng rất hữu ích cho văn bản trực tiếp, có thể chọn được.
• Lát cắt bảng: Các lát cắt xác định cách Photoshop cấu trúc bảng HTML dùng để ghép lại hình ảnh đã cắt lát trong trình duyệt.

Dấu hiệu nhận biết lát cắt

Photoshop sử dụng các dấu hiệu nhận biết để giúp bạn phân biệt các loại lát cắt trong khi làm việc.

• Đường viền lát cắt: Đường liền nét đánh dấu lát cắt do người dùng tạo hoặc lát cắt theo lớp, còn đường chấm chấm đánh dấu lát cắt tự động.
• Màu lát cắt: Biểu tượng màu xanh nhận diện lát cắt do người dùng tạo và lát cắt theo lớp, còn biểu tượng màu xám đánh dấu lát cắt tự động.
• Số lát cắt: Các số ở góc trên bên trái của mỗi lát cắt chạy từ trái sang phải và từ trên xuống dưới, đồng thời tự động cập nhật khi bạn sắp xếp lại hoặc sửa đổi lát cắt.
• Huy hiệu lát cắt: Các biểu tượng nhỏ cho biết nội dung và loại của lát cắt.Ví dụ: biểu tượng hình ảnh đánh dấu lát cắt do người dùng tạo có chứa nội dung hình ảnh, biểu tượng hình ảnh gạch chéo đánh dấu lát cắt do người dùng tạo không chứa nội dung hình ảnh, và biểu tượng lớp đánh dấu lát cắt theo lớp.

Nhận biết các điểm khác biệt trực quan này giúp bạn xác định loại lát cắt nhanh chóng và làm việc hiệu quả hơn với các bố cục lát cắt phức tạp khi bạn tạo lát cắt cho trang web.