記事一覧

【第70稿】 チュートリアルな覚書 ~透過GIFアニメの作り方 clipstudio for ipadとGIMPによる~

本日もご覧いただきありがとうございます。

今回は少々趣向を変えて…
Ipad版のCLIP・STUDIOで作成したGIFアニメに、透過処理を施す方法をご紹介します。

実のところ、仕事で透過GIFを作成する機会がありまして、
何かと苦労したので自分の覚書も兼ねております。

ちなみに透過GIFとは…

通常(非透過)はこんな感じ
玉のアレ
背景に色が入っています。

そして、背景透過処理をすると
透過
こんな感じです。
GIFの背景が透過して、サイトの色(白)が見えている状態になります。

通常はGIFアニメはipadのCLIP・STUDIO(EX)で作成し、そのまま書き出しています。
この場合背景レイヤを非表示にしていても白の背景が入るので、透過にはなりません。

※本サイトのように白背景のサイトで使うと透過してるように見える場合もありますが…
ちょっと違う感じの白に表示されることもあります


どうやら、現段階(2019年9月)では、アプリ内で透過処理を完了させるのは無理のようなので、
今回は透過処理にGIMPを使用します。

※詳しい方はご存じかと思いますが…
GIFの場合、厳密にいうと“透過”ではないのです。
しかし見た目は透過と同じようなもの…と思いますので、本ブログでは透過GIFとしています。

と前置きはこのくらいにしておいて、実際の作業工程を紹介します。
それでは、行ってみましょう↓


1.CLIP・STUDIOから透過PNGの書き出し
まずは下準備です。

●CLIP・STUDIOの動くイラストで作成したアニメーションを背景非表示にする
説明1

●ファイル→アニメーション書き出し→アニメーションセル出力
説明2

●透過PNGとして書き出し
この時、ファイル名は“連番”としておきます
説明3

●書き出されたファイルをPCに持ってくる
私の場合は、共有→Icloudに保存で持ってきていますが、
正直面倒です…他に良い方法がないか模索中。。


2.GIMPでGIFに変換

上記の方法でPCに持ってきた場合、一レイヤにつき一つのPNGファイルになっています。
説明4

それをGIMPに取り込み、一つのGIFファイルに変換していきます

●GIMPでPNGファイルをレイヤとして取り込む
ファイル→レイヤとして開く
全部のファイルを選択して開きます。
説明5

●名前をつけてエクスポート
透明PNGをレイヤとして取り込むと、↓のように全ての絵が重なってみえます。
この段階でもしクリスタ書き出し時には気づかなかったゴミ等があれば処理しておきます。
ファイル→名前をつけてエクスポート
説明7

●ファイル形式の選択→GIF画像
説明8

●GIF書き出しの設定→書き出し
↓は最初に紹介した透過GIFの設定です
説明6

エクスポートすると、所定のフォルダにGIFが書き出されます。

ちなみに…
ディレイは、コマの切り替わり速度です。

これが少々やっかい…CLIP・STUDIOではフレームレート設定なので、
全く同じ速さにしようとするのは困難かと思います。
数字を小さくすると速くなりますので、色々調整が必要です。
※この辺は私もまだ試行錯誤中なので、今後追記できたらと思っています。

そして、
フレーム処理を、“レイヤ毎に1フレームとして書き出す”だと冒頭のGIFのようになり、
“累積レイヤ(結合)”にすると↓のようになります
透過2

レイヤを切り替えず、全部表示していく感じ。
今回の場合玉の奇跡を見せたい場合は効果的です。


以上です。
正直、GIMPに移ってからの操作については、本サイトよりも親切に解説してくれているサイト様が多々ありますので、
そちらを参考にしていただくとして(私も色々なサイトを参考にさせていただきました)…
CLIP・STUDIOからの書き出しが自分としては一番迷ったところなので、お役に立てれば幸いです。

長文最後までお読みいただきありがとうございました。
また、何か役立つ情報があれば、随時ご紹介していきたいと思います。

今後ともよろしくお願いいたしますm(__)m

















関連記事

コメント

コメントの投稿

非公開コメント

スポンサーリンク

<

プロフィール

muronmuron

Author:muronmuron
ご覧いただきありがとうございます。
オリジナル短編動画を制作しています。
どうぞよろしくお願いいたします。

【管理人も使用中】GIF作成だけでなく、本格アニメーション、イラスト作成に!

最新コメント

カウンタ