Twitter用GIFアニメの作り方
閲覧数 : 103042回 総合評価 : 15件
[ファイル]メニュー→[アニメーション書き出し]→[アニメーションGIF]からアニメーションGIFを作成できます。
アニメーションGIFの書き出しについては「うごくイラストの作り方&描き方」内「うごくイラスト制作の手順 [5]完成したファイルを書き出す-アニメーションGIFの書き出し」を参照してください。
CLIP
STUDIO PAINT で「うごくイラスト」や「アニメーション」を作成したら、連番画像を書き出してGIFアニメを作成してみましょう。
Webサイトの無料サービスを使用したGIFアニメの簡単な作り方と、作ったGIFアニメをTwitterに投稿する方法を解説していきます。
[1]連番画像の準備
[2]連番画像を使ってGIFアニメを作成する
[3]GIFアニメを Twitter へ投稿する
[1]連番画像の準備
アップデータはこちらです。※Ver.1.5.0では連番画像を縮小して出力すると画像が劣化する場合があります。
1-1. アニメーションファイルを開きます。
CLIP STUDIO PAINTの[ファイル]メニュー→[開く]を選択します。
ファイルの選択ウィンドウが表示されたら、①開くファイルを選択し、②[開く]をクリックします。
アニメーションファイルが開きました。
1-2. 開いたアニメーションファイルから連番画像を書き出します。
CLIP STUDIO PAINTの[ファイル]メニュー→[アニメーション書き出し]→[連番画像]を選択します。
1-3. [連番画像書き出し設定]ダイアログが開きます。
以下の①～⑦の項目について下記のとおり設定します。⑦設定ができたら[OK]をクリックします。
①[参照]ボタンをクリックして、連番画像を書き出すフォルダを設定します。
②連番画像に付ける任意の名前を入力します。
③[PNG]を選択します。
④長辺を「560」に設定します。
※横長の画像の場合には[幅]を「560」にします。
※Twitterのツイート画面では長辺が560pxで表示されます。これより小さい画像は拡大されてぼやけるなど画質が荒れてしまうため、長辺560px以上に設定しておきます。また、タイムライン上では506pxに縮小されて表示されます。
⑤書き出したい範囲を設定します。すべて書き出す場合は変更する必要はありません。
⑥「8」と入力します。
※1秒間あたり8枚の連番画像を書き出すという意味です。この場合1枚の連番画像を1/8秒(＝125ミリ秒)の間隔をとって再生する事になります。
⑦設定を終えたら[OK]をクリックします。
1-4. 連番画像の書き出しができました。
[2]連番画像を使ってGIFアニメを作成する
2-1. ブラウザを起動してhttp://gifmaker.me/へアクセスします。
「http://gifmaker.me/」は無料で簡単にGIFアニメが作成できるサイトです。
2-2. 連番画像をアップロードします。
画面中央にある「Upload Images」をクリックします。
[開く]ウィンドウで連番画像をすべて選択し、ウィンドウ下部にある[開く]をクリックします。
連番画像のアップロードが開始されるので、終わるまでしばらく待ちます。
アップロードが終わると、①の部分にアップロードされた連番画像のプレビューが縦に並び、②の部分にGIFアニメのプレビューが表示されます。
2-3. GIFアニメの設定を行います。
右側にある「Control Panel」で画像サイズや再生速度を設定できます。
①縮小率(％)が「100」、長辺が「560px」になっていることを確認します。
②「125」と入力します。「125」は連番画像を表示する速さです。1秒間あたり8枚の連番画像を書き出してあるので、1秒÷8枚=125ミリ秒となります。連番画像を125ミリ秒間隔でGIFアニメに変換します。
2-4. プレビューを確認しGIFアニメを作成します。
①この部分のプレビューでGIFアニメの動きを確認します。
②動きに問題がなければ「Create GIF Animation」ボタンをクリックします。
③「Please wait a moment…」の表示が消えるまでしばらく待ちます。
2-5. GIFアニメのファイルサイズ確認と保存。
Please wait a moment…の文字が消えると各種メニューが表示されます。
TwitterでGIFアニメを投稿するにはファイルサイズが3MB(3,145,728bytes)以内でなければならないため、ファイルサイズを確認します。メニューの中の「Reduce the file size of this GIF」(下図赤枠部分)をクリックします。
※Twitterへ投稿できるGIFアニメファイルサイズの上限は3MBと決められています。
ブラウザの別タブにファイルサイズ調整ページが開きます。下図の赤枠部分に作成されたGIFアニメのサイズが表示されています。表示されている数値を確認します。
【A】GIFアニメファイルサイズが3MB(3,145,728bytes)以内に収まっている場合。
ブラウザの前のタブに戻り、メニューの中の「Download the GIF」(下図赤枠部分)をクリックして、作成されたアニメGIFファイルをダウンロードします。
ダウンロードできたら、[3]のTwitterへ投稿する手順に進みます。
【B】GIFアニメファイルサイズが3MBを超えている場合。
ブラウザの前のタブに戻り「2-3. GIFアニメの設定を行います。」の手順に戻ります。
「Control Panel」の下図①部分で縮小率(％)の数値を小さく設定し直したあと、再び「Create GIF Animation」をクリックしてGIFアニメを作り直します。
※長辺が560pxを下回るほどツイッターで表示される際に拡大されてぼやけるため、大きく下回らないよう500px前後を目安に調整します。
作り直したGIFアニメで、「2-5.GIFアニメのファイルサイズ調整と保存。」の手順を行い、GIFアニメファイルサイズが3MB(3,145,728bytes)以内に収まっているか確認します。
GIFアニメファイルサイズが3MBに収まるまで3～5の手順を繰り返します。
POINT
色数を下げてGIFアニメのファイルサイズを小さくする
縮小率(％)を下げる以外に、使用している色数(256色)を減らすことによってもGIFアニメのファイルサイズを小さくすることができます。ただし、元の画像によっては色数を減らすと極端に見栄えが悪くなることがあります。
「2-5.GIFアニメのファイルサイズ確認と保存。」の「Reduce the file size of this GIF」をクリックして表示される画面の右側にある②「Optimize Your GIF」(赤枠部分)で調整します。
①の部分をクリックすると、②のプルダウンリストが表示されます。リストの「Use ● colors」は、「色数を●色にする」という意味です。ここで色数を何色にするか選択します。色数が少なくなるほどファイルサイズは小さくなります。
③色数を選択したら「Optimize Now」をクリックします。しばらくすると下部にメニューが表示されます。
④の部分に元のGIFアニメのファイルサイズが表示され、⑤の部分に調整されたGIFアニメのファイルのサイズが表示されています。
⑤の部分が3MB(3,145,728bytes)以下になっていることを確認したら、⑥「Download it now.」をクリックしてGIFアニメを保存します。
[3]GIFアニメを Twitter へ投稿する
3-1. ブラウザでTwitterにアクセスし、新規でツイートを行います。
新規のツイート枠にコメントを入力したら、枠下にある「メディア」ボタンをクリックします。
※Twitterに投稿するには、ログインまたは会員登録が必要です。
アップロードするファイルの選択ウィンドウが表示されたら、①保存したGIFアニメのファイルを選択し、②[開く]をクリックします。
3-2. プレビューを確認し投稿します。
少し待つと、①の部分にプレビュー表示されます。プレビューを確認後、②の「ツイート」ボタンをクリックしてツイートを投稿します。
3-3. Twitterへ投稿ができました。正しく投稿できたか確認してみましょう。
コメント