イラレ・フォトショ講座

【WEBデザイン】Illustratorの6つの基本操作を解説!

今回は、初心者の方のために、Illustratorの6つの基本操作をご紹介します。

この記事を読むことで、Illustratorを使って基本の操作はできるようになります。

「Illustratorってどうやって使うの?」

「一連の操作の流れを知りたい!」

こういった疑問をこの記事を読めば、解決できます。

yandy
yandy
実際の画面を見せながらご紹介します!

Illustratorの基本操作

これからIllustratorの基本操作を6つ紹介します。

  1.  アートボードの作成
  2.  長方形の作成
  3.  図形の色の変更
  4.  線の色と太さの変更
  5.  文字の入力
  6.  保存の方法

① アートボードの作成

まずは、作品の土台となるアートボードの作成方法をご紹介します。

①-1 Illustratorの起動

Illustratorを起動すると、以下のような画面が表示されます。

ちなみにこちらの画面は、2020年11月版のIllustrator画面になります。

①-2 サイズの選択

次に、作成するアートボードのサイズ等を設定します。

設定方法は、以下の2つあります。

  • プリセットから作成
  • 手動で作成

私は、細かな設定ができるため、ほとんど手動で作成することが多いです。

プリセットから作成

プリセットから作成するためには、以下の赤枠部分から作成したいものを選択するだけです。

たとえば、一番左にある「A4」を選択するとA4のアートボードが作成されます。

また、各項目の横にあるマークを押すと、様々な種類のアートボードを作成できます。

たとえば、「共通項目」のマークを押すと、様々な大きさのWEB用のアートボードを選択することができます。

手動で作成

手動で作成するためには、以下の「新規作成」ボタンを押します。

すると以下のように、様々なアートボードを選択できます。

今回は、上部メニューの「印刷」から「A4」を選択します。

そして、プリセットの詳細を確認していきます。

重要な確認ポイントは、以下の2つです。

  • 単位
  • カラーモード
単位

単位については、「ミリメートル」が選択されていることを確認しましょう。

Illustratorの単位は、作成媒体によって以下のように設定します。

印刷物 ミリメートル
WEB媒体 ピクセル
カラーモード

また、カラーモードについては、「CMYKカラー」が選択されていることを確認しましょう。

Illustratorのカラーモードは、作成媒体によって以下のように設定します。

印刷物 CMYKカラー
WEB媒体 RGBカラー

プリセットの詳細設定が完了したら、「作成」ボタンを押します。

これで以下のようなアートボードが完成します。

スポンサーリンク

② 長方形の作成

次に、長方形の作成方法をご紹介します。

長方形ツールは、以下のように四角形を作るためのツールです。

②-1 長方形ツールの選択

まずは、左側のツール一覧から「長方形ツール」を選択します。

もし、長方形ツールが表示されない場合は、ツールの上で、左クリックを長押しすると、隠れていたツールが表示されます。

②-2 長方形の作成

そして、長方形ツールを選択した状態で、アートボード上で、「左クリック」したまま動かすことで長方形が作成できます。

ちなみに、「shift」を押しながら長方形ツールを使用すると、正方形が作れます。

②-3 長方形の完成

長方形が作成できたら、ツールパネルより「選択ツール」を選択することで、長方形が完成します。

また、「選択ツール」を利用することで、長方形を好きな位置に動かすこともできます。

③ 図形の色の変更

次に、先ほど作成した図形の色を変更する方法を紹介します。

③-1 図形の選択

選択ツールを使って、色を変更したい図形を選択します。

③-2 塗りの選択

そして、左のツールパネルから、「塗り」をダブルクリックします。

すると以下のようなカラーピッカーが表示されますので、そこで色の設定を行います。

色の設定方法は、大きく分けて以下の2つあります。

  • 視覚的に設定
  • カラーコードによる設定

視覚的に設定

視覚的に設定する方法は、「カラーを選択」のパネルから好きな色をクリックすることで、色を設定することができます。

ほとんどの方は、この方法で設定されていると思います。

カラーコードによる設定

カラーコードによる設定は、以下の赤枠の部分にコードを入力する設定方法です。

それぞれの色に固有のコードが設定されています。

初心者の方は、あまり使わないかなと思いますが、デザインの仕事を依頼される際に、カラーコードの指定があったりします。

そういった場合は、ここにカラーコードを入力して設定するようにしましょう

今回は、カラーコードに「61af66」と入力し、「OK」ボタンを押します。

すると以下のような図形が作成できたと思います。

④ 線の色と太さの変更

次に、図形の線の色と太さを変更する方法を紹介します。

④-1 図形の選択

まずは、選択ツールを使って、線の色や太さを変更したい図形を選択します。

④-2 線の選択

次に、左のツールパネルから「」をダブルクリックします。

そして、先ほどの「塗り」と同様に色を変更することができます。

今回は、カラーコードを「ed6f51」に設定しました。

すると、図形が赤色の線になったと思います。

④-3 太さの変更

線の太さは、右のプロパティパネルの「アピアランス」から変更することができます。

線の横のタブから線の太さを自由に変更することができます。

今回は、線の太さを「5px」に設定します。

すると、以下のように赤色の線で太さが5pxの長方形が完成します。

⑤ 文字の入力

次に、文字の入力方法を紹介します。

⑤-1 文字ツールの選択

まずは、左のツールパネルから「文字ツール」を選択します。

⑤-2 文字の入力

そして、アートボードの上でクリックすると文字が入力できます。

この時、デフォルトで「山路を登りながら」の文字が表示される方もいると思いますが、文字を入力すると消えますので、気にしなくて問題ありません。

今回は、「デザインの基礎ブログ」と入力しました。

文字の入力が完了したら、「選択ツール」を選択しましょう。

「選択ツール」を選択することで、文字を自由に編集することだきます。

⑤-3 文字の編集

次に、文字パネルを使って、文字のフォントや大きさを変更します。

文字パネルは、上部メニューのウィンドウ>書式>文字から表示することができます。

フォントや文字の大きさなどを自由に編集することができます。

今回は、文字パネルを以下のように設定しました。

すると、以下のように文字が入力されます。

⑤-4 文字の色の変更

また、文字の色も簡単に変更できます。

選択ツールで、文字を選択した状態で、ツールパネルの「塗り」から変更できます。

今回は、カラーコードを「e26649」に設定しました。

すると、以下のように文字が完成すると思います。

⑥ 保存の方法

最後に、データの保存方法をご紹介します。

今回は、ai データとして保存する方法と画像データとして保存する2つの方法を解説します。

aiデータの保存

Illustratorで何度も編集ができるファイル形式aiデータと言います。

まずは、aiデータとして保存する方法を解説します。

上部のメニューのファイル>別名で保存を選択します。

そして、データの名前を入力し、ファイル形式がaiであることを確認して問題がなければ、「保存」を押します。

以下のような画面が表示される場合がありますが、「OK」で問題ありません。

これで、aiデータの保存は完了です。

もう一度、保存したデータを編集したいときは、このaiデータをダブルクリックすることで、Illustratorが立ち上がり、編集することができます。

画像データの保存

次に、画像データで保存する方法を紹介します。

上部メニューのファイル>書き出し>WEB用に保存を選択します。

ファイル形式が、「GIF」もしくは「JPEG」になっていることを確認して、「保存」ボタンを押します。

そして、名前をつけて、「保存」を押すと、画像ファイルとして保存することができました。

まとめ

今回は、初心者の方のために、Illustratorの6つの基本操作をご紹介しました。

これから、WEBデザインを勉強する方は、Illustratorの基本を習得することは重要です。

そのため、この記事がIllustratorの勉強を始めるきっかけになれば良いなと思います。

以下の記事で、名刺やショップカード、バナーの作成方法も紹介しております。

WEBデザインのスキルをステップアップされたい方は、ぜひ読んでみてください。

【画面あり】Illustratorで名刺を作る方法|WEBデザインIllustraterで名刺を作る方法を知りたいですか?本記事ではIllustratorで名刺を作る方法を実際の画面を見せながら紹介しました。これからIllustratorで名刺を作りたい方は、是非記事をご覧ください。...
【画面あり】Illustratorでショップカードを作る方法|WEBデザインIllustraterでショップカードを作る方法を知りたいですか?本記事ではIllustratorでショップカードを作る方法を実際の画面を見せながら紹介しました。これからIllustratorでショップカードを作りたい方は、是非記事をご覧ください。...
【画面あり】Illustratorでバナーを作る方法|WEBデザインIllustraterでバナーを作る方法を知りたいですか?本記事ではIllustratorでバナーを作る方法を実際の画面を見せながら紹介しました。これからIllustratorでバナーを作りたい方は、是非記事をご覧ください。...

Illustratorの基礎をさらに固めたいという方は、UDEMYで勉強するのもおすすめです。
私がIllustratorの勉強のために、最初に利用した教材は以下です。気になる方はどうぞ。
※現在、UDEMYはキャンペーン中で、かなり安くなっております。

UDEMYのおすすめ動画はこちら