capeknote

使い方

上に表示されてる「実寸くん」はflashによる縮尺計算機です。
モニタのインチサイズ・解像度を入力すると、お使いの環境で画像を何％縮小表示すればiphone実機相当の大きさで見えるか、といった数値を表示します。
解像度は自動入力してるので、間違ってなければ、インチのみ入力してください。

その「実寸くん」から得られた縮尺率をデザイン中の画像に適用すると、左の画像のように実機と画面上のテンプレが似たようなサイズになります。実際の感じをつかみながらデザインしたい時に便利です。


(※3GSまで。iphone4は解像度4倍ですっけ・・さらに25%すればいけるとおもいますが。。)
あ、あと画像の縮小等はフォトショやGIMPつかってくださいね。

※完全に一致・・・するかどうかはモニタまわりの黒縁の大きさや設定等で誤差ができると思います。
　ほんとの実寸になることを保証するものではないことをご了承ください

どうして作ったか

左の画像は、Macで100％表示したiphone用のPSDのテンプレ(→iphone GUI PSD 3.0 by Geoff Teehan)と、実機をならべたものです。

でっかい、ですよね。

iphoneのディスプレイ部分の大きさで320px × 420px ですが、ピクセルはモニタインチと解像度によって表示される大きさがかわってしまうので、こんなふうになっています。

ちょっとこれだと、実際の見え方がわかりにくくてデザインしにくいなー、何％縮小すればモニタ上で実機サイズに見えるのかなー？　と思って「実寸くん」を作成しました。

Photoshopで縮小表示するときのTips

ところでPhotoshopで作業されてる方はご存知だと思いますが、虫眼鏡ツールなどで中途半端な80.5％とかの縮尺で表示させると、すっげー文字や画像がガビガビになります。
これだと実寸でどんなかんじ？という確認にならないので、簡単なTipsをひとつ。

【photoshopで縮小表示確認するときのTips】
スマートオブジェクトを配置したほうで縮小して編集はスマートオブジェクト本体で行います。（CS3以降）
スマートオブジェクトはFlashで言うシンボルみたいなものです。配置したもののサイズを変えても内容物は非破壊のまま保たれます。またスマートオブジェクト内を修正して保存すると即座に変更が反映されます。

【手順】
・必要なテンプレ画像を作成し、デスクトップかどこかに保存
・ファイル　＞　スマートオブジェクトとして開く　から先ほどのファイルを開く
・「実寸くん」でもとめたサイズに縮小します。これできれいに実寸でみれました
・レイヤーをダブルクリックするとスマートオブジェクトの本体が開くので編集
　保存すると即座に反映されるので、感じをつかみながらデザインできます

画像は、photoshopのキャプチャですが、左がスマートオブジェクトでひらいて、iphone実寸にしたもの、右が編集中の、スマートオブジェクトの中身です。こんなふうに並べて作業するとよさげかと思います。

iphone制作用ツールなのになんでflashで作ったのかはげふんげふんげふん・・

それではenjoy!