イラストレーター「本当の初心者」の方が一番最初に覚えたい厳選５つのこと

はじめに

これさえ分かれば、とりあえず何か作れるという要素を大きく５つに分けて説明します。とにかく最初に一歩の記事となっています。機能を覚えるというより、とりあえず何か作ってみて自然に覚えるのが良いです。ひとまずWeb用のバナーを作ってみるとします。

ファイル関連の操作

まずは新しくファイルを作るのが最初の一歩。完成したら書き出して完成です。

新しくファイルを作る（新規）

Illustratorが立ち上がったら、「ファイル」→「新規」を選択します。

ここではバナーを作ると仮定しますので「Web」を選択後、幅300px高さ250pxとして「作成」をクリックします。サイズは仮のものです。

この先ほど設定した幅300px高さ250pxが白い部分で、アートボードと呼ばれます。白いキャンバスですね。

アートボード の説明はこちらから

もっと詳しく

意外と知らないイラレのアートボードの整列と基礎知識

通常の保存

少し早送りして、こういうバナーを作ったとします。

「ファイル」→「保存」→名前をつけて、保存場所を指定すればOKです。

名前を変えたりPDFを作る（別名で保存）

「ファイル」→「別名で保存」します。ファイル形式で「Adobe Illustrator」形式を選べば、別のファイル名で保存できます。「Adobe PDF」形式を選べばPDFで書き出せます。

名前を変えて、少し修正したファイルを残しておくということをよくやります。連番にしたり、日付をいれたり人によって様々です。やっぱり修正前に戻してください、みたいなことを言われたときのためです。

WEB用の画像の書き出し（アセットの書き出し）

今回のバナーのように、アートボード 丸ごと書き出す場合は「ファイル」→「書き出し」→「スクリーン用に書き出し」を選択します。それから、「アートボード 」と「アセット」が選べますので、「アートボード 」を選択し、書き出します。

画像関連の操作

Illustratorに画像を貼り込んでいく作業を行います。ここで覚えておきたいのが、「埋め込み」と「リンク」の違いです。

画像の埋め込みとリンクの違いを知る

画像の埋め込みとは、illustrator自体に画像を埋め込んでしまうことです。「ai」ファイル一つで完結します。

画像のリンクとは、あくまで画像を参照して表示しているだけなので、「ai」ファイルと一緒に画像データを持っておく必要があります。クライアントに送る際は、リンクの画像ファイルも一緒に送ってください。

具体的なやり方

「ファイル」→「配置」を選択します。リンクにチェックがついていれば「リンク」、はずせば「埋め込み」になります。これだけです。

動作が軽くなるので、少なくとも作業中はリンクで作業をするのが一般的です。画像はこのように配置された状態になりました。

もっと詳しく

トラブルの多いillustratorの画像埋め込み

ツールバーの操作

あらゆる操作の基本となるのが「ツールバー」です。ときどき、見失うことがあるので、その場合「ウインドウ」→「ツールバー」→「詳細」を選択します。

丸や四角のオブジェクトを配置する

配置された画像に文字をいれたいのですが、カラフルな画像の上には文字をいれても目立ちにくいので、白いオブジェクトを薄く配置することにします。ツールバーの四角オブジェクトを選択します。

こんな感じですね。

ただし、せっかく綺麗な写真があるのに隠してしまっては、もったいないので透明度を下げて少し透けさせることにします。

「ウインドウ」→「アピアランス」でアピアランスパネルを表示してください。この四角形のオブジェクトは白色の塗りでできているので、塗りの不透明度を下げます。ここでは81%としました。少し透けているぐらいが良い感じだと思います。

アピアランスについてはこちらから

もっと詳しく

イラレのアピアランスを使って作業効率アップ！機能と使い方紹介

選択系ツールで場所を調整する

選択系ツールで位置を調整していきます。絶対に覚えておきたいのが２つ「選択ツール」と「ダイレクト選択ツール」です。

オブジェクト全体を動かす選択ツール

ツールバーの選択ツールはこの位置にあります。

選択ツールを使えば、オブジェクトを移動させることができます。このようにグリグリと。

オブジェクトの一部を加工するダイレクト選択ツール

ツールバーのダイレクト選択ツールはこの位置にあります。

ダイレクト選択ツールは、アンカーポイントと呼ばれるパスのポイントを選択することができます。この場合、２点のアンカーポイントを選択し、shiftキーを押しながら、スライドさせ白のオブジェクトの縦サイズを調整しました。

角を丸くしてデザインの調整

角ばったオブジェクトでも問題ないですが、プレゼントなので少し柔らかい印象を与えたいです。そのため、少し角を丸くしてデザインを調整します。白いオブジェクトを選択すると、赤い◉が４コーナーに表示されています。

ここの１箇所を引っ張れば、角が丸くなります。

角丸の作り方はこちらから

もっと詳しく

イラレの角丸の作り方は２パターンを使い分ける

文字を入れる

次に白のオブジェクトの上に文字を作成していきます。ツールバーに「文字ツール」があります。

文字パレットからフォントやサイズなどの変更が可能です。

文字の入れ方はこちらから

もっと詳しく

イラレの文字の使い方総まとめ

「有機野菜セット100名様にプレゼント！」とクライアントから入れる要望があったとします。完成形はこのような感じです。

デザイナーじゃない人が作成したら、このようになるかもしれません。文字をただ打ち込んだだけ。

文字のデザインの考え方

こういう時は、考え方として全ての要素を一回バラしてみることが大事です。

その上で、何が大事か？を考えます。「100名様」ってのはプレゼントの数として多いんじゃないか？では「100」を大きくしよう。「名様」っていうのは数が重要なのであって、それほど大きい必要はないなと。では小さくして横に添えよう。

でも「有機野菜セット」というのも同時に目立たせたい。「目立たせるためには、100名様にプレゼント！」と違う色使いにしよう。そのためには、白抜き文字になるように緑のオブエジェクトを下に配置しよう、というような思考回路で作成しました。

ここでは、文字を目立たせるために白のフチをつけています。

文字の縁の付け方はこちらから

もっと詳しく

illustratorの文字縁取りのやり方

色のつけかたについて

作業の過程が前後しますが、デザインをする上で外せないのが色の付け方です。

カラーパネルで色に変化をつける

「ウインドウ」→「カラー」でカラーパネルが表示されます。RGBのスライダーを動かして色をつけます。

スウォッチパネルで登録しておく

「ウインドウ」→「スウォッチ」でスウォッチパネルが表示されます。カラーパネルで作成した色をスウォッチパネルに登録しておけば、いつでも同じ色を使うことができます。

カラーパネルで作った塗りをドラック&ドロップすれば色を登録することができます。

レイヤーについて

最初に絶対知らないといけないことでもないですが、覚えておくと良いのがレイヤーの概念です。

よく言われることですが、レイヤーとはアニメのセル画のような概念で、階層をつけることができます。

レイヤーパレットの上にいけばいくほど、積み重なった層の上にあるということです。なにが便利かというと、触りたくないものは触らずに編集できるということです。

今回のバナーでいうとレイヤーを３層にわけると便利です。一番下に野菜の写真レイヤー、その上に白のオブジェクトのレイヤー、一番上に文字のレイヤーです

こうすることで、レイヤーはごとに表示したり非表示にしたり、ロックをかけて触れないようにしたりなどスムーズにデザインの制作が行えます。

レイヤーについてはこちらから

もっと詳しく

illustratorのレイヤー管理はチームで作業するときにこそ重要

最後に

ざっくり、ほとんどイラストレーターを触ったことがない人がはじめてデザインを作るという観点で５つの要素にわけて解説しました。