アシアルブログ

こんにちは。和田です。

先日、iPhone4が発売になりましたね。
欲しいな…なんて思っているのですが、ド○モユーザーな自分には無理なんですよね。はぁ～。
はやく、SIMフリーの環境になってくれないかな…。

なんて気持ちをこめて！

じゃなかった、
今後、iPhoneアプリの提案にも使えると思い、FireworksでiPhone4を作ってみました。

ステップ-1～10にまとめたので、皆さんも作ってみてくださいね。
↓出来上がりはこんな感じです。




まず1200×1600pixelのキャンバスを作ります。

ステップ-1　：ステンレススチールバンド（外枠）を作る
矩形ツールで750×1472pixel（x=225,y=64）の長方形を作り、
・丸み：28%、
・線形グラデーション：#8c8c8c,#cccccc,#8c8c8c
・光彩（内側）：距離→2,不透明度→50%,ぼかし→1,オフセット→0
に設定します。
光彩（内側）は、少し丸みを出すために設定しています。



ステップ-2：ステンレススチールバンド（平らな部分）を作る
矩形ツールで742×1464pixel（x=229,y=68…ステップ-1の画像の中心に配置）の長方形を作り、
・丸み：27%、
・線形グラデーション：#e1e1e1,#e0e0e0,#e1e1e1
・光彩（内側）：距離→2,透明度→30%,ぼかし→0,オフセット→0
に設定します。
光彩は、ハイライトを出すために設定しています。



ステップ-3：ステンレススチールバンドの継ぎ目を作る
矩形ツールで(1)742×6pixel（x=229,y=1358）,(2)6×742pixel（x=470,y=68）の2つの長方形を作り、図のとおり配置します。
ステップ-2で作成した矩形の端に合わせています。



ステップ-4：ステンレススチールバンドをザラザラにする
ステップ-1で作った矩形をコピーし最善面にペースト。
フィルタ＞ノイズで適用量を20にしてOK。

このレイヤーの
・ブレンドモード：乗算
・不透明度：10％
に設定して、ザラッとした質感を演出します。



ステップ-5：黒い筐体のベースを作成
(1)矩形ツールで736×1456pixel（x=233,y=72）の長方形を作り、
・丸み：27%、
・塗り：#000000
に設定する。

(2) (1)で作った矩形の上に726×1448pixelの長方形を作り
・丸み：27%、
・線形グラデーション：#000000,#101010
・Photoshopライブ効果（べべルとエンボス）の効果を下図のように設定する。


↓Photoshopライブ効果（べべルとエンボス）の効果がこちら



ステップ-6：ホームボタンの作成
矩形ツールで142×142pixel（x=530,y=134）の円を作り、図のようなグラデーションを作ります。
そして
・円形グラデーション：#060606,#4d4d4d
・エッジをぼかす：2
（ボタンの境界がハッキリしすぎていると不自然なのでぼかしています）
・光彩：距離→1,不透明度→40%,ぼかし→1,オフセット→0,#000000
（実際にはボタンと境界には隙間があるので、それをここで表現しています）



ステップ-7：スピーカーの作成
矩形ツールで120×14pixelの長方形を作り、
・塗り：#808080
・テクスチャ：網目1→30%
（メッシュをイメージしています）
・光彩（内側）：距離→4,不透明度→65%,ぼかし→4,オフセット→0,#000000
（メッシュの雰囲気を出すため少し盛り上がったイメージにしています。本物は平らな感じです）



ステップ-8：カメラの作成
(1)矩形ツールで38×38pixel（x=457,y=180）の円を作り、
・円形グラデーション：#161817,#4A4947
・エッジをぼかす：1（境界がハッキリしすぎていると不自然なので）
(2)その上に、16×16pixel（x=468,y=191）の円を作り、
・塗り：#093675
・光彩（内側）：距離→4,不透明度→65%,ぼかし→4,オフセット→0,#000000



ステップ-9：画面の作成
(1)矩形ツールで654×974pixel（x=273,y=313,丸み：2,塗り：#000000）の長方形を作ります（液晶の枠？）
(2)お好みの画像とインターフェース配置


(3)その上にマスク用の長方形（640×960pixel（x=280,y=320,塗り：#000000））を作り、(2)の画像をマスク


(4)マスクした画像に
・シャドウ（内側）：距離→8,不透明度→65%,ぼかし→16,角度→315
を設定して、雰囲気を出します。
実際はこんな風には見えないんですが、こうすることで、画面っぽく見えてきます。



ステップ-10：ハイライトの作成
(1)図のようにハイライトとなる三角形を大きめに描きます。


(2)図-5の(2)で作った矩形をコピーして(1)三角形の上に貼り付けます。
(3) (1)と(2)の図を同時に選択して変更(M)＞パスの結合(O)＞交差(I)をしてハイライト画像を切り抜きます。


(4)切り抜いて出来た画像を
・線形グラデーション：#FFFFFF（100%),#FFFFFF（0%）
・レイヤーの不透明度：50％
に設定して図のような範囲でグラデーションをかけます。



これで、出来上がりです。



今回は正面しか作りませんでしたが、次回は斜めとかいろいろと作りたいと思います。

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