効果的なGIFアニメの使い方を発見したので、Photoshopでつくってみた。

 

ブログのサイドバーに漠然と「何か欲しいなぁ」と思ってて、

ひらめいたのがこれです。

 

GIFアニメ

 

GIFアニメとは、WEBで動くコマアニメ−ションです。紙芝居のように複数の静止画をつかって絵を動かします。

 

ただ単に変なキャラを動かすのもシュールで良いのですが、せっかくなので何か意味があるものにしたいなぁと思って考えました。

 

「忙しさが一目でわかるGIFアニメ」を作ってみよう。

 

前にブログで「今、割と手が空いてます」と書いたことによって、お仕事をいただいたことがあったのでお客さんに僕の仕事の混み具合状況をお知らせする方法がないかと考えていました。それで「忙しさが一目でわかるGIFアニメ」がヒラメキました。

 

早速作った試作品がこちら。

NASU-note_maeda_3

ブログ記事の横でチラチラ動いていたら、気になるのでは?とちょっと心配してましたが、これをFacebookで公開したら割と好評だったので、本格的に制作に乗り出しました。

 

 

忙しさレベル(★の数が多いほど忙しい。)

 

(ヒマ)

★★★ (普通)

★★★★★(忙しい!)

 

仕事の忙しさを3段階で表示します。

 

前田の仕事の混み具合に合わせて、状況が変わったら更新する予定です。

 

(ヒマ)

NASU-note_hima

 

★★★ (普通)

NASU-note_normal

 

★★★★★(忙しい!)

NASU-note_busy

 

 

はじめてGIFアニメをつくってみて

 

ちゃんとGIFアニメをつくったのははじめてでした。ちゃんと完成させようと凝りだすと結構時間かかりますね。

テストは実質15分くらいでつくったのですが・・・。

気になるところは多々あるけど、見切り発車します!

 

GIF制作はPhotoshopで簡単につくれますよ〜。

 

 

超簡単、GIFアニメをPhotoshopで作る方法

 

Photoshopの「レイヤー」さえ理解していたらカンタンに制作可能です。

 

 まず、レイヤーに1コマづつ絵をつくります。(イラストレーターからコピペしました。)

NASU-note_gif_howto_01

 

 

 上部メニューバーの「ウインドウ」→「タイムライン」を出す。

NASU-note_gif_howto_02

下部に「タイムライン」が表示されます。

 

 

 「タイムライン」の右肩から「レイヤーからフレーム作成」を選択。

NASU-note_gif_howto_04

すると、レイヤーごとにフレームが完成。あとは一コマの表示時間を調整したり、同じコマを増やしたり調整

 

 

 あとは「ファイル」→「書き出し」→「web用に保存」で、GIF保存すればOK!です。

NASU-note_gif_howto_03

 

 

おまけ

 

使い道が思いつかないけどこんなのも作りました。レアものとして時々出そうかな。

NASU-noate_hato

 

 

前田がヒマなときは、これですぐ分かりますね!

 

仕事の依頼じゃなくてもイイので誰か連絡ください〜!

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

前田高志/アートディレクター・グラフィックデザイナー 兵庫県伊丹市出身 1977年6月1日生まれ。大阪芸術大学グラフィックデザインコース卒業後、任天堂(株)の企画部にて約15年間、宣伝広告のデザインを主に従事。受賞歴 Art Directors Club、OneShow Design、全国カタログポスター展経済産業省商務情報政策局長賞 他