初心者でも無料で簡単に自分でホームページが作れる「ホームページ作成ツール」が増えてきています。 有料プランでも毎月数百円~数千円程度とお手頃な価格なので、“とりあえずHPが欲しい!”という方にはおすすめです。 その中でも […]

2019.9.24
未経験でも分かる! Illustrator(イラストレーター)の使い方3
未経験でも分かる! Illustrator(イラストレーター)の使い方1、
未経験でも分かる! Illustrator(イラストレーター)の使い方2の続きです。
今回はイラストレーターの使い方3ということで、図形を描いたり、画像を切り取ったり、影を付けたりなど、デザインを行う上で初歩的かつとても使用頻度の高いツールをご紹介していきます。
【目次】
1.図形ツール
2.パスのアウトライン
3.不透明度の設定
4.クリッピングマスク
5.オブジェクトへの効果の適用
6.まとめ
1.図形ツール
四角形、楕円形、多角形、星形などが描けます。
図形ツールで図形を描く練習
練習1 「長方形ツール」でクリック&ドラッグし、四角形を描いてみよう。
練習2 「楕円形ツール」で円を描いてみよう。
練習3 「多角形ツール」で6角形を、「スターツール」で星を描いてみよう。
6角形
①多角形ツールに切り替えて点をクリック。
②“半径に12”、“辺の数に6”と入力。
※ドラッグして描くこともできます。
※ドラッグ中にで頂点の数を変更できます。
星
①スターツールに切り替えて点をクリック。
②“第1半径に10”、“第2半径に5”、“点の数に5”と入力。
※Shiftを押すと上下を固定。
※Optionを押すと鋭角な星形を作成。
※ドラッグ中にで頂点の数を変更できます。
Shiftを押したまま描くと、高さと幅の長さが同じ図形を描くことができます。
Optionを押しながらドラッグすると、ドラッグ開始場所が図形の中心となります。楕円を描く途中で“⌘”を押すとクリックした場所を起点に描けます。
練習4 「角丸長方形ツール」で角丸長方形を描いてみよう。
ドラッグして描く場合
①図形ツールを長押しして、「角丸長方形ツール」を選択します。
②下記のように、点から点へクリック&ドラッグ
数値を指定してクリックして描く場合
①「角丸長方形ツール」を選択した状態で画面をクリックして下記のように数値を指定します。
練習5 オブジェクトの角を丸くしてみよう。
一度、すでに作成している図形を、後から角丸に設定したい場合に使用します。
①オブジェクトを選択します。
「効果」→「スタイライズ」→「角を丸くする」
2.パスのアウトライン
イラレで線と長方形を一つの複合パスにしたい時などに線に太さがある状態ではパスファインダーなどが使用できません。
その場合はパスのアウトラインを実行します。
練習 パスのアウトラインを作成してみよう。
①オブジェクトを選択します。
「オブジェクト」→「パス」→「パスのアウトライン」を実行し、パスを図形に変換します。
※パスのアウトラインを実行すると、パス(線)に設定された色の輪郭をトレースしたような図形が生成されます。
3.不透明度の設定
イラストレーターではさまざまなオブジェクトの透明度を調節することができます!
オブジェクトの塗りや線、個々のアピアランス、テキストやブラシ
レイヤーごとにも透明効果を適用することが可能です。
練習1 オブジェクトの不透明度を変更してみよう。
①建物のイラストの“窓部分”を「選択ツール」で選択します。
②「透明パネル」で不透明度を“30%”にしてみましょう。
練習2 不透明マスクを適用して、だんだんと消えていくような画像を作成しよう。
①不透明マスクに使用する図形を「楕円形ツール」を用いて“幅:40mm”、“高さ:40mm”で作成。
スウォッチからグラデーションを選択しましょう。
②マスク用に作成した円とイラストを同時に選択。
③「透明パネル」より、「マスク作成」をクリック。
不透明マスクは、写真や画像などによく使われます。
※白と黒のグラデーションでなければなりません。
※透明では適用されません。不透明度100%で実行しましょう。
4.クリッピングマスク
“クリッピングマスク”を使用すると、写真やイラストを図形の形で切り抜いたように見せることができます。
練習 写真をクリッピングマスクして、うまくレイアウトに収まるように加工してみよう。
①記事の空いているスペースに、画像を配置します。まずは記事の空いているスペースに画像を移動します。
②写真の大きさが大きいので、文字の上にはみ出してしまっています。その部分をクリッピングマスクで切り取ったように加工するため、「長方形ツール」で写真の上に長方形を描きます。
③描いた長方形を写真を両方選択し、メニューバーより「オブジェクト」→「クリッピングマスク」→「作成」を選択します。
または、ショートカットキーだと“⌘
クリッピングマスクをするときは、マスクする図形を写真やイラストの前面に配置しないとうまくいきません。
また、クリッピングマスクを実行した後は、写真と図形がグループ化され、階層も最前面となり、図形の色は消えてしまいます。
5.オブジェクトへの効果の適用
ドロップシャドウ
文字でも図形でも、影があるのと無いのとでは見た目が大きく変わります。
ドロップシャドウは、最も簡単で多く使われているツールです。文字の背景が写真でも、ある程度読みやすくなる影です。
練習 オブジェクトに影をつけてみよう。
①選択ツールでつばめのイラストを選択し、メニューバーより、「効果」→「スタイライズ」→「ドロップシャドウ」を選択。
②ドロップシャドウの設定画面が表示されたら、プレビューにチェックをして画面を確認しながら、下記のように設定してみよう。
③一度設定が済んだら、設定をいろいろと変更してみよう。
一度“OK”を押した後、再度設定を変更する場合は、「アピアランスパネル」を使用します。
スタイライズ
「スタイライズ」効果で、選択したオブジェクトに影や角を丸くするなどができます。
練習 図形を光らせたように加工しましょう。
①「選択ツール」で、LIHの文字を選択し、メニューバーより、「効果」→「スタイライズ」→「光彩(外側)」を選択。
②「選択ツール」で、LIHの文字を選択し、メニューバーより、「効果」→「スタイライズ」→「光彩(内側)」を選択。
パスの変形(ジグザグ)
ペンツールでジグザグ・波線を描くことはできますが、それではちょっと時間もかかるし大変です。「効果」を使用して簡単に均等なジグザグ・波線を作ることができます。
練習 パスをギザギザや波形にしましょう。
①パスを選択します。
「効果」→「パスの変形」→「ジグザグ」
パンク・膨張
選択したオブジェクトのアンカーポイントの部分を凹ましたり、膨らませたりすることができます。
練習 オブジェクトを収縮・膨張してみよう。
①オブジェクトを選択します。
「効果」→「パスの変形」→「パンク・膨張」
アンカーポイントの位置が数値を小さくすれば外側に移動し、大きくすれば内側に移動します。
6.まとめ
今回はイラストレーターの使い方ご紹介パート3ということで、図形を描いたり、画像を切り取ったり、影を付けたりなど、デザインを行う上で初歩的かつとても使用頻度の高いツールをご紹介しました。
印刷用・WEB用ともに使えるデザイン方法の基礎なので、しっかり覚えましょう♪
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
おすすめ記事はこちら
-
- スタートアップ
- ツール
- ホームページ制作
- 無料
無料!簡単!ホームページ作成ツール5選
2021.9.13
-
- スタートアップ
- ホームページ制作会社
- 安い
安いには理由がある?ホームページ制作会社を上手く選ぶためのポイント
2021.8.10
「ホームページ制作 格安」などで検索をすると日本全国のいろいろな制作会社が出て来ます。 5ページ50,000円〜、初期費用0円で月々3,000円〜など、お得そうなキャッチコピーが並んでいるのをよく目にするかと思います。 […]
-
- reCAPTCHA
- プラグイン
- ワードプレス
- 初心者
【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法
2021.8.2
WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール… 対策のために検索すると必ずといっていいほど目にする”reCAPTCHA” 名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません […]
-
- Zoom
- ツール
- 無料
アカウント登録不要!Zoomの使用方法
2020.10.5
【目次】1.Zoomとは2.アカウント作成なしのZoomミーティングの基本的な流れ3.【PCの場合】Zoomアプリのダウンロード方法4.【スマートフォンの場合】Zoomアプリのダウンロード方法 目次1.Zoom とは2. […]
-
- Zoom
- ツール
- 無料
簡単!Zoomアカウント登録&使用方法
2020.10.5
【目次】1.Zoomとは?2.Zoom使用に必要な環境3.PCで登録、使用する場合4.スマートフォンで登録、使用する場合 目次1.Zoom とは【Zoom使用に必要な環境】2.Zoomミーティングの基本的な流れ3.【PC […]
カテゴリー
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
お問い合わせ
・
資料ダウンロードはこちらから

お問い合わせ・資料ダウンロードはこちらから
頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。
LIHが運営する
お役立ちブログ配信中
Staff blog
LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。
-
- SEO対策
- WEB制作
- ブログ集客
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
- スタートアップ
- ホームページ制作
- 安い
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
-
- WEB制作
- 初心者
初心者必見!Webサイト制作に必要なスキルとは?
2022.3.25
近年の副業ブームも相まって、Webサイト制作に必要なスキルを独学で身に付けたい!という方を多く見かけるようになりました。 ドットインストールやProgateなど、独学でプログラミングを学習できるコンテンツは数多くあります […]
-
- WEB制作
- 初心者
【はじめてでもよくわかる】ホームページ制作の進め方
2022.2.28
「初めてホームページを作るんだけど、制作会社との打ち合わせって何を聞かれるの?」 「あらかじめスケジュールを立てておきたいんだけど、どのくらい期間が必要なの?」など、制作がどんな風に進んでいくのか心配な方も多いんじゃない […]