Sketch3でandroidアイコンを作る

2014/6/8 4665hit

以前紹介したSketch2がバージョンアップしてSketch3になりました。
Sketch3は多機能化に伴いUIが変化しSketch2に比べて操作が直感的ではなくなったように思いますが、より複雑な画像を作成しやすくなっています。大きな注目点の一つとしてAndroidの複数密度に対応した画像出力が容易に出来るようになったことが挙げられます。
複数密度での出力は私もtoAndroidという名前でイラストレーター用Fireworks用のスクリプトを公開していますが、Sketch3の場合、そのようなスクリプトに頼ることなく複数密度での出力が可能になりました。
Sketch 3
それでは、実際にSketch3を使ってアイコンを作ってみましょう。

出力範囲を作る

最近の傾向に従いldpiは無視して48px四方のmdpiを作成し、それを元にhdpi、xhdpi、xxhdpiの4つの密度画像を出力します。
出力範囲を作るにはInsertからArtboardを選びます。

サイズを縦横48に設定します。


画面を拡大する

このサイズは作業しづらいので虫眼鏡ツールかピンチアウトで画像を広げます。
この際、作業形態によってはピクセルが出てしまうことが有ります。
このモード、実際にmdpiで出力するとどのようになるかを見るには良いのですが、xxhdpiのように高解像度のアイコンでどのように表示されるかがわからなくなってしまうので、ViewのHide Pixelsでピクセルを非表示にします。



アイコンを作成する
アイコンの作成内容については本気でAndroid用のアイコンを作るを見て下さい。


出力する
さて、そのまま出力してもmdpiの画像しか出力されません。
1.5倍のhdpi、2倍のxhdpi、3倍のxxhdpiを出力する必要があります。

左側から最初に作ったArtbord1を選び、

Exportの+をクリックします。新しい密度が出てくるのでもう2回押して1x、2x、1.5x、3x全部で4つのExportが出るようにします。


右下のExport Artboard 1をクリックし、Save for Webにチェックが入っている状態で保存すると、
Artboard 1.png、Artboard 1@1.5x.png、Artboard 1@2x.png、Artboard 1@3x.pngという風にそれぞれの名前で出力されます。
mdpi(48x48)
hdpi(72x72)
xhdpi(96x96)
xxhdpi(144x144)

あとはArtboard 1.pngをdrawable-mdpiに@1.5をdrawable-hdpiに、@2xをdrawable-xhdpiに、@3xをdrawable-xxhdpiのそれぞれのフォルダに分けた後でファイル名を[ic_launch]の様に同一ファイル名とするとそれぞれの密度に応じた画像を出力できます。

Sketch3はFireworksやIllustratorに比べて価格が安いというわかりやすいメリットが有りますが、それだけではなく、印刷向けに作られたIllustratorやデスクトップWeb向けに作られたFireworksに比べてSketchはスマートフォンアプリ向けに作られている感があり、今回の多密度対応の充実もその一つと言えます。
FireworksやIllustratorのように定番アプリの1つとなってほしいですね。

Sketch3はAppStoreでダウンロード可能です。

前:AndroidWear デザインの話 次:始めてのSketch3 チュートリアル

関連キーワード

[Android][イラスト][モバイル][IT]

コメントを投稿する

名前URI
コメント