今回は、前回までに描いたiPhone4に、ちゃんとボタン類を付け加えようと思います。
ちなみにボタンはどれも、たった４個程度の矩形（オブジェクト）で作れます。しかもマテリアルの陰影などは、グラデーションとフィルタを使って表現するので簡単です☆
皆さまも作ってみてください☆
↓仕上がりイメージはこんな感じです。
■iPhone平面版のボタン
まずは、前々回に作ったiPhone平面版（下図の青と赤で囲った部分）にボタンを追加します。
そして、
・121×24px（丸み30％）
・24×27px（丸み30％）
・24×64px（丸み60％）←2個
の矩形を図の位置に書きます。
そして、個々の矩形のグラデーションを「線形」にして
図のように色を設定してください。
また、ボタンの立体感を出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
・スタイル：ベベル（内側）
・テクニック：スムーズ
・方向：アップ
・深さ：100
・サイズ：1
・ソフト：1
・角度：0
・ハイライト：0
・シャドウ：20
（詳しくは上図を参照してください）
最後に、作ったボタンの上にiPhoneの画像をかぶせて完成です。
■iPhone立体版のボタン
さて、いよいよ立体版のボタン作成です。
まずはボタン類を平面に描きます。この時、絵とのアタリとなる四角も描いておくと変形しやすくなります。
次に、平面に描いたボタン類をiPhoneの絵に合うように変形します。
そして、この変形した矩形（オブジェクト）を元に各ボタンを描いていきます。
2.ヘッドフォンミニジャック
まずは、ヘッドホンミニジャックを作ります。
2-1.変形した矩形を#444444で「ベタ塗り」に設定
2-2.その矩形をコピーして若干縮小させ、上記のようなグラデーションを設定します。
□線形グラデーション
(1)#313131
(2)#292929
(3)#5E5E5E
(4)#BBBBBB
(5)#BBBBBB
(6)#3A3A3A
2-3."2-2"の矩形をコピーして縮小（図の程度）させ、上記のようなグラデーションを設定します。
□円錐グラデーション
(1)#121212
(2)#777777
2-4."2-2"の矩形をコピー、塗りをなし、線を#DBDBDB,2pxに設定
2-5.ミニジャックの横の穴の作成
□円形グラデーション
(1)#989898
(2)#171717
2-6.これでヘッドフォンミニジャックの出来上がり☆
3.オンオフボタン
これも矩形（オブジェクト）はたったの４つです。
3-1.変形した矩形を#333333で「ベタ塗り」、「2pxの線」を設定
3-2."3-1"の矩形をコピーして若干縮小、ボタンの天板になるところくらいまでに移動させ、上図のようなグラデーションを設定します。
□線形グラデーション
(1)#202020
(2)#D3D3D3
3-3.ボタンの側面の矩形は"3-1","3-2"の矩形をコピーして「パスを結合／型抜き」を実行して作成。そして上図のようなグラデーションを設定します。また、丸みを演出するためシャドウ（内側）も設定します。
□線形グラデーション
(1)#000000
(2)#D6D6D6
(3)#D6D6D6
(4)#000000
(5)#515151
(6)#2F2F2F
(7)#767676
(8)#000000
□シャドウ（内側）
・距離：２
・不透明度：100
・柔らかさ：1
・角度：42
・色：#000000
3-4.最後に、ボタンの天板と側面の境界がハッキリしすぎているので、"3-2"の矩形をコピーして背面にペースト。その矩形のエッジを「エッジをぼかす：２」に設定します。こんな感じで出来上がりです。
4.サウンドボタン
これも矩形（オブジェクト）は４つです。
4-1.変形した大きい矩形（オブジェクト）を#000000で「ベタ塗り」、「エッジをぼかす：2」に設定します。
4-2."4-1"の矩形をコピーして前面にペースト。#686868で「ベタ塗り」（エッジはぼかしません）に設定、更に凹んだイメージを出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
□Photoshopライブ効果
・スタイル：ベベル（内側）
・テクニック：スムーズ
・方向：ダウン
・深さ：150
・サイズ：4
・ソフト：4
・角度：-113
・ハイライト：0
・シャドウ：60
4-3.変形した小さい矩形（オブジェクト）をコピーしてボタンの天板の位置まで移動。そして上図のようにグラデーションを設定します。
□線形グラデーション
(1)#696969
(2)#D1D1D1
(3)#4A4A4A
4-4.ボタンの側面のオブジェクトを作成（「パスを結合／型抜き」）し、上図のようにグラデーションを設定します。また、丸みを演出するため「シャドウ（内側）」をかけます。
□線形グラデーション
(1)#313131
(2)#313131
(3)#F1F1F1
(4)#434343
(5)#898989
(6)#898989
(7)#252525
□シャドウ（内側）
・距離：3
・不透明度：60
・柔らかさ：1
・角度：134
・色：#FFFFFF
5.音量ボタン
これも矩形（オブジェクト）は４つです。「４」で作った方法とほとんど同じです。
5-1.変形した矩形（オブジェクト）を#000000で「ベタ塗り」、「エッジをぼかす：1」に設定します。
5-2."5-1"の矩形をコピーして前面にペースト。#686868で「ベタ塗り」（エッジはぼかしません）に設定、更に凹んだイメージを出すために「Photoshop ライブ効果」の「ベベルとエンボス」をかけます。
□Photoshop ライブ効果
・スタイル：ベベル（内側）
・テクニック：スムーズ
・方向：ダウン
・深さ：150
・サイズ：4
・ソフト：4
・角度：-168
・ハイライト：0
・シャドウ：60
（詳しくは下図を参照してください）
5-3."5-2"の矩形（オブジェクト）をコピーしてボタンの天板の位置まで移動。そして上図のようにグラデーションを設定します。
(1)#CDCDCD
(2)#717171
(3)#1A1A1A
5-4.ボタンの側面のオブジェクトを作成（「パスを結合／型抜き」）し、上図のようにグラデーションを設定します。また、丸みを演出するため「シャドウ（内側）」をかけます。
□線形グラデーション
(1)#0B0B0B
(2)#9A9A9A
(3)#505050
(4)#505050
(5)#9A9A9A
(6)#9A9A9A
(7)#505050
(8)#9A9A9A
(9)#9A9A9A
(10)#0B0B0B
□シャドウ（内側）
・距離：3
・不透明度：70
・柔らかさ：0
・角度：153
・色：#FFFFFF
と、これで出来上がりです。
どうでしょうか？
Fireworksの機能だけでこれだけ描けます。
結構描けますよね！？
なので、皆さまも何か描いてみたいものがありましたら、是非Fireworksを使って描いてみてください。簡単ですよ☆
それでは、また次回で～す。
って、次は何描こうかな……。