Category: Flash

「実寸くんAir」〜画面にipadや紙を実寸相当で表示したいときの縮尺計算機

2010/08/03

title

実寸くんのAir版をつくりました

cap
→こちらからダウンロードできます
 (文字が出てしまう方は右クリックで保存してください)

【これは何?】
実寸くんAirは、画面に表示中のiphone,ipad,印刷物のデザインを何%縮小すれば実寸相当に見えるか計算するAirアプリケーションです。

【使い方】
1.インストールして起動すると左のような画面がでてきます
2.実寸表示させたい対象を選びます。紙は解像度も選べます
3.お使いのモニタのインチ数をいれてください
4.計算を押すと一番したのフォームに%がでます
5.グラフィックアプリで対象をこの縮尺に拡大縮小させます
6.ほぼ実寸どおりの大きさで見ることができるので、実物のサイズのデザインの感じがつかめます

【動作環境】
Airランタイム1.5以上が必要です。
→Adobeサイトからダウンロードできます。
Mac Windows両方でうごきますが、72dpi換算でつくったので96dpiのwindowsだと誤差がでる可能性があります。


【免責事項】
実寸くんAir(以下本アプリ)は画面上での実寸表示を目的として縮尺率を計算するアプリケーションですが、完全に一致するかどうかはご利用のモニタの黒ふちの量等の設定などに左右されますので計算による結果を保証するものではありません。
本アプリはフリーソフトウェアです。利用者は自己の責任において本アプリを利用するものとし、いかなる損害も当方は一切責任を負わないものとします。


そんなわけで

今回のver1では紙(A5-A3 B5-B3 ハガキ 名刺)・iphone4・ipadに対応してみました。印刷デザインとかでWYSIWYGぽい使い方ができるんじゃないかな〜と思います。
Flex版の実寸くんのときにも書きましたが、photoshopでやるぶんには拡大縮小はスマートオブジェクトでやったほうがきれいです。あとイラレは解像度関係なく72dpi換算で表示されてるみたいですのでイラレ用途のときは72dpiを選択するといいと思います。

もうちょっと汎用的な数値指定のUIにする方向もあったかと思いますが、あんまり入力の手間があるのもなーということで今回は割愛。画面デザインもちょっと今iphone開発のほうに時間を使いたいので暇なときに。
前回のFlex版からはデータの追加以外はmx:Applicationをmx:WindowedApplicationに変更したくらいでAirになったので移植の手間はほとんどなかったという感じです。
もうちょいAirっぽいことを(アンドロイドに向けて)知っときたいのでまた一段落したら手をいれるかもしれません。
それでは何かのお役にたてれば。

「実寸くん」〜Macの画面にiphone実寸相当で表示したいときの縮尺計算機

2010/05/08

The Flash plugin is required to view this object.



使い方

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

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


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

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


どうして作ったか

0左の画像は、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で言うシンボルみたいなものです。配置したもののサイズを変えても内容物は非破壊のまま保たれます。またスマートオブジェクト内を修正して保存すると即座に変更が反映されます。

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

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

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

それではenjoy!