プラグイン不要 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ください!







続きを読む

デザイナー向け – 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を入力すれば完了です

お疲れ様でした

続きを読む