ふみぃ~.何だか虚しい・・・
なんとかPhotoshopを使わずに,「なんちゃってiPhone風」のfaviconを作成する方法です.
既にfaviconのデザインが決まっている方も途中から使えます.

favicon1_020308
1. 画像の作成

今回使用したのはKeynoteですが,PagesやPowerPointでも同じように出来ますし,もちろん画像編集ソフトなどがあれば可能です.

最初に新規書類を作成する時はバックグラウンドが無地のものを選んで,最初からあるテキストボックスなどは消してください.
上の画像に3つのパーツが重なっていて,下から順番に背景→上部の反射部分→テキストと並んでいます.

まずは背景ですが,図形メニューから角丸四角形を追加してシフトを押しながら適当な大きさに拡大.
曲率は左上の丸い印を動かすと調整できるので,適当な丸みをつけるようにします.
塗りつぶしの設定は「グラデーション塗りつぶし」にして色を選択し,背景の線を太くして少し濃いめの色を選択.
それと今回は270°方向に影をつけました.

反射部分も角丸四角形ですが「グラデーション塗りつぶし」は反対向きにして,不透明度が80%ぐらいで,線は「なし」にします.
こちらも曲率を調整して,背景の縁の内側上部にピッタリはまるようにします.

最前面のパーツは今回テキストになっていますが,何を重ねるかはお好みで...
ここまで出来上がるとこんな感じ.

favicon2_020308

ちなみにここで画像全体をコピーして,ファイルやフォルダの「情報を見る」の左上にあるアイコンのところにペーストすると作成した画像をアイコンにすることが出来ます.

2. ラフに切り出し

ここまでがちょっと大変かもしれませんが,あとは簡単.
作成した画像全体が見える状態にして,「コマンド」+「シフト」+「4」を押します.
するとスクリーンショットを撮るためのカーソルに変わるので画像全体が入るように領域を選択すれば,デスクトップに「ピクチャ1」というファイルが出来ます.
上の図がラフに切り出しした画像そのものです.

3. faviconに変換

Safariからfavikonに行って「ファイルを選択」というボタンの辺りに「ピクチャ1」をドロップ(Safari 3を使っていない場合は,普通に「ファイルを選択」ボタンを押して画像を選んでください).

favicon3_020308

その下にある「Load Image」ボタンを押すと先ほど作った画像が右側に表示されるので,今度はいっぱいいっぱいになるように領域を選択し,「Capture & Preview」ボタンを押します.
プレビューが問題なかったら「Download Favicon」をクリックすると「favicon.ico」がダウンロードされます.

4. ファイルをアップロード

ここの部分は利用しているサイトによって違いますから,それに従って...
で,アップロードできたら「favicon.ico」のURLを確認しておきます.

5. HTMLを編集

最後にしてどうしようもない難関がここ.
そもそもHTMLの編集が許可されていないBlogサービスでは,せっかく作ってもどうにもなりません.
で,編集可能な場合は,<head>~</head>の間のどこでも良いので以下のタグを貼り付けます.
favicon.icoのURLは先ほど確認したものに置き換えてください.

<link rel="shortcut icon" href="favicon.icoのURL" />


今回は作っていませんが,iPod touchのWebClipアイコンを指定したいときには以下のタグを加えます.

<link rel="apple-touch-icon" href="apple-touch-icon.pngのURL" />


なんだかこうやって書いているうちに「お気楽」なのかどうかあやしくなってきましたが,最初のところさえ乗り越えれば何とか大丈夫でしょうか.
では,健闘を祈ります!

別に意図したわけではないんですけど,いろんなTipsがごちゃ混ぜの記事になっちゃいました.
まぁ,いっか...
Date:2008/02/03(Sun) 20:05:00
Macintosh | Edit | Comment:4 | Trackback:0
Comment
Posted Comment
Macinさん、よくわかりました!と言いたいんですが、後半がキツ~イです。私にとってソースやコードとは書いたり読んだりするものではなく、食べたりつないだりするものですから……難関ですねぇ。
おまけにiWebだし、ソースを表示できるんだろうか?アップロードの基本からやらないと…
でも流れはよく?分かりました。ちっちゃなファビコンもなかなか味なものですね。
つけたいな~、ファビコン。
2008/02/04(Mon) 01:30:58 | URL | minmin #-[ Edit ]
iWeb
初めてiWebってのを起動してみました.
なんだか使いやすいのか使いにくいのかよく分からないソフトですね.
確かにHTMLソースを表示・編集したりする画面が見あたらない.
出来ないんですか?これ?
2008/02/04(Mon) 20:42:16 | URL | DoubleKO #ax4px7aw[ Edit ]
こんばんは

iWebにはソース編集機能は備わっていないです。iLife '06のを使ったことがありますが、ソースをいじるにはテキストエディターは必須で、書き直したものをUPすればfaviconでもロボット避けでもある程度自由に出来ます。
しかし後からiWeb上で変更を加えるとソースも書き直されるので、場合によっては毎度ソースを直してからアップしなければなないため、変更が生じやすいページでソース書きを併用する使い方はあまり向いていないかもしれないですね(わたしはこれでiWebをやめました:お手軽さではよく出来ているんですけどね)。
2008/02/04(Mon) 23:17:08 | URL | くじゃく #naaR1Xgs[ Edit ]
どうもです
くじゃくさん,ありがとうございます.

そうですかぁ.
やっぱり見あたらないわけではなく備わってないのですね.
一生懸命探してしまいました.(爆)
2008/02/05(Tue) 02:00:01 | URL | DoubleKO #ax4px7aw[ Edit ]
Comment to This Entry
URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 
Trackback
Trackback URL
http://doubleko.blog18.fc2.com/tb.php/3557-d08361fd
この記事にトラックバックする(FC2ブログユーザー)
Trackback

Powered by FC2. Designed by Double KO.