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というのは、グループ化したレイヤーのグループを解除するときのショートカットと同じです。



続きを読む

デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法

・iOSアプリにリッチなアニメーションを取り入れたいけどエンジニアのリソースがない ・エンジニアがそもそもアニメーションに興味がないそんな状況にフラストレーションを抱えているデザイナーさん、意外と多いんじゃないでしょうか? 私が以前勤めていたnanameueでは複数のpng画像をパラパラ漫画のように高速で切り替えてアニメーションを作る方法を採用していました

untitled-3
ひま部のハートアニメーション

この方法では、デザイナーがアニメーションを用意し、各解像度ごとに切り出すという作業をおこなうことになります(最初は結構たいへんです)。しかし一方でエンジニアは1度パラパラ漫画のコードを作ってしまえば、受け取った画像をそのコードに組み込んでしまうだけで複雑なアニメーションもサクッとつくれちゃいます。 私の場合、エンジニアのメンバーにはこちらを見せたら理解してくれました

http://qiita.com/appwatcher/items/e6199ef662ef5172dada

*これからご説明する内容は、私がほぼ独自に”編み出した”おそらくかなり外道な方法です。AfterEffectsに関してしっかりとした教育を受けたわけでも、特定の参考書(UIアニメーション製作の本なんてあるのかな)を参考にしたわけでもありません。あくまでも私の個人的な手法なので、参考程度にしてください。また間違いなどありましたら、優しく教えてくださるとうれしいです!

Aftereffectsでアニメーションを作る

フレームの大きさを決める

まずはAfterEffectsで、フレームの大きさを決めます。フレームとはSketch3やイラストレーターで言うところの”アートボード”です。

今回はこちらのハートのアニメーションを作ります。AfterEffectsでは最も大きいサイズ(@3x)で作って、後ほど小さい解像度用に縮小しましょう。20ptの@3xなので60px x 60px がフレームのサイズです。

AfterEffectsの設定

⌘ + N で新規コンポジションを作成します(コンポジションはAfterEffectsにおけるプロジェクトのようなものです)

・1つ目の赤枠に先程決定したフレームサイズ(60×60)を入力しましょう。

・2つ目の赤枠にはアニメーションの長さを入力します。

・今回は1秒にしておきました。後からでも変更可能です。

その他は色々有りますがそんなに気にしなくて大丈夫(のはず)です。

終わったらOKを押しましょう

コンポジションが出来ました。

これからアニメーションを実際に作っていくわけですが、今回は長くなりそうなので別記事にてご紹介したいと思います。

ということで、はい、こちらが完成したハートのアニメーションです。

レンダリング

動画ファイルを書き出しましょう。

まずは メニュー > コンポジション > プリレンダリング

ウィンドウの下部にレンダーキューというのが現れるので、赤枠の”レンダリング”を押しましょう

レンダリングやらプリレンダリングやらなんなの?という疑念を抱くのは当然だと思います。

私も以前気になって調べてみました。

以下アドビサポートより抜粋

レンダリングとは レンダリングとは、ムービーを構成するフレームをコンポジションから作成することです。フレームのレンダリングでは、合成された 2 次元のイメージが、そのイメージのモデルを構成するコンポジション内のレイヤー、設定などのすべての情報から作成されます…
ご覧のようにアドビサポートさんはあまり下々の者にわかるようなお言葉を使ってくれないので、私のようなものは”あ、プリレンダリングしてレンダリングすると動画ファイルが出てくるんだね”くらいに考えています。001-007

.movという拡張子でファイルが出力されました。

以上でAfterEffects側での作業は終了です。

Photoshopで画像ファイルに変換する

先程の動画ファイルをPhotoshopで読み込みます

メニュー > ファイル > 読み込み > ビデオフレームからレイヤー

heart animation.movを選択

このような画面になります。

下の”タイムライン”が表示されていない場合は、 ウインドウ > タイムライン にチェックマークを入れると表示されるようになります。

タイムラインのすべてのフレームを選択した状態で、 メニュー > ファイル > レイヤーからファイル

これで、動画を画像に変換できました。

Sketchから解像度ごとに書き出す

別にPhotoshopでやれるよ、という方はPhotoshopでそのまま書き出してもらってもかまいません。 ここでは私の個人的な方法をご紹介します。

アートボードをファイルの数だけ用意する

sketchでは、@2xで基本的にプロジェクトを作っているので、今回も例外なく@2xでアートボードを作ります。 20ptの 2x なので、40px x 40pxですね。 ファイル数は30あったので、縦横40pxのアートボードを30個作りましょう

このときに、連番でアートボードに名前をつけてExportの設定を行っておいて下さい Exportの設定はMarketchから行うと1クリックで済んで便利です

さきほどのファイルをsketchに持ってきましょう。 するとこんな感じになるはずです。

001-014

これらのファイルサイズは@3xに合わせているので、以下の方法でリサイズします。

  1. すべてのファイルを選択
  2. 縦横比が固定されていることを確認して、width、もしくはheightを1.5で割る(今回は60/1.5と入力)

@3xの画像を@2xにすることが出来ました あとは順番通りアートボードにファイルを入れていって、Exportボタンを押せば完了です。 この作業がかなり面倒なので、この手順をさくっと終わらせる裏技をご紹介

裏技

ファイルを全て選択した状態で”Make Grid”する

001-015

①には1と入力
②にはファイルの数を入力
③にはアートボード間のMarginを入力します。

きれいに並んだように見えますが、Make Gridの仕様上、左に一番最後のフレームが来てしまっています。

アートボードは左から準に0, 1, 2, 3とならんでいるので、このままでは逆再生されてしましますね。

ファイルを全選択
グループ化
Rotateで180°回転させます

001-018

グループ化を解除して、水平にFlip、垂直にFlipをそれぞれ押します

001-019

一つづつ選択して↓を押していくと、アートボード内に入っていきます

001-020

すべてのファイルが見えなくなったら、全体をドラッグして全ファイルを選択し、赤枠のX, Yに0を入力すれば完了です

お疲れ様でした

続きを読む