三階ラボで公開した iPhone 4 のベクターデータです。開発者さんがデモやサンプルとして使用することを目的に描きました。

印刷用のデータは現物とほぼ同じサイズで作成し、ウェブ用のデータは各ライン・各パーツをピクセル単位で微調整し、最適化してあります。

作成フロー

1. iPhone 4 の大きめな写真を元に大枠を描く （トレース。Illustratorの醍醐味！）
2. iPhone 4 の実物を定規で測りながらサイズ調整をする （地味！）
3. 角丸具合を調整する （ここ大事！プロダクトの枠を描くとき、効果では表現できない絶妙な角丸なので、Illustratorの角丸効果は使用せず手作業でアンカーポイントを調整します）
4. iPhone 4 のディスプレイの画面解像度に合せ、mm単位で実寸サイズに調整する （意外と面倒！）
5. CMYKで色を調整して、印刷用データの完成 （ここまで2時間！）
6. ディスプレイ部分の縦横ピクセル数を640px 960pxに変更しウェブ用に最適化する （計算苦手！）
7. ラインやオブジェクトの数値を0.5pxか1px単位で調整していく （これ面倒！けど重要！ これやらないとボケ〜とした絵になります）
8. RGBで色を調整する （ぼくの場合はHSB）
9. 50%サイズのデータも用意する （親切！ ディスプレイ部分の縦横ピクセル数を640px 960pxだとウェブで使うには大きすぎる…）
10. サイズを50%にしたことによって、ボケボケになってしまったラインやオブジェクトの数値をもう一度0.5pxか1px単位で調整していく （この辺で飽きてくる）
11. 一気に書き出す （はぁ…）

といった流れでした。

アウトラインデータ自体は必要最小限に抑え、アピアランス機能を多用し、見た目を再現してあります。（グラデーションメッシュは使っていません）

Illustratorの「アピアランス」は使い方次第では有効な機能です。ひとつのアウトラインに対し、塗りや線を複数もたせ、それぞれに「効果」を適応することができます。

例えば「ホームボタン」。

実際は矩形のアウトラインデータ1つだけです。それに4つの塗りと線を追加し、「パスのオフセット」や「楕円形」を適応させて表現しています。（ちなみにボディ部分は7つの塗りと線で構成されています）

ぼくがグラデーションメッシュ使ったりアウトラインデータを増やしたりせずアピアランスにこだわるのは、「色や形状を後々簡単に変更できる」からです。
※アウトラインを増やしすぎると後々サイズの調整が大変だったり、グラデーションメッシュだとちょっとした色の変更が面倒だったりします。

もし興味を持っていただけましたら、ぜひ三階ラボからベクターデータをダウンロードしてみてください！

ダウンロードしに行く