皆さまこんにちは。アシアルの和田です。

今日は、前々回に引き続き、FireworksでiPhone4を作成してみました。
今回はAppleのサイトにあったiPhone4（斜めから見た）をお手本にしています。

ただ、今回はちょっと長くなりそうなので、ボタン部分は次回に作りたいと思います。
なので、今日はボタンなしのiPhone4の斜め版です。
（ちょっと変ですかね!?）

では、まずはじめに
700×700pxのキャンバスを作ります。

ステップ-1　iPhone4をトレース
正面から見たiPhoneをトレースします。
その際、トレースしたオブジェクトの線を赤や青など、目立つ色で描くと分かりやすくなります。（下のイメージです）

ステップ-2　斜めから見たイメージに変形
Appleのサイトに掲載されていた斜めからのアングルにするために、ステップ－１で作成したオブジェクト全てを一括して「変形ツール」で変形します。
また、奥行き間が出るように、変形したオブジェクトを数ピクセル動かしたりして微調整します。

ステップ-3-1　ステンレスバンドを作成
トレースした一番外側のオブジェクトを下図のように下側にコピーします。
そして、遠近感がでるようにコピーしたオブジェクトの左右のコーナーを微調整します。

そして、こんな感じに、2つのオブジェクトを結合します。
ちなみに、バンドの切れ目の線（ペンツールで作ったオブジェクト）も描いておきます。
実際に、黒いオブジェクトをのせるだけでステンレスバンドの切れ目を表現できます。
（結合方法は、ナイフツールでオブジェクトをカットして、ペンツールで結合です。）

ステップ-4　ステンレスバンドを着色
出来上がったステンレスバンドを下記のようにグラデーションを設定します。
・線形グラデーション：#000000→#AFAFAF→#AFAFAF→#000000

次に、真ん中のコーナー部分の鉄っぽいハイライト（グラデーション）をつけます。
３つのオブジェクトを矩形ツールで作成し「エッジをぼかす」を適用します。

・ベタ塗り：#000000　エッジをぼかす（10px）　透明度100%
・ベタ塗り：#FFFFFF　エッジをぼかす（15px）　透明度80%
・ベタ塗り：#000000　エッジをぼかす（15px）　透明度100%

ステップ-3-2　ステンレスバンドの角を表現
ここで、ステンレスバンドの角を表現します。
方法は、ステンレスバンドと隣接したオブジェクトを白でベタ塗り、エッジをぼかすを1pxに設定します。
・ベタ塗り：#FFFFFF　エッジをぼかす（1px）

ステップ-3-3　ステンレスバンドの側面を表現
次に、ステンレスバンドの側面（iPhoneを正面から見たときに見える面）を演出するために、先ほど作ったオブジェクトをコピーして、左と上に数ピクセルずらし、グレーのグラデーションをかけます。
・線形グラデーション：#474747→#666666→#474747　エッジをぼかす（2px）

ステップ-3-4　ステンレスバンドとプラスチック部分との境界を表現
先ほど作ったグレーのグラデーションをコピー＆ペースト。若干縮小（数ピクセル程度）して、手前の下図のように配置します。
こうすることで、ステンレスバンドと黒い部分との境界を表現します。
・ベタ塗り：#0000003　エッジをぼかす（1px）

ステップ-4　iPhoneのプラスチック部分（黒い部分）の作成
これは、iPhoneの上面（画面などがある部分）の作成です。
先ほど作った黒いオブジェクトを更にコピー＆ペースト
縮小して下記のように配置してください。（さっきと同じように手前側の隙間を大きく取ります）

そしてこのオブジェクトに、
フィルタ／Photoshopライブ効果／べべルとエンボスを下記の設定で適用します。

そうするとこんな感じです。
大分、それっぽくなってきました。

ステップ-5　iPhoneのパーツ（スピーカー、カメラ、マイク）の作成
こちらについては、前回のブログとほぼ同じ方法で描いていますので、今回は省略します。
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。

ステップ-6　ハイライトの作成
iPhoneのハイライト部分を作成するために、下記のように赤い線のオブジェクトを作成。そしてステップ-5で作成した黒いオブジェクトをコピーして、赤い線のオブジェクトと
変更／パスを結合／交差をして作成します。
こんな感じです。

そして、白の不透明から透明へのグラデーションを設定します。
こちらも、以前のブログにて紹介しておりますので、今回は省略します。
例によって（スパイ大作戦みたいですね…古い？）
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。

ハイライトを上と左方向に数ピクセル移動します。(
Appleのサイトの画像はこんな感じになっていたので）

そして、背景を黒にしたら出来上がりです…。

といいつつ、ボタン類は次回に持越しです。

それではまたでございます。