Photoshopでフォルダアイコンを制作してみました。

ベースのフォルダーをペンツール等で制作。

グラデーションを適用。

質感を出す為に、グラデーションを調整、境界線を入れる。

ベースのフォルダーを複製して、自由変形。

ベースと複製したフォルダーを傾ける。お好みで。

ドロップシャドウを適用させたりはお好みで。

以上です。

今回は、最後に前回紹介した、Photoshop リアルなドロップシャドウを適用しました。

Webサイト制作を行う際は、をパッと見てわかるアイコン、素材等を使って、ユーザビリティの向上やユーザーエクスペリエンスを向上させたいです。

Webサイト制作、ホームページ制作 MIRAiZ-ミライズ-

いまさらですが･･･スミマセン。

iPhone用のブックマークアイコンの作成方法が紹介されていましたので、MIRAiZも作ってみました。

iPhone用ブックマークアイコン作成方法

57×57ピクセルのPNG画像を作ります。

作ったアイコン画像をサーバの任意の場所にアップロード。

後は、ページ内にHTMLタグを追加します。

自動的にiPhoneがいつもの角丸のツヤツヤのアイコンにしてくれちゃいます。

ツヤツヤにしたい場合

<link rel=”apple-touch-icon” href=”hogehoge/icon.png” />

ツヤツヤにしたくない場合

<link rel=”apple-touch-icon-precomposed” href=”hogehoge/icon.png” />

これでOKです。

MIRAiZではWordpressのプラグイン「WPtouch」を使ってますので、

プラグイン内でiPhone用アイコンの設定してます。

プラグインを使用しない場合は、上記のHTMLを追加することでiPhone用アイコンを反映させることができると思います。

実際に、どんな風に表示されるかは･･･

ホームページ制作 MIRAiZのページをiPhoneでブックマークしてみてください（笑）

以下のエントリーを参考にしました。

Give Your Website a Custom iPhone Bookmark Icon

108 Mono Icons: Huge Set of Minimal Icons

Webサイト制作に使える108個のアイコンがフリーで公開されています。

しかも、商用利用化なのが、凄く嬉しいです。

単色のpng形式で公開されているので、Photoshopでレイヤースタイルを使えばどんなWebサイトにもマッチしそうです。

是非、お試し下さい。

Create a Glossy Home Icon in Photoshop

Photoshopで艶のあるHome　iconの作り方。

参考に、MIRAiZっぽく作ってみました。

クオリティ低くてすみません（汗）

チュートリアルサイトは英語ですが、細かくスクリーンショットを掲載して下さっているので、非常にわかり易いです。

home　icon以外もピクトを変えると簡単にできちゃいますね。