終わらないアニメ・パラレル

かわいいキャラクター達のほのぼのアニメとイラスト・ブログ

GIFアニメの作り方 5 -PhotoshopでのGIF変換方法-

f:id:PaRaLLeL:20190603150538j:plain

 GIFアニメの作り方第5回。今回はパラレル作品のGIF変換方法もご紹介します!パラレルの変換は「Photoshopを使ってのGIF変換」です。

 

 

内容としては上級者向けですが

 

・フリーソフトでは物足りない

・Photoshop持ってるので変換方法を知りたい

・もっと高度な設定、変換方法を知りたい

 

そんな方はぜひ読んでみてください。

 

簡単なGIF変換方法を知りたい人は過去の記事読んでみてください。

 

Photoshop(フォトショップ)とは?

イラストやグラフィック、映像などの制作にかかわっている人は知ってる、使ってる人も多いかと思いますが、

 

そもそもPhotoshopって何?って方もいるかと思いますのでまずはPhotoshopの説明を少しします。

 

 

Photoshopはadobe(アドビ)社が出している画像編集ソフトです。

 

世界的にも一番有名だと思いますし、制作現場で使われてる場面が多いです。「フォトショ」、「PS」なんて呼ばれたりしています。

  

詳しく知りたい方は下記サイト見てみてください。

Adobe Photoshop

https://www.adobe.com/jp/products/photoshop/beginner.html

*30日間体験版もあるようです。

 

 

このソフトは基本写真やイラストの画像を加工するのがメインですがGIFに変換することもできます。

 

その使い方をご紹介します。

PhotoshopでのGIF変換方法

使用しているPhotoshopバージョンはCS6なのでCCなどでは少し違うかもしれませんがそこはご了承ください。

 

上級者向けなので基本Photoshopが使える前提でお話し進めます。また、GIFに必要な画像・イラスト等は準備してる状態からスタートです。

GIF素材画像の読み込み方

Photoshopを起動します。

f:id:PaRaLLeL:20190530183838j:plain

Photoshopを起動したら画像を読み込みますがレイヤーに全部貼り付けるのは大変なのでスクリプトを使います。

 

ファイル」→「スクリプト」→「ファイルをレイヤーとして読み込み」をクリック。(この方法は一度にGIFで使う画像をレイヤーとして読み込む方法です。)

 

 

クリックすると下の画面が出ます。 

f:id:PaRaLLeL:20190530184854j:plain

 使用→「フォルダ」に変更(GIFに使う画像を一か所フォルダにまとめとくと便利です。)

 

参照→画像をまとめているフォルダを選択。

 

読み込まれたファイルが表示されますので全部ファイルを選んで「OK」をクリック。

  

f:id:PaRaLLeL:20190530185824j:plain

右のレイヤーにGIFに使う画像が全部レイヤーとして読み込まれます。

 

また下のタイムラインが表示されていない場合はメニューバーの「ウィンドウ」→「タイムライン」にチェックすると表示されます。

 

 

「タイムライン」の中の「フレームアニメーションを作成」をクリックします。

 

f:id:PaRaLLeL:20190530190712j:plain

クリックすると1枚だけタイムラインに入ると思います。

 

その次に右の隅の方にあるボタン(まるで囲んである場所)をクリックし、「レイヤーからフレームを作成」をクリックします。

 

 

f:id:PaRaLLeL:20190530191148j:plain

画像のようにタイムラインにレイヤー全部が読み込まれていればOK。

 

次に〇で囲んだ「0秒」をクリックすると、画像ごとにフレームレート(fps)を設定できます。(その他でかなり細かい設定までできます。)

 

パラレルの場合は0.1秒一定なので全部選んでまとめて「0.1秒」にしてます。

 

次にアニメーション順番が逆だったりするので逆になっている場合は右隅ボタンの「フレームを入れ替え」をクリック。全部の順番が逆になります。(プレビュー時確認しておかしかったら直してみてください)

 

 

ここまでできれば読み込み準備完了です。次にGIFへの書き出し方法です。

GIFへの書き出し設定

上記の準備ができたらいよいよ書き出しです。

f:id:PaRaLLeL:20190530192204j:plain

ファイル」→「Web用に保存」をクリックします。

 

下のような画面が出ます。

f:id:PaRaLLeL:20190530193449j:plain

*見にくかったらすいません。

 

①→ファイル形式(GIFにする)

②→色数(2~256色選べます)

③→画面サイズ(GIFの大きさ、右のパーセントでも調整可)

④→ループ指定(意図がなければ「無限」を選択)

⑤→現在の設定でのファイルサイズ、時間などが表示されます。

⑥→ブラウザが開いてプレビューが表示されます。(最終確認)

⑦→プレビューが問題なければ「保存」をクリック

*設定を変えるとリアルタイムで画面で確認できるので便利です。

 

あとは保存先と名前を決めてもらえれば完了です!

 

 

できたファイルをクリックしてブラウザで問題ないか確認してみてください。(できたファイルをダブルクリックすれば自然とブラウザが立ち上がると思います)

 

ちなみに参考のGIFはこちら

f:id:PaRaLLeL:20190502200115g:plain

*40枚の画像を使用しています。

まとめ

いかがだったでしょうか?

 

Photoshop使ったことない人はなんじゃこりゃ?って感じかもしれませんがいつか高度な変換が必要になった場合は読み直してみてください

 

Photoshop持ってる人はかなり細かい設定ができるので使わないともったいないぐらいです。

 

 この講座でもいくつか変換方法をご紹介しましたがまずはどのタイプでもいいのでぜひGIFアニメを作ってみてください!

 

1つ作ればもう一つ作りたくなる。

そのうち高度なことがやりたくなる。

 

という形でステップアップしていくのが理想かなと思います。

 

 

この「GIFアニメの作り方」を読んでGIF作品を楽しんで作ってもらえたらうれしいです!

 

 GIFの基本や簡単な作り方はこちらを読んでみてください。