CLIP STUDIO PAINT Ver. 2以降ではアニメーションGIF書き出しが搭載されています。 CLIP STUDIO PAINT で「うごくイラスト」や「アニメーション」を作成したら、連番画像を書き出してGIFアニメを作成してみましょう。 Webサイトの無料サービスを使用したGIFアニメの簡単な作り方と、作ったGIFアニメをTwitterに投稿する方法を解説していきます。 こちらの作業は、CLIP STUDIO PAINTのバージョンを最新のVer. 1にアップデートしてから行ってください。 アップデータはです。 0では連番画像を縮小して出力すると画像が劣化する場合があります。 1-1. アニメーションファイルを開きます。 アニメーションファイルが開きました。 1-2. 開いたアニメーションファイルから連番画像を書き出します。 1-3. [連番画像書き出し設定]ダイアログが開きます。 これより小さい画像は拡大されてぼやけるなど画質が荒れてしまうため、長辺560px以上に設定しておきます。 また、タイムライン上では506pxに縮小されて表示されます。 すべて書き出す場合は変更する必要はありません。 1-4. 連番画像の書き出しができました。 [2]連番画像を使ってGIFアニメを作成する 2-1. は無料で簡単にGIFアニメが作成できるサイトです。 2-2. 連番画像をアップロードします。 画面中央にある「Upload Images」をクリックします。 [開く]ウィンドウで連番画像をすべて選択し、ウィンドウ下部にある[開く]をクリックします。 連番画像のアップロードが開始されるので、終わるまでしばらく待ちます。 2-3. GIFアニメの設定を行います。 右側にある「Control Panel」で画像サイズや再生速度を設定できます。 「125」は連番画像を表示する速さです。 連番画像を125ミリ秒間隔でGIFアニメに変換します。 2-4. プレビューを確認しGIFアニメを作成します。 2-5. GIFアニメのファイルサイズ確認と保存。 Please wait a moment…の文字が消えると各種メニューが表示されます。 TwitterでGIFアニメを投稿するにはファイルサイズが3MB 3,145,728bytes 以内でなければならないため、ファイルサイズを確認します。 メニューの中の「Reduce the file size of this GIF」 下図赤枠部分 をクリックします。 ブラウザの別タブにファイルサイズ調整ページが開きます。 下図の赤枠部分に作成されたGIFアニメのサイズが表示されています。 表示されている数値を確認します。 【A】GIFアニメファイルサイズが3MB 3,145,728bytes 以内に収まっている場合。 ブラウザの前のタブに戻り、メニューの中の「Download the GIF」 下図赤枠部分 をクリックして、作成されたアニメGIFファイルをダウンロードします。 ダウンロードできたら、に進みます。 【B】GIFアニメファイルサイズが3MBを超えている場合。 ブラウザの前のタブに戻りの手順に戻ります。 作り直したGIFアニメで、の手順を行い、GIFアニメファイルサイズが3MB 3,145,728bytes 以内に収まっているか確認します。 GIFアニメファイルサイズが3MBに収まるまで3~5の手順を繰り返します。 POINT 色数を下げてGIFアニメのファイルサイズを小さくする 縮小率 % を下げる以外に、使用している色数 256色 を減らすことによってもGIFアニメのファイルサイズを小さくすることができます。 ただし、元の画像によっては色数を減らすと極端に見栄えが悪くなることがあります。 ここで色数を何色にするか選択します。 色数が少なくなるほどファイルサイズは小さくなります。 しばらくすると下部にメニューが表示されます。 」をクリックしてGIFアニメを保存します。 [3]GIFアニメを Twitter へ投稿する 3-1. ブラウザでTwitterにアクセスし、新規でツイートを行います。 新規のツイート枠にコメントを入力したら、枠下にある「メディア」ボタンをクリックします。 3-2. プレビューを確認し投稿します。 3-3. Twitterへ投稿ができました。 正しく投稿できたか確認してみましょう。
次のこちらサイズはガイドライン規定サイズの二倍ですが、 最後アニメに書き出す際に 自動で既定のサイズになってくれます。 大きく作って縮小する方が綺麗になる感があるので2倍で作成しました^^; 「うごくイラストを作る」にチェック。 セルの枚数、フレームレートとかいうものの数字の設定は後から変えられますので、 今は取りあえず気にせずそのまま進みます。 説明は後述します。 次に準備として、上メニュー「ウィンドウ」内の「アニメーションセル」「タイムライン」選択。 こんなウィンドウが出ます。 これらはまた使っていきます。 fpsの数値が多いほど、ぬるぬると滑らかに動きます。 フレームレートが6fps 6枚で1秒 であればイラストは、 「6枚」or「12枚」or「18枚」でぴったり動画が終わるようにどうにか調整しました。 5枚やら13枚ですと、秒数が規定の1、2、3、4秒にならず端数になってしまいます^^; タイムラインとは? 先ほどと同じ画像ですが下はタイムラインウィンドウです。 青丸で囲った部分には1 秒 、2 秒 と表示されています。 6枚目の絵が終わったら1秒なんだな~。 と分かります。 (7枚目の上に1がありますが「6枚目が終わったら1秒」です。 ) タイムラインウィンドウでは何回も再生して動きを確認します。 画像は下描きフォルダを作った状態です。 1フレーム目はスタンプのここに表示されるメインの画像です。 全然おかしくなりませんでしたw 静止画が出ていて、それをタップしたらアニメがスタートするわけですから、 別に「最後の絵からスタート」しているように見えません。 要するに、 とにかく「フレーム2がスタートで、1がラスト」にしたらいい感じっす!w 真ん中あたりにイラスト配置の注意点が書いてありました。 清書 下描きの上に清書しました。 1枚目が出来ました。 次はオニオンスキンを使って2枚目を描きます。 オニオンスキンとは? 青丸のボタンはオニオンスキン設定なるもので、 前後の絵がうっすら表示されます。 2フレーム目を選択中ならなら1と3の画像を見ながら作業出来ます。 1と2の間にもう一枚欲しいな~と思いましたので、 2を右にドラッグしてずらしまして、 1と2の間の部分を右クリック。 何でもいいですが3を選びます。 まだ何も書いていないレイヤー3が間に入りました。 これで右のレイヤー3に絵を描けば、 1と2の間に絵が入ります。 順番通りに。 タイムラインの順番で正視化 数字の順番が1、3、2となっておりややこしいので、 ちゃんと1、2、3の順番に直したいです。 レイヤー2に絵を描けば、 1と3の間に絵が入ります。 さて、3も清書しました。 2に1と3の間の絵を描きましょう。 オニオンスキンで前後がうっすら見えているので間を埋めました。 ところで初めに出したアニメーションセルとは何に使う? ちなみにこの画像のように、 真ん中を描きたいけどオニオンスキンでも前後が見えないよ~。 前後が離れているから という時には、表示したいイラストをアニメーションセルの下部にドラッグ。 上部は選択中の編集したいレイヤーで、 下部はライトテーブルなるものです。 するとうっすら前後の絵が見え、真ん中に絵を描くことが出来ました。 初めに出したアニメーションセルウィンドウを何につかうかの説明でした^^ でライトテーブルについて分かりやすい解説があります。 反復させる 戻りまして、「1、2、3」が出来ました。 これを反復してなでなでなで~と12枚目まで行きたいと思います。 タイムライン上で絵の無いセルを右クリックし、数字を選択していきます。 このアニメだとこんな感じ。 123212321232な~でな~で。 これでイラストは完成です。 5秒とか端数にするとエラーが出ました このスタンプでは指定回数2回にしました。 出力が完了しました。 こんな確認画面が出ます。 規定外で作ってしまうとエラーで登録できませんでした。 8秒とか端数は駄目だった。 ^^; 縦か横どちらか一方が270px以上になるように文字やら草やら描きたしました。 フレームレート 1秒間にイラスト何枚か を後から変更する方法 フレームレートは本来アニメーションの滑らかさや速度を考えて設定するものかなと思うのですが・・ 何も考えていないわたしの場合、.
次のCLIP STUDIO PAINT Ver. 2以降ではアニメーションGIF書き出しが搭載されています。 CLIP STUDIO PAINT で「うごくイラスト」や「アニメーション」を作成したら、連番画像を書き出してGIFアニメを作成してみましょう。 Webサイトの無料サービスを使用したGIFアニメの簡単な作り方と、作ったGIFアニメをTwitterに投稿する方法を解説していきます。 こちらの作業は、CLIP STUDIO PAINTのバージョンを最新のVer. 1にアップデートしてから行ってください。 アップデータはです。 0では連番画像を縮小して出力すると画像が劣化する場合があります。 1-1. アニメーションファイルを開きます。 アニメーションファイルが開きました。 1-2. 開いたアニメーションファイルから連番画像を書き出します。 1-3. [連番画像書き出し設定]ダイアログが開きます。 これより小さい画像は拡大されてぼやけるなど画質が荒れてしまうため、長辺560px以上に設定しておきます。 また、タイムライン上では506pxに縮小されて表示されます。 すべて書き出す場合は変更する必要はありません。 1-4. 連番画像の書き出しができました。 [2]連番画像を使ってGIFアニメを作成する 2-1. は無料で簡単にGIFアニメが作成できるサイトです。 2-2. 連番画像をアップロードします。 画面中央にある「Upload Images」をクリックします。 [開く]ウィンドウで連番画像をすべて選択し、ウィンドウ下部にある[開く]をクリックします。 連番画像のアップロードが開始されるので、終わるまでしばらく待ちます。 2-3. GIFアニメの設定を行います。 右側にある「Control Panel」で画像サイズや再生速度を設定できます。 「125」は連番画像を表示する速さです。 連番画像を125ミリ秒間隔でGIFアニメに変換します。 2-4. プレビューを確認しGIFアニメを作成します。 2-5. GIFアニメのファイルサイズ確認と保存。 Please wait a moment…の文字が消えると各種メニューが表示されます。 TwitterでGIFアニメを投稿するにはファイルサイズが3MB 3,145,728bytes 以内でなければならないため、ファイルサイズを確認します。 メニューの中の「Reduce the file size of this GIF」 下図赤枠部分 をクリックします。 ブラウザの別タブにファイルサイズ調整ページが開きます。 下図の赤枠部分に作成されたGIFアニメのサイズが表示されています。 表示されている数値を確認します。 【A】GIFアニメファイルサイズが3MB 3,145,728bytes 以内に収まっている場合。 ブラウザの前のタブに戻り、メニューの中の「Download the GIF」 下図赤枠部分 をクリックして、作成されたアニメGIFファイルをダウンロードします。 ダウンロードできたら、に進みます。 【B】GIFアニメファイルサイズが3MBを超えている場合。 ブラウザの前のタブに戻りの手順に戻ります。 作り直したGIFアニメで、の手順を行い、GIFアニメファイルサイズが3MB 3,145,728bytes 以内に収まっているか確認します。 GIFアニメファイルサイズが3MBに収まるまで3~5の手順を繰り返します。 POINT 色数を下げてGIFアニメのファイルサイズを小さくする 縮小率 % を下げる以外に、使用している色数 256色 を減らすことによってもGIFアニメのファイルサイズを小さくすることができます。 ただし、元の画像によっては色数を減らすと極端に見栄えが悪くなることがあります。 ここで色数を何色にするか選択します。 色数が少なくなるほどファイルサイズは小さくなります。 しばらくすると下部にメニューが表示されます。 」をクリックしてGIFアニメを保存します。 [3]GIFアニメを Twitter へ投稿する 3-1. ブラウザでTwitterにアクセスし、新規でツイートを行います。 新規のツイート枠にコメントを入力したら、枠下にある「メディア」ボタンをクリックします。 3-2. プレビューを確認し投稿します。 3-3. Twitterへ投稿ができました。 正しく投稿できたか確認してみましょう。
次の