10 mẹo để xuất tài sản vector từ Phác thảo sang Android

Những lợi thế của vectơ để raster là rõ ràng. Tài sản vectơ nhỏ hơn, dễ dàng chỉnh sửa và dễ dàng hơn để vi mô (cụ thể là về kích thước và màu sắc).

Tôi làm việc trên một ứng dụng tương đối phức tạp hỗ trợ nhiều nền tảng khác nhau. Với kích thước và độ phân giải màn hình ngày càng tăng (nhìn vào bạn, Nexus 6P) cho Android, chúng tôi cảm thấy cần phải cập nhật các tài sản hiện có từ raster sang định dạng vector để giữ cho tài sản có thể mở rộng do nhu cầu hỗ trợ các độ phân giải khác nhau.

Hầu hết các tài sản chúng tôi hiện đang sử dụng ban đầu được tạo bằng Phác thảo. Điều này gây ra một số vấn đề thú vị trong khi thử chuyển đổi. Vì tài sản vectơ chỉ được Android hỗ trợ một phần trong API hiện tại (Android 24), nên các tài sản xuất khẩu đã bị phá vỡ theo nhiều cách không mong muốn.

Điều này phục vụ như một cuốn nhật ký điều tra theo quan điểm của một nhà thiết kế, cho một vài điều chúng tôi đã học được khi cố gắng chuyển đổi tất cả các tài sản raster trong ứng dụng thành các vectơ cho Android. Hướng dẫn sử dụng Android Studio không đặc biệt hữu ích khi khắc phục sự cố.

Không hoàn toàn là hỗ trợ đầy đủ

Nhiều quy tắc được viết ở đây là cụ thể để xuất tài sản vectơ bằng cách sử dụng Phác thảo. Tuy nhiên, chúng cũng là những hướng dẫn tốt để xuất tài sản vectơ sạch và chức năng để sử dụng trên tất cả các nền tảng.

1. Giữ cho nó đơn giản ngu ngốc

Nguyên tắc cốt lõi này cho thiết kế phần mềm cũng áp dụng cho các tài sản: hình dạng càng đơn giản càng tốt. Hãy thử và sử dụng các hình dạng đơn giản để tạo ra các tài sản phức tạp bạn cần. Nguyên tắc chung là, càng ít đường dẫn và neo được sử dụng, thì nó càng sạch. Sử dụng một hình dạng duy nhất luôn thích hợp hơn là sử dụng nhiều hình dạng chồng chéo để tạo một tài sản.

2. Tránh sử dụng khẩu trang

Mặt nạ được tạo bằng Phác thảo không được hỗ trợ bởi phiên bản API Android hiện tại. Bất kỳ mặt nạ nào được tạo trong Phác thảo đều bị Android VectorDrawble (AVD) bỏ qua và mặt nạ được tạo trong Phác thảo đôi khi sẽ làm hỏng Adobe Illustrator. Nếu có một tình huống cần tạo hiệu ứng đổ bóng, hình dạng chồng lấp lên trên lớp hiện có nên được sử dụng để thay thế cho mặt nạ.

Sử dụng thao tác tìm đường dẫn Intersect trực tiếp trên lớp tô bóng với lớp cơ sở để tạo hình dạng bạn cần

3. Làm phác thảo, không đột quỵ

Trong tình huống có thể, cố gắng tránh sử dụng các nét để tạo ra các hình dạng mong muốn. Strokes don luôn luôn chia tỷ lệ đúng với phần còn lại của hình ảnh. Ngoài ra, AVD không phân biệt giữa các vị trí viền khác nhau và coi tất cả các đường viền là nét chữ trung tâm.

Vì vậy, điều này có nghĩa là đường viền bên trong có độ dày 10 trên Phác thảo trở thành một nét trung tâm có độ dày 20 khi được hiển thị trên AVD.

Vì các phác thảo là hình dạng, chúng luôn thể hiện vẻ ngoài mong muốn khi được thu nhỏ hoặc biến đổi. Đề cương cũng dễ dàng hơn để làm việc với nếu bạn muốn áp dụng các hoạt động tìm đường.

Bạn có thể dễ dàng thay đổi các nét thành các đường viền bằng cách sử dụng CMD + Shift + O.

4. Kẻ tìm đường là bạn của bạn

Hầu hết các hình dạng phức tạp có thể được tạo ra từ một cấu trúc của các hình dạng đơn giản hơn bằng cách sử dụng các thao tác tìm đường. Làm quen với chúng. Hình dạng được tạo theo cách này có thể được hiển thị đúng trên mọi thiết bị.

5. Adobe Illustrator là trình khắc phục sự cố tốt nhất

Adobe Illustrator biểu hiện các tài sản vectơ giống như Android Vector VectorDrawable (từ trải nghiệm giai thoại). Nếu một tài sản không hiển thị đúng trong AVD, hãy thử chẩn đoán sự cố bằng Illustrator. Thường thì giải pháp đơn giản như chỉ cần loại bỏ một điền vào.

Một vấn đề phổ biến để xuất tài sản cho Android bằng Phác thảo.

6. Hình dạng kết hợp và biến đổi có thể không xuất hiện như những gì chúng có vẻ

Các biến đổi như phản xạ và xoay được thực hiện trong Phác thảo không được hỗ trợ đầy đủ trong Android VectorDrawable. Do đó, các lớp biến đổi don don luôn xuất hiện theo cách bạn mong đợi. Giải pháp đơn giản nhất cho vấn đề này là chỉ cần làm phẳng mỗi đường dẫn có một phép biến đổi, do đó phép biến đổi trở thành một phần của đường dẫn.

Tuy nhiên, trong các tình huống áp dụng các phép biến đổi cho toàn bộ các nhóm, cách duy nhất để giải quyết vấn đề này là chuyển đổi thủ công và định vị từng lớp riêng lẻ.

7. Trong suốt là bạn của bạn

Độ trong suốt được hỗ trợ và hiển thị đúng trên tất cả các thiết bị và nền tảng, sử dụng chúng để tạo bóng / nổi bật khi thích hợp.

Lưu ý bóng thả dưới bít tết

8. Không và độ dốc không

Mặt khác, AVD hiện không hỗ trợ độ dốc. Các tài sản được thực hiện theo cách này gần như chắc chắn sẽ bị phá vỡ trong quá trình nhập khẩu. Cel shading nên được sử dụng để ủng hộ các kỹ thuật tạo bóng gradient.

Bóng tối dưới bít tết biến mất

9. Xuất khẩu bản vẽ, không phải lớp

Sử dụng hộp giới hạn trong Phác thảo để xác định kích thước của tài sản vectơ là một kỹ thuật trường học cũ. Mặc dù đây vẫn là một phương pháp có thể xác định được các ranh giới để xuất các vectơ, cách tiếp cận tốt hơn là tạo ra một bản vẽ nghệ thuật có cùng kích thước với chế độ xem mà bạn đang cố gắng xác định. Lớp hộp giới hạn trong tài sản được coi là một đường dẫn riêng biệt nhưng trong suốt khi được dịch sang xml VectorDrawable.

10. Làm phẳng hình dạng sẽ giải quyết hầu hết các vấn đề

Các tài sản đã xuất chứa siêu dữ liệu mô tả các biến đổi và các thành phần của nó trong khi nó đang được chỉnh sửa, vì điều này cho người dùng biết về cách thức mà nó được tạo ra. Tuy nhiên, khi nói đến việc xuất và hiển thị các tài sản này, thông tin không liên quan này về cách nó được tạo ra thường gây ra nhiều vấn đề hơn nó giải quyết (xoay và phản xạ được thực hiện trong Phác thảo không được hỗ trợ), ngoài việc tăng kích thước tệp.

Trạng thái kết thúc của tài sản là điều duy nhất được hiển thị, và vì vậy trong trường hợp này chỉ có sự xuất hiện của trạng thái kết thúc.

Làm phẳng một hình dạng sẽ đưa ra các phép biến đổi và hoạt động của đường dẫn vào tài sản. Điều này làm giảm kích thước tệp bằng cách xóa thông tin lỗi thời và cho phép bạn xem trước hình ảnh chính xác.