gif-animation_ec

WEBデザイン

ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

休むことなく働き続ける、一生懸命な画像。
「GIFアニメーション」という存在だとは知っていても、他には何も知らない。

『時間をかけて、特殊な技術で作ったんだろうなー』
なんて、無意識に思っていませんか?

『少なくとも、自分には作れるシロモノじゃないよなー』
なんて、無意識に思っているでしょう?

全然、そんなことないです。

いきなりアクロバティックなアニメーションは難しくても、基本的なものの作り方が分かれば後はアイデア次第。ひとつ知ることで、これまで見かけてきたGIFアニメたちの見方も変わってきます。

ロゴ作成を通してGIFアニメを知る

今回は、基本的なGIFアニメの作り方を【WEBサイトのロゴ作成】を例に紹介します。

コンセプトにもよりますが、WEBサイトのロゴが動きすぎているとそればかり気になってしまい、あまりよろしくありません。目を引く程度にチラッと変化する、またはじわじわと変化して気づいたら変わっていた、ぐらいがちょうどいいかもしれません。

というわけで下のような、色がじわじわと変化していくロゴを完成させます。

Logo_3sec_40f_10

Photoshopを初めて使う人にも理解してもらいやすいようにまとめてみたので、身構えずに読み進めて下さい。応用すれば色々なGIFアニメが作れるようになると思うので、GIFアニメ入門のきっかけにしてもらえたらと思います。

下準備

まず色違いのロゴ素材を用意します。

gif-animation-01

Photoshopを立ち上げ、「ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」を選択。

gif-animation-02

現れたウィンドウで「参照」をクリックし、先ほどのロゴ素材を全て選択して「開く」。

gif-animation-03

gif-animation-04

画像ファイル名が表示されたことを確認して「OK」。

gif-animation-05

すると順番に画像が読み込まれ、それぞれが『レイヤー』として配置されます。

gif-animation-06

ここで、上から変化させたい色の順になるようにレイヤーをドラッグして並べ替え、一番上のレイヤーだけ表示状態にしておきます。(目玉マークをクリック)

gif-animation-07

gif-animation-08

フレームアニメーションを作成する

「ウィンドウ」→「タイムライン」で画面下部にタイムラインウィンドウを表示させます。
※既に表示されている場合もあります。

gif-animation-10

「ビデオタイムラインを作成」ボタンの右にある▼をクリックし、「フレームアニメーションを作成」を選択して切り替えます。

gif-animation-11

gif-animation-12

「フレームアニメーションを作成」ボタンをクリックすると、今の表示状態の「フレーム1」が現れます。

gif-animation-13

下部にある「選択したフレームを複製」ボタンをクリックして、レイヤーの数+1個分のフレームを作ります。今回は6色なので、7フレームにします。(6回クリックする)

gif-animation-14

それぞれのフレームでの表示状態を設定していきます。「フレーム2」をクリックして選択し、レイヤーパネルで2つ目の「Green」のみを表示状態にします。

gif-animation-15

以降は同様に、
「フレーム3」では3つ目の「Black」を、
「フレーム4」では4つ目の「Red」を、……

と、全てのフレームで1色ずつ表示させていき、最後の「フレーム7」は「フレーム1」と同じ「Wine Red」を表示させておきます。(理由は後述)

▼この状態になる

gif-animation-15-3

最後の色まで設定できたら、フレームをShiftを押しながら全選択し、いずれかの「0秒▼」をクリック→好みの秒数に指定します。

gif-animation-17

ここでは「3秒」に設定しました。
そうです!ここで設定した秒数の間だけ、そのフレームが表示されることになるのです。

一度ここで、タイムラインパネル下部の再生ボタンを押してみると、下のように表示されます。

Logo_3sec_5f_demo

3秒ごとに色が切り替わっていますね。(Wine Redだけ2つあるので6秒です。)

さらにフレーム数を増やしたり、それぞれのロゴの位置や形を変えることで、もっと自由に動きを加える事もできます。よくWEB上で見かけるGIFアニメーションは、基本的にはこんな感じで作られています。

作りたいアニメーションや好み次第で、これで完成でもいいのですが…今回は流れるように色が移り変わっていくロゴを作りたいので、もう少し細かく設定していきます。

トゥイーンで変化をなめらかにする

「フレーム2」を選択し、「アニメーションフレームをトゥイーン」ボタンをクリック。

gif-animation-18

出てきた「トゥイーン」ウィンドウで下の画像のように設定し、「OK」をクリック。すると、、

gif-animation-19

新たなフレームが5つ加わりました。表示を見ると分かるように、色が次第に変化していっています。元々の「フレーム1」から「フレーム2」までの移り変わりを補完するフレームが追加された形です。

追加された5つのフレームを全選択し、表示秒数を「0.1秒」に変更します。

gif-animation-21

次に変化させたい色(ここではBlack)のフレームを選択し、同様の処理をします。「アニメーションフレームをトゥイーン」ボタンをクリック。先ほどと同じ設定で「OK」。

gif-animation-22

追加された5つのフレームを全選択し、表示秒数を「0.1秒」に変更。

gif-animation-23

以降この処理を繰り返し、仕上げに最後のフレームを削除します。
(※フレームを選択して下部のゴミ箱マークをクリック)

gif-animation-24

つまりここまでで、ロゴ色が『Wine Redから始まりWine Redに戻る直前まで』のフレームを作ったことになります。

再生ボタンを押すと下のように表示されます。

Logo_3sec_5f

うん、GIFアニメらしい動きでいいんですが…個人的には、もう少しなめらかに色変化させたいところです。ロゴ全体が消えかかって見える瞬間のニュアンスも「カタカタッ、」という感じで少し気になります。

これは、「トゥイーン」ウィンドウで「追加するフレーム」の数を増やすことで緩和されます。つまり、変化のコマ数を増やしてあげるわけですね。

gif-animation-25

ここでは「40」で設定し直しました。以降は同様の手順です。再生して良い感じになったことを確認して、ファイルに書き出します。

Web用ファイルとして書き出す

書き出しは「ファイル」→「Web用に保存」から。

gif-animation-26

gif-animation-27

出力フォーマットを「GIF」にして、

「透明部分」にチェック。(※背景付きのロゴの場合はチェック不要)

画像サイズを任意に指定。

ループオプションを「無限」にする。

最後に「保存」ボタン。

Logo_3sec_40f

作成完了!いい感じですね!

今回は『色変化』を例にしましたが、同様の手順でいろいろなGIFアニメーションが作れます。登場するキャラクターを移動させたり、回転させたり…

ロゴとしては派手になってしまいそうですが、サイト内の片隅で、マスコットキャラがちょこっと動いていたりしても、面白いかもしれませんね。

おまけ 

gif-animation
gif-animation_girl

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  2. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする
  3. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  4. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  5. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…

関連記事

  1. description-video_ec
  2. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  3. media-setting_ec
  4. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  5. ad-placement-in-mag_ecmg
  6. original-share-button_ecmg-ps
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. todoist-tips_ecmg
  2. todoist-extension_ecmg
  3. tcd-theme-selection_ecmg-ps
  4. retina_ecmg
  5. business-books_ecmg
  6. valuable-content-from-image_ec
  7. theme-change_ecrt
  8. improvement-flow_ecmg

ピックアップ記事

  1. like-button-card_ecmg-ps
  2. lightshot_ecmg
  3. todoist-basic_ec-ps
  4. quicktag_ecmg
  5. sns-count-cache_ecmg
  6. media-setting_ec
  7. phrase-express_ecmg
  8. tcd-theme-widget_ecmg

強みを見つけて、活かしていこう。

business-books

タスク管理で、自己管理。

todoist

掘り出し記事

  1. retina-os-solution_ecmg
  2. analytics-ip-filter_ecmg
  3. mailbox-goodbye-newapp_ec

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. compress-jpeg-png-images_ecrt
  2. lightshot_ecmg
  3. todoist-constitution_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | Blogger おすすめ書籍

「言葉にできる」は武器になる。 コンテンツの秘密-ぼくがジブリで考えたこと
プロフェッショナルは「ストーリー」で伝える 現代広告の心理技術101

Requ.log | おすすめエッセイ

言葉の贈り物 今日の人生

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. restriction_ecmg-ps
  3. blog-contents_ecrt
  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  2. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP