走れ!コブリーナ

デザイナーズブログ:コブリなデザイナーの奮闘録
  • Home
  • Instagram
  • About Coblin
  • Contact
2011 8/28

さりげない「GIFアニメ」で遊び心をプラス!

WEBサイトをデザインする時、GIFアニメーション(GIFアニメ)を使って
遊び心を演出することがあります。

GIFアニメは、WEBサイトに動きを加える時の古典的な手法で、
FLASHアニメーションのような複雑なものはできませんが、
作るのが簡単だし、古いブラウザでも表示できるという利点があります。

このブログにも、いくつかGIFアニメをちりばめています。
たとえば左サイドメニューの上にくっついてるライオン。
しっぽと目がさりげなく動いています。

ライオンのGIFアニメーション

GIFアニメをサイトデザインの一部として使う時のポイントは、
なんといっても「さりげなさ」!

あんまりド派手に動くと目がチカチカして視覚的にうるさいので、
むしろ気づかれないくらいがちょうどいいと思ってください。
あくまで遊び心ですから。

GIFアニメ作成の具体的な方法は、使うソフトによっても違いますし、
そういうのは いろんなサイトで紹介されてますので、
ここでは「さりげないGIFアニメを作るコツ」 について述べたいと思います。
(※ツールのキャプチャはPhotoshopです)

***
GIFアニメはいわゆるパラパラ漫画形式でできています。
最初はあまり欲張らず、2コマだけで作ることを考えてみましょう。
たった2コマでも結構楽しいアニメーションができますよ。

ライオンの場合は、
しっぽの部分が2コマで、パタパタとしっぽをふるアニメーション。

しっぽのアニメーション

 

目の部分も2コマで、まばたきをするアニメーション。

まばたきのアニメーション

いかがですか?簡単ですよね〜。

なめらかな動きに見せるポイントは、コマ間の差異を少なくすることです。
例えばしっぽをパタパタの場合、1コマ目と2コマ目の差異が大きすぎると、
ギクシャクした動きに見えてしまいます。

もしも「しっぽをブンブン」と大きく動かしたい場合は、
その分コマ数を増やしてあげるとなめらかな動きが表現できます。

それぞれのコマを作るときは、動く部分だけをレイヤーに分けておきます。
共通部分はいじらないようにするとラクチンです。

レイヤー

 

最後にフレームのタイムラインで、1ループ分のコマ割りを決めて、
各フレームごとの表示時間を設定してあげます。

タイムラインを設定

 

無限ループにして、
はい完成♪

ライオンのGIFアニメーション拡大

フレームの表示時間を変えたり、順序を変えたりしても、
また違ったニュアンスのGIFアニメができると思います。

 

***
ちなみにヘッダー部分の流れ星は、星を単純にならべただけ。
星のアニメーション

色の濃さと、星の間隔を少しずつ変化させてコマ割りを作っています。

流れ星のアニメーション

↑分かりやすいように、少し遅いアニメーションにしています。

一からGIFアニメを作ろうとすると気負っちゃうかもしれませんが、
すでに配置してある画像素材を使って、
「もしこれがちょっと動いたらどんな感じ?」
と想像して、素材を有効利用してみると、とっかかりやすいかも。

こんなのできたよ〜っていう遊び心たっぷりの作品がありましたら、
ぜひ教えてください♪

***
にほんブログ村 デザインブログ グラフィックデザインへ←ランキング、参加してます♪
ポチッと応援していただけると励みになります〜♪
2011/08/28 at 0:37 by コブリン

Tags: GIFアニメ, GIFアニメーション, photoshop, ポイント, 作り方
Category: デザインのツボ | Comment (0) »

ツイート

コメントをどうぞ

返信をキャンセルする。





« ブログ、再スタートです!
フォトレッスンに行ってきました »


ホームページ作成サービス:Jimdo

ホームページ作成サービス:グーペ

アトリエ・シシ
  • About Author

    シシデザイン

    フリーランスのグラフィックデザイナーです。コブリなので、コブリン。
    グラフィックデザイン工房「シシデザイン」を運営しています。
    保護施設出身の看板犬と暮らしています(2020年8月に虹の橋を渡りました)。仕事の傍ら、保護犬の搬送ボランティアをしています。
    オリジナルグッズ販売のオンラインショップ「アトリエ・シシ」も、よかったら覗いてみてください★

  • Calendar

    2011年8月
    日 月 火 水 木 金 土
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
    « 7月   9月 »
  • よく読まれている記事

    • リンゴで経理。 2014/02/04 に投稿された
    • グロナビ、では通じない。 2019/03/21 に投稿された
    • フロスが挟まって切れちゃった! 2016/11/04 に投稿された
    • 小文字「g」の話 2019/09/06 に投稿された
    • 「オレのボス ヤフーでググれと 無理を言う」が奥深い! 2017/03/21 に投稿された
    • インスタのアカウントが乗っ取られた?! 2017/05/06 に投稿された
    • グーペか?Jimdoか?(比較してみました) 2014/09/10 に投稿された
    • HPバックアップのススメ 2014/11/07 に投稿された
    • さりげない「GIFアニメ」で遊び心をプラス! 2011/08/28 に投稿された
    • 最後の親バカ炸裂…のサンキューカード 2020/10/17 に投稿された
  • Recent Posts

    • 本年もどうぞよろしくお願いいたします
    • 年末年始休業のお知らせ
    • グーペホームページ大賞2020にノミネート!
    • よくあるご質問「どれくらいで出来る?」へのお答え
    • 会えるときに、会っておこう。
  • Recent Comments

    • ありがたいことです・・!! に コブリン より
    • ありがたいことです・・!! に 青山 葉子 より
    • グーペホームページ大賞2017に複数ノミネート! に コブリン より
    • グーペホームページ大賞2017に複数ノミネート! に 永松俊樹(ナガマツシュンジュ) より
    • 異国の香り・・ に コブリン より
  • Categories

    • シシデザインについて
    • アシスタントのつぶやき
    • よくあるご質問
    • MovableType
    • お仕事
    • 日々のあれこれ
    • ホームページのデザイン
    • グーペ(goope)
    • Jimdo(ジンドゥー)
    • カラーミーショップ
    • ロゴデザイン
    • ブログのデザイン
    • スマホデザイン
    • 封筒デザイン
    • 名刺デザイン
    • Tシャツ・ポロシャツデザイン
    • その他のデザイン
    • ビフォーアフター
    • デザインのツボ
    • お客さま紹介
    • 工房&工場見学
    • 道具などなど
    • こんなの買っちゃった♪
    • こんなのいただいちゃった♪
    • ただいま制作中!
    • レターセット
    • アトリエ・シシ
    • クリスマスカード
    • カード
    • with WANKO
    • ポストカード
    • サラメシ
    • PayPal
    • 覚え書きメモ
    • Coblinについて
    • どうでもいい独り言
    • セキララな話
    • お知らせ
    • その他
  • Archives

  • Ads


    ホームページ作成サービス:Jimdo


    ホームページ作成サービス:グーペ




 
©2009-『走れ!コブリーナ』 Produced by ShiShiDesign|
Entries (RSS) and Comments (RSS).