🔊 🐽 👉🏿 Adobe Illustratorのグリッドを理解する 🍑 👌🏽 💆🏽

翻訳者から

Hi％username％！

この翻訳は、Pixel Perfectに関する私の以前の出版物を補完するものであり、特にPixel Perfectに関する元の記事はこの翻訳の元の記事を参照しているため、不完全ではありません。

この資料は初心者向けに設計されており、次の2つのことについて少し説明しています。

問題を回避します。これは、レイアウト内で要素またはガイド間の距離にピクセルの小数部分が含まれ始めるためです。
Adobe PhotoshopおよびAdobe Illustratorでプロトタイピンググリッドを使用する方法。

この資料は、インターフェイスデザイナーとしての私の仕事の最初の段階で、ピクセルグリッドについて誰かに教えていただければ非常にありがたいという観点から興味深いものです。したがって、この翻訳を公開することで、誰かがそれを簡単にすることを願っています。

前回と同様、この記事をHabrで書いている目標の1つ（たとえば、Tuts +への翻訳に限定されない）は、翻訳後のトピックに関する有用なリンクをコンパイルすることです。また、グリッドを作成するときに使用する思考やツール、他のエディターも共有するように、行商人にお願いします。私の友人は、もちろん素材がクールであるという方法で前の記事にコメントしていることを知っていましたが、彼は自分でSketchを使用しています。使用するものを教えてください？

ところで、この記事はAdobe Illustratorについてですが、Adobe Photoshopでは、ピクセルグリッド、ピクセルスナップ、および独自のカスタムグリッドを使用することもできます。

まとめ

Adobe Illustrator / Photoshopでグリッドを有効/無効にするには、Ctrl + '
Adobe Illustrator / Photoshopでガイドを有効/無効にするには、Ctrl +を押します。

さあ、行きましょう。

Adobe Illustratorのグリッドを理解する

今日、Adobe Illustratorは最も人気のあるベクターエディターの1つです。これは非常にすばらしいプログラムであり、初心者の場合、ボタンまたはオプションが何に責任があるのかを詳しく調べると、かなり時間がかかることがあります。

一部の機能は初心者に見落とされていることがわかりました。その1つをあなたと共有したいと思います。個人的には、私が初心者のときに誰かがこのトピックについて教えてくれたらとてもうれしいです。

はい、グリッドについてお話しします。

グリッドとは何ですか？

他の質問の研究の場合と同様に、まず研究対象の用語の定義を示しましょう。

Merriam-Websterオンライン辞書を見ると、グリッドは等間隔の垂直線と水平線のネットワークです（たとえば、マップ上のポイントを配置するため）。

より完全な定義は、Wikipediaで見つけることができます。グラフィックデザインの観点から与えられているためです。「グリッドは、一連の交差する直線（垂直、水平、または傾斜）または曲線で構成されるスペース（通常は2次元）コンテンツを整理するために使用されるガイド。グリッドは基礎として機能します。これにより、デザイナーはさまざまなグラフィック要素（画像、シンボル、テキストの段落）を正しい順序でレイアウトに配置できるため、レイアウトで見やすく、読みやすくなります。グリッドは、異なるグラフィック要素間の関係を構築するためにも使用されます。たとえば、異なる要素のサイズまたは位置の相対的な、またはキャンバスに対する相対的な比率を決定するために使用されます。

ところで、Adobe Illustratorのグリッドは、厳密に垂直線と水平線のみで構成されています。作業に曲線やその他のより複雑なグリッドが必要な場合は、ガイドガイドを使用して作成できますが、実際には非常に簡単です。

グリッドの知識が重要なのはなぜですか？

グリッドとは何かという一般的な考えを示しました。しかし、なぜ彼女はそれを使用する必要があるのでしょうか？もう一度短く繰り返すと、グリッドを使用して要素を相互に配置し、オブジェクトのサイズと位置の関係を設定できます。グリッドは、いわば、レイアウト上にオブジェクトを配置するルールを提供します。最も重要なことは、コンテンツを構成することです。

さらに、ツールとしてのグリッドは、デザイナーがピクセルパーフェクトイメージを作成するのに役立ちます。これは、さまざまな画面でさまざまなデバイスのイメージを作成する場合に非常に重要です（私の意見では絶対に必要です）。

Gridが真に高品質のシャープな画像を作成する方法について説明する前に、2種類の画像（画面上のデジタル画像と印刷画像）を区別する重要なポイントについて簡単に説明します。

桁VS印刷

画面上のデジタル画像が紙に印刷された画像とは大きく異なることは秘密ではありません。画像の種類ごとに独自の配色（デジタル画像の場合はRGB、印刷画像の場合はCMYK）があり、それぞれの種類には独自の出力解像度（画面解像度および印刷解像度）があります。これらすべてが、これら2種類の画像の作成方法、特に曲線、曲線の取得方法に違いをもたらします。

デジタル画面には独自の解像度と独自のピクセルグリッドがあります（どの画面でも、正方形のピクセルは行ごとに次々に配置されます）。これは、ある種の曲線を作成するために、曲率のこれらのセクションでいくつかのピクセルを半透明（アルファチャネル）にするだけであり、これをスムージングと呼びます。

次に、プリンターは印刷時の用紙のサイズと解像度に依存します。つまり、印刷解像度が高い場合、プリンターは曲線を完全に印刷します。これは、プリンターが複数のレイヤーで紙にドットを印刷できるためです。プリンタは、電子デバイスの画面とは異なり、ピクセルの半透明性に注意する必要はありません。

バインディングを使用する

このスレッドで提起できる最も興味深い質問の1つ。スナップを使用する場合、Illustratorにキャンバス上のオブジェクトをグリッドまたはピクセルグリッドに揃えるように指示します。

最近、Pixel Perfect画像をほのめかしたことを覚えていますか？画面に表示される印刷画像とデジタル画像の違いがわかったので、今度はグリッドの主な役割について説明します。

DribbbleやBehanceで超シャープな画像を使用したさまざまなイラストを見たことがあると思います。個人的には、著者がそのような明確な線をどのように描くことができたのかといつも思っていましたか？結局のところ、これは珍しいことではありません！彼または彼女はすべてのオブジェクトをピクセルグリッドに結び付け、整数ピクセル値で各要素を作成しました！

念のため、整数値とは小数部分のない数値、つまりたとえば、四角形を描画する場合、200.84ピクセルx 99.8ピクセルではなく、幅200ピクセル、高さ100ピクセルで四角形を描画します。

拡張されたグリッドの概念

絵は千の言葉よりも優れています。グリッドの設定方法の例を示してみましょう。 Illustratorで新しいプロジェクトを作成するたびに実行するステップごとのアルゴリズムを実行しましょう。きっと気に入っていただけると思います。

ステップ1

Illustratorで新しいプロジェクトを開始するときは、常に新しいドキュメントの設定から開始します。 Illustratorを開いて、次の設定で新しいドキュメントを作成しましょう。

キャンバスの数： 1
幅： 800ピクセル
高さ： 800ピクセル
単位：ピクセル

[詳細設定]タブで：

カラーモード： RGB
ラスタライズ解像度： 300 PPI
新しいオブジェクトをピクセルグリッドに等しくする：チェック

注：おそらく、ラスター化効果の値を300 PPIに設定していることにお気づきでしょうが、モニター画面でデザインを使用します。 より高い解像度値を使用する場合、画面上ではあまり目立たないでしょうが、突然あなたがペイントしたものを印刷したい場合（RGBでドキュメントを作成したという事実に注意を払うまで）、それはそれですPPI値を300未満に選択すると、影などのエフェクトの品質が低下します。

実際、 [効果]> [ドキュメントラスター効果の設定]に移動すると、いつでもPPI値を変更できます。

ステップ2

ドキュメントを設定したら、 100x100ピクセルの黒い正方形を作成し、整列パレットを使用してキャンバスの左上隅に正確に配置します。

ステップ3

グリッドの仕組みを理解するために、これを見てみましょう。 [表示 ]メニューの[グリッドの表示 ]を開く（またはCtrl +„キーを押す）と、標準の1000x4グリッドが画面に表示されます。

ステップ4

グリッドが表示されますが、どのように機能しますか？キーボードの矢印で小さなボックスを動かして、何が起こるか見てみましょう。

小さな四角形は、クリックするたびに数ピクセル移動しますが、特別なことはありません。 [グリッドにスナップ]オプションを有効にしなかったため、何も起こりません。

最後のステップをキャンセルし、ボックスを元の場所に戻し、メニューの表示→グリッドにスナップ（Shift + Ctrl + Y）に移動して、オブジェクトの移動を再試行します。

これで違いがわかります。オブジェクトを動かして、何が起こっているのかを理解してください。正方形の各移動は、グリッドの水平線または垂直線を基準にして発生します。

Illustratorがこのように動作する理由を見てみましょう。Gridデバイスを理解してください。先ほど言ったように、事前定義されたグリッド設定があります。ここにあります：

グリッドステップごと：1000px
グリッドステップ内の分割：4

これらの設定は本当にどういう意味ですか？

とても簡単です、ご覧ください。 Illustratorは、1000ピクセルごとに、 4つの部分に分割されたセルを描画します（これにより、セル内に2x2のグリッドが表示されます）。セルを取得します。各セルのサイズは1000 x 1000ピクセルで 、サイズが250 x 250ピクセル （ 1000/4 = 250 ）の4つのセルに分割されます。

なぜならキャンバスのサイズは800x800ピクセルのみです（つまり、 それぞれが完全に収まる250ピクセルのグリッドの3つの正方形と50ピクセルは残ります）。また、赤で強調表示された200ピクセルの太さの線の下部と右側の部分は未使用のままです。

さて、小さな黒い正方形に戻ると、正方形自体が100x100ピクセルであるにもかかわらず、互いに250ピクセル離れたグリッド線にのみ付着していることがわかります。黒い正方形のサイズが250x250ピクセルの場合、グリッドセル全体を占有し、16個の小さなセルの1つに正確にジャンプします。

グリッド設定

前のステップでグリッドがどのように機能するかについてすべてが明確になったことを願っていますが、異なるプロジェクトでは、キャンバスのサイズに応じて、異なる方法で異なるグリッドを構成する必要があることを理解する必要があります法律により、要素をキャンバスに配置します。

個人的には、可能な最小値を使用するのが最も便利であると判断しました。GridとPathFinderツールの全機能を組み合わせれば、すべてのオブジェクトを自分に合った方法で素早く配置することができます。

私のグリッド設定は次のとおりです。

グリッド線間隔：1ピクセル
グリッドステップ内の分割：1

自分でグリッドを試してカスタマイズしたい場合は、メニューの[ 編集]> [設定]> [ガイドとグリッド ]に移動して、必要なすべてを設定するだけです。

メッシュを使用したラピッドプロトタイピング

少し練習して、 800 x 800ピクセルのサイズのキャンバス上で4つのステップに分割された800ピクセルごとにグリッドを使用して、Webサイトの簡単なプロトタイプを作成してみましょう。

はい、最近のWebサイトのデフォルトの最小サイズは960ピクセルと考えられていますが、ラピッドプロトタイピングにグリッドを使用する方法の簡単な例を紹介したいと思います。