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

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

必要なもの

アプリ内で使ってみる

Photoshop を開く

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

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

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

ファイル／書き出し／Web用に保存（従来）を選択します。最適化ファイル形式を「GIF」に設定し、ループオプションを「無限」に設定します。

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