wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

Expression Designで解像度を96 PPIにするためのコツ

※このエントリーは、ExpressionTech.jpに掲載されていたExpression Blend and Design翻訳記事です。

記事元ソース:Trick or Treat : Resolution = 96 PPI by Joanna Mason

はじめに

今までに画像やIllustratorファイルをExpression DesignやExpression Blendにインポートしたときに、元の画像より少し大きいまたは小さいと気付いたことはありませんか? この投稿ではなぜこのような現象が起きているのか、および、期待通りにExpression DesignやBlendに画像やそのほかのアセットをインポートするためのいくつかのポイントやTipsを説明します。

AppleとMicrosoftの解像度の基準が異なる

Expression Blendの解像度は 1インチ当たり96ピクセルを想定しています。WPF、Expression BlendおよびSilverlightのすべては、1ピクセルあたり1/96インチ、解像度 96 PPIを想定しています。あなたはおそらくなぜ 96 PPI?と自分に問いかけるでしょう。私は自分のWebの仕事には72PPIを使ってました。その短い答えは、Microsoftが96 PPIを標準的に使っているということです。Appleの標準がなぜ72 PPIとして決定されたのか表現された多くのWebサイトが存在します。私は読者がお気に入りの検索エンジンで 96 PPI を検索するためのチョイスについてもっと学ぶことを勧めます。

96 PPI 以外の解像度を指定して保存されたリソースで作業している場合は、DesignとBlendを同じ物理サイズで 96 PPI にリソースをスケーリングします。たとえば、480 ピクセル、高さの 640 で 72 PPI は 6.667 インチ、幅、高さ 8.889 インチのイメージの幅です。96 PPI の解像度で、同じ画像を表示したい場合は、幅と高さの 640 と 853 ピクセルでそれぞれがある必要があります。そのため、デザインまたは 72 PPI で作成されたブレンドに 480 x 640 イメージをインポートする場合は、インポートした後は、実際のサイズは 640 x 853 になります。

ワークフロー全体を96 PPIで使用するのがベスト

他のコンテンツの生成ツールでお客様のリソースで同じピクセル サイズでExpression DesignまたはBlendで確認する最善の方法は ワークフロー全体を96 PPIで使用することです。

Expression Designで使用中に そのファイルにて96 PPI を選択するには、[ファイル]メニューの[新規作成]を選択します。

f:id:wanichan:20190528153003p:plain
さらに、フルサイズでコンテンツを見るためにズーム レベルにおいて[画面に合わせる]から[実際のピクセル]に設定する必要があります。96 PPI ではこの場合 133% です。

f:id:wanichan:20190528153025j:plain
Photoshop では、ストアドの解像度の画像 [画像サイズ] ダイアログ ボックスで 96 PPI に変更できます。画像の「リサンプル」チェックボックスをオフにする必要があります。

f:id:wanichan:20190528153042j:plain
残念ながら、Illustrator ファイル 72 PPI、現在は常にドキュメントの解像度が 96 PPI のときにデザインをインポートするときに拡張します。この場合、拡大/縮小としてパーセント操作バーで変換オプションのポップアップ ・ メニューから選択して、オブジェクトを目的のピクセル サイズを得ることができます。幅と高さにリンクされ、幅または高さを 75% に変更を確認してください (72/96 =.75).

f:id:wanichan:20190528153114j:plain