モバイル用のイメージングは、常にそれがどのように見えますか
グラフィックスのプロが仕事を印刷物に表示するだけでなく、iPhoneやiPad、Androidデバイス、Androidタブレットなどのウェブやデバイスにも普及するようになってきています。 表面上、私たちの作品が出現するメディアがデジタル画面に拡大するにつれ、これは「良いこと」と見ることができます。 欠点は、画面数が膨大で、画面解像度が混乱していることです。 CMYK形式の300dpiの解像度のTIFF画像が標準であった時代に何が起こったのか、熟練したプロが聞くのは珍しいことではありません。 ああ、良い昔！
その日は終わった。 私たちは今、200×200のイメージが1つのデバイス上で正常に見えるかもしれませんが、別のデバイスでは4分の1サイズ、さらに別のデバイスでは3/4サイズのサイズに見えます。 デバイスメーカーが競合他社よりも多くのピクセルをスクリーンに詰まらせようとするとき、「解像度アームレース」には本当にすべての問題があります。
これは私たちが "サフィックスの上昇"と呼ぶものに私たちをもたらします。 接尾辞は@ 2x、@ 3xのようなもので、画像の名前に付けられています。 それらは本質的に、例えば、正しい画像を正しい装置の正しい場所に置く。 その後、それはさらに良くなります。
私たちの多くの作業にはアイコンを使った作業が含まれています。フラットなデザインの動きのため、 IllustratorやSketchなどのベクター描画アプリケーションで作成されます。 問題はデバイスが簡単に.aiまたは.epsファイルをレンダリングできないことです。 Scalable Vector Graphicsに変換する必要があります。アイコンの作成に使用されるアプリケーションによっては、SVGオプションがない場合もあります。
その後、それはさらに良くなります。
あなたのイメージやアイコンがデバイスに押し出される前に、アセンブリポイントになっている新しいクラスのソフトウェア、つまりプロトタイピングアプリケーションがあります。また、それらの特殊性もあります。
このチュートリアルでは、PhotoshopとSketchの間でグラフィックスを移動し、 Adobe Experience Designを使用して、アイデアと最終的な展開の間にある苦境点のいくつかを示します。 始めましょう。
05の01
Adobe Photoshopでモバイルデバイスの画像を準備する方法
このプロセスの最初のステップは、ターゲットデバイスを認識することです。 この場合、画面領域の幅が375ピクセル、高さが667ピクセルのiPhone 6をターゲットにします。 このデザインでは、イメージが画面の幅であることが要求されます。
使用される画像は、スイスのベルンにあるベルン・ミンスター大聖堂で撮影されました。 Photoshopで画像を開いたら、 [画像]> [画像サイズ]を選択して 、 画像のサイズと解像度を確認します。 明らかに、3156 x 2592、解像度300 ppi、ファイルサイズ23.4 Mbの画像は機能しません。
[イメージサイズ]ダイアログボックスで、解像度を100 ppiに縮小します。 イメージの寸法も変わるため、まずこれを行います。 解像度を設定して、幅を375ピクセルに変更します。 イメージサイズのデータを確認すると、イメージは23.4Mbからモバイルフレンドリーな338kに縮小されています。 [OK]をクリックして変更を受け入れ、[イメージサイズ]ダイアログボックスを閉じます。
05の02
Adobe Photoshopの[名前を付けてエクスポート...]ダイアログボックスを使用する方法
イメージのエクスポート準備が完了したら、 [エクスポート>別名でエクスポート... ]を選択して 、 [名前を付けてエクスポート]ダイアログボックスを開きます。
このダイアログボックスは、最近Photoshopに追加され、何年も使用していた[Save For Web]ダイアログボックスに代わるものです。 それでも必要な場合は、「書き出し」ポップアップで見つけることができます。 これは明らかな理由から、現在「Export For Web（Legacy）」として知られています。 このダイアログボックスに初めてアクセスした場合は、ここをクリックしてください。
- サイズ：画像の出力サイズを設定します。 この領域の興味深い側面は、画像を拡大することですが、デバイスの画面上の膨大な数のピクセルのために、画像がデバイス上に「あいまい」として表示されることはありません。
- 1X：これをクリックすると、いくつかのサイズが表示されます。 1x、2x、3xのカテゴリは、従来、AppleのHi Dpiデバイスに関連付けられていましたが、他のデバイスと一緒にAndroidデバイス向けの画像を準備します。
- 接尾辞：この選択肢はあなたのサイズを表示しますが、@ 2xとして表示されるか、サイズが選択されます。 この接尾辞がイメージ名に追加されます。
- +記号：これをクリックすると、さまざまなサイズの出力を追加できます。 この場合、それを2回クリックし、ポップダウンから2xと3xを選択します。 これは実質的にどのiOSデバイスにも適用されます。
- ごみ箱：これをクリックすると、選択肢がラインナップから削除されます。
- ファイル設定：画像に最も適した形式（jpg、png、gif、svg）を選択します。 ファイルサイズが問題になる場合は、品質設定を減らすこともできます。
- 画像サイズ：画像の物理的な大きさを変更することができます。
- キャンバスサイズ：イメージキャンバスの物理的な大きさを変更することができます。
- メタデータ：画像のメタデータに著作権と連絡先情報を追加できます。
終了したら、[すべてエクスポート]ボタンをクリックします。 画像を配置する場所を尋ねられます。 開発する良い習慣は、[新しいフォルダ]ボタンをクリックし、エクスポートされたイメージを保持するフォルダを作成することです。 [エクスポート]をクリックすると、フォルダ内にイメージが表示されます。
03/05
ボヘミアンコーディングからSketch 3でモバイルデバイスの画像を準備する方法
Bohemian CodingのMacintosh専用アプリケーションであるSketch 3は、Webやアプリのデザインに集中しているため、UXやUIデザイナーの間で急速に注目されています。 実際、Photoshopは、多くの点で、Sketchとの「追いつき」を演じなければならないという奇妙な立場にある。
スケッチでモバイル用の画像を準備するには、アートボード上の画像を選択し、プロパティパネルの下部にある[書き出し可能にする]ボタンをクリックします 。 エクスポートダイアログボックスが開きます。 +記号をクリックして2xおよび3xバージョンを追加し、接尾辞も追加します。 利用可能な形式はPNG、JPG、TIF、PDF、EPS、SVGです。 この場合、JPGを選択します。 [エクスポート]ボタンをクリックして、エクスポートしたさまざまなイメージを保持するフォルダをターゲットまたは作成します。
04/05
3つ（またはそれ以上）のバージョンのイメージを作成する必要があるのはなぜですか
多くの点で、モバイル市場は決議の「ワイルド・ウェスト」であり、1つのサイズは完全には適合しません。 上記のAdobe Experience Designの例では、イメージは2つのiPhone 6のアートボードとAndroidデバイスのアートボードに配置されています。 どのように左の1xバージョンが半分のサイズであるように見えるかに注目してください。 これは、iPhone 6の網膜スクリーンに画像がどのように表示されるかを正確に示しています。 2xバージョンは完全に適合し、アンドロイドバージョンは画面から外れます。 あなたの選択は、イメージのサイズを変更するか、イメージをPhotoshopから別のサイズで書き出すことです。
05/05
早い段階でテストする、よくテストする、信頼しない、信頼しない、特に自分自身を信用する
あなたが理解する必要があるのは、これがプロセスの始まりに過ぎないということです。 できるだけ多くのデバイスで作業を表示することは、ワークフローの重要な部分とみなされなければなりません 。 また、これは、アプリまたはモバイルWebプロジェクト用のグラフィックスアセットを作成するプロセスの第一歩であることを認識する必要があります。
プロトタイプアプリケーションを使用することは、痛みポイントを明らかにする優れた方法ですが、これらの同じアセットを開発者が使用するために出力する必要があります。 多くの場合、アイコンを含む資産の物理的な大きさは物理的に大きく、svgではなくpng形式になります。 一見すると、これは一番上にあるように思えるかもしれませんが、画像のスケーリングの黄金のルールを覚えています。スケールアップするよりもスケールダウンするほうがいいです。
要点は、開発者と緊密に連携し、プロトタイピングソフトウェアを使用して設計意図を示すことです。 最終的には、最終的な製品のために同じ資産を準備する必要があり、開発者は自分よりも必要なものをよりよく扱うことができます。