gif-animation_ec

WEBデザイン

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

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

時間をかけて、特殊な技術で作ったんだろうなー

なんて、無意識に思っていませんか?

少なくとも、自分には作れるシロモノじゃないよなー

なんて、無意識に思っているでしょう?
全然、そんなことないです。

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

スポンサーリンク

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

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

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

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

Logo_3sec_40f_10

Photoshopを初めて使う人にも理解してもらいやすいようにまとめてみたので、身構えずに読み進めて下さい。応用すれば色々なアニメーションが作れるようになると思うので、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

手順

Logo_3sec_40f

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

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

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

おまけ

gif-animation
gif-animation_girl

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  2. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて設定するUnroll…
  3. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  4. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!?20…

  2. screenpresso-initial-setting_ec
  3. jpg-gif-png_ecmg
  4. tcd-mag_ecmg-ps
  5. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  6. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. valuable-content-from-image_ec
  2. extension-tools-for-bloggers_ec
  3. adjust-the-button_ecmg
  4. theme-change_ecrt
  5. display-speed_ec
  6. tcd-theme-user-review_ecmg

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

todoist

人気記事

  1. media-setting_ec
  2. chrome-full-screen-capture-ecmg
  3. screenpresso-initial-setting_ec
  4. todoist-basic_ec-ps
  5. child-theme_ecmg
  6. jpg-gif-png_ecmg

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

tcd-mag

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. child-theme-mechanism_ecmg-ps
  3. tcd-css-customize_ecmg
  4. todoist-routine_ecrt
  5. todoist-basic_ec-ps
  6. phrase-express_ecmg

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

retina-os-solution

掘り出し記事

  1. meta-seo-inspector_ecmg
  2. analytics-ip-filter-ecmg
  3. retina-text-widget-ecmg
  4. todoist-design_ec
  5. todoist-share_ec
  6. browzer-extension_ec

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. enlarge-image-ecmg
  3. media-setting_ec
  4. annotation-image-ecmg
  5. simple-image-sizes_ec-ps
  6. todoist-constitution_ec

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. valuable-content-from-image_ec
  4. theme-change_ecrt
  5. todoist-tips_ecmg
  6. retina_ecmg

人気記事

  1. child-theme-mechanism_ecmg-ps
  2. screenpresso-initial-setting_ec
  3. child-theme_ecmg
  4. jpg-gif-png_ecmg
  5. media-setting_ec
  6. compress-jpeg-png-images-ecmg
  7. chrome-full-screen-capture-ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  2. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
  3. theme-change_ecrt

    ワードプレス

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

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
PAGE TOP