これからIllustratorを始めてみようという人のための基本操作とかいろいろ

Posted under - Web Design

57

Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。

Illustrator

私はいつも Web制作の時には、PhotoshopIllustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。

もちろん ベジェ曲線パス など、Illustrator 特有の難しさもあったんですけど、Photoshop に比べて用語なども難しく感じた覚えがあります。

今回は一緒に Illustrator を勉強している友達のために、Illustrator の本当に基本的な使い方をまとめてみました。なのでいつもの読者さん向きの記事ではないかもしれません。Illustrator を始めてみたけれど、なかなか馴染めない … という人向けの記事です。

とはいうものの、私は Illustrator 暦が長いわけでもなんでもありません。こういう使い方よりも、こうした方がいいよ!という事があったら、教えていただければうれしいです。

Attention

私は Illustrator CS5 を使っているので、他のバージョンとの画面の違いや、ツール、機能の違いもあると思います。機能の違いについては、私が分かっている部分は書き足しておきますが、分からない所はそのままです …。すいません。

初めてのIllustrator 目次

  1. Illustrator の基本はとにかくパス
  2. Illustrator は「線」と「塗り」
  3. Illustrator は、用語が難しい …
  4. ショートカットキーを覚えながら学習しよう!
  5. 新規作成して始めよう!
  6. まずはパスを描いてみよう!
  7. オブジェクトって何?
  8. ちょっと寄り道:ツールバーの使い方
  9. Illustrator の基本中の基本操作
  10. ちょっと寄り道:Illustrator で使う単位
  11. パスに線と塗りを指定してみよう!
  1. 線をいろいろ設定しよう!
  2. アピアランスウインドウのいろいろ
  3. オブジェクトの重なり順
  4. パスをグループ化しよう!
  5. 写真を貼付けよう!
  6. クリッピングマスクを使ってみよう!
  7. 複合パスってなに?
  8. パスを複数に分ける(分割)
  9. 覚えておきたいTips
  10. オブジェクトのコピーとペースト

1. Illustratorの基本はとにかくパス

まず Illustrator を使うには、パスというものを覚えなければなりません。パスというのは何でしょう?Photoshop などのグラフィックソフトで絵を描くとき、普通はマウスをドラッグするとその通りに線が引けますよね。

下の図はマウスでなぞって描く、Photoshop の ブラシツール を使って描いたハートと、Illustrator の ペンツール(パス)で描いたハートです。

ブラシとペンツール

Photoshopのブラシで描いたハートと、Illustratorのペンツールで描いたハート

見た通り、左側の Photoshop のブラシツールで描いたハート 1は、マウスがガクガク震えてちっともキレイじゃありません。それに比べて Illustrator のペンツールで描いたハート 2は、線が震える事もなくてキレイに描けています。
Photoshop にもペンツールはありますし、逆に Illustrator にもブラシツールがあります。

Illustrator のペンツールで描いたハートを、もう少し詳しく見てみると、以下のような構造になっています。

ペンツールで描いたハートの拡大図

ハートの拡大図

拡大図をよく見てみると、アンカーポイント Aと呼ばれている点と点を、セグメント Bという線が結んでいます。また、アンカーポイントからはハンドル Cと呼ばれる物が出ていて、これをドラッグするとセグメントを曲げる事ができるんです。

ペンツールで描く線は、アンカーポイント同士を結ぶ線(セグメント)で描かれる線なんですね!

1.1. パスって何?

パスというのは、さっきの図の中 … アンカーポイントやハンドル、セグメントで構成されているもの – これをパスと呼んでいます。ちょっと分かり難いですねー …。「パスはアンカーポイントやセグメントで出来ている」って言った方が、分かりやすいかもしれませんね!

パス」といったら、こんな風にアンカーポイント同士をセグメントでつないだもの … というのを思い出してくださいね。

また、こういう風にパスで描かれた曲線を、ベジェ曲線と呼んでいます。もちろんパスでは曲線ばかりではなく、直線だってひく事ができます。

Attention

パス、ベジェ曲線について、まだちょっとよく分からないっていう人は、過去記事も読んでみてくださいね!パス、ベジェ曲線について、もう少し詳しく説明しています。

1.2. 補足:ビットマップとベクター

ここでちょっと寄り道して、ビットマップベクターというものの違いを見てみます。さっき Photoshop と Illustrator で描いたハート … 見た目だけでなく、他にも違いがあるんです。それが「ビットマップグラフィック」と、「ベクターグラフィック」という違い。まずは Photoshop のブラシツールで描いた、ビットマップから見ていきます。

1.2.1. ビットマップグラフィック

ビットマップグラフィックというのは、色の付いた点を使ってグラフィックを表現しています。拡大表示してみると、それがよく分かりますよね。

ビットマップグラフィック

1.2.2. ベクターグラフィック

それに対して Illustrator で描いたハート、ベクターグラフィックは、点や線、色などを、数値で表すデータで作られたグラフィックなんです。画像という表現ではなく、あくまでデータなんですね!なのでいくら拡大しても、データ通りに表示するだけなので、どこまで拡大してもくっきりしたままです。

ベクターグラフィック

そして主に写真などを扱う Photoshop は、ビットマップデータを扱うのが得意なソフトウェア。それに対して Illustrator は、ベクターグラフィックを扱うのが得意なソフトウェアという訳なんです。それでは Illustrator について、もっと詳しく見ていきましょう!

2. Illustratorは「線」と「塗り」

Illustrator を使えば、とってもキレイで素敵なベクターグラフィックを作る事ができます。でも、基本的に Illustrator で扱うのは、パスに対する「線」「塗り」の 2種類だけ(効果というものもあるけど、基本は線と塗り!)なんです。

もちろん「線」にもいろいろな線がありますし、「塗り」にも 1色のベタ塗りから、グラデーションもあります。また、パターン(柄みたいなもの)で塗りつぶす事もできるので、色んな「塗り」がありますが、基本的にどんなにキレイで素敵なグラフィックも、「線」と「塗り」の2種類でできているんです。

とっても複雑で、扱いが難しそうな Illustrator ですが、「線」と「塗り」という、たった 2種類のものを操作しているだけなんですね!

Illustrator の「線」と「塗り」

Illustrator の基本:「線」と「塗り」

基本的にはこのパターンを組み合わせて、Illustrator では様々な複雑なグラフィックを作っていくんです。

まずは「パス」があって、それに対して「」や「塗り」を指定していきます。例えば下のポートレートは、たくさんのパスに指定した、「塗り」だけで出来ています。

イラストレーターで作ったポートレート

複雑なイラストも線と塗り

複雑そうなイラストでも、やっていることはパスをたくさん作って、そこに「線」や「塗り」を指定しているだけなんですね!

2.1. オープンパスとクローズドパス

ここで少しパスについて補足です。パスには「」と「塗り」を指定すると書きましたが、パスは大きく分けると2種類あって「塗り」などを指定したときの見た目が変わるの注意が必要です。それが オープンパスクローズドパスという分け方。

クローズドパスとオープンパス

Attention

もちろんオープンパスかクローズドパスかの違いは、見た目だけではありません。後半出てくるクリッピングマスクなど、パスを操作する時にオープンパスだと出来ない操作もたくさんあります。

これは Illustrator でいろんな物をつくって経験していくと、自然と「ここは絶対クローズドじゃないとダメ」とか、「ここはオープンで作ろう」とか分かってくる感じです。なので今回のところは、「オープンパスとクローズドパス」という言葉と意味を忘れないようにしましょう。

それでは実際に Illustrator の画面を見ながら、少しずつ慣れていきましょう!

… とは言うものの、やっぱりたくさんのツールなどがあって、どこから手を付けていいか分からないですねー。なのでここからは、完全に私の主観で「Illustrator を始めた頃に、分からなかったこと」から書いていきますね!

3. Illustrator は、用語が難しい …

そうなんです。私が初めて Illustrator を触った時に思ったのが、メニューやパネルに並んだ、Illustrator ならでは?の用語が難しい … ということ。

例えば アートボードって? アピアランスってなに? オブジェクトってなんなの?って感じでした … 私だけかな?

アピアランスやオブジェクトについては後述しますので、ここではまず アートボードについて見ていきますね。アートボードは Photoshop でいうとカンバスのこと。実際にパスを描いたりする、画板とか、スケッチブックにあたる部分です。

Illustrator で作ったものは、最終的に印刷(ここでは Web用のお話なので、印刷については触れません。)したり、Web用に保存したりしますよね。アートボードというのは、印刷したり、Web用に保存するときの領域のことなんですねー。

深く考えなければ、特に難しい事はないんです …。

Illustrator のアートボード

アートボード

でも、Illustrator の場合は、このアートボードの外にパスを描く事もできますよねー。

アートボードの外にも描ける!

アートボードからはみ出しても描ける

そして特に拡大表示していないのに、縦、横にたくさんスクロールできるのは何でなんだろうって思いました。

何でスクロールバーが出るの?

何でスクロールバーが出るの?

実はこのアートボード、Illustrator は複数枚作る事ができるんです(CS4くらいからなんでしょうか?)。Illustrator は、特にDTP(Desktop publishing:乱暴に言うと、印刷関係)で使われるソフトウェア。

例えば名刺の裏表だったり、フライヤーの数ページを、同じワークスペースに広げて作業することがあります。別々に作るより、ひとつのファイルで作った方が、何かと便利そう … というのは簡単に想像できますよね。

複数枚のアートボード

ひとつのワークスペースに複数のアートボードを作れる

複数枚のアートボードを使うなら、やっぱりスクロールバーが無いと困っちゃいます …。それに複数ページにまたぐような図柄を付けたい時に、はみ出た部分が表示されていた方が分かりやすいですね!私は全然 DTP に詳しくないので、よくわかってませんが、もともと DTP ではこういう仕様じゃないと使い難いんでしょうねー。

私は Webデザインで使う、ロゴやパーツなどの作成に Illustrator を使う事が多いので、こういう仕様についてよく分かっていません …。 はみ出してるところに描けるのは何でなんだろう … とか、あんまり深く気にしないで、Illustrator を楽しみましょう(実はよく分かってないんです …)!

というか、Photoshop のカンバスと違いすぎて、ちょっと戸惑う人も多いのかなーと思ったので、アートボードを取り上げました。

4. ショートカットキーを覚えながら学習しよう!

これから Illustrator の色んな使い方を見ていきますが、基本的には ショートカットキーを使って操作するのが効率的です。なのでここからはショートカットキーを織り交ぜながら説明していきますね!

それではアートボートの続きです …。作業中はさっき見たスクロールバーを使ってワークスペースを動かすこともありますが、覚えておきたいのが 手のひらツールのショートカットキーです。

手のひらツールは、作業したい部分を表示するために、アートボードを動かすためのツール。(いきなり操作の説明をしても訳が分からないかもしれませんが、あとで実際に Illustrator を操作しながら、色々試してみてくださいね!)

4.1. 手のひらツール

手のひらツール

手のひらツールのショートカットキーは、space キーです。スペースキーを押している間は、いつでも手のひらツールになるので、これは覚えておきたいですね!ちなみにこれは、Photoshop も同じです。

SHORTCUT KEY
  • 手のひらツール … spaceキーを押してる間

4.2. ズームツール

ズームツール

また、Illustrator は細かい部分のパスの編集をよくするので、ズーム機能もよく使います。細かいところを編集する時はズームイン、全体のバランスを見る時はズームアウト … 頻繁に使うと思うので、これもショートカットキーを覚えておきましょう。ズームのショートカットキーは、いくつかあります。

SHORTCUT KEY
  • ズームツール … Z キー – クリックで拡大、option + クリック で縮小です。
  • 拡大 … command + + キー
  • 縮小 … command + – キー
  • 100%に戻す … command + 1 キー
  • アートボード全体表示 … command + 0 キー
  • 全てのアートボードを表示。1枚の場合は上記と同じですねー。 … command + option + 0 キー
  • 拡大 / 縮小 … option + マウスホイール

Windows の場合は、command キー → Ctrlキーoption キー → Alt キーが対応していると思います。

ちなみにこれらのショートカットキーは、Photoshop も同じです(command + option + 0 キーは 100% 表示)。

5. 新規作成して始めよう!

ちょっとアートボードの説明とかで寄り道しちゃった感じもしますけど、それでは早速 Illustrator を始めてみましょう。作業をするのに一番最初にすること … それは ファイルの新規作成ですよね!まずはメニューバーの、ファイル → 新規 から、新しいファイルを作成します。でも実際はショートカットキーを使った方が便利なので、これも覚えておきたいですね!

SHORTCUT KEY
  • 新規作成 … command + N キー(New の N)

すると、下記のような新規ドキュメントウインドウが開きます。今回は Web用なので、ここで少し注意が必要になります。

新規ドキュメント

新規作成

  1. 1さっき説明したアートボードの数(CS4以降からみたいです) … 今回は1個にしますね!
  2. 2アートボードの大きさです。幅や高さは、好きな数字を入れてください。
  3. 3サイズの横にあるのが 単位 … これは Web で使われるピクセルにしておきます。
  4. 4そして大事なのが カラーモード。Web は最終的にモニターで出力しますから、光の三原色である RGB を使いますよね!印刷用のときは CMYK を使います。

もうひとつ注意するのが、ラスタイズの効果の部分。これは効果(後述しますね!)のキメ細かさって感じです。とりあえず Web用の場合は 72ppi にしておきます。というのも、例えば 300ppi とかにしても、最終的に表示されるブラウザでは 72ppi で表示されるからです。

Attention

追記:カラープロファイルについて

コメント欄で、ご指摘頂いたので、追記させてくださいね!

上記では、カラーモードを RGB にすると書きました。でも、RBG にもたくさんのカラープロファイルがあります。なので、メニューバー → 編集 → カラー設定 から、「Web・インターネット用 – 日本」を選んで、作業用スペースの RGB を sRGB にしておきましょう。

カラー設定

RGB のカラープロファイルに Adobe RGB などが選択されていると、ブラウザで思った通りの色で表示されなくなってしまいます。基本的にどのブラウザでも、sRGB(スタンダードRGB)には対応しているので、Web制作のときは、カラー設定に気をつけて、sRGB にするのを忘れずに!

6. まずはパスを描いてみよう!

さて、新規ドキュメントも出来たことですし、早速いろいろ試してみたいと思いますが、ここでちょっと基本を思い出してください。Illustrator の基本は、まずパスがあって、そのパスに「線」や「塗り」を指定して描いていく … ということでしたね!

つまり何を描くにしても、とにかくパスを描かなくては何も始まりません。では一体どのツールを使ってパスを描けばいいのでしょう?実は Illustratorには、パスを描くためのツールがたくさん用意されています。

パスを描く為のツール

パスを描くツール

代表的なツールは上記のような感じです。たくさんありますねー …。ひとつずつ見ていきましょう。

6.1. ペンツール

ペンツール Illustrator を使うなら、絶対使いこなしたいツールです。ペンツールは直線はもちろん、ベジェで思い通りの曲線(冒頭ででてきましたね!)を描くためのツールです。

SHORTCUT KEY
  • ペンツール … Pキー(Pen の P)

ペンツールの使い方については、過去記事も読んでみてくださいね!

6.2. 直線ツール、円弧ツール、スパイラルツールなど

ツールオプション

直線ツールなど ドラッグすると、直線や円弧などが簡単に描けます。また、クリックすると出現する、ツールオプションに数値を入力して描く事もできます。

SHORTCUT KEY
  • 直線ツール … ¥ キー

MEMO

ツールの多くはドラッグして使う事も多いですが、このようにクリックすると ツールオプションウインドウが出現するものも多いです。数がとても多いので、ひとつひとつは説明できませんが、クリックするとツールオプションが表示される … という操作は覚えておきましょう!

6.3. 長方形ツールや丸角長方形ツール、楕円ツール、多角形ツールなど

長方形ツールなど こちらは簡単に長方形や円、多角形などを描くことが出来るツールです。Photoshop にもありますよね!基本操作はドラッグするだけです。また、クリックするとツールオプションが表示されるのは、直線ツールのところで補足した通りです。

SHORTCUT KEY
  • 長方形ツール … Mキー
  • 楕円ツール … L キー

また、optionキーを押しながらドラッグすると、形の中心から描く事ができます(optionキーを押さない場合は、形の左上が基準になります)。shiftキーを押しながらだと、正方形や正円などが描けます。

MEMO

角丸長方形

角丸長方形ツールをドラックして書いた角丸の半径(丸み)は、基本的に固定です。環境設定 → 一般 → 角丸の半径 で入力したものが適応されます。違う半径角丸を書きたい場合は、クリックで表示されるツールオプションで、数値を入力して書く事ができます。


実は Illustrator では、角丸を表現するのに別の方法もあります。それは アピアランス → 効果 → スタイライズ → 角を丸くする を使う方法です(アピアランスについては後述しますね!)。

こちらはパスの角自体は四角くて、見た目だけ丸くする方法です。長方形ツールはパス自体を丸角にするので、全く違うアプローチです。このふたつは上手に使い分けましょう。

6.4. ブラシツール

ブラシツール これは簡単ですねー!ブラシツールは、マウスで書いた通りにパスが描けます。Photoshop のブラシツールは、ビットマップグラフィックとして線を引きますが、Illustrator の場合は、パスで描かれます(Illustrator は全てがパスなので、当たり前ですね!)。

SHORTCUT KEY
  • ブラシツール … Bキー(Brush の B)

6.5. 鉛筆ツール、スムーズツール、パス消しゴムツール

鉛筆ツールなどブラシツールに似ている 鉛筆ツール。これも Photoshop にもありますが、描くのはパスという違いがあります。

スムーズツールは、なぞった所をスムーズ … 滑らかにしてくれるツールです。

パス消しゴムツールは、パスの一部分を消してくれるツール。普通の消しゴムツールは塗りを消すツールなので、上手に使い分けましょう!

SHORTCUT KEY
  • 鉛筆ツール … N キー

6.5. 塗りブラシツール

塗りブラシツール これは CS4 くらいからの新機能なのかな?普通のブラシは、マウスでなぞった所に1本のパスが引けますが、塗りブラシツールだと、輪郭にパスが描かれます。言葉だと分かり難いので、画像を見てみてくださいね!

ブラシツールと塗りブラシツール

ブラシツールと塗りブラシツール

パッと見はあんまり変わらない気もしますけど、パスの構造を見てみると …

ブラシツールと塗りブラシツールのパスの違い

ブラシツールと塗りブラシツールのパスの違い

こんな風にパスの構造が全然違うんですねー。

SHORTCUT KEY
  • 塗りブラシツール … shift + Bキー(ブラシのB)

他にもパスの描き方はいろいろあるんですけど、基本ツールはこんな感じです。色々便利なツールもありますが、基本はやっぱり ペンツール。Illustrator を使いこなしたいなら、ペンツールをしっかり練習するのが一番です(… と、私は教わりました)!今回は、とりあえず以下のようなハートを、ペンツールで描いてみました。

SAMPLE

ハート

ちょっと簡単すぎるサンプルですけど、パスは以下のようになっています!

ハートのパスの構造

ハートのパスの構造

7. オブジェクトって何?

ここで オブジェクトについて簡単に触れておきます。オブジェクトっていうのは何でしょう?Illustrator のメニューバーに、思いっきり書いてあるオブジェクト … 初心者の頃は、オブジェクトっていう言葉が難しく感じました …。

メニューバー

メニューバーのオベジェクト

オブジェクトというのは、「物」とか、「対象物」という意味。つまりひとつのパスだったり、まとまったパスだったり、配置した写真だったり、とにかく操作の対象となる「もの」のことなんです。

7.1. オベジェクトを選択する、いろいろな選択ツール

そしてオブジェクトを選択するのに使うツールが、選択ツールダイレクト選択ツールグループ選択ツールというツールです(グループについては後述しますね)。ツールバーの一番上にある、矢印アイコンがそうです。

1. 選択ツール

選択ツール この黒い矢印アイコンが 選択ツールです。選択したいオブジェクトを、これでクリックすると選択されます。複数選択したいときは、shift キーを押しながらクリックです。また、ドラッグするとドラッグした範囲内のものを選択します。

SHORTCUT KEY
  • 選択ツール … V キー

オブジェクトを選択した状態

選択したものは、ドラッグで動かすことができます(移動)。また、 shift キーを押しながらドラッグすると、45度や 90度など、正確な角度で移動することができます!

また、オブジェクトを選択した状態で、選択ツールのアイコンをダブルクリックすると、移動ウインドウが開きます。

移動ウインドウ

移動ウインドウ

移動ウインドウでは、移動距離などの数値を入れます。正確な位置に移動させたい時には便利です。

また、いちいちツールバーをダブルクリックするのはめんどくさいので、ショートカットキーを覚えましょう。オブジェクトを選択した状態で、option + enter キーで移動ウインドウが開きます。

SHORTCUT KEY
  • 移動ウインドウ … オブジェクトを選択した状態で、option + enterキー
2. ダイレクト選択ツール、グループ選択ツール

ダイレクト選択ツール ダイレクト選択ツールは、パスの中の アンカーポイントを選択するときに使います。対象物がアンカーポイントになっただけで、使い方は選択ツールと同じです。もちろんアンカーを動かしたり、ハンドルを動かしたり(パスを曲げるため)する時にも使います。

アンカーポイントの選択

アンカーポイントの選択

選択したアンカーポイントは、塗りつぶされて表されています。それに対して未選択のアンカーポイントは、白抜きで表されます!

SHORTCUT KEY
  • ダイレクト選択ツール … A キー

グループ選択ツールについては、後述しますねー!

8. ちょっと寄り道:ツールバーの使い方

Illustrator の画面の左側にあるツールバーには、たくさんのツールが並んでします。その中で、小さな三角のアイコンがついてるものは、複数のツールが隠れています。長押しするか、マウスを右にドラッグすると、隠れたツールが表示されます。

ツールバーの使い方

また、よく使うツールは、上記のようにして独立させておいておくと、効率化に繋がりますねー!

9. Illustrator の基本中の基本操作

今まで Illustrator でパスを描く為のツールや、選択ツールなどを見てきました。クリックしたり、ドラッグしたり、クリックして出てきたツールオプションに数値を入れたりしました。その他に覚えておきたい Illustrator の基本中の基本の操作を確認しておきます。

9.1. 一段落したら、command + クリック

ペンツールでパスを描いたり、長方形ツールでパスを描いたりと、ひとつのグラフィックを作る為に、たくさんの色んな操作を行います。ここでひとつクセとして覚えておきたい操作が、「関係ないところを commandキー + クリック」という操作。

例えばペンツールでパスを描いたとき、これでおしまい!というときに、画面のどこか関係ない所、アートボード上でも、アートボードの外でも構わないのでクリックします。そうすると、ペンツールの場合は、今まで描いたバスを終わらせる事ができるし、文章を入力する文字ツールは、テキストの入力を終了できます。

私はもうクセになっていますが、一段落したら command + どこかをクリックしています。

SHORTCUT KEY
  • 一段落したら command + クリック

9.2. 取り消し、やり直しは command + Zキー

これは特に Illustrator に限ったショートカットキーではないですけど、今やったばかりの操作を取り消す場合は、command + Zキーで取り消せます。何回も押すと、押した分だけさかのぼって操作を取り消す事ができます!

また、取り消したけど元に戻したい … という場合は command + Z キー に shift キーを加えた、command + shift + Zキーで、取り消した操作をやり直す事が出来ます。これも基本中の基本操作なので、覚えておきましょうね!

SHORTCUT KEY
  • 取り消し … command + Z キー
  • やり直し … command + shift + Z キー

10. ちょっと寄り道:Illustrator で使う単位

Illustrator にはたくさんの単位が用意されています。単位というのは、何ピクセルとか、何センチというアレのこと。今回は Web制作のための Illustrator という主旨なので、単位をピクセルに設定しておきますねー!単位の設定は、メニューバーの 環境設定 → 単位 で行います。

環境設定 – 単位

単位をピクセルにする

また、ショートカットキーもあるので、覚えておくと便利です。

SHORTCUT KEY
  • 環境設定 … command + Kキー(環境の K)
  • 単位の変更 … command + shift + Uキー

10.1. ピクセルの場合は、小数点以下に注意!

今回の記事は Web用なので、さっき単位をピクセルに設定しました。でもピクセルだとちょっと面倒なこともあったりします。

Illustrator は、印刷用に適したソフトウェアで、印刷に対応するためにとっても細い線や、細かい描写までできる高機能なツール。それをピクセルで利用すると、以下のように小数点以下が微妙な数字になったりまします。

情報ウインドウ、変形ウインドウ

情報ウインドウ、変形ウインドウ

上は 情報ウインドウ、下は 変形ウインドウですが、横幅 505px のつもりでも、504.937px みたいに小数点以下で微妙にずれていたりします。ブラウザでの表示の最小単位は 1px ですから、端数はいらないんですよね …。なので変形ウインドウを使って、きちんと 505px などに合わせてあげる必要がでてきます。

情報ウインドウだと、数値を確認できるだけなので、変形ウインドウを使うといいかもですね!変形ウインドウは、メニューバーの ウインドウ → 変形 から表示することができます。

11. パスに線と塗りを指定してみよう!

ここまで来るのにずいぶんかかってしまいましたが、それでは実際に、パスに「線」「塗り」を指定してみましょう。一体どうやってパスに線や塗りを指定すればいいのでしょうか?まずはツールパネル(Illustrator の画面の左端)の一番下の部分、以下の画像の所で説明しますね!

ツールバーの一番下の部分

ツールバーの一番下の部分

塗り「塗り」

パスの中を塗る「塗り」の部分の色です。色で塗りたくなけれれば「色なし」を選びます(透明)。ダブルクリックすると、カラーピッカーが開きます!また、「塗り」にはグラデーションも指定できます。

塗りの色なし「塗りの色なし」(透明)

塗りに「色なし」を選んだ場合は、上記のようなアイコンになります!

「線」「線」

パスで描く「線」の色です。線にはグラデーションは指定できません。CS6 からは、線にグラデーションを指定できるようになりました。もちろん「色なし」も選べます。

線の色なし「線の色なし」

線に「色なし」を選んだ場合は、上記のようなアイコンなります。

カラー、グラデーション、色なしカラー、グラデーション、色なし

上記のふたつ、「線」と「塗り」に何を指定するか?の部分です。左から「色」「グラデーション」「色なし」です。線のときは、グラデーションのボタンは押せません。

これをそれぞれ使い分けて、以下のように描いていくんですね!

パスの「線」と「塗り」

パスの線と塗り

これが Illustrator の基本形です!

11.1. ツールパネル以外からも、「線」と「塗り」は変更できます!

さっきはツールパネルから、「線」と「塗り」の色などを指定してみました。でも「線」と「塗り」は、Illustrator の色んな場所からアクセスできるので、時と場合によって、色々使い分けると効率的に作業ができますね!

1. メニューバー下のコントロールパネルからアクセス

メニューバー下のコントロールパネル

いつも必ず出ている訳ではありませんが、メニューバー下のコントロールパネルにも「塗り」と「線」は表示されています。ここをクリックすると、色やグラデーションを変更するための、スウォッチパネル(お気に入りの色やグラデーションをストックしておくパネル)が開きます。また、shiftキーを押しながらクリックすると、カラーピッカーが開きます。

基本的に以下のようなアイコンが、「線」や「塗り」を表しているので、これは覚えておきましょう!

塗り … 「塗り」を表すアイコン。この場合は、薄いピンクで塗りつぶされている … という意味です。

「線」 … 「線」を表すアイコン。濃いピンクの線という意味ですね!

塗りの色なし … 斜線が入ると、色なし(透明)状態です。

グラデーション … 「塗り」にグラデーションが設定されている状態です。「線」にはグラデーションは指定できません。

2. カラーウインドウからアクセス

カラーウインドウ

カラーを設定するカラーウインドウからも、「塗り」と「線」にアクセスできます。

ここにも同じアイコン(「塗り」と「線」)が表示されていますよね!それぞれダブルクリックすると、カラーピッカーが開きます。でも、選択したパス(オブジェクト)にグラデーションが指定されている場合は、「塗り」アイコンは表示されません。

MEMO

カラーウインドウの表示は、メニューバーの ウインドウ → カラー です。また、ショートカットキーは F6キーです。

3. アピアランスウインドウからアクセス

アピアランスウインドウ

アピアランスについては、ちょっとあとで後述しますが、アピアランスウインドウからも「塗り」と「線」にアクセスできます。

アピアランスウインドウでは、アイコンの形がちょっと違いますが、色や、色なしなどが確認できますね!ここをクリックすると、メニューバーのときと同じように、スウォッチパネルが開きます。また、shiftキーを押しながらクリックすると、カラーパネルが開きます。

MEMO

アピアランスウインドウの表示は、メニューバーの ウインドウ → アピアランス です。また、ショートカットキーは、shift + F6キーです。

さて、それではさっきのハートをもう一度見てみましょう。まず、メインのパスには、「線」の色をピンクに、「塗り」をなしにしています。

ハートのパス

ハートのパス

パスを見せるために、色を少し薄くしています。

そしてハートの上にあるちょんちょんも、同じように「線」をピンクに、「塗り」をなしにしています。

ちょんちょんのパス

ちょんちょんのパス

パスを見せるために、色を少し薄くしています。

最後に背景になる、淡いピンクの部分です。さっきより淡い色を指定して、同じように「線」に色を指定して、「塗り」はなしにしています。

背景のパス

ハートの背景

でも、ここで「あれ?」って思うことがふたつありますよねー。まずひとつめは、さっきと線の太さが全然違う事。そしてふたつめは、背景にしたいのに、パスが前面にきてしまってるということ。それではひとつひとつ見ていきましょう!

12. 線をいろいろ設定しよう!

さっきのハートの図、線の太さが全然違いましたよね?Illustrator は、基本的に「線」と「塗り」で描いていくので、「線」の見た目を細かく指定して変更することができます!これができないと困っちゃいますよねー。

ここでやっと、難しそうな言葉 アピアランスの登場です。アピアランスというのは「見た目」という意味。Illustrator は、Photoshop と違ってベクターグラフィックですから、パスで描いた通り = 見た目 という訳ではないんですねー。

パスにいろいろなアピアランス属性(見た目のデータだと思ってればいいと思います)をつけて、見た目をいろいろ変更していくわけです。そしてそのアピアランス(見た目)を指定していくのが、さっきも出てきた アピアランスウインドウです。

アピアランスウインドウ

アピアランスウインドウ

アピアランスウインドウは、メニューバーの ウインドウ → アピアランス から表示することができますが、ショートカットを覚えておくか、頻繁に使うので、表示させっぱなしがいいと思います。さっきも書きましたけど、ショートカットキーは shift + F6キー です。

上の図のように、背景の淡いピンクのパス(オブジェクト)を、選択ツール(さっき出てきましたね!)で選択して、アピアランスウインドウを見ると、「線」「塗り」「不透明度」の 3つがありますねー。でも今回のパス(オブジェクト)は、「塗り」を指定していないので、アイコンに斜線が入ってますね!

ここでアピアランスウインドウの中、「(ブルーのリンク)」をクリックしてみると、新しく下記のような「線」ウインドウが表示されます。

線ウインドウ

線ウインドウ

この線ウインドウで、線の太さや、線の端の形などを細かく指定することができるんです!まずはピンクの破線で囲んだ部分、線幅を変更すれば、線を太くしたり細くしたりすることができます。他の部分についても、少し詳しく見ていきましょう。

  • 線端 … 線の端っこの形を選びます。線端の形は3種類。
    • バット線端
    • 丸形線端
    • 突出線端
3種類の線端

3種類の線端

名前までは覚えなくてもいいかもしれませんが、3種類あることは覚えておきましょう!この線端の形が違うと、かなりグラフィックの印象が変わります。意外に重要なので、チェックを忘れずに!

  • 角の形状 … 角の形です。これも3種類あります。
    • マイター結合
    • ラウンド結合
    • ベベル結合
3種類の角の形状

3種類の角の形状

また、マイター結合は、尖った角になりますけど、角度によっては尖った角にならない場合があります。

マイター結合 – 角の比率

角の比率

1は、角の比率がデフォルトの 4。角を尖らせたいのに尖っていません。そういうときは、角の比率をあげてあげると( 2)、ちゃんと尖った角になります。

線については、上記以外にも線の位置(パスに対して内側、外側など)や、破線にしたり矢印にすることもできますが、長くなりそうなので今回は省略します。それではアピアランスウインドウに戻りましょう。

13. アピアランスウインドウのいろいろ

アピアランスとは、見た目、外観のことだと書きました。Illustrator では、パスの構造はそのままに、アピアランス属性を編集して、見た目を変えていくという事もわかりました。さっきは線について簡単に見てきましたけど、他にはどんな事ができるんでしょう?

13.1. 不透明度

アピアランスウインドウ

まずは分かりやすい 不透明度からいきます。不透明度は、名前の通り不透明度を指定します。0 ~ 100% の間で指定して、0 に近づくにつれて向こう側が透けて見えるようになります。

オブジェクトそのものの不透明度を変更することもできるし、下の図のように、「線」、「塗り」それぞれの不透明度を変更することもできます!

「線」、「塗り」の左横にある、三角のアイコンをクリックすると、それぞれの不透明度を調整するパネルが現れます。Photoshop にも不透明度はありますし、そんなに難しいことでもないので、これくらいにして次にすすみます。

13.2. 効果

アピアランスでとっても大事なのが、この効果。効果には様々な種類があって、ここではとても全部を説明しきれません。なので効果ってこんなものだよー!っていう程度ですが、いくつかご紹介しますね!

13.2.1. 基本的な効果の使い方

まずは Webデザインっぽく?ドロップシャドウ付きの丸角のボックスを作ってみます。実際に描くパスは、ただの四角形ですが、効果を加えて丸角やドロップシャドウを付けていきます!

ドロップシャドウ付きの丸角のボックス

効果で作るドロップシャドウ付き丸角

fxボタン

とりあえず長方形ツールを使って四角いパスを描いたら、線と塗りを設定します。今回はグレーの線と白い塗りを指定しました。次にアピアランスウインドウの fxというボタンを押してみます。または、メニューバーの 効果から選びます。

するとたくさんの効果が出てきます … いっぱいありますねー …。


効果の種類

Illustrator効果と、Photoshop効果という項目に分かれていますが、本当にたくさんの効果があります …。とりあえず今回は、Illustrator効果の スタイライズから、ドロップシャドウ角を丸くするを設定してみます!

ドロップシャドウ

ドロップシャドウ

とはいってもやり方は簡単です。効果を選択すると、ウインドウが表示されるので、それぞれ数値などで指定してあげるだけです。

角を丸くする

角を丸くする

今度は角を丸くするの設定です。今回は 10px を指定してみました。

これでドロップシャドウ付きの丸角ボックスができました!前述した図の通り、基本的にパスの構造は変わってません。アピアランス(外観)だけを変更しているんですねー。また、効果は「線」だけにとか、「塗り」だけに適応させたりもできるので、いろいろ試してみてくださいね!

基本的にはこんな感じでオブジェクトに効果を付けていきます。もうひとつ効果を使った簡単な例を見てみましょう。

13.3. ジグザク線や波線を作ってみよう!

今度は線をジグザグにしたり、波形にしたりしてみましょう。

ジグザグや波線

ジグザグや波線

線をひいたら、メニューバーの 効果 → パスの変形 → ジグザグ を選びます(または fxボタンから)。

ジグザグウインドウ

ジグザグウインドウ

一番下のポイントのところで、滑らかにを選ぶと波線になります。大きさや折り返しを調整すればできあがりです。

でも、せっかく作ったジグザグ …。見た目だけではなくて、ジグザグの形のパスを作りたいときも出てくると思います。効果を使えば簡単にジグザグを作れますけど、これはあくまでアピアランス(見た目)だけですから、パス自体は一直線の構造です …。

そこでパスをジグザグに変換してみましょう!やり方はとっても簡単。メニューバーの オブジェクト → パス → パスのアウトライン を選択すると、下記のようなジグザグのパスの出来上がり!

ジグザグのパス

ジグザグのパス

簡単にジグザグのパスにすることができましたねー。実は効果のメニューの中にも、パス → パスのアウトライン という項目があるんですけど、これとは違うので注意が必要です。

13.4. 線の新規追加、塗りの新規追加って?

ここでもう少しだけアピアランスウインドウを見ていきます。効果ボタン(fx)の隣りに、ふたつのボタンがあります。これらは何かというと …

新規線を追加、新規塗りを追加

新規線を追加、新規塗りを追加

  • 新規線を追加
  • 新規塗りを追加

それぞれ「線」や「塗り」を新しく追加するボタンです。でも、新規線とか、新規塗りとはなんでしょう?基本的に Illustrator は「線」と「塗り」でグラフィックを作っていくって書きました。普通に考えれば、ひとつのパスに対して、ひとつの「線」とひとつの「塗り」があるって思いますよね!今まで見てきたパスも、「線」や「塗り」はひとつずつしかありませんでした。

でも、Illustrator では、この「線」や「塗り」を、ひとつのパスに複数作る事ができるんです!

… って言われてもピンときませんよねー …。なので簡単な例で見てみましょう。よく Illustrator の本で紹介されているものですが、1本のパスで線路を書いてみましょう!

1本のパスで描かれた線路

線路

こういう線路を描くときは、一体どうやったらいいのでしょう?実はこの線路は、両方とも 1本のパスでできています!

1本のパスでできています

答えは簡単!さっき紹介した「新規線を追加」で、1本のパスに 2本の線を指定しているんです。上の線路でいったら、黒い線と、ちょっと細い白い破線の2本の線でできているんですねー。破線は線ウインドウ(覚えてますか?) … で簡単に作れます!

下の線路も同じ理屈で、細い線と、太くて間隔の広い破線の2本でできています。下記は上の線路のパスのアピアランスです。

線路のアピアランスウインドウ

4px の太さの白い破線と、6px の黒い線がありますね!今回は新規線の追加だけでしたけど、新規線や新規塗りの追加は、アイデア次第でいろいろ描けちゃいますね!覚えておくと便利です!

14. オブジェクトの重なり順

線の太さの説明に始まって、アピアランスについて見てきました。では、さっきの続き、ハートマークに戻りましょう。さっき、あれ?って思ったこと、それはパス(オブジェクト)の重なり順 …。当たり前と言えば当たり前なんですけど、Illustrator では、後から描いたパスが前面に重なっていきます。

後から描いたパスが前面に重なる

後から描いたパスが上に重なっていきます

なので場合によっては、順番を入れ替えてあげる必要がでてきますよねー。パスの重なり順の確認と変更は、レイヤーウインドウでできます。

レイヤーウインドウ

レイヤーウインドウ

レイヤーウインドウは、メニューバーの ウインドウ → レイヤー で表示させることができますが、出しっ放しでもいいくらいです。

でも実際は、レイヤーウインドウの中で順番を入れ替えるのも面倒です。オブジェクトを選択して、右クリックから重なり順の変更もできますが、ここはショートカットキーを覚えてしまいましょう。

SHORTCUT KEY
  • ひとつ前面へ … command + ] キー
  • ひとつ背面へ … command + [ キー
  • 最前面へ ... command + shift + ] キー
  • 最背面へ … command + shift + [ キー

これでちゃんとした重なり順になりました!

重なり順変更後

14.1. じゃあレイヤーって使わないの?

上記のハートは、1枚のレイヤーの中でパスを重ねて描いています。もちろん Illustrator にも、Photoshop と同じようにレイヤー機能がついています。Photoshop を使い慣れていると、レイヤーってたくさん使いますよね。でも Illustrator では Photoshop みたいに何十枚もレイヤーを使う事はあんまりないかもしれません(あくまで私はです)。

イラストの背景と、キャラクターを別々のレイヤーに描いたり、地図や図形とテキストをレイヤーで分けたり … 下絵と実際に描くレイヤーを分けたりもします。でも、人それぞれ使い方はあると思うので、使いやすいようにレイヤーを使い分けましょう。

新規レイヤーの作成

新規レイヤーの作成

レイヤーの新規追加はレイヤーウインドウの右上部分をクリックして、新規レイヤー で作成します。

15. パスをグループ化しよう!

イラストなどを描いていて、一段落したらパスをグループ化しておきます。でもグループ化ってなんでしょう … まずはグループ化していないと、どんな事になるかを見てみます。

さっきのハートを他の所に移動しようと思って、選択ツールで選択してドラッグして移動させました。

複数のパスを選択して移動しようとしたら …

複数のパスを移動しようとしたら ...

でも、一個だけ選択するのを忘れて、置いてきちゃいました …。グループ化というのは、こういう事を防ぐ為に、複数のパスをひとつのグループにすること。グループ化してしまえば、いちいち一個ずつパスを選択しなくてすむし、とっても効率的になります!

15.1. グループ化の仕方

グループ化はとっても簡単です。グループ化したいパスを全部選択しておいて、右クリックから「グループ」でグループ化できます。でも、ショートカットキーが便利なので、覚えておきましょう。

グループ化は command + G

グループ化は command + G

MEMO
  • グループ化 … command + Gキー
  • グループ化解除 … command + shift + Gキー

グループ化すると、グループに含まれているパスのどれかを、選択ツール(黒い矢印アイコンでしたね!)でクリックすれば、グループ全体が選択されるので、上記のように置いてきちゃうようなことも無くなります。

グループ内のどれかひとつをクリック

15.2. グループの中のひとつを選択したい …

グループ化したのはいいけれど、後からグループの中の、ひとつを選択したい場合も出てきます。その度にグループを解除するのも面倒です …。

そんなときは、グループ選択ツール(前半でちょっと出てきましたね!)を使います。グループ選択ツールを使うと、グループの中のパスを個別に選択できます。

グループ選択ツール

16. 写真を貼付ける

Illustrator は主にベクターグラフィックを作成する為のソフトですが、時には写真を貼付けたい場合もありますよねー。写真は一体どうやって貼付ければいいんでしょう?

写真の貼付けは、メニューバーの ファイル → 配置 で行います。あとは写真を選んで「配置」を押すだけですが、下記のようにリンクとかテンプレートとか出てきますよね?

画像へのリンク

テンプレートについては、今回は省きますが、大事なのはリンクのチェック。リンクにチェックを入れておくと、Illustrator に配置されるのは、写真そのものではなくて、写真のプレビューなんです。リンクのチェックを外すと、写真そのものが配置されます。

どういうことかというと、リンクで配置した場合、元画像を Photoshop などで編集した時に、Illustrator に配置した写真も変わります。というのも、リンクで繋がっているただのプレビューだからです。

また、プレビューなので、Illustrator ファイルのサイズも小さくて済みますが、もと画像を削除したり、別のフォルダに移動したりした時には下記のようなダイアログが表示されます。

リンクに変更があったときのダイアログ

リンクに変更があったときのダイアログ

はいをクリックすると、写真を改めて選択する画面に移動します。

Attention

写真と Illustrator ファイルがリンクで繋がっているので、誰かに Illustrator ファイルを渡したいときは、写真も一緒に渡してあげる必要もあるので、注意が必要です。

また、今回は写真を例にしましたが、他にも Photoshop ファイルを配置できたりするので、Illustrator と Photoshop 両方持ってる人は何かと便利に使えますね!なにはともあれ、無事に写真を配置することができました!

写真を配置できました!

写真の配置

17. クリッピングマスクを使ってみよう!

クリッピングマスクというのは、オブジェクトの一部を切り抜く機能のこと。言葉で説明するよりも、画像で説明した方がわかりやすいと思うので、下記の画像を見てください。

写真の上にパスを描いた

写真の上にパスを描く

今回は、写真の上から、「線」も「塗り」も指定していないパスを描きました。その状態で、写真とパス両方を選択して、メニューバー の オブジェクト → クリッピングマスク → 作成 をすると …

パスの形に切り抜かれました!

クリッピングマスク

もちろん写真じゃなくて、他のパスでできたイラストなどにも使えますし、円ではなくて、もっと複雑な形でも OK です。これもショートカットキーを覚えておくのが便利ですね!

MEMO
  • クリッピングマスク … command + 7 キー
  • クリッピングマスクの解除 … command + option + 7 キー

でも人物の輪郭に沿うような、いわゆる「写真の切り抜き」は、やっぱり Photoshop でやった方がいいと思います!

18. 複合パスってなに?

ここまで色々見てきましたけど、例えばドーナツみたいな穴のあいたオブジェクトを作るときはどうしたらいいでしょう?

ただパスが重なっただけ …

ただパスが重なっただけ ...

大きな円(濃いピンク)の中に、小さな円(淡いピンク)を描いて、穴をあけようと思っても、ふたつのパスが重なって表示されるだけで、穴が開く訳ではありません …。そんな時に使うのが 複合パスと呼ばれるもの。複合パスを使うと、以下のように穴の開いたパスを作ることができます!

複合パス

複合パス

複合パスの作り方は、ふたつのパスを選択しておいて、メニューバーの オブジェクト → 複合パス → 作成 で作る事ができます!これもショートカットを覚えておきましょう。

MEMO
  • 複合パス … command + 8 キー
  • 解除 … command + option + shift + 8 キー

また、一度複合パスにしてから解除すると、もともとのアピアランスは失って、統合されたパスのアピアランスと一緒になるので注意が必要です。

複合パスを解除した状態

複合パスの解除

また、穴をあける … という表現は適切じゃないかもしれません … 重なった部分を透明にするっていう感じ(同じかな?)です。なので以下のようなこともできるんですね!

重なった部分を透明にする

19. パスを複数に分ける(分割)

まず先ににひとつの大きなパスを描いて、それを複数のパスに分けたいときは一体どうすればいいでしょう?

ハートを半分にしたいけど …

パスの分割

例えば上記のハートの真ん中に、一本線を引いたとしても、それはハートのパスの上に別のパスが乗っているだけで、パスがふたつに分かれている訳ではないですよねー。

それではどうすればいいでしょう? … こういうときはパスを分割します!やりかたはとっても簡単で、分割したいパスを選択しておいて、パスファインダーでボタンを押すだけです!

パスファインダーウインドウ

パスファインダー

パスファインダーは、メニューバーの ウインドウ → パスファインダー から開きます。ボタンがいくつか並んでいますが、使用するのは下段の「パスファインダー」というところの一番左の「分割」ボタンです。これでハートをふたつに分割することができました!別々のオブジェクトなので、もちろん「塗り」も別々の色を指定できますね!

MEMO

パスファインダーは、パスを分割するだけではなくて、複数のオブジェクトを合体させたり、くりぬいたりと、いろいろな操作ができる機能ですが、今回は長くなるので省略します。

20. 覚えておきたい Tips

ここから少し、覚えておきたい Tips を紹介していきます。

20.1. パスをロックする

せっかく作ったパスを間違えて動かしてしますこともあります。そんなことにならないように、パス(だけじゃないですが)を ロックしてしまいましょう。Photoshop では、レイヤーをロックする事はよくあると思いますが、Illustrator では、オブジェクトのロックもよく使います。

ロックはオベジェクトを選択しておいて、メニューバーの オブジェクト → ロック → 選択 でロックできます。でもショートカットの方がやっぱり便利!

MEMO
  • ロック … command + 2 キー

また、ロックはレイヤーパネルからもできます。

レイヤーパネルからロック

レイヤーウインドウからロック

ロックしたオブジェクトには、鍵アイコンがつきます。上記はグループ化したオブジェクトと、レイヤー3にロックがかかってますね!解除する場合は、鍵アイコンをクリックします。

20.2. オブジェクトの非表示

パスを描いていて、先に描いたり配置したオブジェクトを隠したい場合があります。そんな時は、隠したいオブジェクトを選択して、command + 3 キーで隠す事ができます!再表示させるときは、command + option + 3 キーです。

ハートを隠した状態

オブジェクトを隠す

SHORTCUT KEY
  • オブジェクトを隠す … command + 3 キー
  • 再表示 … command + option + 3 キー

20.3. プレビュー表示とアウトライン表示の切り替え

作業をしていると、実際の見た目と、パスがどんな風に描かれているかを確認したいときがあります。そんなときは、command + Y キーで、プレービュー表示とアウトライン表示を簡単に切り替える事ができます。

アウトラインとプレビュー

上がもちろんプレビュー表示、下がアウトライン表示です!

SHORTCUT KEY
  • 表示の切り替え … command + Y キー

21. オブジェクトのコピーとペースト

順番的には一番最後になってしまいましたけど、オブジェクトをコピーしたり貼付けたりってことも多いと思います。コピー自体はとっても簡単です。他のソフトウェアでもよく使われている、command + C キーで OK です。

SHORTCUT KEY
  • コピー … command + C キー

でも、Illustrator の場合、貼付ける時にちょっと注意が必要です。ひとつずつ紹介しますね!

21.1. 普通に貼付け

コピーしたものを普通に貼付けるには、色んなソフトで command + V キーが使われてますよねー。もちろん Illustrator でも使えます。でも、command + V キーで貼付けると、アートボードの中のどこに貼付けられるのか分からないです。大体アートボードの真ん中へんかな?

SHORTCUT KEY
  • 貼付け … command + V キー

21.1. コピー元と同じ位置に貼付け

ショートカットキー command + F キーを使うと、コピー元と同じ位置に貼付けます。同じものが同じ位置に貼付けられるので、ぱっと見ではちゃんと貼付けられたかどうか判断できませんけど、元の位置から正確に配置したいときなど、便利ですし、覚えておきたいショートカットキーのひとつです。

SHORTCUT KEY
  • 同じ位置に貼付け … command + F キー

21.3. option キーを押しながらドラッグしてコピー

複製したいオブジェクトを選択しておいて、option キーを押しながらドラッグしてもコピーを作る事ができます!

option キーを押しながらドラッグ

optionキーを押しながらドラッグ

また、このあと command + D キーを押すと …

command + D キーで複製の繰り返し

同じ間隔でコピーされます

同じ間隔で複製が作られます!

22. 最後に

また随分と長い記事になってしまいましたが、ここで紹介した事でできることは、そんなに多くありません。たくさんある Illustrator 基本操作の中の、ほんのひと握りを紹介したに過ぎません。

また、機能はもちろん、ショートカットキーだって、一度に覚えられる訳でもないと思います。ただ、今まで Illustrator って難しいよねー … という感じで、何となく馴染めなかった人が、少しでも馴染めるようになればなーと思って書きました。

Illustrator を使いこなすことは、実は簡単な事ではなくて、何年も何年もかかって一人前になるものだと思います。Photoshop もそうですけど、何年もかけながら、ゆっくり自分の技術にしていけばいいんじゃないかなーと私は思っています(というか、一度には覚えきれません)。

ここでは「文字」のことにすら触れていないし、Illustrator の機能のほんの 5%くらい?しか紹介しきれていないと思います。Webデザイナーにとって、Photoshop と並んで身につけておきたい Illustrator。私もまだまだ勉強中なので、上手にまとめられたかどうか分かりませんが、これから Illustrator を始めてみようという Webデザインを勉強中の人に読んでもらえたなら嬉しいです。

22.1. 参考にしている書籍など

また、Illustrator については、やっぱり本を買ってしっかり勉強した方がいいかなーって思います。そしてその上で、いろんなデザイナーさんの経験から書かれたブログなどを参考にすると、とっても勉強になると思います。私は以下の書籍で勉強しています(リンクはアマゾンに飛びます)。

Illustrator 10年使える逆引き手帖

Illustrator 10年使える逆引き手帖【CS4/CS3/CS2/CS/10/9/8 対応】

初心者さんでも分かりやすく書かれた、基本的な使い方がびっしり詰まった本です。一度読んで終わりというような物ではなくて、いつも机に置いて辞書みたいに使っています。

新版 プロとして恥ずかしくないIllustratorの大原則

新版 プロとして恥ずかしくないIllustratorの大原則 (インプレスムック エムディエヌ・ムック)

こちらも基本的な使い方と、アートワークの例などが載っていますが、初めてイラストレーターを触る人には少し敷居が高い感じです。でも、プロはこういう風に使う!的なことが学べるので、少し慣れてきたら読んでみるといいかもです!

22.2. Webデザインで Illustrator を使うなら …

また、以前Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろという記事を書いたとき時に、私が Photoshop で作ったのと同じものを、Illustrator を使って作る記事を書いてくれた人がいました。その記事がとっても参考になると思うので、Webデザインで Illustrator を使うなら、読んでみると勉強になります!

こんなに長い記事なのに、最後まで読んでくれてありがとうございました!
P.S Aちゃんイラレがんばろーね!

Comments

Thank you for the comment.