--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

アイコン作成講座

2011年04月03日 15:12

今日、新しいマビ知識を得た。

SS


  「シンバルは両手武器ではない」


これは意外と知られていな・・・え・・・知ってる?


ブラウザでホームページやブログを見るとアドレス欄やタブにオリジナルアイコンが表示されたり、お気に入り欄にアイコンが表示されたりしてるのを見たことがあると思います。

HTMLをさわってる人なら知ってると思いますが、某音楽の先生からやり方を尋ねられたので自分のアイコンを作り直す過程をPhotoShopでの作成を例に解説します。

まずアイコンにしたい画像を準備する

img

この元となる画像をアイコンサイズに縮小していきます。
ブラウザのお気に入りに表示させるだけなら16×16サイズでいいのですが、デスクトップにショートカットを作った時などに拡大表示されると粗くなるため、Windowsの基本アイコンサイズである16×1632×3248×48の3パターン作成します。

img

48×48ではこんな感じです。
このように四隅を透明にしておくと、表示されたとき角が丸く見えます。
背景を透明にすることで四角だけでなくいろいろな形のアイコンを作ることもできます。

img

16×16にするともはやディテールはつぶれてしまい雰囲気が分かる程度になります。
縮小によってぼやけてしまうので少しシャープに加工した方がいいかも。

img

そして縮小した物をPNGで保存。
個人的に好きなのでPNGを使ってますがたぶんGIFでもいけます。
透明部分を使った場合は「透明部分」にチェックをいれて保護しておきます。

img

3パターン作成するとこのように3つの画像が完成します。

ここで登場するのがこのソフト
img
@icon変換
http://www.towofu.net/soft/

画像をアイコン形式に変換してくれるフリーソフトです。
他にもソフトは沢山ありますが、使いやすいので個人的にはこれ一択です。

img

左側のアイテム欄に先ほど作成したファイルを3つ追加します。
そして3つのファイルをすべて選択した状態で画面赤枠のマルチアイコン作成ボタンを押すだけ。
任意の場所に「favicon.ico」というアイコンファイルが出来上がります。

ちなみにサイズによって違う画像を用意すると、表示サイズによって絵が変わるアイコンができます(´・ω・`)


img

FC2ブログの場合、作成したアイコンファイルをまずアップロードします。
この時アップロードしたアイコンのアドレス(赤字になっている部分)を控えておきましょう。

次にテンプレートの編集ページを開きます。
現在使用中のテンプレートのHTML編集画面をみてください。
上から何行目かに <head> というタグがあり、もう少し下に </head> があります。
この間にアイコンを指定するソースを追加することでオリジナルアイコンが使用できます。

ではこのソースを追加してみましょう
<link rel="icon" href="ここにアイコンのアドレス" type="image/x-icon" />
<link rel="Shortcut Icon" type="image/x-icon" href="ここにアイコンのアドレス" />


<head>で囲まれた範囲ならどこでもいいんですが、とりあえず同じ種類の <link rel=・・・ があるあたりに追加します。

img
追加が終わったら更新ボタンをクリック。
これで設定は完了です。

img

ブラウザでページを開くとアイコンが表示される・・・はず。。。


FireFoxだとすぐ反映するんですが、IEだとアイコンがうまく切り替わらない場合があります。
キャッシュが残っててうまく更新されないとか、アイコン未設定だったときの情報がどこかに残ってるとか環境によって表示がされないようです。

IEには困ったものです(;`・ω・)



コメント

  1. プリル | URL | GCA3nAmE

    前からきになっていたオリジナルアイコンの
    謎が分かってスッキリしました!

    ありがとうございマースヽ('ー'*)ノ

  2. ちゅらうみ | URL | F3.HDFwI

    おぉ!やってみようかな・・・w
    何事もやってみないとね(yωy*)

  3. ブリーチ | URL | cxq3sgh.

    >>プリルさん
    設定よりもアイコンを作る方に労力が必要かも知れないw

    >>ちゅらさん
    ぜひやってみるといいよ!
    ブックマークが色とりどりになって楽しいからw

  4. プリル | URL | GCA3nAmE

    ですよね。設定よりもたしかに大変だ!
    作るのに時間かかってしまったかな。。

    本当にありがとうございましたヽ(*'▽'*)ノ

  5. ブリーチ | URL | cxq3sgh.

    >>プリルさん
    画像加工は慣れてるんでそんなにかかってないですよw
    むしろこういうの作るの好きなんで何時間やっても苦にならないというか^^

コメントの投稿

(コメント編集・削除に必要)

トラックバック

この記事のトラックバックURL
http://michishirabe.blog134.fc2.com/tb.php/116-c81d21d6
この記事へのトラックバック



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。