FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iOS風アイコン簡単作成!

iOSアイコン0

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

I'll be in touch.
スポンサーサイト

テーマ : Photoshopを楽しもう!
ジャンル : ブログ

tag : iOSアイコン iPhone ipad アプリアイコン タッチパネル フォトショップ Photoshop adobe cs レイヤーマスク

スタジオハーミットRSS
プロフィール

STUDIOHERMIT

Author:STUDIOHERMIT
スタジオハーミットのオフィシャルブログです。Adobe Photoshop,Illustratorのスキル、Apple Macintosh関連の情報を配信しています。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
Mail form.

名前:
メール:
件名:
本文:

検索フォーム
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。