WordPress + Lightning のサイト制作・カスタマイズ・サポートを承ります

イラストの白い背景を透過にする方法

稲穂と青空 パソコンのこと
WordPress サイト開設スターターパック

昨日の投稿に続き、Inkscape のネタです。

こういう ↓ イラストがあって・・・

稲穂のイラスト

この稲穂のイラストを写真に重ねて ↓ こういうふうにしたいと思っているのに・・・

稲穂と青空

このような結果 ↓ になってしまうことがあります。

稲穂と青空 失敗作

稲穂のイラストの背景が透過ではなく白色になっているために期待外れの結果になっているんです。

このような用途に使えるようにイラストの背景を透過にするやり方を紹介します。

手順1.Inkscape に画像を読み込む

昨日の投稿と同じく、フリーソフトの Inkscape を使用します。Inkscape は以下のサイトから入手できます。

Inkscape を起動して、イラストの画像ファイルを Inkscape のウィンドウにドラッグして読み込みます。

ビットマップ画像のインポート画面が表示されますので、そのまま [OK] ボタンをクリックします。

ビットマップ画像のインポート画面

手順2.ビットマップのトレースを行う

読み込んだ画像を選んで、[パス] メニュー ⇒ [ビットマップのトレース] を実行します。

表示された画面で [ライブプレビュー] にチェックをつけて、ライブプレビューを見ながらしきい値を調整して [OK] ボタンをクリックします。

背景の白色を透過するときには、しきい値を 0.980 くらいにするのがよいです。

ビットマップのトレース

[OK] ボタンをクリックしたら、このビットマップのトレースの画面は × ボタンで閉じておきます。

この時点で Inkscape の画面には2つの画像があります。

  • 読み込んだイラスト
  • トレースしてできた黒い画像

黒い画像に隠れてイラストが見えなくなっています。

【注意!!】ここで画像を動かしてはいけません。

手順3.クリップを設定

マウスでドラッグしてイラストとトレースした画像を囲みます。イラストをすっぽりと完全に囲めるように大きく囲んでください。

マウスでドラッグしてイラストとトレースした画像を囲む

両方の画像が選択されてこのような状態になります。

両方の画像が選択されてこのような状態になります

画像を右クリックして [クリップを設定] をクリックします。

画像を右クリックして [クリップを設定] をクリックします

これで背景が透過になりました。

背景が透過になりました

手順4.PNG 形式で保存する

[ファイル] メニュー ⇒ [PNG 画像にエクスポート] を実行し、PNG 画像にエクスポート の画面でエクスポート先(保存先とファイル名)を指定してから、[エクスポート] ボタンをクリックします。

PNG 形式で保存する

これで作業完了です。

WordPress サイト制作・カスタマイズ・サポートを承ります

このブログを運営している、魚沼情報サービスの対馬です。ブログをご覧いただき、ありがとうございます。

弊社は、WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。

ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メールなどを使用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、まずはお気軽にお問い合わせください。

パソコンのこと
シェアする
魚沼情報サービスをフォローする
魚沼情報サービスのブログ