今回は、前回までに描いたiPhone4に、ちゃんとボタン類を付け加えようと思います。
ちなみにボタンはどれも、たった4個程度の矩形(オブジェクト)で作れます。しかもマテリアルの陰影などは、グラデーションとフィルタを使って表現するので簡単です☆
皆さまも作ってみてください☆
↓仕上がりイメージはこんな感じです。
■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.オンオフボタン
これも矩形(オブジェクト)はたったの4つです。
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
□シャドウ(内側)
・距離:2
・不透明度:100
・柔らかさ:1
・角度:42
・色:#000000
3-4.最後に、ボタンの天板と側面の境界がハッキリしすぎているので、"3-2"の矩形をコピーして背面にペースト。その矩形のエッジを「エッジをぼかす:2」に設定します。こんな感じで出来上がりです。
4.サウンドボタン
これも矩形(オブジェクト)は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.音量ボタン
これも矩形(オブジェクト)は4つです。「4」で作った方法とほとんど同じです。
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を使って描いてみてください。簡単ですよ☆
それでは、また次回で~す。
って、次は何描こうかな……。