この記事では、「Adobe Photoshop（フォトショップ）」で簡単なアニメーションGIFを作成する方法を紹介してみようと思います。
例えば、以下のような感じのモノです。
このように、簡単なアニメーションであれば画像処理ソフトの「Photoshop」でも作成することが可能です。
⇒ 作り方も簡単です！
アニメーションGIFは、ブログ記事はもちろんですが、
他にもSNSなんかにも投稿できるので、動きを加えた面白い画像をアップしたいという場合にもお勧めです。
という訳で、、、
以下では「Photoshop」の機能を使って上記に載せたような簡単なアニメーションGIFの作り方を紹介していきますね！
PhotoshopでアニメーションGIFを作る！
ここでは、上記の画像2つを使って簡単なアニメーションGIFを作成していきます。
※左の海の画像は背景に設置して、右のマンボウを動かす感じです。
アニメーションを作りには、まず最初に上部メニューバー内にある「ウィンドウ」をクリックします。
その後に、表示された項目の中にある「タイムライン」を選択します。
そうすると、下部に「タイムライン」のパネルが表示されるので画像の箇所をクリックして「フレームアニメーション作成」を選択します。
⇒ その後、再度「フレームアニメーションを作成」をクリックすると設定画面が開きます。
先ずは、動かしたい画像を「開始地点（ここからスタートさせたいという場所）」に置きます。
次に、黄色い矢印のマーク（選択したフレームを追加）をクリックします。
⇒ タイムライン上にフレームが複製していますよね！
その後に、複製したフレームを「最終地点（ここでストップ！）」に持っていきます。
ちなみに、この時点では開始地点と終了地点の2点しか設定していないので、アニメーションにすると↑画像のようになります。
※開始地点と終了地点の2点を延々とループするだけです。
流れるように移動するアニメーションを作るには、開始地点と終了地点を設定した後に、画像の黄色矢印の部分にあるマーク（アニメーションフレームをトゥイーン）をクリックします。
そうすると、赤枠で囲っている「トゥイーン」の設定画面が開きます。
※ここでは、「追加するフレーム」を12（個）にしています。
そうすると、開始地点と終了地点の間に12個のフレームが複製され、それぞれ等間隔に配置されます。
これによって、アニメーションにしたときにスムーズに進むようになります。
アニメーションを保存するときはGIF形式で！
アニメーションの設定が完了したら、上部メニューバー内にある「ファイル」⇒「書き出し」⇒「Web用に保存」と進みます。
ここの設定画面で行うべきことは、
まず、保存形式が「GIF」になっているということ。
そして、下部の「ループオプション」では「無限」と「一度」が選べますが、アニメーションを無限にループ表示したい場合は「無限」を選びます。
…設定化完了したら「保存」をクリックすればOKです！
こんな感じで、アニメーションGIF画像が出来上がりましたね！
フェードイン・フェードアウト効果も可能
よく使われる機能としてフェードイン（徐々に現れる）、フェードアウト（徐々に消える）があります。
この効果をアニメーションに適応させ方法も紹介しておきますね！
以下、「フェードイン」の方法です。
まず最初に、動かしたい画像を開始地点に配置し、レイヤーの「不透明度」を10%に設定します。
※0でもOKです！（完全に消えた状態から出現させるには0にします）
続いて、複製後に終了地点を設置した画像には、不透明度を100%に設定します。
後は「トゥイーン」を使用して、開始地点と終了地点の間にフレームを複製します。
※不透明度も徐々に上がるよう複製されるようになっています。
そうすると、画像が徐々に出現するように表現できましたね！
文字や背景にもフェードインやフェードアウトを使うと、お洒落を演出できて良いかもしれませんね！
最後に一言…
以上、「Adobe Photoshop（フォトショップ）」を使ってアニメーションGIF画像を作る方法を紹介してきました。
この記事で書いてきたように、簡単なアニメーションを作るだけであれば全然「Photoshop」で作れます。
また、この記事で紹介したアニメーション機能は、ほんの一部でしかありません。
使い慣れると工夫次第で色んなアニメーションが作ることも可能です。
⇒ 数値などを動かしてどんな風に表示されるか試してみるとイメージが掴みやすいです。
是非、色んなアニメーション画像を作ってみて下さいね！
■「Photoshop」の機能を複数紹介しています！
当サイトでは、「Photoshop」の便利な機能を複数紹介しています。
ご興味のある方は是非、チェックしてみてくださいね！
※以下のリンク（画像）をクリックすると「Photoshop」の記事が置いてあるカテゴリーページに移動します。（当サイト）
コメントを残す