プレビュー 解像度と画像サイズについて

Macを買った当初は、『わざわざアイコン作っているけど、意味あるの!?』
そう思っていた『プレビュー』Mac使いだすと、意外とお世話になっていました。
そしてホームページ作成等していて、解像度や画像サイズを調整する際、
大活躍してくれる事を教えて頂きました。その使い方を解説します。



まずは僕が作ったWi-Fiアイコンを、
愛用中のHP作成ソフト【BiND3.5】で使用例で説明します。
①iWorkのPagesでWi-Fiアイコンを作ります

これは全部Pagesで作りました。iPhoneのアイコン風に加工してみました。
これはPagesファイルですので、画像としては取り扱い出来ません。
よってBiNDやiWork(Pages、Numbers、Keynote)等に画像貼付け素材としては
使用が出来ないという事です。
②Pagesで作った作品を画像にする
画像として貼付けるには、一般的に以下の形式に変換する必要があります。
◉JPEG…多くの色を使え、圧縮効率も良いためサクサク使える
◉GIF　…使用色数の少ない画像の場合に適していいる
◉PNG…背景を透明にした際、それを繁栄した書き出しが出来る
背面が白くならない為そのようとが必要な際に使用する
ファイル形式を選択したら、変換を『プレビュー』で行います。
Pages画面上で『ファイル』→『プリント』を選択します。

　以下のウィンドウが表示されますので、

　プレビューをクリックします。

すると『Pages』から『プレビュー』にアプリケーションが変更されます。
そこで『ファイル』→『別名で保存』をクリックします。

すると『フォーマット』を選択する事が出来ますので、

上記3種類のどれかを選択します。
今回はグラデーションを活用しているので、【PNG】にします。
プレビューを表示した場合、初期設定では『PDF』になります。

保存する際に、『解像度』を決めるように要求されます。
解像度とは決められた範囲内に、どれだけのピクセルをが存在するか!?
画像に存在するピクセルの密度の数値です。
72ピクセル/インチの設定が一般的らしいので、その数値を入力します。
そして保存したら終了なのですが、余白が多すぎますので加工します。

『ツール』→『選択ツール』を選択します。
適当な位置からクリックし、画像を覆うように引っ張ります。

　すると点線で覆われますので、8点あるグレー●のポイントをクリックし、

　出来るだけ点線枠を小さくします。点線枠内が余白となります。

次に同じく『ツール』→『切り取り』を選択します。

すると最小限の余白で画像が変更されます。
しかし、四隅が丸い四角のアイコンである為、少し残りますね。

そこで『インスタントアルファ』を選択します。
インスタントアルファは、同じような色を選択して、
その部分を切り取るという機能です。あくまでもお手軽にです。
細かく切り抜く能力は持っていません。

　クリックしたまま引っ張ると、画面のようにオレンジ色が増えていきます。

　その部分が切り取り対象になります。引っ張る程度で範囲が決まりますので、

　ある程度丁寧に作業しましょう。しかしお手軽機能なので限界があります。

　もっとキレイにしたい場合はAdobe Photoshopがオススメです。

　僕はElementsを使用しています。安価版ですね。僕には充分です。

作業後は以下のようになります。ちょっと雑ですが仕方ありません…。
背景が白色の場面で使う場合は大丈夫かもしれませんね。

では本題の画像サイズ調整です。縦 ○○ cm × 横 ○○ cmの設定です。
Webでは『cm』の設定が『ピクセル』に変わるだけです。
BiNDでは貼付ける範囲によって画像サイズを表示してくれます。
その数字を事前に確認しておく事が重要です。

ホームページに貼付けて使用する場合は、貼付けたい大きさに対して
100%の大きさで書き出す事が重要であるとの事です。
BiND上で画像の大きさを変更した際、作成した画像が壊れて表示される
可能性があります。ぼくもそのようになりました。

ではその設定方法ですが、『ツール』→『サイズを調整』です。

そこで表示される『幅』と『高さ』をホームページで使用したい
『幅』と『高さ』に合わせる事で終了です。
これでホームページで表示する際に、作成した画像と同じ内容で
キチっと表示されるようになります。