Apple iPhoneモックをフォトショップ（photoshop)での作成方法の紹介です。知っておくといい使えるテクニックについても書いてみました。今回もデータを用意していますので、実際にダウンロードし、開いて確認してみてください。
画像はクリックで拡大縮小できます。拡大した状態でドラッグで移動したりもできます。
以前からエントリーする予定でいたのに、大分と時間を空け遅くなってしまいました。
Tipsも要点のみの説明です（いろんなパターンでTipsを紹介しています。ベストは、画像＋２，３行のテキストでシンプルに説明をするといいかも）。
作業手順
実際にデータをダウンロードして、見ていただくとお分かりいただけると思います。今回私が作ったiPhoneモックはすべてで 個のオブジェクトを重ね合わせて作っています。
データはこちら（zip圧縮:PSDとEPS）ファイルをダウンロード
実際にiPhoneの元画像を用意して（今はココでDLできるんですね写真のダウンロード - iPhone）、色別でレイヤーで分けてパーツを作成していきます。すべてのパーツをシェイプを使って作成し、ダイレクトペンツールを使い、部分的に変形（成型）していきます。
ポイント１（金属部分の質感を演出するテクニック）
金属部分の質感を出すためにレイヤーマスクを使って”サテン”を施します。サテンは金属部分の質感をかもし出すのに使うといいと思います。今回は、薄いグレー〜グレーのグラデーションに対して、上から”サテン”をかけています。
ポイント２（ステンレスなどの反射に薄いブルー）
ステンレスという金属は、艶々していると鏡のようにいろんなものを写しこみ、とても複雑な色にもなります。よくリフォーム雑誌などを読んでいるのですが、ステンレス製品って、意外と青っぽい感じの要素をいれてみるとそれなりにしっくりします。
側面の中央部分にかけてわずかですが、ハイライト部分に薄い青のグラデーションを入れて質感を出すようにしました。
ポイント３（選択範囲切り抜き）
上記の側面部分の中央部分のみを選択する場合、パスでそれなりに選択範囲を作ってみてもいいのですが、今回はパーツで作成されていますので、外枠2番目のパス部分から表面部分パスを切り抜くと、側面のステンレス部分だけが選択できるようになります。
これをできるだけ早く選択する（作業する）には、レイヤーパレットで各レイヤーウインドウをクリックすることで切り抜き作業を行うようにします。（作業手順の詳細は、画像をクリック。）
側面ステンレス部分のみ選択できたら、選択範囲を縮小（サイズ指定1ピクセル）して、中央部分に選択範囲を作成します。
ショートカット
対象のパスを選択する場合、CTRL＋対象のレイヤーでのサムネイル（レイヤーウインドウ）をクリックすることで対象を選択することができる。
ついでに、CTRL+対象のパスなどをクリック（作業画面にて）すると対象レイヤーへアクティブ状態が移動する（レイヤーウインドウ）。
表面部分の移りこみパターンも用意（複製）
普通に光が反射しているような感じでグラデーションを作成します。色は、元画像からスポイトツールなどを使って拾ってみると早いかも
液晶部分を追加
液晶部分を追加していきます。光の反射の関係上、不透明度を少し変えて、バックのグラデーションが軽く出るようにします。
各パーツを追加していく
ボタンタッチ部分などさまざまなパーツを追加していきます。光の当たり方を考えてグラデーションを変えていきます。本物と同じようにさまざまなパーツを作成して、追加していくことで完成です。各パーツは各自にて作ってみてください。
最後に前回のエントリーでの楕円のぼかし（photoshop（フォトショップ） Tips-選択範囲の境界線をぼかすテクニック）を追加して、出来上がり。
出来上がったものをTwitter ブログパーツ（Badgesカスタマイズ）と素材 やjQueryカスタムサーチエンジン＆iTwitter powered by jQueryなどで取り上げたサイトで使っていたりします。
金属の製品なんかをphotoshopで作るときには、サテンなどの効果を使ってみてください。また、ステンレス部分は薄く青い色を入れてあげるとグッときます。
コメントする