こんばんわ!!behomaです!!
少し前になりますが、

Lineスタンプが恐ろしく売れない。

という事であれからも全く売れておりません。

なぜだ!!

でも考えるに考えて1つ思った事があります。

 

スポンサーリンク

 

動かせば売れるんじゃないか?

 

ガンダムみたいに動けば、皆注目してくれんじゃないか?
と私は考えました。

 

という頃で今回は動くスタンプを作成してみました。

モデルはこの全く売れていないスタンプ

 

スクリーンショット 2015-03-20 17.09.02

 

って俺のスタンプかいっ!!一ヶ月30円しか儲からんかった伝説のスタンプ「だんぼーるまん」やないかい!!

 

この中の

 

スクリーンショット 2015-03-20 17.17.51

このダンボールチアガールをとりあげて動くスタンプを作成したいと思います。

動くスタンプはgifアニメーションで作られています。

本来ならAfter Effectsなどの動画作成ソフトを使って表示するのが今回は

PhotoshopとIllustratorでアニメーションgifを作成します。

 

一応完成形はコチラになります。

 

anime

 

あえて最後の顔がイラつくようにしました。

 

 

 Illustratorでイラストを作成する。

 

アニメーションgifは基本、パラパラ漫画と同じ仕組で出来ております。

ですので一コマ一コマ、作成していきます。今回は300px×300pxで作成しました。

 

スクリーンショット 2015-03-20 17.33.13

細かくしないとカクカクなアニメーションgifが出来てしまう為、出来るだけ細かくします。

 

スクリーンショット 2015-03-20 17.35.18

 

これを目標にしている動きが完成するまで作成します。

 

スクリーンショット 2015-03-20 17.35.29

今回はとりあえず14フレームの画像を作成しました。

 

スクリーンショット 2015-03-20 17.33.30

 

その後はweb用に保存するを選択し、pngで全て透過ありで保存を行います。

14個のpngのファイルが出来上がります。

 

 

 Photoshopでアニメーションを作成する

 

スクリーンショット 2015-03-20 21.43.45

 

ここからの作業はPhotoshopに移ります。

まず先ほど作成した14個のpngのファイルをPhotoshop上に設置します。

Photoshopのファイル→埋め込みを配置で簡単に設置する事が出来ます。

 

スクリーンショット 2015-03-20 21.44.35

 

すべての設置を終えるとそこにアニメーションを付けていきます。

PhotoshopCCにはタイムラインという機能があり、

【ウィンドウ】→【タイムライン】を開くと

 

スクリーンショット 2015-03-20 21.45.59

画像ちっちゃ!!

こういう形で配置した画像が表示されます。

この紫の横線は画像のどの時間軸まで表示されるのかを決めています。

今回はパラパラ漫画の要領で行く為、1つ1つを0.003で区切っていきます。

 

スクリーンショット 2015-03-20 21.46.13

いや、画像ちっちゃ!!

紫の横線は端からドラッグで位置を変更する事が出来ます。この位置を調整して階段のようにしていきます。

スクリーンショット 2015-03-20 21.46.39

 

この状態にして左上にある再生のボタンを押すと動き始めます。

anime

 

あとは【web用に保存】でgifでアニメーションのループ回数などを指定すれば完成です!!

今後、クリエイターズスタンプでは動くスタンプが主流となってきます!!

現在は公式スタンプのみになっていますが、今後は僕達も登録出来ることになると思われます。

その時に、完成していればあとは登録するだけで

まるでマンションのデベロッパーやで!!

と大声で叫びましょう。

 

スポンサーリンク