ロゴ画像の背景を透過する方法。GIMPと無料WEBツールを使い比べ!

CanvaやPhotoScapeを使ってブログのロゴ画像を作ったはいいけれど、背景を透過したい!

画像の背景透過ができるソフトといえば、Photoshopやillustratorがあるけれど…。

きじとら
無料で透過したいんです。

ちゃとら
だよね。

ロゴ画像など、単色使いが多いイラスト系の画像なら、WEB上で使える無料ツールや無料ソフトGIMPで十分綺麗に背景透過できます。

そこで今回は、WEBツールとGIMPではどっちがいいのか、背景透過を使い比べてみました。

WordPressテーマ、Diverを使ってるなら固定ヘッダー用のロゴは透過しておきたいところ。

ロゴの用意がまだなら、Canvaでの作成方法もチェックしておいてくださいね↓

ロゴ画像の背景透過をしたい理由

当ブログで使用しているWordPressテーマ「Diver」には固定ヘッダーといって、ページをスクロールした時に、ヘッダーメニューが追従してくれる機能があります。(設置は自由)

PC表示の場合はこんな感じ↓

スマホだとこんな表示に↓

記事を読んでいる途中からでも、トップページに飛んだり、検索ボタンを使用してもらうことができます。

固定ヘッダーの背景とサイトタイトルに設定したロゴの背景を透過しておくことで、読み手の邪魔になりにくいので、背景透過が使えるツールが欲しかったんですよね。

背景透過もできる代表的な無料ソフト「GIMP」

Photoshopなどの機能を簡易的に使える「GIMP」は無料ですが、使用するためにはダウンロードが必要です。

GIMP公式ダウンロードサイト

ブルー
Windows10での流れになるけど、わかりにくいとこを挙げておくな

GIMPのダウンロードはどっちのボタンから?

GIMPの公式ページからダウンロードしようとすると、以下のような画面がでてきます。

ぶち

うーん。どっちをクリックしたらいいかわかんないよ…

 

Windowsの場合は右のボタンからでOK。

きじとら
左のBitTorrentユーザー用らしいです。

GIMPのインストール

次に以下のような画面がでてきたら、for all usersを選択。(PCを複数人で使い分けていて、GIMPのインストールを自分だけに絞る場合はfor me only)

言語の確認があるけど、セットアップに日本語はないので、EnglishのままOK。

Installをクリック。

インストール(セットアップ)が完了したら、Finishをクリック。

よく使用するなら、デスクトップやタスクバーにピン留めしておくと楽。

GIMPを立ち上げてみると、沢山の機能が使えることが一目でわかります。

ぶち

これが逆にGIMPへの苦手意識を強めてくれるんだよね…

 

でも背景透過くらいなら、操作は簡単。

GIMPの使い方①簡単な背景透過のやり方

透過したい画像は「ファイル」⇒「開く/インポート」から呼び出すこともできますが、

GIMPの編集画面中央に、背景透過したい画像をドラッグ&ドロップすると簡単。

今回は背景の白い部分を透過したいんですが、左側のツール一覧より、魔法の杖のようなマークを選びます。

そのまま透過したいところ(背景の白い部分)をクリックして、Deleteキーを押すだけで、背景が透過されます。

きじとら
クリックした時、透過したい部分には点線がチカチカ表示されるのでチェックしてください。

ちゃとら
グレーのチェックになってる部分が透過されたってことね。

背景透過した画像は、「ファイル」⇒「名前を付けてエクスポート」をクリック。

ブルー
名前を変更しないと、元の画像が上書きされるんだな

保存先も選べるから、変更したら「エクスポート」をクリック。

もう一回ウィンドウが出現するけど、そのままエクスポートしてます。

GIMPの使い方②文字の間の背景色も透過する透過方法

さっきの画像はメインのイラストと背景がしっかり線で区切られていたから簡単にできたけど、次のような画像の際はちょっと操作方法が違ってきます。

きじとら
魔法の杖では、区切られた範囲内の透過しかできません。

はち
文字の中をいちいちクリックしていくのはちょっと面倒だもんなぁー

そんな場合は、決まった色を透過すると簡単です。

「色」⇒「色を透明度に」をクリック。

ポップアップウィンドウの中のスポイトマークをクリックして、透過したい色の部分をクリックします。

透過したいカラーが表示されたら、OKを押すと、文字の中の部分まで透過されました。

これだけでも簡単だし、最初からGIMPを使って作成すれば、透過された背景にロゴを作成していくこともできます。

ソフトのダウンロード不要!WEB上で画像の背景透過ができる無料ツール

ぶち

そうはいってもGIMPはあんまり使わないんだし、ダウンロードするのもなんだかな…

はち
それなら、WEB上で使える無料ツールもあるんだってさ

今回使用してみたのは以下の3つ。

探せばまだまだありそうだけど、とりあえずはこのくらいで。

画像透過ツール

「画像透過ツール」を使ってみました。

透過したい画像を読み込むか、エリア内にドラッグ&ドロップ。

「透過の設定」で「色モード」にチェックが入っていることを確認して、透過したい部分をクリックすると、同じ色の部分を一度で透過することができました。

進む・戻るボタン、拡大鏡機能がついているのが嬉しいですね。

透過した画像は「画像化」をクリックすると別で表示されるので、右クリックで「画像に名前を付けて保存」するだけです。

PECO-STEP

「PECO-STEP」を使って見ました。

こちらも画像の呼び出しは「ファイル」から選択するか、枠内にドラッグ&ドロップします。

透過対象が「クリックした色」になっているのを確認して、透過したい色をクリック。

さらに、不透明度の調整もできるようになっています。

背景透過できた画像は、「ファイル」⇒「保存」します。

画像背景透過処理

「画像背景透過処理」を使ってみました。

透過したい画像をエリア内にドラッグ&ドロップしたら、透過したい色をクリック。

背景が透過された画像が下に表示されるので、右クリック⇒「画像に名前を付けて保存」で終了です。

工程がシンプルな分、一番使いやすく感じました。

画像の背景透過、GIMPと無料WEBツールで違いはある?

GIMPとWEBツール、どっちを使ったらいいの?ということで、同じ画像を背景透過・比較してみました。

元々の画像はこちらを使用↓

背景のミントグリーンを透過しました。

 

ぶち

違いがわかんないんだけど…

使用したのは、

①画像透過ツール

②PECO-STEP

③画像背景透過処理

④GIMP

です。

①~③のWEBツールは全くといっていいほど同じ仕上がり。

ですが、④GIMPはこのサイズでは違いがわかりにくいものの、拡大してみるとWEBツールより若干綺麗な仕上がりになっていました。

ブログのロゴやサイトアイコン(ファビコン)くらいの大きさ、細かい色使いがなければWEBツールでも十分満足できます。

画像の背景透過まとめ

ロゴやアイコンなど、単色使いのシンプルなデザインなら、WEBツールでもそこそこの背景透過ができることがわかりました。

きじとら
しかも操作が簡単。

ロゴ自体の作成や細かい透過作業、レイヤーを使った合成などまでできるのは、やっぱりGIMPですね。

CanvaもPhotoScapeもそうですが、機能面での比較はできないので、使いたい機能があるツールを上手に使いわけたらいいかと思います。

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事