Tự động xuất icon, ảnh bằng image assets trong photoshop

Thứ năm, ngày 01/06/2017 23:13 PM

Chia sẻ công cụ tự động xuất ảnh theo các định dạng JPEG, PNG, GIF. Giúp designer bớt công sức cắt ảnh để chuyển sang cho DEV thi công.

Giới thiệu về công cụ tự động xuất ảnh, icon trong Photoshop

Bạn có thể xuất khẩu file ảnh JPEG, PNG, or GIF từ file psd vô cùng đơn giản, nhanh chóng với công cụ Generate > Image Assets trong Photoshop. 

Image assets trong photoshop

Để sử dụng được công cụ này đầu tiên bạn phải khai báo tên cho layer chứa ảnh hoặc chứa các đối tượng bạn muốn xuất khẩu ra. Ví dụ ở đây tôi xuất khẩu ra icon Ổ khóa ở ô mật khẩu, thì trước tiên bạn phải chọn vào layer của icon Ổ khóa này và đặt tên cho nó, ở đây tôi đang định xuất ra định dạng .png và kích thước x2 (200%), tiếp theo bạn xổ menu và chọn theo cấu trúc File ->  Generate -> Image assets chỉ cần đơn giản như vậy đã có thể xuất khẩu ra được icon Ổ khóa với kích thước to gấp đôi kích thước thật của icon.

Với cách này bạn cũng có thể group các đối tượng lại với nhau sau đó đặt tên theo đúng cấu trúc thì công cụ sẽ hỗ trợ xuất cả group đó ra 1 file theo các định dạng trên.

Group image assets

Một số cấu trúc để sinh ảnh bằng Image Assets

Xuất khẩu thành nhiều file, nhiều kích thước khác nhau trên 1 icon

Ellipse_4.jpg, 200% Ellipse_4b.png, 300% Ellipse_4c.png

Lưu file vào 1 thư mục con

Bạn có thể lưu các file muốn xuất khẩu vào 1 thư mục con theo cấu trúc bên dưới:

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

Tham số cho ảnh JPEG

  • Bạn định xuất ra file đuôi và dung lượng theo cấu trúc sau: .jpg(1-10) or .jpg(1-100%). Ví dụ: Xuất ra file ảnh jpg chất lượng giảm xuống 50%
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Xuất ra file ảnh với kích thước theo 1 số đơn vị: px, in, cm, và mm
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Tham số cho ảnh PNG

  • Chất lượng của ảnh sẽ theo các loại sau: 8, 24, or 32. Ví dụ:
    • Ellipse_4.png24
  • Về kích thước size thì thể hiện theo cấu trúc bên dưới (giống với file JPEG):
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Tham số cho ảnh GIF

Tương tự như các phần JPEG và PNG

Một số tham số thiết lập mặc định

Đầu tiện bạn phải tạo ra 1 layer trắng và đặt tên cho nó là default

default hi-res/

Sinh tất cả các ảnh vào trong folder này, ví dụ: [asset_folder]/hi-res/Delicious.jpg.

default hi-res/@2x

Sinh tất cả các ảnh vào trong folder tên là hi-res. Và tên có đuôi là @2x. Ví dụ, [asset_folder]/hi-res/Delicious@2x.jpg.

default 50% lo-res/

Sinh tất cả các ảnh có dung lượng giảm đi 50% trong thư mục con có tên là lo-res.

default hi-res/@2x + 50% lo-res/

Sinh 2 ảnh vào trong 2 thư mục con:

Trong thư mục hi-res, 1 ảnh được tạo ra có đuôi là @2x

Trong thư mục lo-res, 1 ảnh được tạo ra có dung lượng giảm đi 50%

Cách tắt Image Assets không sử dụng nữa

  1. Chọn Edit > Preferences > Plug-Ins.
  2. Bỏ tick chọn Enable Generator.
  3. Bấm OK.

Lưu ý: Các file ảnh tạo ra sẽ tự lưu vào 1 thư mục tạo ra cùng cấp với file .psd của bạn.

Trên đây là toàn bộ những chia sẻ về công cụ tự động sinh ảnh Image asset trong Photoshop. Chúc các bạn làm việc hiệu quả hơn!