Tạo tài nguyên hình ảnh từ các lớp

Bạn có thể tạo tài nguyên hình ảnh JPEG, PNG, GIF hoặc SVG từ nội dung của một lớp hoặc nhóm lớp trong tập tin PSD. Tài nguyên tự động được tạo khi bạn thêm đuôi định dạng hình ảnh được hỗ trợ vào tên lớp hoặc tên nhóm lớp. Bạn cũng có thể tùy ý chọn các thông số về chất lượng và kích thước cho tài nguyên hình ảnh được tạo.

Việc tạo tài nguyên hình ảnh từ tập tin PSD đặc biệt hữu ích cho thiết kế web đa thiết bị.

Cách tạo và xuất đồ họa web, hãy xem Cách xuất tập tin ở nhiều định dạng khác nhau từ Photoshop.

Để hiểu rõ hơn về công cụ tạo tài nguyên hình ảnh, hãy xem xét một tập tin PSD đơn giản (tải xuống từ liên kết này) với hệ thống phân cấp lớp như sau:

Hệ thống phân cấp lớp cho tập tin này có hai nhóm lớp: Rounded_rectangles và Ellipses. Mỗi nhóm lớp này gồm có năm lớp.

Làm theo các bước sau đây để tạo tài nguyên hình ảnh từ tập tin PSD này:

1. Sau khi mở tập tin PSD, chọn Tập tin > Tự động hóa > Bổ trợ cho công cụ tạo > Tài nguyên hình ảnh.
2. Thêm đuôi định dạng tập tin thích hợp (.jpg, .png, .gif hoặc .svg) vào tên của các lớp hoặc nhóm lớp mà bạn muốn tạo tài nguyên hình ảnh. Ví dụ: đổi tên các nhóm lớp Rounded_rectangles và Ellipses thành Rounded_rectangles.jpg và Ellipses.png; và đổi tên lớp Ellipse_4 thành Ellipse_4.gif.

Photoshop tạo tài nguyên hình ảnh và lưu vào một thư mục con bên cạnh tập tin PSD nguồn. Nếu tập tin PSD nguồn chưa được lưu, Photoshop sẽ lưu tài nguyên đã tạo vào một thư mục mới trên Màn hình của bạn.

Tạo tài nguyên cho tệp ảnh đám mây

Nếu bạn đang làm việc với Tệp ảnh đám mây, các tài nguyên sẽ được lưu trong thư mục "Photoshop Cloud Associates":

• Windows: C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
• macOS: /Users/yourname/Documents/Adobe/Photoshop Cloud Associates

Tạo nhiều tài nguyên từ một lớp hoặc nhóm lớp

Để tạo nhiều tài nguyên từ một lớp/nhóm lớp, hãy phân tách tên tài nguyên bằng dấu phẩy. Ví dụ, tên lớp sau đây tạo ra ba tài nguyên:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Lưu tài nguyên vào một thư mục con

Bạn có thể chọn lưu tài nguyên hình ảnh được tạo từ các lớp/nhóm lớp cụ thể vào một thư mục con ngay bên dưới thư mục tài nguyên của tệp ảnh. Bao gồm tên thư mục con trong tên lớp/nhóm lớp; ví dụ:

[thư mục con]/Ellipse_4.jpg 

Trường hợp sử dụng thiết kế web

Việc tạo tài nguyên hình ảnh từ tập tin PSD đặc biệt hữu ích cho thiết kế web đa thiết bị. Hãy xem xét thiết kế web sau đây và cấu trúc lớp tương ứng:

Hãy trích xuất biểu tượng ở trên cùng và hàng trên cùng của lưới hình ảnh Điểm truy cập chung dưới dạng tài nguyên hình ảnh:

• Thêm đuôi định dạng hình ảnh vào tên lớp thích hợp.

Đổi tên các lớp/nhóm lớp thích hợp

Photoshop tạo tài nguyên và lưu ở cùng vị trí với tập tin PSD nguồn.

Xác định các thông số về chất lượng và kích thước

Theo mặc định, tài nguyên JPEG được tạo ở chất lượng 90%. Theo mặc định, tài nguyên PNG được tạo dưới dạng hình ảnh 32 bit. Tài nguyên GIF được tạo với độ trong suốt alpha cơ bản.

Khi đổi tên các lớp hoặc nhóm lớp để chuẩn bị tạo tài nguyên, bạn có thể tùy chỉnh chất lượng và kích thước.

Các thông số cho tài nguyên JPEG

• Thêm chất lượng đầu ra mong muốn dưới dạng hậu tố vào tên tài nguyên: .jpg(1-10) hoặc .jpg(1-100%). Ví dụ:
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• Thêm kích thước hình ảnh đầu ra mong muốn (tương đối hoặc theo định dạng được hỗ trợ: px, in, cm và mm) vào làm tiền tố cho tên tài nguyên. Photoshop sẽ điều chỉnh kích thước hình ảnh theo đó. Ví dụ:
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

Lưu ý: Nhớ thêm một ký tự khoảng trắng giữa tiền tố và tên tài nguyên. Nếu xác định kích thước tính bằng pixel, bạn có thể bỏ qua đơn vị. Ví dụ: 300 x 200.

Các thông số cho tài nguyên PNG

• Thêm chất lượng đầu ra mong muốn dưới dạng hậu tố vào tên tài nguyên: 8, 24 hoặc 32. Ví dụ:
  • Ellipse_4.png24
• Thêm kích thước hình ảnh đầu ra mong muốn (tương đối hoặc theo định dạng được hỗ trợ: px, in, cm và mm) vào làm tiền tố cho tên tài nguyên. Photoshop sẽ điều chỉnh kích thước hình ảnh theo đó. Ví dụ:
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

Lưu ý: Nhớ thêm một ký tự khoảng trắng giữa tiền tố và tên tài nguyên. Nếu xác định kích thước tính bằng pixel, bạn có thể bỏ qua đơn vị. Ví dụ: 300 x 200.

Các thông số cho tài nguyên GIF

• Thêm kích thước hình ảnh đầu ra mong muốn (tương đối hoặc theo định dạng được hỗ trợ: px, in, cm và mm) vào làm tiền tố cho tên tài nguyên. Ví dụ:
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

Lưu ý: Nhớ thêm một ký tự khoảng trắng giữa tiền tố và tên tài nguyên. Nếu xác định kích thước tính bằng pixel, bạn có thể bỏ qua đơn vị. Ví dụ: 300 x 200.

Không có thông số chất lượng cho tài nguyên GIF.

Đặt tên lớp phức tạp

Bạn có thể xác định nhiều tên tài nguyên với các thông số khi đặt tên cho một lớp để tạo tài nguyên. Ví dụ:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop tạo các tài nguyên sau đây từ lớp này:

• Delicious.jpg (hình ảnh JPG chất lượng 8 với tỷ lệ 120%)
• Delicious.png (hình ảnh PNG 24 bit với tỷ lệ 42%)
• Delicious_2.jpg (hình ảnh JPG chất lượng 90% có kích thước tuyệt đối là 100x100 px)
• Delicious.gif (hình ảnh GIF với tỷ lệ 250%)

Ví dụ về tỷ lệ tuyệt đối

Ví dụ về tỷ lệ tuyệt đối hợp lệ

• 100x80 foo.png (tỷ lệ tuyệt đối đơn giản)
• 80 x 100px foo.png (khoảng cách giữa các chiều dài)
• 4in x100 foo.png (kết hợp đơn vị và không có đơn vị)
• 90mm x120cm foo.png (kết hợp các đơn vị khác nhau)
• 100x? foo.png (ký tự đại diện)
• ?x60in foo.png (ký tự đại diện ở đầu)

Ví dụ về tỷ lệ tuyệt đối không hợp lệ

• 100x100foo.png (không có khoảng trắng trước tên tập tin)
• 80x100 60% foo.png (kết hợp tỷ lệ tuyệt đối và tương đối)
• 50% 80x100 foo.png (kết hợp tỷ lệ tuyệt đối và tương đối)
• 20in cm x50cm foo.png (nhiều đơn vị)
• 30nm x20 nano.png (đơn vị không hợp lệ)

Định dạng và tách nhiều tập tin

Ví dụ hợp lệ

• Layer 1.png (Cho phép dùng khoảng trắng trong tên tập tin, tạo ra một tập tin duy nhất có tên là "Layer 1.png")
• Layer 1.png, Layer 2.jpg (Dấu phẩy làm dấu phân tách)
• Layer 1.png, Layer 2.jpg (Theo sau dấu phẩy là khoảng trắng để phân tách)
• Layer 1.png+Layer 2.jpg (Dấu cộng làm dấu phân tách)
• Layer 1.png + Layer 2.jpg (Theo sau dấu cộng là khoảng trắng để phân tách)

Kết hợp tất cả lại với nhau

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif cho ra ba tập tin (chuỗi "100% Delicious" bị bỏ qua vì không phải là tên tập tin):

• Layer 1.png, ở tỷ lệ 42%, dưới dạng png 24 bit
• Layer.jpg, với kích thước tuyệt đối là 100x100 pixel, dưới dạng jpg chất lượng 90%
• Foo Bar Baz.gif trong thư mục con Quux, ở tỷ lệ 250%, dưới dạng gif.

Xác định cài đặt mặc định cho tài nguyên

Bạn có thể xác định cài đặt mặc định cho toàn bộ tệp ảnh cho các tài nguyên đã tạo. Làm theo các bước sau:

1. Tạo một lớp trống trong tệp ảnh.
2. Bắt đầu tên của lớp bằng từ khóa default. Bây giờ, hãy nhập các mục cài đặt mà bạn muốn áp dụng cho tất cả tài nguyên hình ảnh được tạo từ tệp ảnh. Ví dụ:
   

Tạo tất cả tài nguyên hình ảnh trong một thư mục con có tên là hi-res. Ví dụ: [asset_folder]/hi-res/Delicious.jpg.

Tạo tất cả tài nguyên hình ảnh trong một thư mục con có tên là hi-res. Ngoài ra, hãy thêm hậu tố @2x vào tên tài nguyên. Ví dụ: [asset_folder]/hi-res/Delicious@2x.jpg.

Lưu trữ các tài nguyên hình ảnh được giảm tỷ lệ xuống 50% trong thư mục con lo-res trong thư mục tài nguyên của tệp ảnh

Tạo hai tài nguyên hình ảnh từ một lớp:

• Trong thư mục con hi-res, một tài nguyên hình ảnh có hậu tố @2x trong tên
• Trong thư mục con lo-res, một tài nguyên hình ảnh được giảm tỷ lệ xuống 50%
  

Tắt tính năng tạo tài nguyên hình ảnh cho tất cả tệp ảnh

Bạn có thể tắt tính năng tạo tài nguyên hình ảnh cho tất cả tệp ảnh Photoshop bằng cách sửa đổi Tùy chọn của mình.

1. Chọn Chỉnh sửa > Tùy chọn > Bổ trợ.
2. Bỏ chọn Bật Công cụ tạo.
3. Nhấp vào OK.

Menu Bổ trợ cho công cụ tạo

Trước bản phát hành Photoshop trên máy tính phiên bản 25.11 vào tháng 7 năm 2024, các Bổ trợ cho công cụ tạo nằm trong menu Tập tin > Tạo.

Hiện tại, tất cả Bổ trợ cho công cụ tạo, bao gồm bổ trợ Tài nguyên hình ảnh mặc định, đều nằm trong menu Tập tin > Tự động hóa > Bổ trợ cho công cụ tạo.  Sự thay đổi này nhằm làm rõ hơn tên của menu con và phân biệt với các tính năng tạo sinh mới như Tạo hình ảnh.

Câu hỏi thường gặp