| ←ラリーはかわゆい | 遊戯王再放送感想 第209話「死霊の村」→ |
2008,05,13, Tuesday
以前、Ico FX (IcoFX) での Favicon 作成方法について書いたことがあるんですが、ちょっと不親切かな‥‥と思いまして、詳細に作り方を書いてみることにしました。
Web で簡単に作れる Favicon とは違って、少し手間はかかるけど、綺麗な Favicon を作りたい！という方向けかもしれません。
ペイントツールを使って作った画像を使って Favicon を作製したい方には、お勧めの方法だと思います
Illustrator やPhotoShop などで作った透過色バリバリ使用の画像を簡単にマルチアイコンにしたいー！という方、それは正に私だッ!!(笑)
既に、Ico FX (IcoFX) の使い方について詳細な説明を書いていらっしゃるサイトや Blog もあるでしょうが、「まいっか」ということで！
画像を沢山使用しているので結構重く (ていうかウザく？) なってしまいます。
読みたい方だけ、続きからどうぞ～。
1. 元画像を作る。
作れるのならば、何を使っても構いません。
背景を透明にしたい、等の希望がある場合は、 gif や PNG など、透過色を使える画像形式で保存できるソフトを選んだ方が楽ですヨ
PhotoShop などで作るのであれば、PNG が良いんではないかと思います。
ロゴなどを作製する場合は、普通のペイントソフト(ラスターデータ)を使用するより、 Illustrator 等のベクターデータを扱うソフトを使った方が美しい仕上がりになります。
――が、所詮大きくても 256 ピクセルのアイコン作成ですから、そこまでこだわらなくてもイイかと。(^_^;)
ウチの場合、 Illustrator で Favicon を作ったんですが、せっかくですので別項目でその時の手順もご案内してみようかと思っています。
さて、ここで注意が。
Ico FX (IcoFX)は、同じ画像を元にした複数のアイコンを自動で作ってくれる機能があります。
この機能を上手く使いこなすには、より美しい(大きい)画像を使用する必要があります。
たとえば、32ピクセルのアイコンを作りたいときに用意した画像が16ピクセルのデータだったとします。
この場合、32ピクセルのデータを作る為に、16ピクセルの画像を拡大しなくてはなりません。
必然的に、ボケボケ画像になってしまいます。
ですから、自分が作りたい画像データより少し大きめの画像を用意するのがコツ、ということになります。
今回のメインはIco FX (IcoFX)の使い方なので、画像は用意出来たもの、と仮定します。
用意した画像は、48x48ピクセルの PNG 画像です。
2. 画像を読み込む
次にIco FX (IcoFX)で画像を読み込みます。
Ico FX (IcoFX)を起動したら、[File]-[Open] を選びます。
右の画像が、上記作業中の画面です。
すると、ファイルを選ぶダイアログが出てきます。
が、これがちょっとクセモノ。
最初に選択されているファイルの種類が「ico」なんですね。
ですから、今回用意したPNG画像は見えません。
そこで、ファイルの種類を「Images」に変える必要が出てきます。
開くファイルの種類を、下記画像のように、「ico」から「Images」に変えてください。
さて、無事に先程作製したファイルが見つかったと思います。
このファイルを開くときに、もう一工夫
読むこむファイルの大きさに合わせて、イメージサイズを決め打ちしてしまいましょう。
そうすれば、ピッタリサイズのアイコンが作れますヨ
作った画像を読み込むとき、「New Image」ダイアログが出てきます。
[Color]は、透過色を使っている場合は、必ず「True Color + Alpha Channel (32bit)」を選んでください。
そうでない場合は、「True Color (24bit)」で問題ないと思いますが、「True Color + Alpha Channel (32bit)」を選んでおけば、まず間違いないです。
[Size]は、自分が作った画像サイズとピッタリの大きさか、1ピクセル大きめに設定して読み込むとイイ感じです。
この時、[Square]のチェックは外さないように！
これで、無事画像が読み込めました。
次の作業に映りましょう！
3. 複数のアイコンを作る
早速、複数アイコン作成に入ります♪
メニューから、[Icon]-[Create Icon From Image (Ctrl + I )] を選んでください。
すると、「Icon From Image」ダイアログが出てきます。
ここで、作りたいビット数と、サイズを選べばOK！
なんて簡単なんだー！
今回は、フルカラー48ピクセル、32ピクセル、16ピクセルと、256色48ピクセル、32ピクセル、16ピクセル、最後に16色の48ピクセル、32ピクセル、16ピクセルアイコンを内包する、マルチアイコンを作ることにします。
早速チェックを入れて、「OK」を押しちゃいましょう
透過色つきのマルチアイコンファイルが出来ました。
左のウインドウに、先程チェックを入れたアイコンのカラーとサイズがきちんと並んでいることを確認してみてくださいね。
ここまでくれば、あと一息！
ラストスパートです♪
4. アイコンを保存する
それでは、保存工程に入りましょう。
[File]-[Save]を選びます。
すると、セーブ用のダイアログ「Save As」が出てきます。
ここで、favicon という名前を付けて、分かりやすい場所に保存しましょう。
これで、マルチアイコンの出来上がり!!
さあ、最後の工程です。
5. アイコンファイルをアップする
作製したマルチアイコンファイル favicon.ico を、サーバーにアップしてください。
基本は、サイトのトップページを置く場所に置いておく。コレです！
ウチの Blog の場合、サーバーが『moglie.s21.xrea.com』ですから、この直下に置く、ということになります。
ここに置いておけば、まず間違いないです。
せっかくマルチアイコンを作ったことですし、下記のタグを記入しておくとパーフェクトです♪
<link rel="SHORTCUT ICON" type="image/vnd.microsoft.ico" href="/favicon.ico">
(このタグは、 favicon.ico がサーバー直下のフォルダに置かれていることを前提にしています。『/favico.ico』と書くことで、HTMLファイルがどこにあろうと、必ずサーバー直下のfavicon.icoを読みに行くことになります。)
必ずヘッダー内 <head>～</head> に書いて下さいね。
これで終わりです。お疲れ様でした
Ico FX (IcoFX) では、アイコンファイルを読み込んで PNG などの形式で書き出したり、自力でドッター出来たり色んな機能が充実していますので、使い込むのが楽しいアプリケーションですヨ
フリーなのが嘘みたいです。
作者様、ありがとうございまーす！
■蛇足のお話
IE 以外のブラウザの場合は、別の場所に置いて、その場所を指定することも出来ます。
その場合、上記でご案内したタグではなく、別のタグ形式で指定する必要が出てきますのでご注意を。
ウチの場合は、本サイト (http://www.moglie.info/) で、遊戯王・日本一ソフト・それ以外のページで色替えとアイコン替えをしたりして遊んでいます♪
CSS とセットで切り替えると、可愛くて楽しいですよー
本当は IE でもアイコン替えは出来るし、ウチでも一部やってるんですが――やってもあまり意味がないというか。orz
結局の所、お気に入りに保存するときぐらいしか Favicon の意味がないカンジなので、凝ってみてもユーザーさんに気付いていただけないんですよね。
だから、とりあえずカレントフォルダに Favicon を入れておけばいいか‥‥的な考えになってしまうという。
カレントフォルダに置いておく場合は、最悪 HTMLファイルへの記入がなくても大丈夫ですし‥‥。
超邪道だけど。(^_^;)
次回があれば、Ico FX (IcoFX)での画像書き出し方法とか、 Illustrator でのファイルの作り方でもやってみようかな？
■参考リンク■
ウィキペディア Favicon
Web で簡単に作れる Favicon とは違って、少し手間はかかるけど、綺麗な Favicon を作りたい！という方向けかもしれません。
ペイントツールを使って作った画像を使って Favicon を作製したい方には、お勧めの方法だと思います
Illustrator やPhotoShop などで作った透過色バリバリ使用の画像を簡単にマルチアイコンにしたいー！という方、それは正に私だッ!!(笑)
既に、Ico FX (IcoFX) の使い方について詳細な説明を書いていらっしゃるサイトや Blog もあるでしょうが、「まいっか」ということで！
画像を沢山使用しているので結構重く (ていうかウザく？) なってしまいます。
読みたい方だけ、続きからどうぞ～。
1. 元画像を作る。
作れるのならば、何を使っても構いません。
背景を透明にしたい、等の希望がある場合は、 gif や PNG など、透過色を使える画像形式で保存できるソフトを選んだ方が楽ですヨ
PhotoShop などで作るのであれば、PNG が良いんではないかと思います。
ロゴなどを作製する場合は、普通のペイントソフト(ラスターデータ)を使用するより、 Illustrator 等のベクターデータを扱うソフトを使った方が美しい仕上がりになります。
――が、所詮大きくても 256 ピクセルのアイコン作成ですから、そこまでこだわらなくてもイイかと。(^_^;)
ウチの場合、 Illustrator で Favicon を作ったんですが、せっかくですので別項目でその時の手順もご案内してみようかと思っています。
さて、ここで注意が。
Ico FX (IcoFX)は、同じ画像を元にした複数のアイコンを自動で作ってくれる機能があります。
この機能を上手く使いこなすには、より美しい(大きい)画像を使用する必要があります。
たとえば、32ピクセルのアイコンを作りたいときに用意した画像が16ピクセルのデータだったとします。
この場合、32ピクセルのデータを作る為に、16ピクセルの画像を拡大しなくてはなりません。
必然的に、ボケボケ画像になってしまいます。
ですから、自分が作りたい画像データより少し大きめの画像を用意するのがコツ、ということになります。
今回のメインはIco FX (IcoFX)の使い方なので、画像は用意出来たもの、と仮定します。用意した画像は、48x48ピクセルの PNG 画像です。
2. 画像を読み込む
次にIco FX (IcoFX)で画像を読み込みます。
Ico FX (IcoFX)を起動したら、[File]-[Open] を選びます。右の画像が、上記作業中の画面です。
すると、ファイルを選ぶダイアログが出てきます。
が、これがちょっとクセモノ。
最初に選択されているファイルの種類が「ico」なんですね。
ですから、今回用意したPNG画像は見えません。
そこで、ファイルの種類を「Images」に変える必要が出てきます。開くファイルの種類を、下記画像のように、「ico」から「Images」に変えてください。
さて、無事に先程作製したファイルが見つかったと思います。
このファイルを開くときに、もう一工夫
読むこむファイルの大きさに合わせて、イメージサイズを決め打ちしてしまいましょう。そうすれば、ピッタリサイズのアイコンが作れますヨ
作った画像を読み込むとき、「New Image」ダイアログが出てきます。
[Color]は、透過色を使っている場合は、必ず「True Color + Alpha Channel (32bit)」を選んでください。
そうでない場合は、「True Color (24bit)」で問題ないと思いますが、「True Color + Alpha Channel (32bit)」を選んでおけば、まず間違いないです。
[Size]は、自分が作った画像サイズとピッタリの大きさか、1ピクセル大きめに設定して読み込むとイイ感じです。
この時、[Square]のチェックは外さないように！
これで、無事画像が読み込めました。次の作業に映りましょう！
3. 複数のアイコンを作る
早速、複数アイコン作成に入ります♪メニューから、[Icon]-[Create Icon From Image (Ctrl + I )] を選んでください。
すると、「Icon From Image」ダイアログが出てきます。ここで、作りたいビット数と、サイズを選べばOK！
なんて簡単なんだー！
今回は、フルカラー48ピクセル、32ピクセル、16ピクセルと、256色48ピクセル、32ピクセル、16ピクセル、最後に16色の48ピクセル、32ピクセル、16ピクセルアイコンを内包する、マルチアイコンを作ることにします。
早速チェックを入れて、「OK」を押しちゃいましょう
透過色つきのマルチアイコンファイルが出来ました。左のウインドウに、先程チェックを入れたアイコンのカラーとサイズがきちんと並んでいることを確認してみてくださいね。
ここまでくれば、あと一息！
ラストスパートです♪
4. アイコンを保存する
それでは、保存工程に入りましょう。[File]-[Save]を選びます。
すると、セーブ用のダイアログ「Save As」が出てきます。ここで、favicon という名前を付けて、分かりやすい場所に保存しましょう。
これで、マルチアイコンの出来上がり!!
さあ、最後の工程です。
5. アイコンファイルをアップする
作製したマルチアイコンファイル favicon.ico を、サーバーにアップしてください。
基本は、サイトのトップページを置く場所に置いておく。コレです！
ウチの Blog の場合、サーバーが『moglie.s21.xrea.com』ですから、この直下に置く、ということになります。
ここに置いておけば、まず間違いないです。
せっかくマルチアイコンを作ったことですし、下記のタグを記入しておくとパーフェクトです♪
<link rel="SHORTCUT ICON" type="image/vnd.microsoft.ico" href="/favicon.ico">
(このタグは、 favicon.ico がサーバー直下のフォルダに置かれていることを前提にしています。『/favico.ico』と書くことで、HTMLファイルがどこにあろうと、必ずサーバー直下のfavicon.icoを読みに行くことになります。)
必ずヘッダー内 <head>～</head> に書いて下さいね。
これで終わりです。お疲れ様でした
Ico FX (IcoFX) では、アイコンファイルを読み込んで PNG などの形式で書き出したり、自力でドッター出来たり色んな機能が充実していますので、使い込むのが楽しいアプリケーションですヨ
フリーなのが嘘みたいです。
作者様、ありがとうございまーす！
■蛇足のお話
IE 以外のブラウザの場合は、別の場所に置いて、その場所を指定することも出来ます。
その場合、上記でご案内したタグではなく、別のタグ形式で指定する必要が出てきますのでご注意を。
ウチの場合は、本サイト (http://www.moglie.info/) で、遊戯王・日本一ソフト・それ以外のページで色替えとアイコン替えをしたりして遊んでいます♪
CSS とセットで切り替えると、可愛くて楽しいですよー
本当は IE でもアイコン替えは出来るし、ウチでも一部やってるんですが――やってもあまり意味がないというか。orz
結局の所、お気に入りに保存するときぐらいしか Favicon の意味がないカンジなので、凝ってみてもユーザーさんに気付いていただけないんですよね。
だから、とりあえずカレントフォルダに Favicon を入れておけばいいか‥‥的な考えになってしまうという。
カレントフォルダに置いておく場合は、最悪 HTMLファイルへの記入がなくても大丈夫ですし‥‥。
超邪道だけど。(^_^;)
次回があれば、Ico FX (IcoFX)での画像書き出し方法とか、 Illustrator でのファイルの作り方でもやってみようかな？
■参考リンク■
ウィキペディア Favicon
Recent Entries from Same Category
コメント
コメントする
この記事のトラックバックURL
http://moglie.s21.xrea.com/blog/tb.php/465
トラックバック
| ←ラリーはかわゆい | 遊戯王再放送感想 第209話「死霊の村」→ |
TOP PAGE △
