こんにちは！！
この記事ではフォトショップを使って GIFアニメーションスタンプを作る方法を紹介します。
配信サイトtwitch（ツイッチ）での仕様を想定したスタンプを作成しています。
ツイッチでのスタンプの仕様などはこちらの記事で説明させていただきました。
https://www.movitamp.com/stamp/for-twitch/
https://www.movitamp.com/stamp/biginner-size/
adobe photoshop(フォトショップ)とは
Photoshop（フォトショップ）は、Adobe社が提供している画像編集ソフトです。
写真の加工、イラスト制作、デザインなど幅広い用途に対応でしています。
もともとは写真編集ソフトとして誕生しましたが、現在ではイラスト制作やデジタルアートといった
クリエイター活動全般に活用できる万能ツールとなっています。
GIFアニメーションの作成機能も標準搭載されているため、配信用スタンプやアニメーション素材の制作にも向いています。
（私はこれ目当てで使用しています！）
プロのデザイナーやイラストレーターだけでなく、ブログ運営者、配信者、スタンプクリエイターなど、個人クリエイターにも幅広く利用されています。
フォトショップでツイッチ用アニメーションスタンプを作る 手順解説
では早速フォトショップを使ってGIFアニメーションスタンプを作っていきましょう。
１．新規ファイルの作成
フォトショップを開いたら左上の新規作成を押します。
2.キャンバスができたらタイムラインを表示させる
アニメーションを作成させるためのタイムラインウィンドウ？を表示させます。
※既に表示されている方は飛ばしてもOKです。
下の画像の①「ウィンドウ」をクリックすると 色んな項目が出てくるのですが、その中の「タイムライン」を押します。
②の個所にタイムラインと出るのでこれでOKです。
次に③の「フレームアニメーション作成を押します」
③のフレームアニメーションを作成すると下記画像のようになります。
画像下部の黄色い四角に三本線があるのでそこをうりっくすると「レイヤーからフレームを作成」とあるのでそこをクリックします。
すると右側の黄色い枠内にあるレイヤーがアニメーションのフレームとしてタイムラインに表示されます。
なので下記画像で言うと レイヤーが4枚あるのでタイムラインには4枚のレイヤーが表示されるわけです。
3.アニメーション用のイラストを描く
ここではすでに描いたもので説明します。
例として パトランプのGIFアニメーションを作成したときのものを出します。
このパトランプは 9枚のレイヤーを使用しています。
9枚のレイヤーにそれぞれイラストを描いた状態で手順2の最後にやった「レイヤーからフレームを作成」を押すとこのようになります。
この画像で説明すると アニメーションの一枚目はレイヤー1を表示します。
そのまま２，３と続いて最後のレイヤーはレイヤー9となります。
これが9枚でできるパラパラ漫画といったイメージです。
4.再生して確認
必要なイラストがレイヤー分できたら 再生を押して望み通りのアニメーションになってるか確認しましょう。
この再生ボタンを押すと 画面上のイラストが動いてアニメーションの確認ができます。
またここではレイヤーごとにどれぐらい表示させておくかといった設定もできます。
タイムラインに表示されているレイヤーの下に0秒と書いてあるのですがその右の参画を押すと 5秒ぐらいまで選択できるようになっていて、
例えば レイヤー3を1.5秒で設定すると レイヤー3からレイヤー４に映るまでに1.5秒時間が空いてからレイヤー4の画像が表示されることになります。
また基本的にデフォルト設定だとループになります。
5.書き出して GIFとして保存
アニメーションに違和感がなかったら 最後にGIFアニメーション画像として書き出しましょう。
①のファイルを押して 書き出し→web用に保存を押します。
すると②のような画面が出るので 形式をGIFにして保存しましょう。
まとめ
以上がフォトショップでGIFアニメーション画像を作る大まかな流れです。
絵の描き方は完全独学なので何とも言えませんが スタンプの制限がある状態だと、絵のうまさというよりも いかに簡潔に見せるかみたいなところが重要になってくるので 絵描けないなという方もぜひ挑戦してみてください。