こんにちは!マユです。
セブは最近涼しくて過ごしやすいですよ。
やっと雨季も抜けたようで、3日ほど前から太陽を見ることができました^^
今日の指令!
“ファビコンを作ってください。”
・・・お?ファビコンって何かわかんない…(´A`)?
まずファビコンについて調べてみます!wikipedia先生お願いします。
★ファビコンとは
>ウェブサイトのシンボルマーク・イメージとして、
ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
wikipediaより引用。
こういう感じで、お気に入りやタブのサイト名の横にあるアイコンですね。
これがあると、お気に入りリストを見ている時に目立ちますし、”ちゃんとしたサイト”という感じがしますよね!
ファビコンってかわいいな~^^*
今回参考にさせていただいたサイトさん
WebDesignNOTE 様 『photoshopでfavicon(iconファイル)を作成する方法』
★それでは、photoshopでファビコン作っていきます!
まずはphotoshopのプラグインをインストールします。
Photoshop icoformatICO (Windows Icon) Format Plugin
windowsの方は赤矢印のところから選んでダウンロードしてください。
ダウンロードしたファイルの中に
ICOFormat.plugin というファイルがあるので、
それをphotoshopにインストールします。
・Mac
「Applications > Adobe Photoshop CS5 > Plug-ins > File Formats」
・Windows
「Program Files¥Common Files¥Adobe¥Plug-Ins¥CS5¥File Formats」
↑この中にドラッグ&ペーストです!
Windows
これで、photoshopを再起動させると
メニューバー>Photoshop > プラグインについて> ICO
で、ちゃんとインストールされたことを確認します。
ここから、photoshopでファビコンのデザインをしていくのですが、
私は元からあるGlobal IT Academyのロゴを元にして作成しました。
イラストレーターで編集。
だいぶ小さくなってしまうので、文字をオリジナルより少し大きく、色を少し濃くしました。
背景を透過させるために、png形式で保存。
このデータをphotoshopで読み込み、32px四方のサイズで保存します。
私は画像解像度で、32px×32pxに変更しました。
保存する際に、フォーマットをインストールした「ICO (Windows Icon)」を選択しましょう。
それでファビコンの完成です!
画像サイズを縮小して、フォーマットをICOにするだけなので、簡単でした。
Wordpressでのファビコンの設定方法についてはまた次回。
お疲れ様でした~ヾ(‘ω’)ノ