벡터 자산을 Sketch에서 Android로 내보내기위한 팁

래스터에 대한 벡터의 장점은 분명합니다. 벡터 자산은 더 작고 쉽게 편집 할 수 있으며 미세 관리하기가 훨씬 쉽습니다 (특히 크기 및 색상 측면에서).

다양한 플랫폼을 지원하는 비교적 복잡한 응용 프로그램에서 작업합니다. Android 용 화면 크기와 해상도 (Nexus 6P)가 점점 커짐에 따라 다양한 해상도를 지원해야하므로 자산을 확장 가능하게 유지하기 위해 기존 자산을 래스터에서 벡터 형식으로 업데이트해야한다고 생각했습니다.

현재 사용하는 대부분의 자산은 원래 Sketch를 사용하여 생성되었습니다. 이로 인해 변환을 시도하는 동안 몇 가지 흥미로운 문제가 발생했습니다. 벡터 자산은 현재 API (Android 24)에서 Android에 의해 부분적으로 만 지원되므로 내 보낸 자산이 예상치 못한 방식으로 중단되었습니다.

앱의 모든 래스터 자산을 Android 용 벡터로 변환하는 동안 배운 몇 가지 사항에 대해 디자이너의 관점에서 조사 일기 역할을합니다. Android Studio 사용 설명서는 문제 해결과 관련하여 특별히 도움이되지 않았습니다.

“완전한 지원”이 아님

여기에 작성된 많은 규칙은 Sketch를 사용하여 벡터 자산을 내보내는 데 적용됩니다. 그러나 모든 플랫폼에서 사용하기 위해 깨끗하고 기능적인 벡터 자산을 내보내는 데 유용한 지침이기도합니다.

1. 단순하게 유지

소프트웨어 디자인의이 핵심 원칙은 자산에도 적용됩니다. 모양이 단순할수록 좋습니다. 간단한 모양을 사용하여 필요한 복잡한 자산을 만듭니다. 경험상 일반적으로 경로와 앵커 수가 적을수록 "보다 깨끗합니다". 여러 개의 겹치는 모양을 사용하여 자산을 만들려면 항상 단일 모양을 사용하는 것이 좋습니다.

2. 마스크 사용을 피하십시오

Sketch를 사용하여 만든 마스크는 현재 버전의 Android API에서 지원되지 않습니다. AVD (Android VectorDrawble)에서는 Sketch에서 만든 마스킹이 무시되고 Sketch에서 만든 마스크가 Adobe Illustrator와 충돌하는 경우가 있습니다. 음영 효과를 만들어야하는 상황에서는 기존 레이어 위에 겹치는 모양을 사용하여 마스크를 사용해야합니다.

음영 처리 레이어의 패스 파인더 작업

3. 획이 아닌 윤곽선 만들기

가능한 경우 스트로크를 사용하여 원하는 모양을 만들지 않도록하십시오. 획이 나머지 이미지의 크기에 맞게 항상 비율이 조정되는 것은 아닙니다. 또한 AVD는 서로 다른 경계 위치를 구분하지 않으며 모든 경계를 "중심"획으로 취급합니다.

이것이 의미하는 것은 Sketch에서 두께 10의 내부 테두리가 AVD에서 렌더링 될 때 두께 20의 중심 스트로크가됩니다.

외곽선은 모양이므로 크기를 조정하거나 변형 할 때 항상 원하는 모양을 나타냅니다. 패스 파인더 작업을 적용하려는 경우 윤곽선을 사용하는 것이 훨씬 쉽습니다.

CMD + Shift + O를 사용하여 획을 윤곽선으로 쉽게 변경할 수 있습니다.

4. 패스 파인더는 당신의 친구입니다

패스 파인더 작업을 사용하여 더 단순한 형태의 구성으로 가장 복잡한 형태를 만들 수 있습니다. 그들과 친해지십시오. 이 방법으로 만든 모양은 모든 장치에 올바르게 표시 될 수 있습니다.

5. Adobe Illustrator는 최고의 문제 해결사입니다

Adobe Illustrator는 일화 경험을 통해 Android의 VectorDrawable과 동일한 방식으로 벡터 자산을 렌더링합니다. AVD에 자산이 제대로 표시되지 않으면 Illustrator를 사용하여 문제를 진단 해보십시오. 종종 채우기를 제거하는 것만 큼 솔루션이 간단합니다.

Sketch를 사용하여 Android 용 자산을 내보내는 일반적인 문제입니다.

6. 결합 된 모양과 변형 된 모양이 보이는 것처럼 보이지 않을 수 있습니다

Sketch에서 만든 반사 및 회전과 같은 변환은 Android VectorDrawable에서 완전히 지원되지 않습니다. 결과적으로 변형 된 레이어가 항상 원하는 방식으로 나타나는 것은 아닙니다. 이에 대한 가장 쉬운 해결책은 변환이있는 각 경로를 평평하게하는 것이므로 변환이 경로의 일부가됩니다.

그러나 변환이 전체 그룹에 적용되는 상황에서이 문제를 해결할 수있는 유일한 방법은 각 개별 레이어를 수동으로 변환하고 배치하는 것입니다.

7. 투명성은 당신의 친구입니다…

투명도는 모든 장치와 플랫폼에서 올바르게 지원되고 표시됩니다.

스테이크 아래 그림자를 참고하십시오.

8.… 그라디언트는

반면에 AVD는 현재 그라디언트를 지원하지 않습니다. 이런 식으로 만들어진 자산은 수입 과정에서 거의 확실하게 파손될 것입니다. 그라디언트 셰이딩 기술에 유리하게 셀 셰이딩을 사용해야합니다.

스테이크 아래 그림자가 사라집니다

9. 레이어가 아닌 대지 내보내기

Sketch에서 경계 상자를 사용하여 벡터 자산의 치수를 정의하는 것은 구식 기술입니다. 벡터 내보내기를위한 경계를 정의하는 것은 여전히 ​​유용한 방법이지만 더 나은 방법은 정의하려는 뷰포트와 치수가 같은 대지를 만드는 것입니다. 자산의 경계 상자 레이어는 VectorDrawable xml로 변환 될 때 별도의 투명한 경로로 처리됩니다.

10. 모양을 평평하게하면 대부분의 문제가 해결됩니다.

내 보낸 자산에는 편집하는 동안 변환 및 컴포지션을 설명하는 메타 데이터가 포함되어 있습니다.이를 통해 사용자에게 "어떻게"만들어 졌는지 알 수 있습니다. 그러나 이러한 자산을 내보내고 렌더링 할 때는 파일 크기를 늘리는 것 외에도 자산 구성 방법에 대한이 불필요한 정보로 인해 해결하는 것보다 더 많은 문제가 발생합니다 (S 스케치에서 수행 된 회전 및 반사는 지원되지 않음).

자산의 최종 상태 만 표시되므로이 경우 최종 상태의 모양 만 중요합니다.

모양을 평평하게하면 변형 및 패스 파인더 작업이 자산으로 렌더링됩니다. 이로 인해 더 이상 사용되지 않는 정보가 제거되어 파일 크기가 줄어들고 이미지를 정확하게 미리 볼 수 있습니다.