Photoshopで簡単!アイコンやファビコンを作成する方法

Photoshopで簡単!アイコンやファビコンを作成する方法Photoshop

今回はPhotoshopだけで誰でも簡単にできるサイトのアイコンやファビコンの作り方を解説します。Illustratorいらずです。

ブラウザのタブに表示されているアイコン(ファビコン)をサクッと作ってしまいましょう。

 

スポンサーリンク

アイコンを作る

まずは元となるアイコンをPhotoshopで作ります。

画像の大きさは180x180pxがおすすめです。大きくする分には問題ないですが、小さくするとアイコン自体が小さく表示されてしまうのでカッコ悪くなってしまいます。

 

今回はこんな感じのアイコンを作ってみました。

画像1

 

 

 

 

 

 

作る時のポイントはできるだけシンプルに、かつ幅いっぱいに作ることです。幅いっぱいに作らないとただでさえ小さいアイコンがさらに小さくなってしまうので気をつけましょう。

画像ができたら保存します。保存形式はjpgやpngなどにしましょう。psdはダメです。

 

ico形式へ変換する

アイコンやファビコン画像の拡張子は.ico形式がベストです。

もちろんjpgやpngがダメなわけではないですが、アイコンやファビコンに一番適しているのはico形式です。

 

では作った画像をico形式に変換します。

以下のサイトで拡張子をアイコン向けに変更します。

ファイルを選択」をクリックして先ほど作った画像を選択しましょう。

 

すると画像がico形式とpng形式に変換されます。

一番左上の128×128のico形式の画像で「Download」をクリックすると、黒背景で画像が表示されるはずです。

画像2

 

適当な場所で右クリックし、「別名で保存」を選択します。

意味不明なファイル名になっていると思いますが、名前を好きなように変更して保存すればオーケーです。

画像3

 

拡張子が.icoで保存されていればアイコン(ファビコン)の完成です。

画像4

 

まとめ

Illustratorを使わなくても、Photoshopだけでアイコンやファビコンはサクッと作れます。

jpg画像でもpng画像でもアイコン(ファビコン)に変換できるのでとても便利です。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
Photoshop
スポンサーリンク
でざなり