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. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  2. FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面…
  3. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  4. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  5. 理想のWEBサイトを直感デザイン。「TCDテーマオプション」の使い方

関連記事

  1. pushbullet_ec

    マネジメント

    瞬間転送・・写真もURLもポンっ!スマホとパソコン間のデータ移動方法。捗るPushbulletの使い…

    メールで送るより、ずっとお手軽。スマートフォンとパソコン間でデータ…

  2. set-double-rectangle_ecmg
  3. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  4. favicon-generator_ecmg

    ワードプレス

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

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

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

特集記事

  1. todoist-tips_ecmg
  2. tcd-theme-user-review_ecmg
  3. improvement-flow_ecmg
  4. adjust-the-button_ecmg
  5. retina_ecmg
  6. todoist-extension_ecmg

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

todoist

人気記事

  1. screenpresso-initial-setting_ec
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. compress-jpeg-png-images-ecmg
  5. jpg-gif-png_ecmg
  6. chrome-font_ecmg-1

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

tcd-mag

ピックアップ記事

  1. simple-image-sizes_ec-ps
  2. customized-theme-update_ecmg-1-ps
  3. dash_ecmg
  4. phrase-express_ecmg
  5. firefox-full-screen-capture-ecmg
  6. tcd-theme-options_ecmg

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

retina-os-solution

掘り出し記事

  1. mailbox-goodbye-newapp_ec
  2. theme-manual-update-ecmg
  3. todoist-design_ec
  4. favicon-generator_ecmg
  5. retina-text-widget-ecmg
  6. screenpresso-initial-setting_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. tcd-css-customize_ecmg
  3. todoist-advanced_ec
  4. compress-jpeg-png-images-ecmg
  5. todoist-constitution_ec
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. tcd-mag_ecmg-ps
  2. tcd-theme-selection_ecmg-ps
  3. todoist-tips_ecmg
  4. todoist-extension_ecmg
  5. valuable-content-from-image_ec
  6. tcd-theme-user-review_ecmg

人気記事

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

最近の記事

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

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  2. display-speed_ec

    ワードプレス

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

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. adjust-the-button_ecmg

    ワードプレス

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