2017年7月4日火曜日

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

今回の記事は、背景を透明にする透過可能なGIFファイルを作成するサイトの紹介です。
ポク太郎です。

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

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


透過色とは

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

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

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

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


凄く簡単なGIFアニメ作成サイト

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

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


サイト上

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


0. 各コマ画像を準備

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

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

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

これらの画像の周辺色は“”となっています。この“”を透過色に指定することで背景を透過させます。
もし絵の中に“”があるとそこも透明に。その場合は、使用してない別の色を周辺色にして作成しないといけません。

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


1~5. 各コマ画像をGIFアニメへ

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

四角形じゃないアニメーション透過GIFの作り方を説明【フリーソフト不要・無料作成サイト】

1. 画面左側の赤矢印が、各コマ画像の指定。ボタン押す→ファイル選択を繰り返していきます。
ループはリピートを指定する方式。つまり、『1、2、…、最後 → 1に戻る』となる仕様。
今回は、コマ1コマ4の間を往復させたいので、画像の指定をコマ1 → 2 → 3 → 4 → 3 → 2(4種6枚)とします。こうすることで往復ループが実現できます。

2. 次に右隣の赤矢印、持続時間の指定。持続時間とはそのコマを停止させる時間。
100=1秒です。つまり1/100秒単位で指定。また各コマ個別に値を設定可。
持続時間に関しては、右上赤矢印持続時間一括設定」ボタンで一括入力も可能。その後、各コマ個別の値を変更して調整。

3. 次に右側中央赤矢印、透過色の指定方法。
今回は「画像位置指定」を使用。“コマ画像の四隅一点の色を透過色にする”方法です。例は「画像1」の「左上隅の色」
準備した画像の「左上隅の色」は“”。⇒“”が透明色に。もし絵の中に“”があるとそれも透明になってしまうので、コマ画像作成時に注意。


1.~3.ができたら右下赤矢印アニメーションGIF作成ボタンを押すと作成開始。数秒で完了し、画面右下にGIFアニメが表示されます。

それを見ながら上記の操作を繰り返し、チェック&各コマの持続時間を真剣な面持ちで調整していきます。


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

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


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


【関連記事】
アホ→トイレつまりを1分で直すための道具紹介
人気!トイレつまりを1分で直す!【業者不要】
人気!SketchUpで3Dの立体図形を描いてみる
透過PNGを作成できる便利サイトと抽出のコツ【フリーソフト不要】









シェアされると小躍りして喜びます。

0 件のコメント:

コメントを投稿