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. 各コマ画像を準備

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

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

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

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

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

各画像ができたら「.png」形式で保存します。この用途の場合、輪郭のにじみが激しい「.jpg」「.jpeg」形式は適しません。


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


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

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

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

1. 各コマ画像の指定。画面左側矢印ボタン押す→ファイル選択を繰り返していきます。

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

今回は、コマ14の間を往復させたいので、画像の指定をコマ1 → 2 → 3 → 4 → 3 → 2(4種6枚)とします。こうすることで往復ループが実現。

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

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

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


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


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


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


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


因みにこちらの商品↓、「幸せになれた」「感激!」「最高!」等、各々が各々の言葉を用いてカスタマーレビュー中でその感動を伝えております。

相棒と呼ぶ方、見る度に「ありがとう…。」と語りかける方まで存在。ここまで大絶賛された商品が他にありますでしょうか。


大絶賛の声を是非お聞き下さい。私は隅々まで読ませて頂きました。







シェアされると喜びます。

0 件のコメント:

コメントを投稿