プラグイン不要 Sketchを使ってandroid用素材の書き出しを一瞬で行う方法

android用の書き出し、面倒ですよね。

androidのプロジェクト用にファイルを書き出す場合、同じ名前で、各解像度のフォルダ内に収めなければなりません。

もちろん僕自身もプラグインを使ってこの作業を行っていました。ただ、Sketchをアプデするたびに不安定になるため、どうにかならないもんかと思っていました。

書き出し時にフォルダを作成できる

先日たまたま書き出し時にフォルダを作成できることに気づきました。書き出すSliceなりArtboardなりの名前をフォルダ名/ファイル名にすることで、”新規フォルダを作成”と”ファイルの書き出し”を同時に行ってくれます。

例えば、ic/iconという名前のsliceを書き出したときの結果は以下の通りです。

Export Presetに設定する

xxhdpiでデザインしている場合、上の画像のように設定すると、書き出し時にこのExportPresetを選択するだけでandroid Exportめんどくさい問題解決です。Prefix/Suffixの設定は、Prefixを選択して以下の通りです。

  • drawable-mdpi/
  • drawable-hdpi/
  • drawable-xhdpi/
  • drawable-xxhdpi/
  • drawable-xxxhdpi/

デザイン業務を手伝ってくれるインターン生/アルバイトの募集を開始しました。

どベンチャーから超大企業まで、幅広い業務に関わることが出来ます。

頭でっかちなUXなんちゃらではなく、本当に現場で使えるデザイナーになりたい方!!遠慮なくDMください!







続きを読む

Sketchでの素材の書き出しを10倍早くする3つの小技

Sketchを使ってアプリやウェブサイトで使う素材を書き出すなんてことは、デザイナーのみなさんにとって日常的に何度も繰り返すことでしょう。そこで、普段の書き出しを10倍早く、しかもちょっとだけ楽しく行うための小技を3つ紹介したいと思います。

僕の周りのデザイナーにも書き出し方にばらつきがあるのですが、本記事では”素材の書き出し”に限定しているので、Sliceツールを使っての書き出しを想定しています。

書き出す素材を1箇所にまとめる

Exportと名付けたArtboardに、書き出す予定のある素材をSliceと共に置いておきます。後ほどある程度素材が揃ったら書き出します。

このときに、ArtboardにBackground-colorを設定しておくと、使うことの少なくない”白い素材”もしっかりと見えるようになります。”Include in Export”のチェックは外しておかないと、Sliceを書き出すときに背景色まで一緒に書き出してしまいます。背景を透明で書き出したい場合は必ず外しておきましょう。

Sliceツールを一気に選択する

これだけの数のスライスを、一つ一つクリックしていませんか?複雑にグループ化されたレイヤーの中からスライスだけを選んでクリックするのは骨が折れます。レイヤーリストの一番下にある”Show / Hide Layers in the List”オプションを使いましょう。

通常はアイコンが青く光っています。こちらを一度クリックすると、全ての書き出すことができない全てのオブジェクトが選択できないようになります。この状態で先程のExportと名付けたArtbordの左上から右下まで、⌘を押しながらドラッグしましょう。Sliceのみが選択できたはずです。⌘キーを押さないと、グループ化されているレイヤーではなく、グループそのものを選択してしまう可能性があるからです。

デバイスごとの解像度に書き出す

ネイティブアプリになると、複数の解像度用に画像を書き出さなければなりません。Sketch標準の機能として、インスペクター下部の書き出しオプションを手動で設定しても良いのですが、面倒なのでプラグインを使いましょう。

iOSアプリ用に書き出す

iOSアプリ用に素材を書き出す場合は、こちらのSketch Measureを使います。

https://github.com/utom/sketch-measure

プラグインをインストールしたら、Shift+Control+Bを押してツールバーを呼び出します。書き出したいSliceを選択していることを確認して、出現したツールバーの左から6つ目、スライスアイコンをクリック。

解像度を選択して(例えばiPhone7, 4inchを想定してデザインしている場合は”Retina @2x”)、Saveを押します。インスペクターの下部に書き出しオプションが出現しました。

あとは不要なオプション(@1.5x, @4x)を2クリックで削除してからExportボタンを押すだけです。

androidアプリ用に書き出す

先程のSketch Measureにもandroid用の書き出しオプションが有りましたが、そちらは使いません。androidはiOSとは違って、解像度ごとにファイルが異なる名前を持たないのです。一つのフォルダに書き出した場合、上書きしあってうまく書き出せませんし、@1.5xといったようにファイル名の末尾につけてしまうと、エンジニアがシステムに組み込むときにすごく大変です。

そのため、androidでは上画像のような形で書き出してくれるSketch Export Assets( GitHub – GeertWille/sketch-export-assets: Export assets for Android, iOS, Windows Phone in Sketch )というプラグインを使います。

プラグインをインストールしたら、Sliceを選択している状態で、ツールバー > Plugin > Sketch Export Assets > Export Android Assetsをクリックします。書き出したいフォルダ、基準となる解像度を選択して書き出します。複数のファイルが作成され、その中に異なる解像度を持つ同じ名前のファイルが書き出されていることを確認して下さい。

2回目以降の書き出しでは、同じフォルダを選択して書き出すことで、これまでのファイルの中身を保ったまま書き出してくれます(ただし当然のように同じファイル名の物がある場合、新しいものが古いものを上書きします)。

こちらのプラグイン、非常に便利なのですが、Sketchがアップデートするとしょっちゅう使えなくなってしまいます。いまのところ代替できそうなプラグインがないので(知ってたら教えてください)、Sketch Betaをうまく使ってSketchのアップデートと戦いましょう。詳しくは次回以降書きます。

まとめ

いかがだったでしょうか?書き出し素材はなるべく一箇所に集めまとめ、レイヤーオプションを使って1ドラッグでスライスを選択し、プラグインをうまく使って書き出しを行うことで、書き出し作業は劇的にスピードアップするはずです。ぜひ試してみて下さい!!



続きを読む

Sketch入門 – インスペクターについて

インスペクターはSketchの右側にあり、選択中のレイヤーを調整したり、使用中のツールのオプションを管理したりする場所です。インスペクターには以下のようなセクションがあります。

整列オプション

インスペクターの一番上にあるこれらのボタンで、レイヤー同士を揃えたり、配置したりすることが出来ます。整列オプションはレイヤーを2つ以上、もしくはアートボードの中で1つ以上選択しているときにしかインスペクターに現れないので注意してください。

レイヤーをひとつだけ選択している状態で整列オプションを使うと、アートボードの中で整列させることが出来ます。たとえば、選択した1つのレイヤーに対してAlign Leftを行うと、アートボードの左端に移動します。

イラストレーターのように、基準となるレイヤーを指定してレイヤー同士を整列させることは今のところ出来ないようなので、レイヤーをうまくグループ化させるなど工夫が必要です。

レイヤープロパティ

レイヤープロパティも、インスペクターの上部にあります。ポジション、オパシティ、ブレンディングや、角丸、多角形の角の数などに代表されるような選択中のレイヤーの種類によって出現する特別なオプションもあります。

角丸オプションを使用するためには、アンカーポイントが”Straight”である必要があります。また反対に、Straight以外のアンカーポイントを混同して持つレイヤーは、単純にレイヤーを選択しただけでは角丸オプションを使用できないので、レイヤーを選択した状態でダブルクリック、もしくはEnterを押してから角丸を適用したいアンカーポイントを選択しましょう

テキストフィールド

インスペクター内のテキストフィールドにカーソルを近づけるだけで、増加/減少の上下矢印が出現します。これらの矢印をクリックすることで、任意の値を増やしたり、減らしたりすることが出来ます。Shiftキーを押しながら矢印をクリックすると、10ずつ値が増えます。オプションキーを押したままのクリックでは、0.1ポイントずつの調整が可能です。

増加と減少

一度テキストフィールドにフォーカスすると、上下の矢印は見えなくなりますが、機能を使うことができなくなったわけではありません。キーボードの上下矢印キーを使って値を増加・減少させることが出来ます。Shiftで10倍、Optionで0.1倍ずつの調整ができることはここでも同様です。

四則演算

テキストフィールドでは、足し算(+)、引き算(-)、掛け算( \* )、割り算(/)といった四則演算が可能です。プログラミングを少しやったことがある人には馴染み深いと思います。たとえばテキストフィールドに「100/25 \* 3」と入力してEnterを押すと、結果は12になります。

角丸オプションのテキストフィールドでは、セミコロン”;”を使ってそれぞれの角に対して個別に角丸の値を入力することが出来ます。(例. 40;0;40;0)

グループ内、もしくはArtboard内のレイヤーに関しては、の幅と高さを%で設定することも出来ます。親のグループやアートボードをリサイズしたときに、Sketchが設定したパーセンテージに基づいてレイヤーをリサイズします。例えば、レイヤーの幅を10%に設定したとします。アートボードの幅が960pxの時、このレイヤーは96pxです。

入力値の素早い変更

瞬時にテキストフィールド内の値を変更したい場合、テキストフィールドのすぐ下の部分を左右にドラッグ・アンド・ドロップすることで値を素早く調整することが出来ます。どのくらいの大きさにすべきか明確なアイディアがない場合に、素早くだいたいのサイズを決定するのに便利です。

レイヤースタイル

レイヤーに適用できる塗り、線、シャドウ、ぼかしの4つのスタイルは、それぞれ専用のセクションをインスペクター内に持っています。

各スタイルセクションの右上にあるプラスボタンを押すことで、新規スタイルをレイヤーに適用することが出来ます。

新規で塗り、線、シャドウを追加する場合、カラーピッカーが出現し、色を選択できます。

スタイルはチェックボックスのチェックを外すだけで、スタイルを外すことが出来ます。1つ以上のスタイルが無効化されている状態になった場合、ごみ箱アイコンが出現するので、コレをクリックすることで、無効化されているスタイルをまとめて削除することが出来ます。

ぼかしも他のスタイルと同様、チェックボックスをオンにすることで使えるようになります。チェックをつけると、ぼかしのタイプを選択することが出来ます。レイヤーの透明度が100%未満になっている場合、背景をぼかす”Background Blur”がうまく作用しません。レイヤーを透明にして背景をぼかしたい場合は、レイヤーの透明度ではなく、塗りの透明度を調整しましょう。

書き出し

インスペクターの最下部に書き出しオプションはあります。この書き出しオプションはSketchを使うべき最も大きな理由の1つと言っても過言ではありません。今後詳しく書いていきたいと思います。

続きを読む

Sketch入門 – アートボード (Artboards)について

アートボードとは?

アートボードは、illustratorを使ったことがある人なら馴染みがあると思います。アートボードは、広大なSketchのキャンバス内で作業をするための台紙のようなものです。UIデザインをする上では、このアートボードをスマートホンや、PCの画面に見立ててデザインを進めていきます。


アートボードの作成

ツールバーの”Insert” > “Artboard”を選択すると、ドラッグアンドドロップで好きなサイズのアートボードを作成することが出来ます。シンプルにキーボードの”A”を押すことで、ショートカットとしてアートボードツールを呼び出すことが出来ます。ArtboardのAです。覚えやすいですね。


アートボードプリセットからアートボードを作成する 

単純にドラッグ・アンド・ドロップでアートボードを作成してもいいのですが、Sketchが用意してくれているアートボードプリセットから、任意のサイズのアートボードを1クリックで作成することも可能です。ちなみに、アートボードプリセットのセクションタイトル(例: iOS Devices)をクリックすることで、そのセクションのプリセットを一気に呼び出すことも出来ます。


アートボードプリセットを自作する

Sketchが用意しているアートボードプリセットの中に、自分がよく使うサイズのアートボードがない場合”+”ボタンをクリックして、任意のサイズを登録することが出来ます。一度登録しておくと、別のプロジェクトで作業するときもアートボードプリセットの情報は継承されているので、よく使うサイズは早いうちに登録しておくといいでしょう。


アートボードの選択と移動

Sketchでは、アートボードを選択・移動するとき、イラストレーターやフォトショップのように、いちいちアートボードツールを起動する必要はありません。アートボードのタイトル部分をクリックするだけです。同様にタイトル部分を選択してドラッグすることでカンタンに移動させることも出来ます。


アートボードのリサイズ

アートボードのタイトル部分をクリックすると、アートボードの四隅に白い四角が出現します。この白い四角の部分をドラッグしてアートボードをリサイズしましょう。レーヤーをリサイズするときと同じです。また、インスペクターバーのSize部分に数値を入力することでも、サイズ変更が可能です。

⌘+方向キーで、レイヤーをリサイズすることも可能です。⌘+Shift+方向キーにすることで、10pxずつのリサイズも可能です。


アートボードの切り替え

いま作業しているアートボードから、別のアートボードへ移りたい場合、単純にマウススクロールで移動することもできますが、fnキーを押しながら矢印キー(左か右)を押すことで素早く隣のアートボードに移ることも出来て便利です。


アートボードの削除

みなさんお察しの通り、アートボードを選択した状態でdeleteキーを押せばアートボードの削除が可能です。これはあまりご存じの方は少ないのですが、アートボードを選択した状態で⌘+Shift+Gでもアートボードを削除することが出来ます。ちなみにこの⌘+Shift+Gというのは、グループ化したレイヤーのグループを解除するときのショートカットと同じです。



続きを読む