GIMPでロゴマルシェの画像・Faviconファイルの背景を透明に

Favicon ロゴマルシェ

 

自分のサイトのFavicon(ファビコン)を格好良くしたいですよね。

そんなとき、素敵なFaviconのフリー素材をダウンロード出来るサイトとして、ロゴマルシェが便利です。

 

ロゴマルシェ

 

自分では到底作れないオシャレなデザインのロゴマークをフリーで提供してくれるのですからありがたいです。

画像をよく見ると、細かいですが、ロゴマルシェの文字が入ってますが、あまり気になりません。

特にFaviconが目的であれば、全く目立たないですね。

 

ちなみにあのSEOテンプレートの賢威のデフォルトのFaviconも、このロゴマルシェのデザインを使っていますよね。

 

さて、その賢威のデフォルトのFaviconですが、ロゴの周りが白い背景になっていて、気になりませんでしたか?

こんな感じです。

Favicon 背景 白くなる

 

ちょっとこの画像だと見づらいですが、水色の球状のロゴの周りが白いですよね。

タブがアクティブだと目立たないですが、そうじゃないと、少々白い枠が気になってしまい、何とかしたいなと思っていました。

 

あまり色や背景までいじる画像加工は得意ではないですが、調べて出来るようになったのでシェアしますね。

 

1. ロゴマルシェからお好きなロゴをダウンロードする。XX.aiファイル。

ダウンロードしたaiファイルは、OfficeはAdobe PDF Readerで開く事が出来ます。

わたしは、Adobeではなく、Foxit Readerを使っていたので、それで開きました。

ロゴ1

Alt+7をおして、ロゴ部分だけ切り取ります。

2. ロゴ部分だけを切り取る

このやり方はなんでも良いです。aiファイルを開いて、Alt+Print Screenで全体をキャプチャしてから、PhotoScapeでトリミングしても問題ありません。

ロゴ2

コピーした画像をPhotoScapeで開きます。

そして枠ぎりぎりのところまでトリミングします。

logo3

ここまできたら、GIMPを立ち上げます。

3. GIMP起動

コピーアンドペーストでコピーしたので、下のように、クリップボードから開きます。

GIMP1

4. GIMPで背景を透明にする

次にロゴの本体と背景を切り分けるために、本体部分を選択します。

ツール ⇒ 選択ツール ⇒ ファジー選択、を使うと、本体部分を上手く選択してくれると思います。

logo4

選択した結果、

logo5

こんな感じになります。

次に、背景の白い部分を右クリックします。

右クリックした後、編集 ⇒ 消去 をしてください。

logo6

すると、背景の白がなくなるので、

logo7

このように、本体部分だけが浮かび上がってくれます。

5. Favicon.icoの32ピクセルの大きさにする

次に大きさを変えていきます。このままだと大き過ぎますからね。

logo8

メニューの画像 ⇒画像の拡大・縮小を選択します

logo9

大きさは好みがありますが、わたしは、30ピクセルにします。幅と高さの連結は切って構いません。

目いっぱい広げる場合は、32ピクセルにしても大丈夫だと思います。

 

次に、キャンパスサイズを変更します。

logo91

画像 ⇒ キャンパスサイズの変更

 

logo92

ここで32ピクセルに指定し、オフセットをそれぞれ1にすることで、画像がキャンバスの真ん中に来ます。

これで編集は終わりですので、最後にファイル化します。

 

6. Favicon.icoとしてエクスポートする

メニューのファイル ⇒ エクスポート

logo93

 

拡張子を、icoファイルにします。

※ 背景が透明なファイルは、JPGでは上手く保存できませんので、icoにしない場合は、PNGやGIFを選択してください。

 

logo94

32bppのままにして、エクスポートボタンをクリック。

これで完成です!

 

7. サーバーにUpload

出来上がったFaviconファイルをサーバのFaviconファイルと置き換えれば完了です。

キャッシュされている事が多いので、しばらくしてから変更されているのを確認するのも良いですし、初めてアクセスするブラウザで見てみる、キャッシュをクリアするなどして確認する事が可能です。

 

賢威の場合は、FTPでサーバにログインして、

/ドメイン名/wp/wp-content/themes/keni61XXXX の下にあるfavicon.icoファイルと置き換えればOKです。

※ 画像ではFavicon.icoとなっていますが、大文字小文字を区別するので、favicon.icoが賢威の場合は正解ですね。

コメントを残す

サブコンテンツ

このページの先頭へ