Photoshopでファビコンを作成する方法〔フォトショップ,favicon〕

*つくったファビコンの画像をwordpressのサイトに設定する方法はこちら→WordPressのサイトにファビコンを設定する方法〔Favicon〕

フォトショップでファビコンの画像を作成する。

ファビコンって?

こんな感じで、タイトルの横に表示されるちっさい画像。

Screen Shot 2016-08-18 at 7.46.16 PM
Screen Shot 2016-08-18 at 7.48.03 PM
Screen Shot 2016-08-18 at 7.45.01 PM

Chromeとか、Firefox、Operaなんかで開くと表示される。IEってどうだったけかな、多分表示されるね。Safariでは表示されない。

これがあるのとないのでは結構印象が違うと思う。ちゃんとしてるっぽく見えるし。簡単に設定できるから、ぜひ。

ファビコン作るときに迷うのが画像のサイズだけど、32x32pixelだけでいいと思う。いろいろなサイズの画像を用意するとかもあるけど、ひとつだけでとりあえずおけ。それと拡張子は”.ico”にしておけば問題ない。

流れ

  1. プラグインのファイルをダウンロード
  2. ダウンロードしたプラグインのファイルを保存
  3. つくる。

プラグインのダウンロード

こちらのサイトからプラグインをダウンロードさせていただく。→Telegraphics – Free plugins for Photoshop & Illustrator…and other software

Screen Shot 2016-08-18 at 8.15.41 PM

2016年8月18日現在、CC向けのファイルがないみたい…。やから、とりあえずCS5,CS6向けのファイルをダウンロードしてみたけど問題なく使えた。

ダウンロードしたら開く。3つのファイルが入っている。

Screen Shot 2016-08-18 at 8.21.39 PM

その中の”ICOFormat.plugin”ってファイルを、Photoshopのプラグインの”File Formats”の中に入れる。

Screen Shot 2016-08-18 at 9.40.32 PM

この”File Formats”フォルダがない場合は、”File Formats”って名前でフォルダを新規作成する。

Screen Shot 2016-08-18 at 8.27.03 PM

こんな感じの階層で入れる。

Photoshopを起動(再起動)して確認

うまくできてたらデータを保存するときのフォーマットのところに”ICO(Windows Icon)”って選択肢が増えてる。これで”.ico”で画像を保存できるようになる!

Screen Shot 2016-08-18 at 8.30.43 PM

できてなかったら、もっかいプラグインの保存場所確認してみてください。それか、ダウンロードしたプラグインのバージョンとお使いのPhotoshopのバージョン合ってるかとか。

ファビコン画像をつくる!

プラグインがちゃんと使えてるのが確認できたら画像作る。”新規作成”。ファイル名はなんでもいいけど”favicon”にしましょー。

Screen Shot 2016-08-18 at 8.36.04 PM

ドキュメントの種類は”カスタム”にして幅、高さは32pixel。解像度は72pixel/inchでおけ。

カンバスカラーは”透明”に。

あとはー、お好きなようにー。ガイドと使ってキレーにつくる。ちっちゃい画像だから細かいデザインはぐちゃぐちゃってなってわけわかんなくなるから、シンプルなのがおすすめですねー。

つくったら、保存。

Screen Shot 2016-08-18 at 8.51.15 PM

フォーマットは”ICO(Windows Icon)”を選んで、ちゃんとファイル名が”favicon.ico”になっているか確認する。

以上、フォトショップをつかってファビコン画像を作る方法でしたー。

*つくったファビコンの画像をwordpressのサイトに設定する方法はこちら→WordPressのサイトにファビコンを設定する方法〔Favicon〕

Photoshopでファビコンを作成する方法〔フォトショップ,favicon〕」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です