ウェブデザイナーへの道のり【第11話】クリッピングマスクを使って画像のくり抜きや合成をしよう!!~Photoshopでクリッピングマスクを使って画像をくり抜いてみよう~

・Photoshopで加工や合成するやり方について詳しく知りたい!!

・クリッピングマスクを使いいながら画像をくり抜くやり方をPhotoshopで知りたい!!

 

そんなあなたに!!この記事ではPhotoshopのクリッピングマスクを使う、画像の合成方法について1から詳しく紹介しています

 

 

※全話まとめ一覧はこちらからどうぞ↓↓(随時更新中♪♪)
目指せウェブデザイナー!!ド素人が1から初めてみた!?Photoshopマスターになるまでの道のり!?
・ウェブデザイナーとして、Photoshopを1から勉強してPhotoshopを使いこなせる方法を知りたい!! ・どこよりも分かりやすいPhotoshopの勉強法と使い方を知りたい!! ・隙間時間を利用しつつ、Photo...

 

※前回お話はこちらからどうぞ↓↓
ウェブデザイナーへの道のり【第10話】ぼかしの機能を使って画像の加工や合成をしよう!!~Photoshopで2枚の写真を背景をぼかしながら合成してみよう~
・Photoshopで加工や合成するやり方について詳しく知りたい!! ・2枚の写真をぼかす機能を使い、合成するやり方をPhotoshopで知りたい!! そんなあなたに!!この記事ではPhotoshopを使い、...

 

めいちゃん
めいちゃん
今回は、前回にひき続き、画像を合成していくのだけど、合成をするにあたって画像をくり抜く作業を行っていくよ♪

 

みぃちゃん
みぃちゃん

はーい!!頑張るぞ!!

めいちゃん
めいちゃん

うんうん!!その意気さ!!

 

 

スポンサーリンク

1.カスタムシェイプツールを使うにあたって

 

めいちゃん
めいちゃん

まずは、画面左側にある、「カスタムシェイプツール」を選択しよう!!

みぃちゃん
みぃちゃん

はーい!!

 

「シェイプ」を使うにあたり、従来の「シェイプ」を出す流れを知っておこう

 

めいちゃん
めいちゃん

お次はシェイプを使っていくのだけど、ひとまず、従来のシェイプを出すときの流れも説明しておくね

 

 

 

めいちゃん
めいちゃん

次に、画面上部のバーにある、「ウインドウ」をクリックしてね♪

みぃちゃん
みぃちゃん

押したよ~

 

 

めいちゃん
めいちゃん

そうしたら、シェイプの右横にあるマークをクリックして、「従来のシェイプとその他」を選択してね!!

みぃちゃん
みぃちゃん

押したよ!!

めいちゃん
めいちゃん

うんうん♪そうしたら、「シェイプ」を使っていこう!!

 

スポンサーリンク

2.「シェイプ」を選ぼう

 

 

 

めいちゃん
めいちゃん

画面上部にある「シェイプ」の右側にある矢印をクリックしてみよう!!

みぃちゃん
みぃちゃん

なんか出てきた!!

 

 

めいちゃん
めいちゃん

先程の、「従来のシェイプとその他」が下の方に出てくるから、さらに矢印をクリックしていくと、また沢山表示が出てくるよ♪

みぃちゃん
みぃちゃん

ホントだ~!!

 

 

めいちゃん
めいちゃん

表示の中の針葉樹を選択すると、色んな形の針葉樹が出てくるんだ!!

みぃちゃん
みぃちゃん

おぉ!!色々出てきた~!!

 

スポンサーリンク

3.カスタムシェイプツールを使って、画像をくり抜いてみよう!!

 

めいちゃん
めいちゃん

では早速、カスタムシェイプツールを使っていくのだけど、みぃちゃんのくり抜きたい、好きな形を選んでみてね♪

みぃちゃん
みぃちゃん

う~ん、そうだな~。あ!!「トランプのスーツ」にある、ハートかわいい!!これにする~♪

 

 

 

めいちゃん
めいちゃん

うんうん♪そうだね!!では、それを使っていこう!!

みぃちゃん
みぃちゃん

はーい!!

 

 

めいちゃん
めいちゃん

くり抜きたいか所でクリック&ドラックすると、プロパティの表示が出るから、アラビアンスの矢印を選択して、塗りをクリックしよう!!

みぃちゃん
みぃちゃん

はーい!!

 

めいちゃん
めいちゃん

その中にある「グラデーション」を選択しよう!!

 

 

めいちゃん
めいちゃん

画面右下のレイヤーの画面を開き、レイヤーとレイヤーの間にクリック&ドラックで挟むようにセットするよ

 

みぃちゃん
みぃちゃん

うんうん

 

 

めいちゃん
めいちゃん

「ハート」と書かれたところで、クリッピングマスクをするのだけど、PCによって変わってくるから、まとめて紹介するよ

①クリッピングマスクの作成

①Mac 

alt option + クリック 
②win   
Alt + クリック

 

 

 

めいちゃん
めいちゃん

この方法で、「ハート」と書かれたところにカーソルを持っていき、クリッピングマスクをしてみよう!!

 

 

めいちゃん
めいちゃん

上の画像が下の形で切り抜かれている状態になるよ!!

 

 

 

みぃちゃん
みぃちゃん

わぁ!!くり抜けた!!あ~!!けど、変なところを切り抜いちゃった!!

めいちゃん
めいちゃん

大丈夫だよ!!画面のハートの個所を動かしながらサイズを変更してみよう!!

 

みぃちゃん
みぃちゃん

くり抜きたい場所を自由に変えることができるんだね!!

 

②カスタムシェイプツールを使って、縦横を固定しながら形を整える

 

めいちゃん
めいちゃん

ちなみにサイズする上で、シェイプの縦横比を保ちながら形を整える方法もあるのさ♪

みぃちゃん
みぃちゃん

ほうほう

めいちゃん
めいちゃん

以下の通りさ!!

 

①Mac 

shift + ドラック 

②win   

shift + ドラック 

 

 

みぃちゃん
みぃちゃん

おぉ!!安定して簡単にサイズが変えられるね!!

 

 

③カスタムシェイプツールを使って、縦横の状態から向きを変える角度の調整

 

めいちゃん
めいちゃん

更に、15度刻みで向きを変えることも出来ちゃうのさ♪

みぃちゃん
みぃちゃん

確かに、もう少し傾けたいって時もあるよね!!

めいちゃん
めいちゃん

うんうん♪そうだね!!そんなときの方法はこちらだよ!!

①Mac 

shift + ドラック 

②win   

shift + ドラック 

 

 

 

 

みぃちゃん
みぃちゃん

画像に合わせて向きが変えられるのは本当に便利だね!!

 

 

 

スポンサーリンク

まとめ

 

めいちゃん
めいちゃん

ここまで出来れば、かなり多くの画像合成が楽しめるはずだよ♪

みぃちゃん
みぃちゃん

うんうん!!色々学べたから、今度はもっと自分なりに追及してみるね!!

めいちゃん
めいちゃん

そうだね!!是非、どんどんPhotoshopを使いこんで、自分なりのやり方を開拓してみてね!!

ろっぷくん
ろっぷくん

柿ピーの写真集もよろしく~

 

 

ソラくん
ソラくん

ろっぷくん…ちゃっかりしてるな…