はじめてのIllustrator CS6

グリッドを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、「グリッド」の機能を使って、ずれの無い正確な図形を作成する方法を学んでいきます。もちろん色々なタイプの制作物を作るために「グリッド」機能を活用できますが、ここではWeb用のアイコンを作成するドキュメント向けのグリッドの活用に絞ってご説明してみます。
講師:
09:12

字幕

このレッスンではグリッドの機能を使って、ずれのない正確な図形を作成する方法を学んで行きます。もちろん色々なタイプの制作物を作るためにグリッド機能を活用出来ますが、ここでは Web 用のアイコンを作成するドキュメント向きのグリッドの活用に絞ってご説明してみます。では早速見て行ってみましょう。新規ドキュメントのプロファイルを設定する所から始めます。メニューバーのファイルから、新規を選びます。そしてまずは、プロファイルをWeb にします。次に、アートボードのサイズをカスタマイズします。100 X 100 ピクセルの小さなアートボードにして、アイコンを作って行きましょう。そして、この下にある詳細欄、ここが閉じている方は、左側の三角形をクリックして開きます。詳細欄の一番下にある、「新規オブジェクトをピクセルグリッドに整合」、ここにチェックが付いているかを一応見ておいて下さい。ここにチェックを付けることにより、今から作成する図形がピクセルグリッドからずれないようにします。そして OK をクリックします。では、早速グリッドを表示させてみましょう。メニューバーの表示から、グリッドを表示、こちらを選択します。 そして、もう一つ忘れないように、その一つ下の項目、グリッドにスナップ、こちらもチェックを付けておきます。この、グリッドにスナップがチェックが付いていますと、今から描く図形が、グリッドに吸着する様になります。そして今表示されたこのグリッドなのですが、1 マスの大きさが大きすぎるので、設定を変更して行きたいと思います。Mac の方は、Illustrator から環境設定、Windows の方は、編集から環境設定で、サブメニューのガイドグリッド、こちらを選択します。そして、このグリッドの項目で、カラーを、今は説明に見やすいように、ブラックにしておきます。スタイルは実線のままで結構です。そして、グリッドの 1 マスの大きさを、1 ピクセルとします。単位は入れなくて結構です。もしこの単位がピクセルになっていない方は、一つ上の項目、単位、を開いて、この一般の部分と、線の項目をピクセルに変えて下さい。そして、文字の部分も、ピクセルに変えておきましょう。また、ガイドグリッドの方に戻ります。分割数とありますが、ここは、1 マスを幾つに割りますかという指定です。ここを 1 にしておきます。ここまでの指定で、1 マスが 1 ピクセルという細かさのグリッドが黒い実線で表示される設定になりました。 もう一つ、背面にグリッドを表示、こちらのチェックを外しておきましょう。こうすることによって、描く図形より手前にグリッドが表示されるようになります。OK をクリックします。グリッドが表示されました。しかし画面の拡大率が、まだちょっと低いので、グリッドが荒く見えてしまいます。これを拡大して行きましょう。ズームツールを使って何回かクリックして行きます。今 1200% まで、拡大率が上がりました。この様にすると、1 マス 1 ピクセルというのが、非常に見やすくなってきます。ではここで、アイコンを幾つか描いて行きましょう。まずは、長方形ツールを選んでから、塗りを適当な色に変更して行きます。線は黒のままで結構です。そして、太さも1 ピクセルのままで結構です。こうして、長方形を描いてみます。そうしますと、グリッドにしっかり吸着して、長方形が描かれたことが分かります。ここでは、この長方形をビルのようにしてみましょう。色の設定を変更して、塗りを水色にしてみます。そして、長方形を窓は、では、正方形にしましょう。一つ正方形を描いて、それを複製して行きます。一つ一つ新しい図形が、この様にグリッドに吸着して整合していることが分かります。 この窓を複製して行きます。複製を繰り返して、6 階建てのビルにしてみました。次に丸い要素を描いてみましょう。今度は、楕円形ツールを選んで、Shift を押しながら円を描いて正円にします。ここで、この円に注目して下さい。見やすいように中央にずらします。この円のパスの部分、ダイレクト選択ツールで持ち替えて、パスを見やすくすると、このパスの部分が、グリッドに沿っていることが見えますでしょうか。そして、線の太さですが、この円形のパスをまたいで、両側に太さを持っています。そのため、線の色が終わる一番外側の淵が、グリッドに合っていません。この設定を変えてみます。線パネルを開きましょう。線パネルを開いて、右上の、オプションを表示を選びます。そしてこの、線の位置、線の位置の三つ並んだアイコンのうち真ん中をクリックします。こうすることによって、この線の外側の部分がグリッドに沿っていることが分かりますでしょうか。では、最後に三角形を描いてみたいと思います。色を白にして、多角形ツールを使って、三角形を描きます。そして、これを回転して、この様な、アイコンにしてみます。さて、今の状態は、このアイコンをベクターデータのまま見ている状態となります。 これを実際にピクセルで書き出した時にどう見えるか、というのを、あらかじめプレビューすることができます。メニューバーの表示から、三行目のピクセルプレビュー、こちらを選んでみて下さい。そうしますと、このアイコンが実際ピクセルとして書き出された時に、こういう風に見えるよ、ということをあらかじめプレビューで見せてくれます。またこれは、作業用の非常に高倍率で拡大して見ていますので、実際のサイズで見た時にどう見えるかということを、並行して確認して行く方法もご紹介します。メニューバーのウィンドウで、新規ウィンドウを選びます。これは一つのドキュメントを二つの異なるウィンドウで見ている状態になります。そして、この上にあるドキュメントレイアウトの項目で、2 アップを選んで下さい。この様に、同じドキュメントを違うウィンドウで見ているという設定になります。そして、この片方のウィンドウの拡大率を変えたいと思います。右側のウィンドウの、左下のプルダウンメニューから、100% を選びます。そして、表示から、グリッドを隠す、そうしますと、100% のサイズで、ピクセルプレビューで見た状態、これで、この様に見えるよ、ということを見ながら、こちらの左側の拡大している部分で作業を進めることができます。 例えば、ビルの色を変えると、それに応じて、右側も変わることがお分かりになりますでしょうか。さてここまで、グリッドの機能を使って、ずれのない正確な図形を作成する一例を見てきました。設定の数値などは、その作っている制作物の目的ですとか、状況に応じて、自由に変更することができます。ご自分が一番使い易いグリッドのスタイルを見つけて下さい。

はじめてのIllustrator CS6

このコースではIllustratorをまったく触ったことのない初心者の皆様でも迷うことのないように、基本的な操作からひとつひとつ丁寧に解説していきます。画面各部の名前や操作方法から始まり、ドキュメントの作成、図形の描画、色の変更など基礎的なことを網羅しています。

6時間55分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
Illustrator Illustrator CS6
価格: 3,990
発売日:2014年01月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。