デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

※この内容は「入門!つくりながら楽しくマスター1日完結Illustrator特訓【ピクトグラム編】」を基に作成しています

 

Webのパーツを作成する場合はPhotoshopで作成すること多いですが、輪郭のはっきりしたイラストを含むパーツづくりには、Illustratorが向いています。この記事ではIllustratorのインストール方法から実際にデザインをするためのオススメ設定をご紹介します。

 

◆目次◆

  1. Illustratorとは?
  2. llustratorCCの【体験版】をインストールしてみよう
  3. 基本設定を確認しよう
  4. 始める前に環境を整えよう
  5. Web用の素材の作成に適したドキュメント設定をしよう


1. Illustratorとは?


Adobeが提供している、ソフトです。下記のようなイラストをPC上で描くことができます。

Illustratorでできること
入門!つくりながら楽しくマスター1日完結Illustrator特訓【ピクトグラム編】 授業資料より)

【特徴】

・点と線で構成されている

・ベクトル画像のため、荒くならず、サイズ変更(拡大・縮小)が容易にできる

【できること】

・CGイラストを描くのが得意

・「ペン」や「ブラシ」などを使用してロゴマーク、チラシやPOPなどの作成が可能

 

2. llustratorCCの【体験版】をインストールしてみよう


① Adobeのアカウントを作成する

 IllustratorCCの【体験版】をクリック

②「Adobe IDを取得」を選択

AdobeIDを収得

③必要な情報を入力し、利用条件およびプライバシーポリシーにチェックをいれて、「AdobeID を取得」を選択

Adobeクリエイティブクラウド登録画面

④登録したメールアドレスに確認メールが送られてくるので、確認する。

AdobeクリエイティブクラウドIllustrator

AdobeクリエイティブクラウドIllustrator

⑤Illustratorの「体験版ダウンロード」を選択

Adobeクリエイティブクラウド体験版無料ダウンロード

次にIllustratorを始める前に確認しておく3つのポイントをみていきましょう!

 

 

3. 基本設定を確認しよう


基本設定の中でも知っていると便利な、3つの設定をご紹介します。

・バウンディングボックス

・ スマートガイド

・ 線幅の拡大と縮小

 

バウンディングボックス


バウンディングボックスとは、素材の周りに表示される四角い枠のことです。

バウンディングボックス

▼設定方法

メニューバーから、「表示」→「バウンディングボックスを表示」をクリック。

バウンディングボックス

 

スマートガイドにチェックをいれる


スマートガイドとは、オブジェクトを操作するときなどに一時的に表示されるガイドで、他のオブジェクトとの位置関係を教えてくれたりするものです。

 

▼設定

メニューバーから、「表示」→「スマートガイド」にチェックをつける

スマートガイド

 

線幅の拡大と縮小の効果


▼ 設定

メニューバーから、「Illustrator」→「環境設定」→「一般」

Illustrator初期設定

「環境設定」ウィンドウが開かれるので、「線幅と効果も拡大・縮小」にチェックをつける

AdobeクリエイティブクラウドIllustrator環境設定

 

4. Web用素材の作成に適したドキュメント設定をしよう(単位・グリッド)


印刷用とWeb用では設定が変わってきます。ここではWeb用素材を作成する時のまきのゆみ先生のオススメ設定をご紹介いたします。

 

単位


メニューバーから、「Illustrator」→「環境設定」→「単位

Illustrator初期設定

「環境設定」ウィンドウが開かれるので、「単位」を全てピクセルに設定する。

Illustrator初期設定/単位設定

グリッド


メニューバーから、「Illustrator」→「環境設定」

「環境設定」ウィンドウが開かれるので、グリッド」をクリック

Illustrator初期設定/ガイド・グリッド設定

グリッド:100px分割線:10に設定する。

 

5. 作業が楽になるツールパネルのショートカットキー


登録しているショートカットキーは、Illustratorのアプリケーション内で確認することができます


メニューバーから、「編集」→「キーボードショートカット…」をクリック。

Illustrator キーボードショートカット 設定

「キーボードショートカット」ウィンドウが開かれるので、この画面上で自分のオリジナルショーカットキーを作成していきましょう。

よく使う作業を、自分の覚えやすいショートカットで登録すると便利です。

Illustrator キーボードショートカットキー 設定

 


 

Adobe Illustratorのインストール方法からWeb用デザインのための環境設定はこれで完璧です。

こちらの記事を参考に是非デザインの一歩を踏み出してみてくださいね。

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


スクー教務課:山口

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧