Topics インフォコネクト最新情報

Photoshopでコネ助のイラストを使った透過GIFアニメーションを作成

2020.09.24

Photoshopの豆知識

この記事は公開から１年以上経過しています。

こんにちは、クリエイターのSHOJIです。
今回のWebの豆知識では、Photoshopを使ったGIFアニメーションを作成する方法を説明します。

使用する画像が透過GIFであれば、透過効果のあるGIFアニメーションを作成することができますが、今回は先日新しく仲間に加わったマスコットキャラクター「コネ助」の透過イラストを使ってみたいと思います。

Photoshopでコネ助のイラストを使った透過GIFアニメーションを作成する方法

① Photoshopを起動して［ファイル］→［スクリプト］→［ファイルをレイヤーとして読み込み］を選択します。

②【レイヤーを読み込む】ウィンドウが開いたら［参照］をクリックして、使用する画像を選択して開きます。

③ 使用する画像の選択が終わったらウィンドウ内にファイル一覧が表示されているので、確認して［ＯＫ］をクリックします。

画像の読み込みが終わると、レイヤーパネル内に読み込んだ画像の枚数分だけ新規レイヤーが作成されています。これらのレイヤーがアニメーションGIFフレームになります。

④［ウィンドウ］→［タイムライン］をクリックして、タイムラインパネルを開きます。

⑤ タイムラインパネルが開くと中央にセレクターがあるので［フレームアニメーションを作成］に切り替えます。再度［フレームアニメーションを作成］ボタンをクリックすると、新しいフレームアニメーションが作成されます。

⑥ タイムラインパネルの右上にあるメニューアイコンをクリックして表示されたメニューの中から［レイヤーからフレームを作成］をクリックすると、レイヤーパネル内にあるすべてのレイヤーがアニメーションの個別フレームに変換されます。

⑦ フレームアニメーションが前後逆になりプレビューが逆再生される場合は、タイムラインパネルの右上にあるメニューアイコンをクリックして表示されたメニューから［フレームを入れ替え］をクリックすると、フレームの前後が入れ替わります。

⑧ タイムラインパネルの下にあるオプションメニューにて各設定を行います。
［秒数］→ 画像の切り替え時間を変更できます。
［無限］→ アニメーションがループします。

⑨［ファイル］→［書き出し］→［Web用に保存（従来）］を選択します。

⑩【Web用に保存】ウィンドウが開いたら各設定を行います。
［カラーメニュー］→ 256
［透明部分］→ チェック
［ループオプション］→ 無限

⑪［保存］をクリックして、ファイルの保存先を指定して終了です。

これで、透過GIFアニメーションが作成されました。
【Web用に保存】ウィンドウで、書き出しウィンドウ左下の［プレビュー］ボタンをクリックすると、GIFアニメーションをプレビューすることができるので、活用するといいかと思います。

今回は、Photoshopでコネ助のイラストを使った透過GIFアニメーションの作成方法についてご紹介しました。

昔からあるパラパラ漫画の仕組みで作成されるGIFアニメーション。画像の枚数を増やしたり、連写撮影された画像を使用することでより滑らかな「動画」のようなGIFアニメーションを作成することも可能ですが、ファイルサイズも大きくなってしまうので注意が必要です。

今回作成したコネ助の透過GIFアニメーションについては、サイト内のどこかで使用していますので探してみてくださいね！このページ内にも隠れてますよ笑

※スマホでは非表示設定のため、パソコンまたはタブレットで確認してみてください。

［Webの豆知識］関連記事

経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。