アニメーションGIFをご存知の方は多いでしょう。インターネット上で、ネコのバイラル動画や、ページの端でうんざりするくらいチカチカしているバナー広告などの形で、よく見かけます。99designsコンペでは、バナー広告のカテゴリの中でアニメーションGIFを数多く扱っています。

GIF(Graphics Interchange Format)は、圧縮画像形式のファイルフォーマットです。移植性が広く効率的に圧縮できるため、別のインターネットプラットフォーム間でも簡単に送信することができます。しかし、GIFのカラーパレットは256色程度なので、高画質写真などの色には十分に対応できません。

GIFが作られた一番の目的は、動画再生ソフトなしで見られる、シンプルなビデオアニメーションの圧縮ファイルを作成することです。

ここでは、アニメーションGIFをFlash とPhotoshop CS5で作成する方法を紹介します。

Simple_GIF

Photoshop でアニメーションGIFを作成する方法

Photoshopでは様々なアニメーションGIFを作ることができますが、今回はシンプルな、短い文章が入っただけのバナー広告を作成する方法を紹介します。

1. ファイルを並べる

まず、「新規作成画面」を立ち上げましょう。今回は、一般的なバナー広告のサイズである300 x 250ピクセルに設定します。

注:Photoshopを開く前に、のちにGIFを構成するJPGファイルをいくつか準備しておきましょう。画像はすべて同じ寸法で、同じフォルダに入れるようにします。

1

次に、「ファイル」 > 「スクリプト」 > 「ファイルをレイヤーとして読み込み」を選択します。「レイヤーを読み込む」のウィンドウが出てきたら、「参照」をクリックし、画像ファイルを選択して開いてください。そして「OK」をクリックします。これで、選択したファイルがプロジェクトに別々のレイヤーにインポートされるはずです。必要であれば、レイヤーの順番を再調整します。

2 copy

2. 「アニメーションウィンドウ」を開く

「ウィンドウ」 > 「アニメーション」(CS6をお使いの方は「ウィンドウ」 > 「タイムライン」)を選択します。

3. レイヤーからアニメーションフレームを作成する

すべてのレイヤーを選択し、アニメーションウィンドウの右上の端にあるタブをクリックして、「レイヤーからフレームを作成」を選択します。これで、アニメーションウィンドウにすべてのフレームが表示されます。

3 copy

4. フレームの表示時間を編集する

アニメーションウィンドウの右上の端にあるボタンを再度選択し、ドロップダウンメニューから「すべてのフレームを選択」をクリックします。

これですべてのフレームが選択されたので、一貫して編集をすることができます。それぞれのフレームは0秒になっているので、どれでもいいので黒い矢印をクリックし、リストから表示時間を選択するか、「その他」をクリックして自由に時間を設定してください。今回は、最後のフレーム以外をすべて0.5秒に設定し、最後のフレームのみ2秒にしました。

4 copy

5. アニメーションのループ数を決める

アニメーションウィンドウの右下の端にある「ループオプション」ボタンをクリックします。ドロップダウンメニューが表示されるので、アニメーションのループ数を選択してください。「3回」が一般的なバナー広告でよく使われている回数です。「無限」を選択する場合は、よく考えてからにしましょう。広告はターゲットとなる閲覧者の気を引くためのものです。それなのに、不必要な動きを延々と繰り返して、見る人を不快にさせてはいけません。今回は見本なので、このバナー広告では「無限」に設定します。

アニメーションが3回再生されると、アニメーションウィンドウでは最後のフレームで動きが止まり、そのフレームが静止画として表示され続けます。静止画となるフレームには、閲覧者に一番見てほしいものを選択するようにします。今回の動画では、最初のフレームを特に見てほしいので、フレーム1を選択し、アニメーションウィンドウの下にある「選択したフレームを複製」ボタンをクリックします。そして、複製された新しいフレームをドラッグして、シークエンスの最後のフレームにします。

#5 copy

6. 保存する

フレームの順番、表示時間、ループ数の編集が終わったら、「ファイル」 > 「Web およびデバイス用に保存」をクリックします。ファイルフォーマットを「.gif」に設定して、保存します!

6 copy

これをウェブ上に貼るとアニメーションが再生されます。動きを確認したい場合は、ファイルをブラウザウィンドウにドラッグします。あなたの傑作を楽しんでください。

Simple_GIF

以上が、アニメーションGIF作成の基本です。この技術を学んでおけば、そのうちさらに手の込んだ作品を作れるようになりますよ! では、次はAdobe FlashでGIFを作成してみましょう。

Flash でアニメーションGIFを作成する

Photoshopと同様、Adobe FlashでもアニメーションGIFを作成することができますが、どちらにも良い点と悪い点がそれぞれあります。最近では、Flashは時代遅れだと言われる傾向がありますが、99designsのお客様の多くが、いまだにFlashアニメのバナーを好んで買い求めています。

ただし、我々のサイトはFlashをサポートしていません(デザイン譲渡時を除く)ので、デザイナーがコンペに参加するためにはGIFファイルでアップロードする必要があります。ここでは、コンペに必要な作業である、Flashファイルを.gifファイルとしてエクスポートする方法を紹介します。

1. ファイルをまとめる

まず、Adobe Flash > 「ファイル」 > 「新規」を開いてください。

1 copy

Flashには、Illustratorと同様にペンツールがあります。ですから、Flash上で文字を描き、アニメーション化することもできます。しかし、今回のチュートリアルの目的は、既存のPNGファイルをインポートし、アニメーションにすることですので、省略します。ここでは、背景と金魚の2つの要素を使っていきたいと思います。

「ファイル」 > 「読み込み」 > 「ライブラリに読み込み」 > 「開く」で両方のファイルを選択します。

2

ライブラリウィンドウに2つのファイルが表示されます。ここでPNGファイルはシンボル(これをカンバスにドラッグします)に変換されます。

これで、作業に使うファイルがそろいました。ライブラリウィンドウからこの2つのファイルをカンバスにドラッグして、必要であれば、サイズを調整したり場所を移動したりしてください。2つのファイルは別のレイヤーで編集してください。

3 copy

2. アニメーションを作成する

では、アニメーションの尺を決めます。今回は5秒間、もしくは120フレームのアニメーションにしましょう。

背景のレイヤーはアニメーション全体を通して表示されているように選択しておいてください。次に、タイムラインの120の表示のところで右クリックして、ドロップダウンメニューから「フレームの挿入」を選択します。

そして、アニメーション化したい素材(今回は金魚)を選択してタイムラインにいき、タイムライン上の後ろのフレームのところで右クリックして、ドロップダウンメニューから「キーフレームの挿入」を選択します。

4

そして、素材を次に動いてほしいところにドラッグします。

5

2つの動きの間の適当なフレームを右クリックし、表示されるドロップダウンメニューから「クラシックトゥイーンを作成」を選択します。そしてこのアニメーションを再生すると、“金魚ちゃん”が最初の場所から次のポイントまでスムーズに動いているのが確認できます。

6

金魚ちゃんの命を絶やさないように、何度か上下に泳がせてあげましょう。では、今やったことを30フレームごとに2回ずつ繰り返していきます。「右クリック」 > 「キーフレームの挿入」 > 「右クリック」 > 「クラシックトゥイーンを作成」

アニメーションの動きのタイミングを調整したければ、キーフレームの端にある黒いドットの辺りにドラッグします(正しく選択されれば、小さな白い四角が表示されます)。

Enterを押すか、「再生」をクリックし、アニメーションを再生してください。

4. アニメーションをテスト・編集する

「制御」 > 「ムービープレビュー」 > 「テスト」をクリックすればウィンドウが表示されるので、あなたが作った、映画のような傑作を再生してみてください!

5. GIFフォーマットにエクスポートする

「ファイル」 > 「パブリッシュ設定」で「GIFイメージ」にチェックを入れ、「パレットタイプ」を「アダプティブ」にし、「最大カラー数」を「99999」にして、「パブリッシュ」を選択します。

8

「パブリッシュ設定」の調整をしないままGIFを単純にエクスポートしてしまうと、非常に粗くてブロックノイズの載ったGIFになってしまいます。解像度の点では、この設定をしたからといって、ものすごくいい画質になるというわけではありませんが、かなり改善されるのは間違いありません。

完璧とは言えませんが、これでGIFのバナー広告のコンペに提案するには最適のデータが出来上がります。もしあなたのデザインが採用された場合には、譲渡手続きページでオリジナルのFlashファイルをアップロードすることが可能です。

コンピュータでファイルを開くと、以下のように表示されます。

9 copy

でも、オンラインで開けば以下のように動きます。

Fish_Flash

まとめ

これだけは注意をお願いします。99designsでは、Flashはサポートしていませんので、代わりにGIF形式での提出をお願いします。

Flashはベクター形式のアニメーションなどを作る時にはとても使い勝手のいいプログラムですが、写真や他の種類の画像には、あまり適していません。GIF形式で使える色は256色しかないため、色数は減り、解像度は確実に低くなってしまいます。

もちろんGIFにはすばらしい点もありますが、活用するには注意が必要です。チカチカするネオンのような、目障りなアニメーションを作ることはやめましょう。また、基本的なGIFを作れるようなら、より難易度の高いものもすぐに作れるようになります。バイラル動画や、シネマグラフなども作れますよ! 今のあなたの可能性は、大空のごとく無限に広がっています。なぜなら、すでにあなたは空の画像を作って、それをアニメーション化できる技術を持ち合わせているのですから。

アニメーションGIFについて質問やアドバイスがあれば、ぜひコメントをしてシェアしてください!