まとめ 楽しい話

透明背景のファビコンの簡単な作り方（FireWorks)

背景が透明のファビコンの作り方です。ファビコンはスマートフォンでは上の図のように表示され複数のページを立ち上げた時にわかりやすくデザイン的にもオシャレです。
※自分用の備忘録です。かなり昔のFireWorksなので情報が古いかもしれないです。「ファビコン透明」等でググると自動生成できるサイトがあるみたいです。

ファビコンはパソコンでは上の図のように表示されます。一番右のページはファビコンがないため、どこの何のページかわかりません。中央に黒い四角に赤い「天」の字が書いてあるのが天才日記のファビコンになります。

ファビコンは背景を透明にするとオシャレです

様々なファビコンがありますが、背景を透明にしたファビコンはすごくオシャレに見えます。背景がベタ塗りだと簡単に作れるのですが、背景を透明にしたファビコンはどうやって作るのか説明していきます。

カッコイイ ファビコンの例です

左からGoogle、ツイッター、バリュードメイン、天才日記です。天才日記は背景が透明になってないのでどこにでもある感じ。カッコ良さがあまりありません。グーグル、ツイッター、バリュードメインは背景が透明なので他のサイトと見比べて目立ちます。

FireWorksでファビコン製作の説明をします

FireWorks（ファイヤーワークス）でのファビコンの作り方です。ヴァージョンが古いですが…見やすいサイズで例として50pixel☓50pixelで作ります。
今回は丸の上に「セ」という文字をのせます。丸を描きその上に「セ」の文字をバランスよく乗せます。丸を選んだ状態で、左下にある数値に幅、高さ共に「50」。「X、Y」共に「0」になっていることを確認してください。これで50pixelの真円がX軸、Y軸共にキャンパス内でピッタリのサイズになっていることになります。

画像が選択されていない状態で、キャンバス（背景）を透明色にします。（下の図）

思ったとおりの形、色ができたらサイズを「イメージサイズ」から16pixel☓16pixelにします。サイズが違うと画像がボヤケたりギザギザになる場合があるので16pixel☓16pixelにしましょう。細いフォントの場合、綺麗に表示されない場合があります。その場合は、文字をコピー＆ペーストで2つ3つ重ねると綺麗に表示されます。（書き出す前に「f12」でブラウザで実際のサイズで確認できます）

16pixel☓16pixelにすると上の図のような感じになります。ファイルから「書き出し」します。この時ファイル形式をPNG32でマット部分が透明になってることを確認し書き出してください。 出来上がり！ついでにもっと透明感のある黒いクレヨン文字のラインが出たファビコンも作成しました。

Googleクロムのブラウザ表示の場合

今更、気づきましたがグーグルのChromeの場合、ページを選択している時は背景が「白」で選択していない時は「グレー（#cccccc）」になります。それをうまく利用しているのがバリュードメインのファビコンです。オシャレすぎ！ページを選択してる時と、してない時の画像が変わっています。コレはグッドアイディア！ブラウザがGoogleChromeの場合に限りますが、背景のグレーを利用して表情を変えてます！メッチャかっこ良すぎ！どこかで真似しよう！！！

実際にグレー背景を利用したファビコンをつくりました

見づらいかもしれないですが、選択してない時（左）とページを選択した時（右）の画像が微妙に違うのわかりますでしょうか？ページを選択した時（右）は、色が#ccccccの「影」が出るようにしましたｗブラウザ（実際に見たファビコン）では影がわかるのですが…拡大して逆にわかりにくなったかも？

------
あ！ページ選択時の背景白（#f2f2f2）も使えば三種類の表現ができるぞ！！！（またトライしよう！）
------Ψ