スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでファビコンを作成する方法

Photoshopでファビコンを作成する方法

投稿日:2013年11月21日   ソフトウェア:Photoshop

このチュートリアルでは、PhotoshopCS5でファビコンを作成する方法をご紹介します。

Step1:はじめに

ファビコンというのはアドレスバー、お気に入りリスト、RSSフィード、ブラウザのタブなど、ブラウザの色んなところに表示される独自の小さなアイコンのことで、デスクトップのショートカット他にも使われます。
ファビコンという名前はもともとフェイバリッツ(お気に入り)アイコンから来ています。
また、ショートカットアイコンやウェブサイトアイコン、URLアイコン、ブックマークアイコンという名前でも知られています。
最初に登場したのは1999年3月にマイクロソフトがインターネットエクスプローラー5を発表し、ウェブサイトファビコンを初めてサポートした時にさかのぼります。

ウェブサイトやブログにファビコンを追加するには、サイトのルートディレクトリにfavicon.ico ファイルを置けばいいだけです。
最近のほとんどのブラウザでは.icoファイルの代わりにGIFやPNGの画像ファイルを使うことが出来、アニメーションや透過画像といったこれらのファイルの特性を利用することが出来ます。 しかしながら、.icoファイルはどんなブラウザにも認識されるので、ここではPhotoshopで.icoファイルを作成する方法を学びます。



Step2:必要なプラグイン

Photoshopでファビコンの作成を始める前にTelegraphicからプラグインをひとつダウンロードする必要があります。
このプラグインにより、.icoファイルをWindowsで開いたり保存したり出来るようになります。
ファビコンファイルの作成を始める前にこのプラグインをインストールしておいてください。





Step3:デザイン

ファビコンの実際のサイズは16x16ピクセルです。
このサイズではデザインするのに小さいので、もう少し大きなサイズのカンバスでデザインをしたいと思います。
64x64ピクセルぐらいが良いでしょう。
デザインは後で縮小しますが、カンバスの高さと幅には偶数の同じピクセル数を設定してプロジェクトを開始してください。
ファビコンのデザインで最も大切なことは他と見分けがつくことで、サイトに合ったものでなくてはなりません。
このアイコンはあなたのオンライン上のブランドイメージを形成するもっとも小さなものなので、きちんと作りましょう。
おそらくサイトのロゴは既にあるでしょうから、まずはそれをPhotoshopで開いて16x16ピクセルに縮小してみましょう。
酷いものになりましたか?
ドメイン名の最初の文字を使ってみるのは如何ですか?
他のサイトに似たものがありすぎる?
ご自身のデザインスキルでサイトを上手く表すようなデザインを作ってみてください。
ご自身のサイトのカラーパレットを使って、他のファビコンのデザインとは間違えようのない小さなアイコンを作ってください。



Step4:ヒント

ヒント1

シャープに!シャープに!シャープに!シャープに!
16x16にサイズ変更する前にも後にも試してみてください。

ヒント2

縮小する際にドロップダウンメニューからバイキュービック法 - シャープ(縮小に最適)を必ず選んでください。

完成



Step5:ファビコンを保存する

完成

Photoshopのメインメニューから「ファイル」-「別名で保存」を選んで、ファイル名を"favicon"にして、ドロップダウンメニューからICO (Windows Icon)を選んでください。
このオプションはチュートリアルの最初のステップでプラグインをインストールしていないと表示されません。



Step6:ファビコンをアップロードする

ウェブサイトのサーバーに接続して、indexページがあるルートディレクトリにFavicon.icoファイルをアップロードしてください。
Favicon.icoファイルがルートフォルダにあれば、ほとんどのブラウザは自動的に表示してくれます。

ブラウザによってはファビコンを表示するのにindexページのHTMLコードが必要です。
ページのHEADセクションに次のコードを追加してください。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

そうすれば、ブラウザのアドレスバーにファビコンが表示されるようになります。
もし表示されなかったら、最新の情報に更新ボタンをを何度か押してブラウザのキャッシュを消してみてください。



引用:Web Design Library 著者:biza… 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング