初心者のための動画作成講座|仕事で使える映像制作 初心者のための動画作成講座

ホーム動画の作成 > (33)GIFアニメを使った動画アイコンの作り方

GIFアニメを使った動画アイコンの作り方

vol.33 GIFアニメを使った動画アイコンの作り方

前回に引き続き、GIFアニメについて

前回の「GIFアニメを作る」に引き続き、
今回も少しGIFアニメの作り方についてご紹介します。

GIFアニメの特徴は、
ループしていつまでも繰り返される動きを付けられることです。

人は、止まっているものよりも
動いているものの方が、より気になる習性があるらしく、
少し多めに注目を集めることができます。

例えば、Twitter(ツイッター)のタイムラインで、
僕がフォローしている人の中に、
巧妙なGIFアニメを使っている方がいます。

静止画のアイコンを用意している人が多い中、
キャラクターがかわいく動いているので、
どうしても目が行きます。

もし、企業やお店でツイッターを始めるのであれば、
アイコンをGIFアニメ化して、
目立たせればちょっといいかもしれません。

ということで、もともと静止画のツイッターアイコンに、
動きを付けてみるという視点で、
今回はGIFアニメの作り方をご紹介します。

GIFアニメを使った動画アイコンの作り方

では、具体的な作り方です。
基本的なフォトショップエレメンツでの
GIFアニメの作り方は、
前回の「GIFアニメの作り方」を参照して下さい。

今回は、これを踏まえたところから、
ご紹介します。

また、動かし方はGIFアニメを作る上で重要です。

いつまでもループするということを考慮すると、
「回転する」という動きが簡単そうです。

ということで、
こんな感じのものを作ってみます。

GIFアニメを使ったツイッター用動画アイコンの作り方・完成例

では、具体的な作り方です。

1)動画アイコン用のファイルを新規作成する

  まず、フォトショップエレメンツ7を開き、
  ファイル→新規→白紙ファイルをクリックします。

  設定をする画面で、
  幅 →73px
  高さ→73px
  解像度→72ppiに設定して、OKをクリックします。

GIFアニメを使ったツイッター用動画アイコンの作り方・新規作成

  ※73×73pxなのは、ツイッター用だからです。

2)星を描く

  ☆の描き方はいろいろありますが、
  今回は、型抜きツールというのを使ってみます。

  まず、先程作ったファイルを選択ツールで全部選択し、
  レイヤー → 新規塗りつぶしレイヤー → べた塗り
  をクリックし、OKを押し、明るめの黄色を選択して
  ファイルを黄色にべた塗りします。

GIFアニメを使ったツイッター用動画アイコンの作り方・黄色でべた塗り

  型抜きツールを選択したのち、シェイプの設定で、
  星型を選びます。

GIFアニメを使ったツイッター用動画アイコンの作り方・星型のシェイプを選ぶ

  黄色に塗りつぶした部分に星を描くように、ドラッグすると、
  星の形に切り抜けます。
  このときSHIFT(シフトキー)を押しながら操作すると、
  歪んでいない正確な星型になりますので、
  ここではそうしています。

  星型を移動させて、真ん中にくるように調整します。

GIFアニメを使ったツイッター用動画アイコンの作り方・黄色の星型

3)背景を描く

  このままだと、背景が透明で、黄色は見づらいので、
  背景を描きます。

  再び、選択ツールで全部選択し、
  レイヤー → 新規塗りつぶしレイヤー → グラデーション
  をクリックし、OKを押します。

  グラデーションを設定する画面が現れるので、
  グラデーションのところをクリックし、
  さらに細かい設定へ進みます。

GIFアニメを使ったツイッター用動画アイコンの作り方・グラデーションの設定

  ここが少しややこしいですが、
  グラデーションのバーの上のスライダーが不透明度を表し、
  下のスライダーが、色を表しています。
  グラデーションは、この「不透明度」と「色」を指定すれば、
  作れるので、それぞれ、図のように設定し、OKを押します。

GIFアニメを使ったツイッター用動画アイコンの作り方・グラデーションの詳細設定

  これでグラデーションで塗りつぶしが出来たと思います。

GIFアニメを使ったツイッター用動画アイコンの作り方・青から白のグラデーション

4)星に影を付ける

  ここまでくると、レイヤーの構造は、
  こんな感じになっているはずです。

GIFアニメを使ったツイッター用動画アイコンの作り方・レイヤー構造

  星を見せたいので、
  星のレイヤーをグラデーションのレイヤーの上にドラッグします。

  さらに、星に影をつけたいので、
  右上の画面で、効果→ドロップシャドウとクリックし、
  気にいったシャドウをクリックして適用します。

GIFアニメを使ったツイッター用動画アイコンの作り方・ドロップシャドウ

  これで星に影が付きました。

GIFアニメを使ったツイッター用動画アイコンの作り方・影付きの星

5)星をコピーして回転させる

  ここからが、やっとGIFアニメを作る工程です。
  レイヤーを右クリックして、
  レイヤーの複製をクリックすると、
  星のレイヤーがコピーされます。

  コピーされた星のレイヤーをクリックし、
  イメージ → 回転 → レイヤーを自由に回転 をクリックします。

  左上の方に角度を入力できるスペースが出てくるので、
  12と入力し、実行して決定します。

GIFアニメを使ったツイッター用動画アイコンの作り方・回転角度を入力

  すると、星が12度だけ傾き、
  重なって表示されていると思います。

GIFアニメを使ったツイッター用動画アイコンの作り方・傾いた星が重なる

  さらにこの操作を繰り返して、
  12度の他に、24度、36度、48度、60度傾いた
  星を作ります。

  うまく行くと、こうなっているはずです。
  トゲトゲしてますね。

GIFアニメを使ったツイッター用動画アイコンの作り方・星が重なってトゲトゲしている

6)試しにGIFアニメ化してみる

  試しにここで、GIFアニメ化してみましょう。
  前回と同様、
  ファイル→WEB用に保存とクリックし、
  アニメーションにチェックを入れ、
  フレームディレイを0.1秒にしてプレビューしてみましょう。

  ※詳しくは、前回の「GIFアニメの作り方」を参照して下さい。

  すると、こんな感じになりました。

GIFアニメを使ったツイッター用動画アイコンの作り方・惜しい失敗作

  惜しいですね。
  背景が分かれているので、
  変な感じになっています。

  ということで、これを改善するために、
  すべての星のレイヤーに背景をくっつけてしまいます。

  星と背景をくっつけてしまうと元に戻れなくなるので
  ここで一度、ファイル→別名で保存
  をクリックし、別ファイルを作って保存しておきます。

  

7)背景と星画像を統合する

  背景のグラデーションを5回コピーして、
  それぞれの星のレイヤーの真下に配置します。

  星とグラデーションのレイヤーを
  シフトを押しながらクリックして、
  両方を選択し、
  レイヤー → レイヤーを統合をクリックします。

  6個すべての星と背景を統合すると、
  こんなレイヤー構造になっているはずです。

GIFアニメを使ったツイッター用動画アイコンの作り方・6枚のレイヤー構造

8)GIFアニメ化する

  ファイル → WEB用に保存をクリックし、
  アニメーションにチェックを入れ、
  フレームディレイを0.1秒に設定して、
  OKを押して下さい。

  これで完成です。

GIFアニメを使ったツイッター用動画アイコンの作り方・完成例

もっと回転を速くしたい場合は、
フレームディレイを短くすればできますし、
もっとなめらかな回転がお好みであれば、
今6枚作った星の数を増やして角度を調整することで
実現することも出来ます。

実は、今回の場合、
「星」を選んでいるために
72度傾いたところで元の画像と一致しているから、
回転しているように見えているという仕掛けがあります。

もっと一般的な画像を回転させると、
もうちょっと苦労することになります。

とはいえ、基本の作り方はこんな感じなので、
是非、ご自分のツイッターアイコンを
動かしてみてはいかがでしょうか?

※2011年5月6日追記
 ツイッターで動画アイコンを表示させるためには、
 さらに、48×48pxまで小さくリサイズする必要があるようです。




 

このような記事をメルマガで毎週金曜日14時から配信しています。もちろん無料です。 映像作りに興味をお持ちの方は、メルマガへの登録は以下のフォームをご利用下さい。

メルマガ購読・解除
仕事で使える映像制作
読者購読規約
>> バックナンバーpowered by まぐまぐ!
 

 

カスタム検索




ニュース

お問合せ

copyright 仕事で使える映像制作 Since 2010