blog

LINEアニメーションスタンプをつくろう -vol.3-

日々デザイン

さがねです
LINEスタンプの続きです
今回は空を飛ぶアニメーションにしましょう

まずはイラストを用意します

ペンギンなのに空を飛ぶ


雲が流れるアニメーションにするので
イラストは横長にしてたくさん描いておきましょう

ほとんどコピーです


次にわたるさんのイラストを
羽がぱたぱた動くように2パターン用意します

羽以外は一緒


雲の画像をPSDデータ(レイヤーは保持)に書き出します
ここからphotoshopでの作業になります
横長サイズのカンバスをLINEの規定の320pxのサイズにカットします

統合画像にしないように注意


わたるさんのイラストデータをペーストします
2つのデータがきっちり重なるように注意しましょう

羽の部分だけがブレて見えますね


メニューバーの「ウィンドウ」から「タイムライン」を選択
わたるさんのイラストを左の画面外に移動します

見えなくなっても大丈夫


フレームを複製します

下部のメニューから複製できます


2フレーム目を選択し雲のレイヤーは左に移動
わたるさんレイヤーは右に移動します

わたるさんのイラストは2つ同時に移動させよう


「アニメーショントゥイーン」を選択すると
中間部分が自動に生成されます
秒数も指定できるので好きな数値に設定しましょう

追加するフレーム数は「8」にすると計10フレームにります


奇数と偶数のフレームでそれぞれ
わたるさんのイラストのレイヤーを表示/非表示に設定します

フレームはコマンドキーを押しながらだと複数同時に選択できます


再生ボタンを押すと動きがチェックできますので
おかしいポイントがあれば修正してみてください
問題なければ書き出します
メニューバーの「ファイル」から
「書き出し」の「ビデオをレンダリング」を選び
「photoshop画像シーケンス」を選択します

 その他の設定はこんな感じにしました


あとはおなじみ「アニメ画像に変換する君」を使って変換しましょう



別にillustratorで作成できるのですが
アニメーショントゥイーンでかなり時間が短縮できるので
使い分けてみましょう

今回はここまでです
また次回