無料ソフトで画像をだんだん透明になるグラデーションにする方法
2015年10月17日

無料ソフトで画像をだんだん透明になるグラデーションにする方法

ニコニコ動画とYouTubeにオリジナル曲の動画を投稿しました!


さて、この動画を作るにあたって、1つ壁がありました。

古代の住人(左側に出てくる親子。セピア色)と現代の旅行者(右に出てくる人。水色)、2つの画像をグラデーションにしてつなげたかったのですが、なかなかやり方が分からなかったのです。

Adobe Photoshop Elements 7.0を持っているので、それでできるかな? と思っていたのですが、僕の環境ではできなかったんですよね。

とりあえず、まずはPhotoshop Elementsを使ったメジャーなやり方を紹介しておきますね。


Photoshop Elementsを使った透過グラデーション


「マスク」機能を使えば簡単ですが、Elementsにはない機能なので、別のやり方でやります。

@透過グラデーションにしたい画像とは別のレイヤーに、グラデーションツールで、何色でもいいので不透明から透明へのグラデーション画像を作る。

Aそのレイヤーを選択。すると、選択の濃さもグラデーション状になる(グラデーション状に選択される)はず。(僕の環境ではできませんでした。やり方が間違っているのかも知れませんが)。

Bその選択範囲を維持したまま、透過グラデーションにしたい画像のレイヤーに移動(同上)。

CDeleteすると、選択の濃さがグラデーションになっているので、画像の消え方もグラデーションになり、だんだん透明になるグラデーションができる(同上)。

Photoshopでのやり方を説明してくださっているサイト:
ASCII.jp:ElementsでもOK!だんだん透明になるフォトショ画像の作り方|特集:Photoshopで始めるカンタンWebデザイン
http://ascii.jp/elem/000/000/181/181894/

ですが、僕にはA以降がどうしてもできなかったんですよね^^;
Yahoo!知恵袋には、Photoshop Elements 7ユーザーによる僕と同様の質問が投稿されていて、「グラデーションの色部分のみを選択することが出来ませんでした」ということだったのですが、最終的には
画像の上に「描画色から透明に」のグラデーションを作成→Ctrl押しながらレイヤーの筆マークをクリック(ここが分りませんでした)でグラデーションの選択範囲作成→元画像の選択部分を削除 で出来ました。
と解決していました。

……筆マーク??

確かに、Photoshopのレイヤーには目のアイコンの横に筆のアイコンのあるバージョンもありますが、僕のPhotoshop Elements 7にはないぞ??
(設定が違うだけの可能性あり)

というわけで、数時間に及ぶ格闘の末(もっと早く諦めろよ!w)、Photoshop Elements 7でやることは諦め、別のソフトでやることにしました。


無料ソフトGIMPを使った透過グラデーション


GIMPという、無料の画像編集ソフトがあります。これを利用します。

@GTMPをダウンロードする。

GIMP公式サイト
http://www.gimp.org/

公式サイトは英語なので、窓の杜のページも紹介しておきますね。
http://www.forest.impress.co.jp/library/software/gimp/
※最新版とは限らないので、最新版が欲しければ公式サイトに行ってください。

Aうーんと、あとは……自分の言葉で説明しようと思いましたが、どうしても僕が参考にした次のサイトの丸写しになってしまうので、リンク先を参照してください!(丸投げ)

GIMPで写真を透明グラデーションにする方法: WEBサイトを作り始めたひとの覚書
http://websyosinsya.seesaa.net/article/118457775.html

このリンク先のページが消えてしまった時のために軽く説明しておきますが、要はPhotoshopのマスク機能がGIMPなら無料で使えるということなんです。
レイヤーを右クリックし、「完全不透明(白)」のマスクを追加して、レイヤーウィンドウの右クリックメニューの「レイヤーマスクを編集」にチェックが入っている状態で、黒から白へのグラデーション(ブレンド)をかけるだけです。

うまく出来ない場合は、レイヤーマスクが有効になっているか確認してみてください。
レイヤーウィンドウが表示されない場合は、メニューバーの「ウィンドウ」→「最近閉じたドッグ」にレイヤーウィンドウがないか確認してください。

注意点は、PING形式で保存(エクスポート)しないと、透明度を保存できないということです。
GIMP上で他の画像と組み合わせちゃって、画像全体が透明度0%になった段階で保存するなら、JPEG形式でも問題ありません。


例として、動画の背景画像の制作過程をお見せします!


@「古の街」っぽいフリー素材をお借りします。

48075190_p1.jpg

◆素材配布元:KEITO様

そう、なんと元々は写真だったのです!


APhotoshop Elements 7で「カットアウト」というエフェクトをかけます。

セピア.jpg

これだけで一気に「絵」っぽくなりました!
ついでに彩度を落としました。

きっと、他のソフトや無料の画像変換サービスでも、同じようなエフェクトがあると思います。
「写真をイラストに」などで検索してみてください。


B人物のシルエットをいい感じに置きます。

古代人.jpg

◆シルエット素材:シルエットAC

人物の透明度は20%にしました。(完全に不透明だとダサかったため)


C色や人物を変えたバージョンも作ります。

ブルー.jpg

現代人ブルー.jpg


D上で紹介した方法で、グラデーション式に不透明から透明になっていく画像を作ります。

古代人2.png


Eグラデーションで半透明になっている画像を、もう1枚の画像に重ねます。

グラデーション.jpg

下からもう1枚の画像が透けて見え、結果的に2つの画像がグラデーションでつながるというわけです。


あとは動画中でクロスフェードさせるだけで、色が変わったり人物が変わったりします。
スポンサーリンク
posted by Rei Yumesaki at 20:40 | PC関連 おすすめツール紹介 | 更新情報をチェックする
無料ソフトで画像をだんだん透明になるグラデーションにする方法
先月の人気記事 TOP5