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

animated-gif-photoshop
この記事では、Photoshop ElementsでアニメーションGIFを作成する方法(とアニメーションGIFをリサイズする方法)を紹介します。

以下の記事で、WordPressのテーマ「Simplicity」のアイキャッチ画像をアニメーションGIF化する方法を紹介しましたが、この記事で用いたアニメーションGIFの作成方法を紹介します。

Simplicityのアイキャッチ画像をアニメーションGIF化する方法
この記事では、WordPressのテーマ「Simplicity」のアイキャッチ画像をアニメーションGIF化する方法を紹介します。

アニメーションGIFの作成方法

Photoshop Elementsの各レイヤーに、以下の図のように、アニメーション画像の各フレームを配置します。

animated-gif-photoshop-1

次に、「ファイル」→「Web用に保存」を選択します。すると、以下の図のような「Web用に保存」ウインドウが現れます。

animated-gif-photoshop

「Web用に保存」ウインドウのファイル形式のプルダウンメニューから「GIF」を選択します。

すると、GIF用のオプションが表示されるので、この中から「アニメーションを描画」をチェックし、「ループオプション:」のプルダウンメニューから「無限」を選択します。

そして、変更後のサイズを「幅」「高さ」共に150にすると、(PCの記事一覧のアイキャッチ画像として使用できる)150×150のアニメーションGIFが作成されます。

アニメーションGIFのリサイズ方法

手許にPhotoshop形式のデータがあれば、「ファイル」→「Web用に保存」を選択し、上記と同様の設定を行って、変更後のサイズを「幅」「高さ」共に100にすると、(スマホの記事一覧のアイキャッチ画像として使用できる)100×100のアニメーションGIFが作成されます。

手許にPhotoshop形式のデータがなく、アニメーションGIFのみある場合、Photoshop ElementsでアニメーションGIFを読み込むと、各フレームがレイヤーに分割されます(Photoshop Elementsで「Web用に保存」する前と、見た目は同じ状態)。

後は、上記と同様の方法で、サイズの変更を行います。

まとめ

この記事では、Photoshop ElementsでアニメーションGIFを作成する方法(とアニメーションGIFをリサイズする方法)を紹介しました。

なお、この記事では、Photoshop Elements 11を使用しています。