Adobe Illustratorでピクセルパーフェクトイメージを作成する方法

翻訳者から

ようこそ、％username％！



私はインターフェイスデザイナーの仕事に慣れていないので、長い間、欠員をめくって、そのうちの1つの要件に興味がありました。 Adobeパッケージの知識、プロトタイピングツール、ux / uiスキルなどの中で、求職者がレイヤー、ファイルとフォルダーの構造と名前を整理し、適用することができるといいと読んでいますピクセルパーフェクトと呼ばれるものを練習します。 仕事では私も他の従業員もこれを必要としないので、これは私に興味がありましたが、私は常にそれに固執し、他の人にそれを説得しようとしましたが、何らかの理由で私は理由を説明する十分な議論を持っていませんでしたする必要があります。



当時、私はピクセルパーフェクトの概念にまったく精通していませんでした。数回しか聞いていませんでした。この項目は「精度」の要件リストの最後にあったので、組織の氷山の一角であるクライマックスのようなものであることに気付きましたレイアウトで動作します。



私は検索を始めましたが、プログラマーはピクセル完璧に関するいくつかの段落からHabréに関する記事以外は何も見つけませんでした。 それからどういうわけか、モニュメントバレーについて聞いて、Pixel Perfect Precisionの参考書に出くわしましたが、英語でそれほど多くの情報を勉強する時間がなかったので、初めて私を捕らえませんでした。 時間は現れ始め、いくつかの記事が出てきましたが、そのうちの1つはPixel Perfectに関する実用的なヒントでいっぱいで、私を夢中にさせました。私は読んで理解するだけでなく、文学をできるだけ広く翻訳して質問を広く宣伝し、Habréに関するトピックを広めることにしました。



小さな技術的なポイント。 Tuts +の元の記事は「Adobe Illustratorを使用してピクセルパーフェクトアートワークを作成する方法」と呼ばれますが、記事で提案されている設定のほとんどはAdobe Photoshop CS6にも存在し、Adobe Photoshop CCではこれをすべて繰り返すことができます完全に。



導入の結論として、私がデザインするのが初めてであるという事実に注意を払わないようにお願いしたいと思います。これは私の人生における最初の翻訳です。 重要なこと、トピックは深刻です。 コメントであなたの考えや経験を共有することをお勧めします。

まとめ

この部分は、側面を掘り下げるのが面倒ですが、すぐに指示を受け取りたい人のためのものです。

または、すでに記事全体を読んでいるが、余分な段落なしで必要なすべての設定を別の職場ですぐに適用したい人のために。

Abobe Illustratorの設定

1. 編集>設定>単位>一般→ピクセル
   
   編集>設定>単位>ストローク→ピクセル
2. 編集>設定>ガイドとグリッド>グリッド線ごと→1px
   
   編集>設定>ガイドとグリッド>サブディビジョン→1px
3. 編集>設定>一般>キーボードインクリメント→1px
4. 表示>グリッドにスナップ
   
   表示>ポイントにスナップ
5. 表示>ピクセルプレビュー

感謝しないでください。

興味がある人は猫に行ってください。

Adobe Illustratorでピクセル完璧な画像を作成する方法

多くの場合、初心者のデザイナーは、Webの小さなもの（イラストやアイコンなど）にかなりの時間を費やさなければならないときに問題に遭遇し、その結果、最終的な写真では画像が十分に鮮明ではないことに気付きます。



これは、Adobe Illustratorを使い始めたばかりの場合に対処しなければならないことなので、この問題に精通していて解決策を探している人のために短い記事を書くことにしました。

1.ベクターおよびビットマップ画像

まず、あなた、私、そしてデザイナーの道を選んだすべての人々が定期的に遭遇するこれらの基本的な概念の違いに光を当てたいと思います。



クリエイティブクラフトで直面する必要があるすべての画像は、2つの大きなタイプに分けることができます。 これらはラスター画像とベクター画像です。



ベクター画像には、1つまたは複数のオブジェクトを含めることができます。これらのオブジェクトは、さまざまなアンカーポイントとそれらを接続する線（パス）で構成されます。 このような画像は、品質を損なうことなく、無限に拡大縮小できます。



ラスタイメージは、多くの色付きドットで構成され、各ドットは画像ピクセルグリッド内の厳密に固定された場所を占めます。 これは、画像が保存されるとすぐに、画像のスケーリング（拡大、縮小、および回転などの操作の他の操作）によって画像の品質が低下することを意味します。 これは、プロジェクトで必要な場合に1つの画像を異なる解像度に合わせるときに、画像のピクセル数を強制的に変更するためです。



ファイルの解像度を下げても画質にはそれほど影響しませんが、既存の画像の解像度を上げると画質が著しく低下し、ぼやけた領域とぼやけたエッジが表示されます。 Perfect Resizeなど、特別な高度なアルゴリズムを使用して拡大する画像の鮮明度を最適化する特別なプログラムがあります。 しかし、個人的には、この事実は、ラスターグラフィックスが非常に重要なプロパティを持たないという意味でベクトルグラフィックスより劣っていることを示す余分な証拠にすぎません-品質を損なうことなくスケーリングする能力（品質に依存しないスケーラビリティ）。



実際、ラスターとベクターの両方の画像の両方のタイプは、それらを使用する環境に依存します。 一般に、ご存じのとおり、任意の画像をプリンターでライブ印刷するか、モニター画面にデジタル形式で表示することができます。 プリンターは実際の印刷解像度に依存しますが、デジタル画面（PC、スマートフォン、タブレット、またはその他のデバイスに表示されるものは何でも）は解像度にも依存します。ベクターまたはビットマップグラフィックのどちらでもかまいません。



これは、私たちが今日話している問題を作成するだけです。 ベクターグラフィックスは、グラフィックスが重ねられるピクセルグリッドに収まる必要があります。 したがって、ピクセル単位のグラフィックスと、デザイナーがよく見かけるぼやけた画像との違いがわかります。



幸いなことに、私の意見では標準になるべき解決策があり、これらの設定は、Web用のグラフィックでも印刷用のグラフィックでも、新しいプロジェクトの作業開始時に適用する必要があります。

2. Adob​​e Illustratorの仕組みを見てみましょう。

何かを修正する前に、この何かがどのように機能するかを見てみましょう。 Illustratorは、数学アルゴリズムを使用して曲線（パス）（閉じているかどうかに関係なく）およびアンカーポイントを作成および表示するベクターグラフィックソフトウェアです。 アンカーポイントは、ベクトルオブジェクトのサイズと形状を制御できるポイントです。







アンカーポイント自体はそれほど重要ではありません。 重要なことは、それらがどのように広がっているか、キャンバス上に形成される曲線（アートボード）（バインディングの有無にかかわらず）です。次のステップでは、ピクセルパーフェクトイメージに影響を与えるあらゆる小さなことについて詳しく説明します。

3. Adob​​e Illustratorのセットアップ

デフォルトでは、Adobe Illustratorはほとんどのタスク用に事前に設定されているため、コンピューターへのプログラムのインストールが完了したらすぐに作業を開始できます。 私たちの職業の多くの人々にとって、標準設定は適切かもしれませんが、レイアウトの細部に注意を払うとすぐに、レイアウトを希望どおりに表示するために何かを変更する必要があることになりますそれらを見るために。 次の手順では、Adobe Illustratorを新しくインストールするたびに設定する必要があると思われるいくつかの基本的な事項について説明します。



始める前に、以下に説明するすべてが私の個人的な経験であることを明確にしたいと思います。特定のレーキを踏んで一定時間後にこれに来たので、私が理想または最良の提案した設定を呼び出すことはありません-私の意見では、ピクセル完璧な画像を作成するのにより適しています。 提案されたソリューションは、あなたに起こるかもしれないすべての状況に適していない可能性が非常に高いですが、ほとんどの場合、あなたがあなたを助けるいくつかのヒントを見つけると思います。

ステップ1

ユニットのセットアップを開始する前に、数秒かかり、ピクセルのデフォルトポイントとピクセルを比較して、後者をユニットとして選択した場合の変更点を確認します。

アイテム

この用語はタイポグラフィから来たもので、フォントサイズやその他のパラメーター、インデント、行間隔、行間の距離を測定できる最小単位を意味します。

ピクセル数

ウィキペディアに目を向けると、ピクセルはデジタルディスプレイに表示される最小要素であることがわかります。 すべての写真はディスプレイに表示されるため、ピクセルは測定の最小単位であると言えます。これにより、画面イメージとそれに表示される要素のサイズが決まります。



したがって、2つのユニットから選択できるので、違いは何ですか？ 多くの記事では、 1ピクセルは1ポイント（1 pt = 1 px）に等しいと述べていますが、これは、 1ポイント= 1/72インチであるため、解像度が72 ppiのディスプレイとOSにのみ当てはまります。 PPIは異なります。ポイントとピクセルには違いがあり、PPIが大きいほど、違いが大きくなります。 たとえば、 W3 Orgは0.75 pt = 1 pxを示します。



Appleは、このテーマに関する記事全体-iOS Developer Libraryページを書きました。アイテムはピクセルよりも使用した方がよい理由を説明しようとしています。

「たとえば、高解像度の画面では、1ポイントの線が2ピクセルの線に変わることがあります。 つまり、異なるサイズの画面（同じ画面をより高い解像度で、もう1つの画面をより小さな画面）で描画すると、両方の画面で描画がほぼ同じになります。

彼らが今日忘れてしまったのは、さまざまな画面、解像度、ピクセル密度を備えた膨大な数のデバイスメーカーがあることです。 そのため、写真の表示の違いがより顕著になっています。



今、あなたは尋ねなければならないので、何を使うべきですか？ 私自身はピクセルに傾倒する傾向があります。 なんで？ 答える最も簡単な方法は、これらが個人的な経験に基づく個人的な好みであることです。 私は主にイラストレーターとして仕事をしていますが、iPhoneのイラストでは、PCよりも線が太くなっていると不平を言う人はいません。



さらに、ピクセルはPPI（つまり、デバイスのピクセル密度）に依存せず、新しいファイルを作成するときにPPI値を増やすだけで、大画面のデバイスの画像解像度を簡単に制御できます。 さらに、さまざまなデバイスで解像度が大きく異なるため、Appleデバイスの1つで1ポイントが2ピクセルに等しくなる可能性がある一方で、1ポイントがたとえば、ピクセル密度が高い別のメーカーの別のデバイス。



実際、あなたを作る決断。 私のようにピクセルを選択する場合は、Adobe Illustratorの[基本設定]セクション（[編集]> [基本設定]> [単位]）で[単位 ]メニューを開き、 [ 一般]および[ ストローク]値を[ ピクセル ]に変更します。 フォントサイズは通常ポイントベースであるため、このサイズをピクセルに切り替えてもテキストの鮮明度は改善されないため、この値はそのままにしておくことをお勧めします。

ステップ2

レイアウトでユニットをすでに構成しました。今度はグリッド設定（Grid）に進みます。 このトピックに関する別の記事 （ Habréでの翻訳 ）があり、そこからこのトピックに関するすべてを入手できるため、グリッドとは何なのかについては語りません。 私が言いたいのは、本当に高品質で鮮明な画像を本当に作成したい場合は、グリッドに注意を払い、それを非常に正確にし、それにスナップして、定期的にピクセルプレビューモードを含めて作業することです（私たちはそれを検討します）数分でさらに）。



デフォルト設定を変更するには、[ 編集]> [設定]> [ガイドとグリッド]のメニューに移動し、注意する必要がある2つのオプションを表示します。 グリッド ラインのすべてのオプションと[ サブディビジョン ]オプション。 個人的には、両方のケースで値1を使用します。私自身は、作業中のプロジェクトに関係なく、これらが私にとって最適な設定であると判断しました。 はい、要素の位置により注意を払う必要がありますが、最も詳細な画像を作成することが目標である場合、これが私たちの方法です。

ステップ3

皆さんが職場でホットキーを使用することを願っています。 Illustratorには、キーボードの矢印キーを使用して、オブジェクトを短距離で非常に正確に移動できる設定があります。 レイアウト内のすべてがピクセルの境界に結び付けられるように努めているため、矢印をクリックするたびにオブジェクトが正確に1ピクセル移動するように構成する必要があります。



これらの設定は、メニューの[ 編集]> [設定]> [一般]> [キーボードインクリメント]にあります。



実際、これを使用したことがない場合、私はあなたに伝えます-これは、短距離でエラーなしでオブジェクトを即座に移動できるようにするスーパー機能です！ これらは、何かを少し動かす必要がある状況です。

4.プロセス

そのため、これまでに行ったすべての作業は、Illustratorをピクセルセンシティブにするために設定することでしたが、良い例として、単なる設定以上のものを指定する方が良いでしょう。 ウェブ上で使用されるものを作成するとき、私自身が作業するスキームについて、プロセスについてお話しします。

ステップ1

それはすべて、新しいドキュメントの設定から始まります。 新しいドキュメントを作成するときは、設定に少し注意を払う必要があります。これにより、ピクセル完璧な画像を作成するための基礎を準備できます。



Ctrl + Nを押し（または[ファイル]> [新規]に移動 ）、 [ プロファイル]から始まるいくつかの設定に注意します。







Pixelパーフェクトに夢中になっているため、 ProfileをWebに設定する必要があります 。 これから何が変わりますか？ この場合のIllustratorは、 UnitsをPixelsに自動的に変更し、 Color ModeをRGB（Red Green Blue）に変更します。



ドキュメントのサイズに注意を払うと、 幅と高さの両方に端数（ たとえば、960.5 x 560.38 ）のない丸い値（960 x 560 px）があることがわかります。 これについて何がそんなに重要ですか？ キャンバス（ アートボード ）を作成すると、たとえば幅が960.5ピクセルになり、右側にピクセルグリッドと一致しない小さな領域ができます。







これは、Adobe Illustratorですべての新しいオブジェクトをグリッドに揃える（新しいオブジェクトをピクセルグリッドに揃える）ためです。 この関数は非常に重要です。この関数を含めると、新しいオブジェクトを配置し、それらをPixel Gridにリンクするためのプログラムの指示が与えられ、画像の品質と鮮明さが向上します。



そのため、たとえば、サイズが960 x 560ピクセルの長方形を作成し、この長方形をCanvas（アートボード）に対して中央（水平および垂直）にしようとすると、 キャンバスの右側と下部が一致しないため、これは不可能になりますピクセルグリッドとキャンバスの境界線は、この領域のピクセルの境界線に正確に適合しません。







このオプションは、描画する場合にのみ重要だと思う人もいるかもしれませんが、印刷で使用すると、ピクセルグリッドのノードにのみアンカーポイントを配置するため、実を結ぶと思われます。どこにもありません。



注：寸法が分数のドキュメントで既に作業を開始している場合は、 アートボードツール（Shift + O）でいつでも修正できます。 しかし、私はまだこれに注意を払い、正しい丸められた値でキャンバスをすぐに作成することをお勧めします。これは将来の頭痛からあなたを救います。

ステップ2

ドキュメント設定を正しく設定したら、すべての要素のサイズに関するこの規則も守ってください。すべての要素の幅と高さに小数部分がないことを確認してください。



そのため、オブジェクトを作成するときは、ピクセルグリッドのオーバーレイルールも順守する必要があります。 明確な画像を作成したい場合、たとえ正方形であっても、固定サイズ（ 200 x 200ピクセルなど ）を設定する必要があります。これにより、図の各ピクセルがピクセルグリッド上の1ピクセルと図のピクセル境界を正確にカバーするようになりますCanvas（ArtBoard）上のまったく同じピクセル番号の境界と一致します。 これを確認するために、シェイプを作成し、可能な限りズームインします。最大倍率でも、エッジがぼやけずにクリスタルクリアに見えるようにします。







200.4 x 199.9ピクセルのシェイプを作成した場合、Illustratorはシェイプの右と下にアンチエイリアシング効果を適用し、境界線はピクセルグリッドと一致しなくなり、シェイプは悪くなり、シャープではなくなります。







幸いなことに、Adobeの賢い人たちはパンを食べても無駄ではありません。彼らがこの問題の解決策を考え出し、Transformパレットの一番下にあるAlign to Pixel Grid機能を追加することでそれを提供してくれるからです。位置の悪いオブジェクトを選択し、それに対して [ 整列 ]オプションを有効にすると、オブジェクトの寸法は200ピクセルに自動的に丸められます。これは最も近い整数値であるためです。注：お使いのパレット場合変換はそのようなオプションはありません、あなたはパレットでディスプレイにそれを回すことができます変換、選択オプションを表示します。

ステップ3

そのため、Pixel Perfectイメージを作成できるAdobe Illustratorの最も重要な機能にほぼ近づきました。同様の効果をもたらす2つの関数がありますが、見てみると重要な違いがあります。

グリッドスナップ

名前が示すように、このオプションはオブジェクトをGridに、以前に設定した設定と同じグリッドにバインドします。この機能は、メニュー[表示]> [グリッドにスナップ（Shift + Control + ''） ]で有効にできます。この関数にはAdobe Illustratorアルゴリズムが含まれており、これにより、キャンバス（アートボード）上のすべてのオブジェクトがノードとグリッド線にエッジでスナップされます。

ピクセルスナップ

[ピクセルにスナップ]は、変更できないオブジェクトをピクセルグリッドにバインドするため、前の関数とは少し異なります。この機能は、ピクセルプレビュー（Alt + Control + Y）を有効にするまで非表示になります。この場合、グリッドにスナップをピクセルグリッドにスナップに変更します。







ところで、あなたはこれらの2つの関数の効果揃えることができ、グリッドへのスナップとピクセルにスナップを使用すると、各を通して、あなたのグリッドを設定している場合は1つのピクセルで、除算（区）で1本当にあなたのグリッドの最小値であり、同じようにグリッドをひねりますピクセルグリッド（ピクセルグリッド）。

ステップ4

あなたはを参照して作業する場合、ピクセルグリッド、プレビューモード、クリスタルクリアでシャープな画像を作成する過程で、あなたの主なツールとなるでしょう。これにより、ピクセルレベルで値を増やし、画像のどの部分に細心の注意が必要かを確認できます。私はこの機能を常に使用していますが、これはいつでも役立ちます。私が前に言ったように、オプションメニューで活性化することができる[表示]> [ピクセルプレビュー、またはを押してAltキー+ Ctrlキー+ Yを。

ステップ5

必要なものをすべて描いたら、少し時間がかかります。念のため、すべてのアンカーポイントがPixel Gridに接続されていることを確認してください。グリッドノード間に挿入されたポイントが見つかった場合は、直接選択ツール（A）をつかみ、このアンカーポイントを選択して、最も近いグリッドノードに移動します。ピクセルグリッドに合わせる



機能を使用すること自体がこのような問題を処理すると考えるでしょうが、私の経験では、プログラムでエラーが発生することがあり、これが発生すると、直接選択ツール（A）を選択し、これらの問題を手動で修正します。

ステップ6

ベジェ曲線-ベクターグラフィックスで動作するプログラムの不可欠なツールであり、ガイドの助けを借りてオブジェクトの形状を変更したり、閉じた曲線や開いた曲線を変更したりできます。すべての新参者にとっての問題は、特に考えずにarbitrarily意的にベジエハンドルを引っ張る場合が多いことです。このため、ベクトルカーブは見た目があまり良くなく、私たちが望むほど平坦ではありません。







トリックは、ハンドルの角度が可能な限り45°の倍数になるようにすることです。ガイドラインが明らかに水平、垂直、または斜めになるようにするには、Shiftキーを押したままにします。したがって、すべてのポイントがピクセルグリッドに接続されていることを確認できます。







ちなみに、（ボタンのように）ステッチされた直角のオブジェクトがある場合は、ハンドルがオブジェクトの正確にそのラインに到達することを確認してください。つまり、ハンドルがオブジェクトの境界を超えないように、その寸法です。

5.オブジェクトのスケーリング

Pixel Perfect画像を使用する場合、ズームは頭痛の種になります。オブジェクトを選択し、ハンドルを引いて境界フレームのサイズを変更すると、オブジェクトは増加または減少しますが、そのコンポーネントの多くは歪む可能性があります。



解決策は[ スケール ]オプション（右クリック> [変換]> [スケール]> [均一]）で、50％の倍数である値を使用します。たとえば、150％、200％、250％で増加し、-50％で初期サイズを半分にします。



つまり、作成する画像のサイズ要件について、事前に何をどのサイズで作成するかを常に計画する必要があります。







: , , , - , . , , -.

6.

長方形を操作する場合、回転に特別な問題はありません。何かが飛んだとしても、アンカーポイントをいつでも最も近いピクセルグリッドノードに手動で移動できるためです。しかし、角が丸い要素や曲線を扱う場合はどうでしょうか？



残念ながら、ピクセルパーフェクトのようなものがあなたにとって重要な場合、これは仕事の最も悲しい部分です。現時点では、ピクセルグリッドに曲線ポイントを自動的に添付することを容易にする普遍的な作業アルゴリズムはなく、小さなことでもこれが影響するためです画像の一般的なビュー。通常、角の丸い長方形があり、それを回転する必要がある場合、回転してすべてをそのままにします。

すべてがそうです！

これらのすべての手順を実行すると、どのデバイスでも見栄えの良い高解像度のイメージを作成できます。

便利なリンク

• Pixel Perfect Precision-モニュメントバレーを作成し、Pixel Perfectを導入したUsTwoの本/ガイド/ガイド。このガイドは現在4歳です。
  
  cdn.ustwo.com/PPP/PP3.pdf
  
  私の翻訳（または元の記事）に興味がある場合は、必ずこのマニュアルを読んでください。むしろ、本格的なカラーバージョンを印刷して、オフィスの同僚に持って行ってください。私のように英語に問題がある場合は、次のリンクにある本格的なロシア語版を印刷してオフィスに持ち込んでください。
• Pixel Perfect Precision Handbookのロシア語への翻訳。翻訳された第3版。
  
  heartbeat.ua/pp3/PP3_rus.pdf
• HabréでのPixel Perfect Precisionの翻訳に関する小さな記事。
  
  habrahabr.ru/post/242373
• HabréのPixel Perfect賦課に関する短い記事。
  
  habrahabr.ru/post/195414
  
  これは、「ピクセルパーフェクト」というリクエストで当時見つけた最初のほぼ唯一の記事です。