アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Appleのサイトで見たiPhone4をFireworksで描いてみました-2/2

皆さま。こんにちは。和田でございます。

今回は、前回までに描いた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を使って描いてみてください。簡単ですよ☆

それでは、また次回で~す。

って、次は何描こうかな……。