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. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  2. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  4. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  5. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  2. phrase-express_ecmg

    マネジメント

    魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「PhraseExpress」の設…

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

  3. screenpresso-capture-ecmg

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでパソコン画面のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  4. tcd-theme-user-review_ecmg
  5. backup-all-in-auto_ec

    ワードプレス

    WordPressサイトを丸ごとバックアップ!BackWPupプラグインで自動保存のタイマー設定

    一度設定したら、後はおまかせ!せっかく作った自分のWEBサイトが、…

  6. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

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

特集記事

  1. extension-tools-for-bloggers_ec
  2. retina_ecmg
  3. tcd-theme-user-review_ecmg
  4. display-speed_ec
  5. tcd-mag_ecmg-ps
  6. todoist-tips_ecmg

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

todoist

ピックアップ記事

  1. child-theme_ecmg
  2. phrase-express_ecmg
  3. gif-animation_ec
  4. unroll-me_ec
  5. jpg-gif-png_ecmg
  6. todoist-productivity_ecmg

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

tcd-mag

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. retina-text-widget-ecmg
  3. mailbox-goodbye-newapp_ec
  4. insert-card-link_ecmg

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

retina-os-solution

ピックアップ記事

  1. media-setting_ec
  2. widgetoon-js-count-jsoon_ecmg
  3. chrome-font_ecmg
  4. enlarge-image-ecmg

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

gif-animation

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

思考系ピックアップ

  1. reset-button-ecmg
  2. restriction_ecmg-ps
  3. irreplaceable-ecmg
  4. blog-contents_ecrt

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. todoist_ec

    マネジメント

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

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. valuable-content-from-image_ec

    ワードプレス

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

    マネジメント

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