今日のwebではコンテンツに動きを与えることが重要視されており、アニメーションGIFはいたるところで使用されています。画像に動きを加えることで、より複雑なストーリーを伝えることができます。Adobe PhotoshopならアニメーションGIFを簡単に作成できます。デザイナー兼コンテンツクリエイターのKendall Plant氏が、スケッチをアニメーションGIFに変換することで新しい生命を吹き込む様子をご覧ください。

自然やストリートフォト、ときには骸骨をもモチーフにした作品を制作しているKendall Plant氏は、 デザイナー、アートディレクター、コンテンツクリエイターであり、アソシエイトクリエイティブディレクターとして独自の創作アプローチをアドビにもたらしています。

スケッチする

最初に、様々な動きの状態を表現するためにスケッチのバリエーションを作成します。ブラシツールで骸骨のイラストを描き、レイヤーを追加しながら骸骨のバリエーションを描き足していきます。チュートリアル付属の画像を使用する場合は、1枚目のスケッチをPhotoshopで開き、残りのファイルをまとめてデスクトップからドキュメントにドラッグします。1枚ずつReturnキー(またはEnterキー)を押して確定しながら、それぞれのファイルを個別のレイヤーに配置します。次に、ロックアイコンをクリックして、元のレイヤーのロックを解除します。

create-animated-gif_step1

命を吹き込む

スケッチのアニメーション化の準備ができたら、タイムライン(ウィンドウ/タイムライン)を開き、ドロップダウンメニューから「フレームアニメーションを作成」を選択し、フライアウトメニューから「レイヤーからフレームを作成」を選択します。タイムラインを使用したことがある場合は、デフォルトで空のフレームが設定されています。その場合は、最初のフレームをクリックし、Shiftキーを押しながら最後のフレームをクリックします。フライアウトメニューで「フレームを削除」を選択します。これで「レイヤーからフレームを作成」を選択できるようになります。

create-animated-gif_step2

アニメーションの速度を決定する

各フレームのタイミングを合わせるため、タイムラインで最初のフレームをクリックして、Shiftキーを押しながら最後のフレームをクリックします。1つのフレームの下向き矢印をクリックして間隔を0.1秒に設定します。こうすることで、選択された残りのフレームも変更されます。次に、タイムラインの下のドロップダウンメニューで「無限」を選択し、アニメーションが連続してループするようにします。アニメーションのタイミングは、「再生」をクリックすることでプレビューできます。

create-animated-gif_3a-v2
create-animated-gif_step3

GIFに書き出す

ファイル/書き出し/web用に保存(従来)を選択します。書き出し形式を「GIF」に設定し、ループオプションを「無限」に設定します。

create-animated-gif_step4

アニメーションGIFを共有する

オリジナルのGIFを作成して、お好みのソーシャルプラットフォームや友人に公開できます。クリエイティビティを発揮し続けることも忘れないようにしましょう。

create-animated-gif_step5

注意:このチュートリアル付属のプロジェクトファイルは練習目的でのみご利用ください。

01/02/2020

デザイナー:Kendall Plant

このページは役に立ちましたか。