今回の記事は、背景を透明にした透過可能なGIFファイルを作成できる便利サイトの紹介です。無料で登録一切なし、簡単操作のサイトです。
ポク太郎です。
ブログやホームページなどでアニメーションが動いていると画面が華やかになります。ですが、決まりきった四角形だと高級感がありません。
今回は、透過色を指定することで自然なGIFアニメーションを作成してくれるサイトの紹介です。
透過色とは
コンピュータで扱う画像ファイルは必ず横が水平、縦が垂直の四角形。完全な四角形なので不自然です。
そこで、目的の形状だけ表示する方法が透過色を利用した方法。周辺の色を透過色として定義し、背景を透明にして表示します。
透過色を利用して透過GIFアニメを作ってくれるサイトを以下に紹介、作り方を説明します。
すごく簡単な透過GIFアニメ作成
使用するのはこの便利なao-systemさんのサイト→アニメーションGIFを作ろう!。正式名称は分かりません。
作成作業全体の流れは、
| PC上 | 手順0 | 必要なコマ画像複数枚を準備 |
|
↑ サイト上 ↓ |
手順1 | コマ画像をサイトで指定 |
| 手順2 | 各コマの持続時間を指定 | |
| 手順3 | 透過方法の指定 | |
| 手順4 | GIFアニメ作成ボタン | |
| 手順5 | 完成GIFアニメをダウンロード |
各コマ画像を準備～手順0
使用する画像は、Windowsに標準添付の「ペイント」や「Photoshop」等の画像編集ソフトを使って作成します。画像の描き方はこの記事では触れておりません。
アニメーションとはパラパラ漫画と同じ。各コマの画像を準備する必要があります。
それぞれは一瞬しか表示されませんが、選び抜かれた大事なコマ。ですので、すべてのコマを真剣な面持ちで準備します。
 |
 |
 |
 |
| コマ1 | コマ2 | コマ3 | コマ4 |
現在、これらの画像の周辺色は白。この白を“透過色”に指定することで背景を透明にします。
画像ができたら「.png」形式で保存します。
今回は、コマ1 → 2 → 3 → 4 → 3 → 2 → リピートと動かしてみます。（往復ループ）
往復ループ実現と使用サイト～手順1
コマ画像がすべて準備できたら、それらを先ほどのサイトへ登録しGIFアニメを作成します。
ループはリピートを指定する方式。つまり『1、2、…、最後 → 1に戻る』仕様。
今回は、コマ1～4の間を往復させたいので、画像の指定を以下のように。
こうすることで往復ループが実現します。
持続時間の入力と調整～手順2
持続時間とはそのコマを停止させる時間のこと。
100＝1秒で設定します。つまり1/100秒単位で指定可能で、各コマ個別に値を設定可。
透過色の指定～手順3
今回は「画像位置指定」を使用。“コマ画像の四隅一点の色を透過色として選択する”方法です。例では「画像1」の「左上隅の色」を選択。
アニメ作成～手順4
数秒で完了し、画面右下にGIFアニメが表示されます。サイズ大な画像の場合は少し時間が掛かり、ページ下方に表示されます。
表示されたアニメを見ながら手順1～4を繰り返し、チェック＆各コマの持続時間を真剣な面持ちで調整していきます。
完成gifのダウンロード～手順5
その入手した.gifファイルをホームページにアップするなどして使用します。（完了）
ふぅ。今回の作業は一切冗談なしの真剣勝負だったので疲れました。
因みにこちらの商品、非常に安価でありながらギフトラッピングが使用できます。ちょっとした贈り物に最適です。
コメント