TechTweet皆さまこんにちは。今日は、前々回に引き続き、FireworksでiPhone4を作成してみました。今回はAppleのサイトにあったiPhone4(斜めから見た)をお手本にしています。今回はちょっと長くなりそうなので、ボタン部分は次回に作りたいと思います。今日はボタンなしのiPhone4の斜め版です。(ちょっと変ですかね!?)では、まずはじめに700×700pxのキャンバスを作ります。iPhone4をトレース正面から見たiPhoneをトレースします。その際、トレースしたオブジェクトの線を赤や青など、目立つ色で描くと分かりやすくなります。斜めから見たイメージに変形Appleのサイトに掲載されていた斜めからのアングルにするために、ステップ-1で作成したオブジェクト全てを一括して「変形ツール」で変形します。奥行き間が出るように、変形したオブジェクトを数ピクセル動かしたりして微調整します。ステンレスバンドを作成トレースした一番外側のオブジェクトを下図のように下側にコピーします。遠近感がでるようにコピーしたオブジェクトの左右のコーナーを微調整します。こんな感じに、2つのオブジェクトを結合します。ちなみに、バンドの切れ目の線(ペンツールで作ったオブジェクト)も描いておきます。実際に、黒いオブジェクトをのせるだけでステンレスバンドの切れ目を表現できます。(結合方法は、ナイフツールでオブジェクトをカットして、ペンツールで結合です。出来上がったステンレスバンドを下記のようにグラデーションを設定します。・線形グラデーション:#000000→#AFAFAF→#AFAFAF→#000000次に、真ん中のコーナー部分の鉄っぽいハイライト(グラデーション)をつけます。3つのオブジェクトを矩形ツールで作成し「エッジをぼかす」を適用します。ステンレスバンドの角を表現ここで、ステンレスバンドの角を表現します。方法は、ステンレスバンドと隣接したオブジェクトを白でベタ塗り、エッジをぼかすを1pxに設定します。次に、ステンレスバンドの側面(iPhoneを正面から見たときに見える面)を演出するために、先ほど作ったオブジェクトをコピーして、左と上に数ピクセルずらし、グレーのグラデーションをかけます。先ほど作ったグレーのグラデーションをコピー&ペースト。若干縮小(数ピクセル程度)して、手前の下図のように配置します。することで、ステンレスバンドと黒い部分との境界を表現します。iPhoneのプラスチック部分(黒い部分)の作成これは、iPhoneの上面(画面などがある部分)の作成です。先ほど作った黒いオブジェクトを更にコピー&ペースト縮小して下記のように配置してください。(さっきと同じように手前側の隙間を大きく取ります)そしてこのオブジェクトに、フィルタ/Photoshopライブ効果/べべルとエンボスを下記の設定で適用します。するとこんな感じです。大分、それっぽくなってきました。iPhoneのパーツ(スピーカー、カメラ、マイク)の作成こちらについては、前回のブログとほぼ同じ方法で描いていますので、今回は省略します。ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。ハイライトの作成iPhoneのハイライト部分を作成するために、下記のように赤い線のオブジェクトを作成。ステップ-5で作成した黒いオブジェクトをコピーして、赤い線のオブジェクトと変更/パスを結合/交差をして作成します。白の不透明から透明へのグラデーションを設定します。こちらも、以前のブログにて紹介しておりますので、今回は省略します。例によって(スパイ大作戦みたいですね...古い?)ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。ハイライトを上と左方向に数ピクセル移動します。(Appleのサイトの画像はこんな感じになっていたので)そして、背景を黒にしたら出来上がりです...。いいつつ、ボタン類は次回に持越しです。それではまたでございます。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。