IllustratorとPhotoshopでコインの連番アニメーションを作成します。
作成した連番画像はアニメーションGIFで書き出しを行っておりますが、最近はこのような連番アニメはアニGIFではなくAPNGを使うことがほとんどなので、後半はフリーソフトを使ってAPNG化するところまで動画にしております。
これくらいのコインアニメであれば3DソフトやAeなどいろいろなツールで作成できますが、連番アニメを作成するとっかかりとしては面白いと思うのでぜひご覧ください。
CONTENTS
制作の流れ
主な工程としては、
コインの連番画像の作成（Illustrator）
- 表と裏、サイドの画像をシンボル化
→動画は表と裏両方に同じ画像を使っております。 - 効果/3Dとマテリアル/3D（クラシック）/押し出しとベベルで3D化して表と裏、サイドにシンボルをマッピング
- コインを並べ、x軸を20°ずつずらす
→y軸でもz軸でも、または組み合わせでも構いません
アニメーションGIFの作成（Photoshop）
- 画像を配置してウィンドウ/タイムラインを表示
- タイムラインパネルのフレームアニメーションを作成を選択
- タイムラインパネル右上のメニュー、レイヤーからフレームを作成を選択
- ファイル/書き出し/Web用に書き出しでGIF画像を書き出す
APNGの作成（APNG Assembler）
APNGにする方法は複数ありますが今回はフリーソフトのAPNG Assemblerを使用しております。
ソフトについては申し訳ございませんが自己責任のもとご使用ください。 GIF画像はPhotoshop上でディレイなし以上の速さを調節するにはフレームの画像を抜く他ありません。
こちらのソフトはシンプルかつfpsの調節も簡単です。
- Photoshopで連番画像の書き出し
→ファイル/書き出し/レイヤーからファイル～で一括書き出し - APNG AssemblerでAPNG化
となります。
作成したコインのデモ
GIFはディレイなし以上の速度を出すにはフレームを抜く以外ないのに対し、APNGは速度を変更可能。
ぼかしありはフォトショ上でノイズとぼかしをかけたもので、なしよりサイズが下がります。
制作ポイント
コインの作成
アニメーションの元となるコインの作成方法はこちら！
ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのアートディレクター兼デザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。
本サイトやX、YouTube、Instagram、TikTokなどの各種SNSにてPhotoshop、Illustrator、Fireflyの作例を発信中！
個人としての仕事は、動画制作『【アーティストに学ぶ】#33 – アドビ公式』、オンラインセミナー『朝までイラレ』『朝までフォトショ』、著書『デザインの仕事がもっとはかどるAdobe Firefly活用テクニック50』（インプレス）など。
詳しくはWorkにてご覧ください。
また、お仕事等のご依頼はContactよりご連絡くださいませ。
おすすめ書籍
PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。
どちらかというと中～上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。
私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。
