iOS風アイコン簡単作成！

今回はPhotoshopで「iOS風アイコン」を簡単作成に挑戦！
使用アプリケーションはPhotoshopCS2の画面にて説明します。
最初に新規ファイル作成にて、
サイズ600×600pix、72dpi、RGBカラーを準備しましょう。


ツールメニューのパスオブジェクトから、「角丸長方形ツール」を選択。
丸みの設定は60pxで正方形を作成します。
（Shiftキーを押しながらドラッグします）


パスウィンドウを開きます。
角丸正方形のパスで選択範囲を作成します。



レイヤーウィンドウに戻ります。
ツールメニューの塗りつぶしツール（バケツアイコン）で
カラーを白にして選択範囲を塗りつぶします。
（レイヤー名は「back」としました）



選択範囲をアクティブ状態のまま、新規レイヤー「waku」を作成します。
そのレイヤーにアイコンの枠のラインを作成します。
「編集」メニューより「境界線を描く…」をクリック。



境界線の指定は幅を20pix、カラーは適当に青にしました。
（カラーは後で変更しますので、わかりやすい色にしておく）
位置のチェックボックスは「内側」とします。



「waku」レイヤーにラインが描けたら、
「レイヤー」→「レイヤースタイル」→
「グラデーションオーバーレイ…」をクリックします。



メタリック調のグラデーション設定をします。
上から光が照射されることをイメージします。



さらに「ベベルとエンボス」設定で枠に立体感を施します。
「ベベル外側」として、画像のように設定します。



お気に入りのアイコンデザインとなる素材を用意して、
新しいレイヤー「spade」を作ります。



「back」レイヤーの白い背景に着色します。
単色でもよいのですが、ここではグラデーションにします。
「レイヤー」→「レイヤースタイル」→
「グラデーションオーバーレイ…」をクリックします。
後で光の反射が加わるので、上を濃い色にします。



iOS風の特徴である、立体感のある光の反射を作成します。
「hansha」という新規レイヤーを作成しておきます。
次にパスウィンドウで新規パスを作成します。
画像のように、ペンツールでパスを作成します。



角丸正方形を作成した同じ手順で
「hansha」レイヤーに白を塗りつぶします。
レイヤーの上下関係に注意します。
外枠ライン、光の反射、デザインオブジェクト、背景の順です。



「hansha」レイヤーの「レイヤーマスクを追加」をクリックします。
ツールメニューのグラデーションを選択、
白黒のグラデーションにします。
下から上にグラデーション設定で反射の光を半透明にします。
気に入るまで何度か設定してみてください。



最後に仕上げとして、枠部分にさらに立体感とメタリック感を加えます。
「waku」レイヤーの「レイヤースタイル」に「光彩（内側）」を加えます。



iPhoneにはめ込み合成してみます。
枠無しのアイコンでもよいでしょう。



完成がこれっ！
ホームページやブログのアイコンバナーにしても楽しいですね。

やはりPhotoshopは魔法のツール！

I'll be in touch.