Giới thiệu Photoshop Script auto export drawable cho Android.

Xin chào các bạn. Đến hẹn lại lên một mùa sưu thuế nữa lại đến, lần này mình sẽ bán đàn chó đi để nộp sưu đúng hạn.

Khi làm việc với ứng dụng Android chắc chắn rất nhiều lần bạn phải tự tay chỉnh sửa các file ảnh png drawable trong ứng dụng và sau đó lưu lại theo các độ phân giải như hdpi, xhdpi, xxhdpi ..., Chắc các bạn cũng làm giống mình đó là lưu file vào thư mục drawable-xxxhdpi rồi ra photoshop resize lại sau đó lưu vào drawable-xxhdpi và lặp lại quá trình đó đến khi hoàn thành cho tất cả các độ phân giải màn hình. thật nhàm chán và dễ mắc sai lầm nếu ứng dụng của bạn có drawable everywhere.

Sau rất nhiều lần chịu nhục làm bằng cách đó thì mình bắt đầu xuống núi và vào mạng tìm kiếm cách nào đó auto một chút. mình tìm được một số script nhưng đa phần đều không hoạt động hoặc khó sử dụng. Cuối cùng cũng tìm ra một đoạn script khá hay, kết quả rất ưng cái bụng. Script cũng khá dễ đọc và hiểu nên mình cũng modify lại vài chỗ cho phù hợp yêu cầu mà mình mong muốn.

Nhân vật chính mà mình nhắc đến chính là đây Output Android Assets Script của tác giả tlinkner. Bạn có thể vào trang gist đó để xem bản gốc. Phiên bản này resize các hình bằng tỉ lệ % so với hình gốc và còn thiếu một số độ phân giải nên mình modify lại sử dụng đơn vị pixels và thêm một số độ phân giải nữa.

Cách sử dụng rất đơn giản như sau:

Bước 1: Tạo một thư mục trống để chứa tất cả các file ảnh png sẽ sử dụng Bước 2: Thiết kế các icons sao cho thật ưng cái bụng và export file ra định dạng png vào thư mục vừa tạo ở bước 1. Lưu ý khi export bạn cũng nên đặt ngay tên cho file sẽ sử dụng trong drawable của android.

Bước 3: Mở photoshop và chạy đoạn script bằng cách vào menu File -> Scripts -> Browse đến file android_export.jsx

Bước 4: Sẽ có 1 dialog hiện lên hỏi bạn có muốn xóa các file gốc sau khi export không? Nếu muốn để lại thì chọn No nha, quen tay nhấn Yes thì (yaoming)

Bước 5: Sau khi chọn Yes/No sẽ đến bước chọn thư mục chứa các ảnh png cần export. Hãy browse đến thư mục tạo ở bước 1 và nhấn Open để thấy điều kỳ diệu. Đợi nó chạy xong sẽ hiện dialog Done! và hãy vào thư mục tạo ở bước 1 tận hưởng thành quả.

Kết quả như hình, bên trái là thư mục ban đầu chứa các thư mục drawable, bên phải là thư mục drawable-xxxhdpi