スポンサーリンク

ヘッダーロゴと画像の結合&背景を透明化する方法

ロゴと画像の透明化 Wordpress
この記事は約4分で読めます。

 こんにちは、超初心者のエイじーです。

 ヘッダーロゴの作成に関しては、次の記事で書いていますので参考にしてください。

 さて色々記事を見て、その方のホームページやログのトップページを見るとヘッダーロゴにアイコンみたいな画像が付いているものをよく見かけます。これは、どのようにして作っているのだろうかと不思議に思っていました。

 画像を結合する方法やロゴの背景画を透明にする方法などを調べていたら、やり方は色々あることが分かりました。それらの中で超初心者でも簡単に作成できる方法がありました。2つのソフトを使いヘッダーロゴと画像を結合し、その画像の背景を透明化するという方法です。

ヘッダーロゴと画像の結合&背景を透明化する方法
  • ヘッダーロゴと画像の結合には、Photoscapeを活用
  • 背景を透明化する方法には、以下の2つの方法があります。

    その1:手軽に透明pngソフトを活用

    その2:背景を透明化するフリーのサイトを活用

ヘッダーロゴと画像を結合する方法

 Photoscapeは画像に文字を入れたり、ある部分を囲ったりなど容易にできるソフトで、便利に活用しております。画像同士の結合も簡単にできます。保存できるタイプもpng形式に対応しており、Worfpressの記事での説明画像に大いに活用しているソフトの一つです。もし使う気があるのであれば、下のバナーからインストールして使っていただければと思います。

 ここでは、Photoscapeは既にインストールされているものとして話を進めます。Photoscapeを起動してください。起動した画面が下の画像となります。

 この画像で赤で囲んだ「結合」をクリックします。下の画面となります。

赤で囲んだ部分に左から結合したい画像を順にドラッグして放り込んでいきます。結合画像の設定を右のメニューから選びます。

画像の結合の設定
  • 緑で囲んだ部分は画像の並べ方 ⇒ 側に設定
    横に並べて結合
  • 青で囲んだ部分は画像のサイズの合わせ方 ⇒ 最も小さい画像のサイズに設定
    最も小さい画像に合わせる
  • 茶で囲んだ部分の写真の間隔 ⇒ ここでは10に設定

 結合された画像を保存します。「保存」をクリックすると下の画面が出てきます。

 この画面でファイル名を入力(ここでは、練習用ヘッダーロゴ)、ファイル形式をpng形式として「保存」をクリックして下さい。

 これで結合された画像がpng画像として記録されたことになります。

背景を透明化する方法

その1:手軽に透明pngソフトを活用

 まず、「手軽に透明png」をインストールしましょう。

 下記のバナーをクリックして手軽に透明pngインストーラ版をご自分のWindowsパソコンの環境に合わせ、32ビット版か64ビット版のどちらかを選んでダウンロードして、インストールしてください。

 インストールした「手軽に透明過pngソフトを」立ち上げます。先に作成しヘッダーロゴとニックネームを結合した画像を読みこっます。その画面が下の画面です。

 この画面で、赤で囲んだ誤差許容度(0-255)とやり直しアイコンを色々試して最も良いと思うものを作成して下さい。

 やり方は簡単です。マウスをこのソフトンの編集画面に持っていくとマウスのアイコンが絵の具を垂らすようなアイコンに変化します。絵の具を垂らすようなアイコンを画像の背景の所に持って行ってクリックするだけです。

 私の場合は、誤差許容度を60にして作成してみました。下がその画面です。

 これでよければ、この画像ファイルを保存して下さい。保存したファイルを開いた画像が下の画像になります。

その2:背景を透明化するフリーのサイトを活用

 背景を透明化するフリーのサイトに下の記事をクリックして入ってください。

 入ったら「その1」と同様にヘッダーロゴとニックネームを結合した画像を読みこっます。下の画面が読み込んだ状態です。

 この画面で、色の許容値と初期化のボタンを使い色々試して最も良いと思うものを作成して下さい。

 やり方は簡単です。マウスをこのソフトンの編集画面に持っていくとマウスのアイコンがプラスのアイコンに変化します。プラスのアイコンを画像の背景の所に持って行ってクリックするだけです。

 私の場合は、色の許容値を55にして作成してみました。下がその画面です。

 これでよければ、この画像ファイルを「画像化」のボタンをクリックして保存して下さい。保存したファイルを開いた画像が下の画像になります。

コメント

タイトルとURLをコピーしました