マットなiphoneUI作成方法

今回はマットな質感のiphoneのインターフェイスを作ってみます。
iphoneのインターフェイスは、プリミティブな図形と、レイヤースタイル（グラデーション、シャドウ、境界線など）を組み合わせることで、モダンな風合いを出すことができます。
iphoneにとどまらず、androidやウェブサイトのインターフェイスでも、シンプルでシャープなデザインが流行っているので、このチュートリアルでコツを掴みましょう！

photoshopを起動して、320px×480pxでコンポジションを作り、50%前後のグレーで全体を塗り、320px×20pxでステータスバー部分を 作りっておきましょう。（ステータスバーは黒く塗ったレイヤーの上に文字などを載せただけです。）

ナビゲーションバーを作ります。サイズは320px×44pxです。レイヤースタイルでグラデーションを適用します。 このグラデーションの設定※１はこの先の高低でも頻繁に出てくるので、設定を保存するか、メモして置いてください。

320px×1pxの白線を不透明度30%にして、ナビゲーションバーの頭に揃えます。

次はボタン素材を作成します。下の画像のような矢印をパスで作ります。

レイヤースタイルを適用します。グラデーションはナビゲーションバーのグラデーションと同じものを適用します。※１ 次にシャドウと、境界線を以下の設定で適用します。

サンセリフ系のテキストをボタンの上にのせ、レイヤースタイルでシャドウを適用します。

右にも同じ設定で角丸のボタンを作ります。

真ん中の切り替えボタンを作ります。下のような角丸のシェイプを作成し、塗りの不透明度を0%にし、レイヤースタイルのドロップシャドウと境界線を適用します。

そしてレイヤーを複製し、レイヤースタイルを一度削除し、レイヤースタイルのグラデーションを再び適用します。 グラデーションはナビゲーションバーのグラデーションと同じものを適用します。※１

切り替えボタンシェイプの半分の形のシェイプを下のように配置しま、レイヤースタイルを適用します。

先ほどのボタンと同じドロップシャドウ付きのテキストを配置します。

ツールバーを作ります。320px×44pxのシェイプを、画面の一番下に配置します。 320px×1pxの黒線をを、シェイプの頭に揃うように配置します。

黒線の下に同じ大きさの白い線（20%）を配置します。

別途作成したアイコンを、配置します。

アイコンにレイヤースタイルでカラーオーバーレイとドロップシャドウを適用します。

次はリスト部分を作成します。まずは角丸の背景を作成します。（色#4e5153） レイヤースタイルで境界線を付けます。

高さ1pxの横線を等間隔で引いていきます。（色#2d3132）

文字と矢印を配置します。

次に送信ボタンを作成します。まず角丸シェイプを作ります。

レイヤースタイルのドロップシャドウ、光彩、グラデーションオーバーレイ、境界線を適用します。 グラデーションはナビゲーションバーのグラデーションと同じものを適用します。※１

送信ボタンの上にテキストをのせます。 最後に円シェイプを4つ並べ、下記のようなトーンにすれば完成です。 コツを掴めば、他にもiphoneライクなインターフェイスを作れるはずです。 いろいろなiphoneアプリのデザインを参考にしてみましょう。