Cách vẽ gridview, listview trong photoshop cực nhanh bằng craft plugin

Thứ ba, ngày 01/08/2017 6:27 AM

Như các bạn đã biết, khi thiết kế giao diện ứng dụng, việc vẽ gridview, listview rất mất thời gian. Ngoài ra để những thiết kế được chuyên nghiệp thì các dữ liệu chúng ta thể hiện trên file thiết kế cũng phải giống như thật. Dưới đây tôi sẽ bày cho các bạn 1 cách vẽ gridview, listview vô cùng đơn giản và nhanh chóng.

Đầu tiên, để vẽ được gridview nhanh chóng thì bạn cần phải sử dụng tới 1 plug-in có tên là Craft, plug-in này khá phổ biến khi các bạn thiết kế sử dụng Sketch. Với Photoshop thì hiện tại invisionapp không còn hỗ trợ trên windows nữa, bản down dưới đây vẫn sử dụng được cho Photoshop CC2017. Tuy nhiên theo khuyến cáo của nhà phát triển thì sẽ không có bản cập nhật nữa, và có thể các bản photoshop sau này không hỗ trợ nữa.

Craft plugin cho photoshop

Link đường dẫn download plug-in: Craft plug-in

Sau khi download về và giải nén ra bạn sẽ thấy các thư mục như sau:

Tiếp theo bạn copy các file vừa giải nén vào thư mục: C:\Program Files\Adobe\Adobe Photoshop CC 2017\Required\CEP\extensions (trên máy các bạn có thể sẽ khác tùy theo thư mục bạn chọn cài đặt)

Giải nén craft plugin

Các bước để vẽ gridview nhanh chóng

Cấu trúc của gridview thông thường có 3 phần: 1 là header, 2 là phần nội dung và 3 là phần footer. Ở đây phần header và footer chúng ta sẽ tự vẽ, phần nội dung chúng ta sẽ vẽ 1 dòng thôi sau đó dùng plugin để nhân số dòng và sinh dữ liệu. Nếu trước đây chúng ta vẽ thủ công thì ví dụ chúng ta vẽ 1 grid 10 dòng thì sẽ phải tự vẽ từng dòng và nhập liệu cho từng dòng đó rất mất thời gian.

Đầu tiên ta tạo ra document trắng.

Tiếp theo vẽ grid với dữ liệu như hình bên dưới. Dòng số 1 sẽ là header, dòng số 2 là nội dung (đang copy từ dòng trên, lát nữa sẽ sinh dữ liệu lại sau).

Sinh dữ liệu bằng craft plugin

Bây giờ chúng ta tiến hành sinh 9 dòng còn lại cho grid. Trước khi copy dòng hay sinh dữ liệu ta cần lựa chọn vào các đối tượng cần làm việc. Ở đây chúng ta định nhân đôi dòng thứ 2 nên ta sẽ chọn tất cả các layer của dòng thứ 2.

Sử dụng craft photoshop

Tiếp theo ta chọn plugin và điền các thông số để copy thành 9 dòng còn lại.

Sử dụng craft duplicate photoshop

Chúng ta lựa chọn plugin Duplicate, ở đây ta có 2 tab: Là Inside Selection và Specific Count

Inside Selection

Dùng sinh dữ liệu trong vùng chọn mình đã giới hạn từ trước, dùng Rectangular Marquee tool khoanh 1 vùng chọn sau đó chỉ sinh dữ liệu trong đó.

Ở đây chúng ta sẽ sử dụng tab thứ 2

Specific Count

Sinh dữ liệu theo số lượng và khoảng cách không giới hạn về vùng sinh dữ liệu

Ta chọn sang tab Specific Count và tick chọn vào Vertical. Do ở đây chúng ta sẽ sinh dữ liệu dọc từ trên xuống nên phải lựa chọn Vertical, nếu sinh ngang thì ta chọn Horizontal và bấm Duplicate Content ta sẽ được các dữ liệu như sau:

Sinh dữ liệu bằng craft photoshop

Làm việc này chỉ mất vài giây thôi. Tiếp theo giờ là lúc đổ dữ liệu vào mấy cái dòng mình vừa sinh ra.

Sử dụng plugin data craft

Để sinh dữ liệu cho grid thì bạn chọn vào plugin Data, ở đây có nhiều trường mặc định như: Cities, Addresses...Các bạn có thể tự thêm dữ liệu cho riêng mình bằng cách bấm vào + Add Item, trên giao diện này có thể tự thêm dữ liệu, mỗi dữ liệu sẽ nằm trên 1 dòng.

Phần ảnh ta sẽ chọn Photos, trong này cũng có sẵn vài thư viện, hoặc tự định nghĩa Custom photo riêng để dùng. Giờ chúng ta tiến hành sinh dữ liệu ảnh vào các ô Shape màu đen kia nhé: Các bạn select chọn tất cả các layer shape màu đen kia sau đó bấm sang tab Photos chọn "Ảnh thẻ", dữ liệu ảnh sẽ sinh ngẫu nhiên trong folder ảnh mình đã chọn.

Sử dụng photo craft photoshop

Làm tương tự với các phần dữ liệu khác, dữ liệu dạng text thì chọn sang tab Type sau đó chọn tất cả các trường như: Họ và tên sau đó bấm vào dòng Họ và tên trên bộ dữ liệu nhập sẵn thì chương trình sẽ sinh ra 1 loạt họ và tên ngẫu nhiên.

Vẽ gridview bằng craft plugin

Kết quả thật bất ngờ, dữ liệu sinh ra cực nhanh, nếu vẽ nhanh grid này khi có sẵn bộ dữ liệu chắc không tới 1 phút, việc làm đẹp còn tùy vào mỗi người nhé. Thật không thể tin nổi phải không các bạn!

Chúc các bạn thiết kế thật tốt! Có gì không hiểu cứ comment bên dưới mình sẽ trợ giúp.

Micrit