背景が透明な透過GIFアニメを作成する簡単サイト|フリーソフト不要

今回の記事は、背景を透明にした透過可能なGIFファイルを作成できる便利サイトの紹介です。無料で登録一切なし、簡単操作のサイトです。

ポク太郎です。

ブログやホームページなどでアニメーションが動いていると画面が華やかになります。ですが、決まりきった四角形だと高級感がありません。

今回は、透過色を指定することで自然なGIFアニメーションを作成してくれるサイトの紹介です。


透過色とは

コンピュータで扱う画像ファイルは必ず横が水平、縦が垂直の四角形。完全な四角形なので不自然です。

そこで、目的の形状だけ表示する方法が透過色を利用した方法。周辺の色を透過色として定義し、背景を透明にして表示します。

トイレ詰まりの業者要らずガボ(スッポン、キュポキュポとも言う)職人が説明する透過GIFの作り方【フリーソフト不要・無料作成サイト】

透過色を利用して透過GIFアニメを作ってくれるサイトを以下に紹介、作り方を説明します。

すごく簡単な透過GIFアニメ作成

使用するのはこの便利なao-systemさんのサイト→アニメーションGIFを作ろう!。正式名称は分かりません。

作成作業全体の流れは、

透過GIFアニメーション作成作業の流れ
PC上手順0必要なコマ画像複数枚を準備

サイト上
手順1コマ画像をサイトで指定
手順2各コマの持続時間を指定
手順3透過方法の指定
手順4GIFアニメ作成ボタン
手順5完成GIFアニメをダウンロード
非透過GIFアニメを作る場合は、手順3が不要になります。

手順0. 各コマ画像を準備

使用する画像は、Windowsに標準添付の「ペイント」や「Photoshop」等の画像編集ソフトを使って作成します。画像の描き方はこの記事では触れておりません。

アニメーションとはパラパラ漫画と同じ。各コマの画像を準備する必要があります。

それぞれは一瞬しか表示されませんが、選び抜かれた大事なコマ。ですので、すべてのコマを真剣な面持ちで準備します。

透過GIFアニメーションの作り方【フリーソフト不要・簡単無料作成サイト】透過GIFアニメーションの作り方【フリーソフト不要・簡単無料作成サイト】透過GIFアニメーションの作り方【フリーソフト不要・簡単無料作成サイト】透過GIFアニメーションの作り方【フリーソフト不要・簡単無料作成サイト】
コマ1コマ2コマ3コマ4

現在、これらの画像の周辺色は。このを“透過色”に指定することで背景を透明にします。

※もし絵の中にがあるとそこも透明に。その場合は、使用してない別の色を周辺色にしないといけません。

画像ができたら「.png」形式で保存します。

この用途の場合、輪郭のにじみが激しい「.jpg」「.jpeg」形式は、可能ですが適しません。

今回は、コマ1 → 2 → 3 → 4 → 3 → 2 → リピートと動かしてみます。(往復ループ)

手順1. 往復ループの実現と使用するサイト

コマ画像がすべて準備できたら、それらを先ほどのサイトへ登録しGIFアニメを作成します。

真四角形でない背景透明な透過GIFアニメーションの作り方を説明【フリーソフト不要・無料作成サイト】
まず、使用するコマ画像をサイトに指定。画面左側矢印ボタン→ファイル選択を繰り返し指定していきます。

ループはリピートを指定する方式。つまり『12、…、最後 → 1に戻る』仕様。

今回は、コマ14の間を往復させたいので、画像の指定を以下のように。

コマ1 → 2 → 3 → 4 → 3 → 2(4種6枚)

こうすることで往復ループが実現します。

トイレ詰まりの業者要らずガボ(スッポン、キュポキュポとも言う)職人が説明する透過GIFの作り方【フリーソフト不要・無料作成サイト】

手順2. 持続時間の入力と調整

次に右隣の矢印、各コマの持続時間を指定します。

持続時間とはそのコマを停止させる時間のこと。

100=1秒で設定します。つまり1/100秒単位で指定可能で、各コマ個別に値を設定可。

持続時間に関しては、右上矢印持続時間一括設定」ボタンで一括入力も可。その後、個別の値を変更して調整。

手順3. 透過色の指定

透過色を指定します。右側中央矢印ボタンです。

今回は「画像位置指定」を使用。“コマ画像の四隅一点の色を透過色として選択する”方法です。例では「画像1」の「左上隅の色」を選択。

※準備した画像の「左上隅の色」はが透過色に。もし絵の中にがあるとそこも透明になってしまうので、コマ画像作成時に注意。

手順4. アニメ作成

右下矢印の「アニメーションGIF作成ボタンを押すと作成開始。

数秒で完了し、画面右下にGIFアニメが表示されます。サイズ大な画像の場合はページ下方に表示されます。

表示されたアニメを見ながら手順14を繰り返し、チェック&各コマの持続時間を真剣な面持ちで調整していきます。

手順5. 完成gifファイルのダウンロード

完成したら表示されてるGIFアニメを「右クリック-画像を保存」で自分のPCへダウンロード。

その入手した.gifファイルをホームページにアップするなどして使用します。(完了)

ふぅ。今回の作業は一切冗談なしの真剣勝負だったので疲れました。

因みにこちらの商品、非常に安価でありながらギフトラッピングが使用できます。ちょっとした贈り物に最適です。

文字化けはGoogleの仕様です。

コメント

タイトルとURLをコピーしました