ベクターアセットをSketchからAndroidにエクスポートするための10のヒント

ラスターに対するベクターの利点は明らかです。ベクターアセットは小さく、簡単に編集でき、マイクロ管理が非常に簡単です(特にサイズと色の点で)。

私は、多くの異なるプラットフォームをサポートする比較的複雑なアプリケーションに取り組んでいます。 Androidの画面サイズと解像度(Nexus 6Pを見てください)の成長に伴い、さまざまな解像度をサポートする必要があるため、既存のアセットをラスターからベクター形式に更新して、アセットをスケーラブルに保つ必要があると感じました。

現在使用しているアセットのほとんどは、元々Sketchを使用して作成されました。これにより、変換の試行中にいくつかの興味深い問題が発生しました。ベクターアセットは、Androidの現在のAPI(Android 24)で部分的にしかサポートされていないため、エクスポートされたアセットは多くの予期しない方法で破損しました。

これは、アプリ内のすべてのラスターアセットをAndroidのベクターに変換する際に学んだ2、3のことから、デザイナーの観点から調査日記として機能します。 Android Studioユーザーガイドは、トラブルシューティングに関して特に有用ではありませんでした。

「完全サポート」ではない

ここに記述されているルールの多くは、Sketchを使用したベクターアセットのエクスポートに固有のものです。ただし、これらはすべてのプラットフォームで使用するためのクリーンで機能的なベクター資産をエクスポートするための優れたガイドラインでもあります。

1.シンプルにバカにする

ソフトウェア設計のこの基本原則は、資産にも適用されます。形状が単純であるほど良いです。シンプルな形状を使用して、必要な複雑なアセットを作成してみてください。一般的な経験則では、使用されるパスとアンカーが少ないほど、「クリーン」になります。複数の重なり合う形状を使用してアセットを作成するよりも、常に単一の形状を使用することをお勧めします。

2.マスクの使用を避ける

Sketchを使用して作成されたマスクは、Android APIの現在のバージョンではサポートされていません。 Sketchで作成されたマスキングはAndroid VectorDrawble(AVD)によって無視され、Sketchで作成されたマスクはAdobe Illustratorをクラッシュさせることがあります。シェーディングエフェクトを作成する必要がある場合は、マスクを優先して、既存のレイヤーの上に重なるシェイプを使用する必要があります。

必要なシェイプを作成するために、ベースレイヤーとシェーディングレイヤーでパスファインダー操作「交差」を使用します

3.ストロークではなくアウトラインを作成する

可能な場合は、ストロークを使用して目的の形状を作成しないようにしてください。ストロークは、画像の残りの部分で常に適切に拡大縮小されるとは限りません。さらに、AVDは異なる境界位置を区別せず、すべての境界を「中央」ストロークとして扱います。

つまり、AVDでレンダリングすると、Sketchの太さ10の内側の境界線が太さ20の中央ストロークになります。

アウトラインはシェイプであるため、スケーリングまたは変換されたときに常に望ましい外観を示します。また、パスファインダー操作を適用する場合、アウトラインの操作ははるかに簡単です。

CMD + Shift + Oを使用して、ストロークをアウトラインに簡単に変更できます。

4.パスファインダーはあなたの友達

最も複雑な形状は、パスファインダー操作を使用して、より単純な形状の構成から作成できます。それらに精通してください。この方法で作成された図形は、すべてのデバイスで適切に表示できます。

5. Adob​​e Illustratorは最適なトラブルシューティングツールです

Adobe Illustratorは、(逸話的な経験から)AndroidのVectorDrawableと同じ方法でベクターアセットをレンダリングします。アセットがAVDで適切に表示されない場合は、Illustratorを使用して問題を診断してみてください。多くの場合、解決策は塗りつぶしを削除するのと同じくらい簡単です。

Sketchを使用してAndroidのアセットをエクスポートする場合の一般的な問題。

6.結合および変換された形状は、見た目どおりに表示されないことがあります

Sketchで行われた反射や回転などの変換は、Android VectorDrawableでは完全にサポートされていません。その結果、変換されたレイヤーは常に期待どおりに表示されるとは限りません。これに対する最も簡単な解決策は、変換のある各パスをフラット化することです。そのため、変換はパスの一部になります。

ただし、グループ全体に変換が適用される状況では、これを回避する唯一の方法は、個々のレイヤーを手動で変換して配置することです。

7. OHPフィルムはあなたの友達…

透明度はすべてのデバイスおよびプラットフォームで適切にサポートおよび表示され、それらを使用して必要に応じてシャドウ/ハイライトを作成します。

ステーキの下のドロップシャドウに注意してください

8.…そして勾配は

一方、AVDは現在グラデーションをサポートしていません。この方法で作成されたアセットは、ほぼ確実にインポート中に破損します。セルシェーディングは、グラデーションシェーディング手法を優先して使用する必要があります。

ステーキの下の影が消える

9.レイヤーではなくアートボードをエクスポートする

Sketchで境界ボックスを使用してベクターアセットの寸法を定義することは、昔ながらの手法です。ベクターをエクスポートするための境界を定義する有用な方法ですが、より良いアプローチは、定義しようとしているビューポートと同じ寸法のアートボードを作成することです。アセットのバウンディングボックスレイヤーは、VectorDrawable xmlに変換されると、別個の透明なパスとして扱われます。

10.形状を平坦化すると、ほとんどの問題が解決します

エクスポートされたアセットには、編集中の変換と構成を記述するメタデータが含まれます。これは、作成された「方法」についてユーザーに伝えるためです。ただし、これらのアセットのエクスポートとレンダリングに関しては、ファイルサイズの増加に加えて、構成方法に関するこの無関係な情報が解決するよりも多くの問題を引き起こすことがあります(Sketchで実行される回転と反射はサポートされていません)。

表示されるのはアセットの終了状態のみであるため、この場合は終了状態の外観のみが重要です。

シェイプをフラット化すると、変換とパスファインダー操作がアセットにレンダリングされます。これにより、古い情報が削除され、ファイルサイズが小さくなり、画像を正確にプレビューできます。