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

手描きのイラストや文字を透過PNG画像にする方法

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

手描きのイラストをパソコンに取り込んで背景を透過させたPNG画像にすると、活用の幅が広がります。

例えばこのイラスト・・・

目玉おやじ

魚沼情報サービス代表の対馬の家で「目玉おやじ」と呼ばれているキャラクターです。

これをパソコンに取り込んで、この記事で紹介するやり方で背景を透過にしたものを写真に重ねるとこのような出来上がりになります。

目玉おやじを写真に重ねたもの

達筆の人に書いてもらった屋号や題字などもこのやり方で加工してパンフレットやウェブサイトで利用することができますよ。

ということで、そのやり方を紹介します。

手順1.イラストをスキャンする

まず複合機などでスキャンして、スキャンした画像をパソコンに取り込んでおきます。

そしてイラストのまわりの不要な部分を トリミングにより削除しておきます。

これがその画像(JPEG形式)です。

手描きのイラストをスキャンしたもの

このままでは背景が透過になっていないので、使いみちが限定されてしまいます。

写真に重ねるとこんなかんじになってしまいます。

スキャンしたままの画像を写真に重ねるとこんなかんじ

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

ここからは Inkscape というフリーソフトを使用します。Inkscape は以下のサイトから入手できます。

Inkscape を起動して、手順1.で保存した画像ファイルを Inkscape のウィンドウにドラッグして読み込みます。

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

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

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

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

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

ビットマップのトレース

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

この時点で Inkscape の画面には読み込んだ画像とトレースしてできた画像の2つがあります。

この2つは区別しづらいですが、右クリックしてみるとわかります。

読み込んだ画像とトレースしてできた画像の区別

メニューに [フィル/ストローク] が含まれるのが トレースしてできた画像です。

読み込んだ画像はもう不要ですので、選択して Delete キーで削除しておきます。

手順4.色を指定する

トレースしてできた画像を選んで、[オブジェクト] メニュー ⇒ [フィル/ストローク] を実行し、フィル/ストロークの画面で色を指定します。

Inkscape フィル/ストローク

R・G・Bのスライダーを動かして色を選ぶこともできますし、右下の RGBA の入力欄の8桁の先頭6桁にカラーコードを指定することもできます。最後の2桁は ff のままにしておきます。

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

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

Inkscape - PNG 画像にエクスポート

これで作業完了です。

フィル/ストロークの画面で色を変えて何パターンか保存しておくとよいです。

この方法でデータ化するメリット

Inkscape 以外のソフトを使って背景部分を透明化する方法もありますが、この記事で紹介したやり方でデータ化すると輪郭がくっきりなめらかに仕上がってファイルサイズも小さくなります。

もうひとつ、色を自由に変更できるという大きなメリットもあります。

お試しください。

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

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

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

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

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

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

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

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

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