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. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  2. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  3. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  4. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体
  5. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…

関連記事

  1. annotation-image_ec

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Screenpres…

  2. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  3. original-share-button_ecmg
  4. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  5. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

  6. facebook-fast-display_ecmg

    ワードプレス

    瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

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

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

レク.サウンドラボ

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

特集記事

  1. retina_ecmg
  2. display-speed_ec
  3. adjust-the-button_ecmg
  4. business-books_ecmg
  5. tcd-theme-selection_ecmg
  6. extension-tools-for-bloggers_ec
  7. todoist-extension_ecmg
  8. improvement-flow_ecmg
  9. todoist-tips_ecmg
  10. valuable-content-from-image_ec

ピックアップ記事

  1. child-theme_ecmg
  2. restriction_ecmg
  3. jpg-gif-png_ecmg
  4. media-setting_ec
  5. tcd-theme-options_ecmg
  6. original-share-button_ecmg
  7. todoist-basic_ec
  8. blog-contents_ecrt
  9. blog-theme-mag_ecmg-ps
  10. tcd-css-customize_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. タスクを完了させたくなる!? モチベーションアップに役立つT…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  4. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  5. feedlyのフォロワー数が表示されないっ!?SNS Cou…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  2. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  3. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  4. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  5. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. adjust-the-button_ecmg

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  5. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP