1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【Illustrator入門】クリッピングマスクを使った画像の切り抜き方は?

Pocket

Illustrator(イラストレーター)で画像を切り抜く方法はいろいろありますが、今回の記事では、クリッピングマウスを使って画像をトリミングしていきたいと思います。

画像の配置方法

Illustrator起動後、メニューの「ファイル」>「新規」を開きます。今回はA4サイズ横方向のドキュメントを使用します。

【イラストレーター入門】画像を切り抜く方法(トリミング)

真っ白な横長A4サイズのアートボードが現れました。アートボードが現れたらメニューの「ファイル」>「配置」を選択します。

【イラストレーター入門】画像を切り抜く方法(トリミング)

トリミングしたい画像ファイルをクリックし、右下の「配置」ボタンを押します。すると、アートボード内に画像が配置されます。今回は、女性とパソコンをトリミングしていきます。

【イラストレーター入門】画像を切り抜く方法(トリミング)

トリミングしてみよう

トリミングをする際の注意点

1.ロックをかけよう

トリミング作業中に、親元の画像を誤って選択し、消してしまったり、移動させてしまったりすることがあります。そうならないように、まずは親元の画像にロックをかけておきましょう。今回は、レイヤー1にロックをかけます。

※今回は、レイヤーの数が少ないので名前は付けずに作業しますが、レイヤーの数が増えてくると、どのレイヤーで何の作業をしていたのか忘れてしまいます。そうならないために、新規レイヤーを追加したら名前を付けておきましょう。

2.ロックのかけ方

【イラストレーター入門】画像を切り抜く方法(トリミング)

レイヤーパレットの目のマークの右側をクリックすると、カギのマークが出てきます。カギがかかった状態だと、配置されている画像をクリックしても選択されなくなります。

新規レイヤーを作成しよう

レイヤーパレットの下側にある項目の右から2番目をクリックします。すると、レイヤー2という新規レイヤーができます。レイヤー2をクリックしてみましょう。

【イラストレーター入門】画像を切り抜く方法(トリミング)

ここからは、レイヤー2で作業を行っていきます。

画面を拡大しよう

アートボードが100%表示のままだと細かな部分のトリミング作業がしずらいので、ズームツールを使用し画像を拡大していきます。ズームツールを選択、トリミングしたい画像の周りをクリックします。すると、画像周りの画面が拡大されます。

    ズームツール機能

  • ツールバーの虫眼鏡マークをクリック
  • キーボードの「Z」を押す

【イラストレーター入門】画像を切り抜く方法(トリミング)

キーボードのAltを押しながらクリックすると、画面を縮小できます。Ctrl+1で100%表示になります。よく使用するショートカットなので、覚えておきましょう。

また、「ズームツール」の左側にある「手の平ツール」をクリックし、画面上でクリックしながらマウスを移動させると画面内を移動できます。

鉛筆ツールで女性とパソコンを囲ってみよう

左側ツールボックスの中から鉛筆ツールをクリックします。もしくはキーボードの「P」でも同じ操作が行えます。

【イラストレーター入門】画像を切り抜く方法(トリミング)

画面の拡大調整後、画像の女性とパソコンを鉛筆ツールにて囲い込みます。そのとき、一筆書きで囲んでください。

【イラストレーター入門】画像を切り抜く方法(トリミング)

ロックを解除しましょう

一筆書きで囲んだ後、レイヤーパレットのレイヤー1のカギマークをクリックし、先ほどかけたロックを解除します。解除できたら、鉛筆ツールで囲んだ線を選択した状態でShiftを押しながら画像の女性とパソコン以外の背景部分をクリックします。

【イラストレーター入門】画像を切り抜く方法(トリミング)

メニューの左から3番目「オブジェクト」>「クリッピングマスク」にマウスカーソルを合わせます。すると、その右側に作成という項目が出てくるのでクリックしましょう。

【イラストレーター入門】画像を切り抜く方法(トリミング)

画像から女性とパソコンをトリミングすることができました!

まとめ

クリッピングマスクを使用した画像の切り方を学んできました。クリッピングマスクが使えると、さまざまな画像を合成したようにみせることができます。ぜひ、この機会に身に着けましょう。

おすすめ記事
【Illustrator入門】ペンツールを使いこなそう!
【Illustrator入門】文字ツールの基本操作とアウトライン化

投稿者:プロスタ編集部

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

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾
ページ上部へ戻る