Webデザイナーに最低限必要なIllustratorの使用方法を解説!

ロードマップ

「Webデザイナーになるのに、Illustratorの勉強を始めたけれど、操作画面のがよくわからない、使いこなせるか不安…」

「Webデザイナ−に必要なIllustratorの機能だけ使えるようになりたい」

Webデザイナーを目指して、Illustratorの勉強を始めたものIllustratorの機能が多すぎて何を使えるようになれば良いのかわからず、こんな悩みをかかえていませんか?

そこで本記事では、以下についてまとめました。

  • Illustratorの操作画面の見方からIllustrator用語の理解
  • Illustratorを起動してからデザイン作成までの準備手順
  • Webデザイナー知っておくべきがllustratorの基本機能

この記事を見るだけでIllustratorの操作画面の構成、パーツの呼び方をしり、Webデザイナーとして最低限知っておくべきIllustratorの機能を理解できるようになります。

Illustratorの知識をつけて仕事の幅をひろげていきましょう!

ぜひ最後まで見てください。

Webデザイナーが解説!Illustratorの画面構成からパーツの呼び方

Designed by Creativeart / Freepik

Webデザインするのに、仕事の幅が広がるからとIllustratorの勉強を始めたけれど、初めて見る画面、画面の構成でパーツの呼び方もわからない…と、なっていませんか?

わからないことが出てきても、調べたいものの呼び方がわからないと調べることができずに困ってしまいますよね。

はじめに知っておきたい表示画面の構成や、それぞれのパーツの名前と機能を簡単に説明していきます。

操作画面の名称

Illustratorを起動しましょう!

起動したら表示されるホーム画面から説明していきます。

Illustratorのダウンロードがまだの方は先に以下の別記事を参照ください!

Illustratorの導入方法を解説しています。

Webデザイナーが知っておくべきIllustratorの基礎知識から導入方法!

ホーム画面

Illustratorを開くと一番に出てくる、この画面をホーム画面と呼びます!

この画面から新規作成の設定をしたり、最近使用したIllustratorのデータを選択することができます。

ワークスペース

Illustratorでデータを開いたり新規作成をすると、表示される画面をワークスペースと呼びます。

実際にIllustratorで編集できる画面です。

ワークスペースのまわりには、たくさんのメニューやアイコンが表示されています。

1つ1つ名前がついているので、調べるときにはこの名前を頼りに検索してみてください。

①ツールバー
②アートボード
③メニューバー
④コントロールパネル
⑤パネル

デザインを作成するための新規ファイル設定方法を解説!

Designed by Creativeart / Freepik

実際にIllustratorでデザインを作成するための事前準備、新規ファイルの作成、細かい設定画面を詳しくご紹介していきます!

  • 新規ファイルの作成
  • 新規ドキュメント詳細

新規ファイルの作成

  1. ①画面左側、新規作成を押す
  2. 新規ドキュメントウインドウが表示されます。
  3. ②上部のタブにある「Web」をクリック
  4. プリセットが表示される
  5. ③目的に適したアートボードサイズを選択
  6. ④右下の作成を押す
  7. ファイルが開きます

プリセットに作成したいアートボードがあれば、この手順だけで新規のアートボードが作成されます。

新規ドキュメント詳細

新規ドキュメントで数値を変更すると好みのアートボードが作成できます!

ドキュメントの詳細をご紹介しますので好みのアートボードを作成してみてください。

①カテゴリー選択
②サイズ選択
③幅、高さの数値を設定
④裁ち落とし
⑤カラーモード
⑥ラスタライズ効果
⑦プレビューモード

①カテゴリー選択

作成するデザインのカテゴリーを選択します。

Webデザインを作成する場合はWebをクリックするとWebデザインに適したプリセットがでてきます。

②サイズ選択

①で設定したカテゴリーに沿ったサイズのプリセットが表示されるので、サイズを細かく指定しなくても、アートボードが作成できます。

③幅、高さの数値を指定

幅、高さの数値、数値の単位を細かく指定できるようになっています。

④裁ち落とし

アートボード周りに表示されている、赤い枠部分の印刷物を裁断する際にあらかじめ仕上がり線より大きめにとられる領域です。

印刷のプリセットを選択すると、天地左右に3mmずつが基本とされてデフォルトで設定されています。

⑤カラーモード

【㊧RGPカラーモード・㊨CMYKカラーモード】

カラーモードは印刷用、Web用などそれぞれの用途によって種類があります。

カラーモードを適切に設定していない画像は、色がくすんだり、鮮やかすぎたりして制作物の品質をさげてしまいます。

デザインデータを扱う上でとても大切な設定になるので、必ず確認するようにしたほうが良いです。

⑥ラスタライズ効果

影などの効果の解像度の事です。

解像度が荒いと印刷時に事故につながってしまいます。

印刷物作成の際は初期の段階で設定をしておきましょう

⑦プレビューモード

プレビューを見る際のモードの設定

基本的にデフォルトのままで作成するのがですが、Webデザインの場合はピクセルを選択するのがおすすめです!

Webデザインで使用するIllustratorの基本機能4選

Designed by Creativeart / Freepik

Illustratorを使用するのに最低限知っておいて方が良い操作方法、以下の基本機能4選を紹介していきます。

①レイヤー
②長方形ツール作成
③アンカーポイント
④オブジェクト整列

①レイヤー

Illustratorには「レイヤー」という単語が出てくる頻度が多いので理解することが必要です。

レイヤーとは?

一枚の画像のように見えるものが、実は何階層ものレイヤーが重なって見えています。

この一枚一枚の層がレイヤーです。

レイヤーが積み重なっている理由

あとで修正したいときに作業をしやすくするためです。

例えば、キャッチコピーが変更になったとします。

上の画像の「Yummy」が変更になった場合、上の画像のようにレイヤーが分かれていれば、テキストレイヤーにある文字を修正すれば簡単に文字だけ修正できます。

それがレイヤーが1つで構成されていた場合、画像の上に文字がくっついた状態になっているので文字だけの修正をするにも、文字の部分を消して、新しく文字を入力することになります。

そして、同じ画像が用意できない場合は、消えた画像の部分をいろんな方法を駆使して復元しないといけません。

もし、レイヤーが1枚だったとしたら、あとで修正したいときに、とても作業がしづらくなってしまいますよね?

あとからでも作業しやすいようにレイヤーは細かく分ける必要があります。

②長方形ツール作成

長方形や四角形の図形を作成します。

  1. 左のツールバーより赤い枠内の長方形ツール選択
  2. アートボード上でクリックしなが作成したい方向にドラッグ
  3. 四角形が作成できます。

③アンカーポイント編集

アンカーポイントとはパス(描かれる形)を操作するためのポイントの事です。

画像の小さな四角がアンカーポイントです。

  1. 左のツールバーよりダイレクト選択ツールを選択
  2. アンカーポイントをクリックしながらスライド
  3. アンカーポイントの編集が可能になります。

④オブジェクトの整列

バラバラには配置されたオブジェクトの整列をしていきます。

  1. 左のツールバーより赤枠内選択ツールを選択
  2. 上部メニューバーのウィンドウ押す
  3. 整列を選択して整列パネルを表示させる
  4. 整列させたいオブジェクトをすべて選択
  5. 整列パネルないの整列させたい項目を選択(今回は上部を揃える)
  6. 四角形が上部揃えで整列されました。

まとめ|Webデザイナーに最低限必要なIllustratorの使用方法を解説!

Designed by Creativeart / Freepik

本記事では、Webデザイナーを目指してIllustratorの勉強をはじめた方に向けて以下の内容をご紹介しました。

  • Webデザイナーが解説!Illustratorの画面構成からパーツの呼び方
  • デザインを作成するための新規ファイル設定方法解説!
  • Webデザインで使用するIllustratorの基本機能5選

いかがだったでしょうか?

Webデザインで使用するIllustratorの操作画面の構成やパーツの呼び方を知ったので、使いこなす為にも調べやすくなったと思います。

少しずつWebデザインで使用するIllustratorの機能になれていき、簡単なデザイン作成から繰り返していけば、スムーズにIllustratorを使用できるようになります。

Webデザイナー目指して楽しく勉強していきましょう!

コメント

タイトルとURLをコピーしました