分デザインのコツデザイン制作のコツロゴ、ウェブなど多数のジャンル...ロゴ、ウェブ、書籍表紙デザインなど多数のジャンル...デザインを依頼するアニメーションGIFをご存知の方は多いでしょう。インターネット上で、ネコのバイラル動画や、ページの端でうんざりするくらいチカチカしているバナー広告などの形で、よく見かけます。99designsコンペでは、バナー広告のカテゴリの中でアニメーションGIFを数多く扱っています。Format)は、圧縮画像形式のファイルフォーマットです。移植性が広く効率的に圧縮できるため、別のインターネットプラットフォーム間でも簡単に送信することができます。GIFのカラーパレットは256色程度なので、高画質写真などの色には十分に対応できません。GIFが作られた一番の目的は、動画再生ソフトなしで見られる、シンプルなビデオアニメーションの圧縮ファイルを作成することです。CS5で作成する方法を紹介します。アニメーションGIFを作成する方法Photoshopでは様々なアニメーションGIFを作ることができますが、今回はシンプルな、短い文章が入っただけのバナー広告を作成する方法を紹介します。250ピクセルに設定します。注:Photoshopを開く前に、のちにGIFを構成するJPGファイルをいくつか準備しておきましょう。画像はすべて同じ寸法で、同じフォルダに入れるようにします。「ファイルをレイヤーとして読み込み」を選択します。「レイヤーを読み込む」のウィンドウが出てきたら、「参照」をクリックし、画像ファイルを選択して開いてください。「OK」をクリックします。これで、選択したファイルがプロジェクトに別々のレイヤーにインポートされるはずです。必要であれば、レイヤーの順番を再調整します。「タイムライン」)を選択します。レイヤーからアニメーションフレームを作成するすべてのレイヤーを選択し、アニメーションウィンドウの右上の端にあるタブをクリックして、「レイヤーからフレームを作成」を選択します。これで、アニメーションウィンドウにすべてのフレームが表示されます。フレームの表示時間を編集するアニメーションウィンドウの右上の端にあるボタンを再度選択し、ドロップダウンメニューから「すべてのフレームを選択」をクリックします。これですべてのフレームが選択されたので、一貫して編集をすることができます。それぞれのフレームは0秒になっているので、どれでもいいので黒い矢印をクリックし、リストから表示時間を選択するか、「その他」をクリックして自由に時間を設定してください。今回は、最後のフレーム以外をすべて0.5秒に設定し、最後のフレームのみ2秒にしました。アニメーションのループ数を決めるアニメーションウィンドウの右下の端にある「ループオプション」ボタンをクリックします。ドロップダウンメニューが表示されるので、アニメーションのループ数を選択してください。「3回」が一般的なバナー広告でよく使われている回数です。「無限」を選択する場合は、よく考えてからにしましょう。広告はターゲットとなる閲覧者の気を引くためのものです。それなのに、不必要な動きを延々と繰り返して、見る人を不快にさせてはいけません。今回は見本なので、このバナー広告では「無限」に設定します。アニメーションが3回再生されると、アニメーションウィンドウでは最後のフレームで動きが止まり、そのフレームが静止画として表示され続けます。静止画となるフレームには、閲覧者に一番見てほしいものを選択するようにします。今回の動画では、最初のフレームを特に見てほしいので、フレーム1を選択し、アニメーションウィンドウの下にある「選択したフレームを複製」ボタンをクリックします。複製された新しいフレームをドラッグして、シークエンスの最後のフレームにします。デバイス用に保存」をクリックします。ファイルフォーマットを「.gif」に設定して、保存します!これをウェブ上に貼るとアニメーションが再生されます。動きを確認したい場合は、ファイルをブラウザウィンドウにドラッグします。あなたの傑作を楽しんでください。以上が、アニメーションGIF作成の基本です。FlashでGIFを作成してみましょう。FlashでもアニメーションGIFを作成することができますが、どちらにも良い点と悪い点がそれぞれあります。最近では、Flashは時代遅れだと言われる傾向がありますが、99designsのお客様の多くが、いまだにFlashアニメのバナーを好んで買い求めています。我々のサイトはFlashをサポートしていません(デザイン譲渡時を除く)ので、デザイナーがコンペに参加するためにはGIFファイルでアップロードする必要があります。ここでは、コンペに必要な作業である、Flashファイルを.gifファイルとしてエクスポートする方法を紹介します。「新規」を開いてください。Flashには、Illustratorと同様にペンツールがあります。Flash上で文字を描き、アニメーション化することもできます。今回のチュートリアルの目的は、既存のPNGファイルをインポートし、アニメーションにすることですので、省略します。ここでは、背景と金魚の2つの要素を使っていきたいと思います。「開く」で両方のファイルを選択します。ライブラリウィンドウに2つのファイルが表示されます。ここでPNGファイルはシンボル(これをカンバスにドラッグします)に変換されます。これで、作業に使うファイルがそろいました。ライブラリウィンドウからこの2つのファイルをカンバスにドラッグして、必要であれば、サイズを調整したり場所を移動したりしてください。2つのファイルは別のレイヤーで編集してください。アニメーションを作成するでは、アニメーションの尺を決めます。今回は5秒間、もしくは120フレームのアニメーションにしましょう。背景のレイヤーはアニメーション全体を通して表示されているように選択しておいてください。次に、タイムラインの120の表示のところで右クリックして、ドロップダウンメニューから「フレームの挿入」を選択します。アニメーション化したい素材(今回は金魚)を選択してタイムラインにいき、タイムライン上の後ろのフレームのところで右クリックして、ドロップダウンメニューから「キーフレームの挿入」を選択します。素材を次に動いてほしいところにドラッグします。2つの動きの間の適当なフレームを右クリックし、表示されるドロップダウンメニューから「クラシックトゥイーンを作成」を選択します。このアニメーションを再生すると、“金魚ちゃん”が最初の場所から次のポイントまでスムーズに動いているのが確認できます。金魚ちゃんの命を絶やさないように、何度か上下に泳がせてあげましょう。今やったことを30フレームごとに2回ずつ繰り返していきます。「クラシックトゥイーンを作成」アニメーションの動きのタイミングを調整したければ、キーフレームの端にある黒いドットの辺りにドラッグします(正しく選択されれば、小さな白い四角が表示されます)。Enterを押すか、「再生」をクリックし、アニメーションを再生してください。「パブリッシュ設定」で「GIFイメージ」にチェックを入れ、「パレットタイプ」を「アダプティブ」にし、「最大カラー数」を「99999」にして、「パブリッシュ」を選択します。「パブリッシュ設定」の調整をしないままGIFを単純にエクスポートしてしまうと、非常に粗くてブロックノイズの載ったGIFになってしまいます。解像度の点では、この設定をしたからといって、ものすごくいい画質になるというわけではありませんが、かなり改善されるのは間違いありません。完璧とは言えませんが、これでGIFのバナー広告のコンペに提案するには最適のデータが出来上がります。あなたのデザインが採用された場合には、譲渡手続きページでオリジナルのFlashファイルをアップロードすることが可能です。コンピュータでファイルを開くと、以下のように表示されます。オンラインで開けば以下のように動きます。まとめこれだけは注意をお願いします。99designsでは、Flashはサポートしていませんので、代わりにGIF形式での提出をお願いします。Flashはベクター形式のアニメーションなどを作る時にはとても使い勝手のいいプログラムですが、写真や他の種類の画像には、あまり適していません。GIF形式で使える色は256色しかないため、色数は減り、解像度は確実に低くなってしまいます。GIFにはすばらしい点もありますが、活用するには注意が必要です。するネオンのような、目障りなアニメーションを作ることはやめましょう。基本的なGIFを作れるようなら、より難易度の高いものもすぐに作れるようになります。今のあなたの可能性は、大空のごとく無限に広がっています。あなたは空の画像を作って、それをアニメーション化できる技術を持ち合わせているのですから。inbox.デザイン・ビジネストレンドやキャンペーン情報などが満載のニュースレターに登録しませんか?ニュースレターに登録して最新情報を受け取りませんか?デザインやビジネス関連情報をお届けします。Milakovic最新のデザインコンペデザイナーとしてステップアップできるお仕事をご用意しています。Terbitbasukiデザイン・ビジネストレンドやキャンペーン情報などが満載のニュースレターに登録しませんか?ニュースレターに登録して最新情報を受け取りませんか?デザインやビジネス関連情報をお届けします。