TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopを使ってベジェ曲線を描く方法【初心者向け】
Photoshop

Photoshopを使ってベジェ曲線を描く方法【初心者向け】

Photoshopで【ベジェ曲線を描く方法】を初心者向けに解説した記事です。Illustratorで描くことが多いですが、Photoshopでも「ペンツール」を使って描くことができます。パスの塗りつぶしなども合わせて紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

ベジェ曲線とはコンピューターグラフィックにおいて主に図形や文字を描画する際に使用されるもので、始点・終点などの座標を元に形成されています。一般的には、Adobe Illustratorを使って描くことが多いです。

Photoshopではこのベジェ曲線を「ペンツール」機能を使用することによって作成することができます。

 

なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)

 

20160620

 

田島メンター！！ベジェ曲線って何ですか～？

 

20163020-2

 

点と点の間を自動で計算して表示されるベクター形式の線だよ。Photoshopでは「ペンツール」で描画することができるんだ。

 

20160620

 

ペンツールってなかなかよく分からなくて、あまり触ったことがないです……

 

20163020-2

 

いくつかのポイントを押さえれば、思った通りの線が引けるようになると思うよ。やってみよう。

 

Photoshopでベジェ曲線を描く

左のメニューからペンツールアイコンを右クリックし、一番上の「ペンツール」を選択します。

ps_bezi_1

 

画像の中の適当なところでクリックしてみます。

ps_bezi_2

 

次に、少し離れたところで同じようにクリックします。

点と点が直線で繋がれました。この各点を「アンカーポイント」、間の線を「パス」と言います。

ps_bezi_3

 

今度はもう1つ別の場所でクリックしたまま適当なところにドラッグしてみます。

画像内にこのような直線が出てきました。曲線を操作する時に使うこの部分のことを「ハンドル」と言います。

ps_bezi_4

 

20163020-2

 

この「ハンドル」がベジェ曲線を作成するときに重要になるので操作をよく覚えておこう。

 

20160620

 

操作しようと思ったら、新しいアンカーポイントが作成されちゃいました……

 

20163020-2

 

ハンドルを操作するときはCtrl(Macの場合はcommand)を押しながら触ることを心がけよう。カーソルの形が変わるのでそれを目安にするといいよ。

 

ハンドル部分を回すことで線の形を調整することができます。

ハンドルはCtrl(command)を押しながら端の点をドラッグすることでいつでも操作が可能です。

ps_bezi_5

 

下の図のように、始点と終点が別の場所にある状態のパスを「オープンパス」と言います。

ps_bezi_6

 

それに対して始点と終点が同じ位置にあるパスのことを「クローズドパス」と言います。

ps_bezi_7

 

パスの上で右クリックし「パスの境界線を描く」を選択するとパスの形に沿って描画することができます。

ps_bezi_8

 

パスを描画した状態です。

ps_bezi_9

 

同様にパスの上で右クリック→「パスの塗りつぶし」を選ぶとパス内を塗りつぶすこともできます。

ps_bezi_10

 

パスを塗りつぶした状態です。オープンパスの場合は自動で始点と終点が結ばれ範囲が作成されます。

ps_bezi_11

 

同じく右クリックから「選択範囲を作成」を選ぶとパスの部分が選択範囲に変わります。

ps_bezi_12

 

選択範囲を作成した状態です。この時もオープンパスの場合は自動で範囲が形成されました。

ps_bezi_13

 

アンカーポイントの上で右クリック→「アンカーポイントを削除」でポイントを削除できます。

ps_bezi_14

 

ペンツールアイコンを右クリックして「アンカーポイントの切り替えツール」を選択します。

ps_bezi_15

 

ハンドルの作成されていないアンカーポイントをドラッグするとハンドルを後から追加することができます。

ps_bezi_16

 

今度は左のメニューから「パス選択ツール」を選びましょう。

ps_bezi_17

 

アンカーポイントに合わせ、ドラッグしてみます。

ps_bezi_18

 

アンカーポイントを自由に移動させることができます。

ps_bezi_19

 

作成したパスを全て削除したい場合は右クリックから「パスを削除」を選択します。

また、alt＋ctrl＋zを押すことで１つ手前の段階にいつでも戻ることが可能です。

ps_bezi_20

今回の記事は以上です。

 

20163020-2

 

アンカーポイントとハンドル、このふたつの操作方法をよく知っておくのが基本だね。

 

20160620

 

後から図形の形を変えたいときはアンカーポイントを追加したり移動したり、ハンドルで操作したりしたらいいんですね。

 

20163020-2

 

ペンツールの操作はブラシツールと違って直感的にはあまりうまく動作しないけれど、ひとつひとつの操作やショートカットキーを丁寧に覚えていけば自由に使えるようになるよ。

 

20160620

 

はい！練習してみます！

 

Photoshopをさらに使いこなしたい場合は、Photoshopで鉛筆風のイラスを描く方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

実は簡単！Photoshopで写真をイラスト風にする方法【初心者向け】

写真を使って少し変わった加工をしたいと思ったことはないでしょうか？ Photoshopではフィルターギャラリーなどを使って写真を簡単にイラスト風に加工する...
Photoshop

Photoshopでカスタムシェイプを作成する方法【はじめてでも出来る！】

Photoshopでは、カスタムシェイプの機能を使うことで、独自に作成した図形をいつでも加工して使えるようになります。 本記事では、初心者向けにその「カス...
Photoshop

Photoshopで画像を塗りつぶす方法【初心者向け】

Photoshopの基本的な操作を初心者向けに解説する記事です。 Photoshopの「塗りつぶしツール」を使用すると、同じ色合いの範囲や選択した部分を指...
Photoshop

Photoshopで鉛筆風のイラストを描く方法【初心者向け】

Photoshopで鉛筆風のイラストを描く方法を初心者向けに解説した記事です。 Photoshopでは、「選択範囲」機能と「ペンツール」を使用することで鉛...
Photoshop

Photoshopペンツール使い方の基本【初心者向け】

Photoshop初心者向けに「ペンツールの使い方」を解説する記事です。 ペンツールを使用してパスを形成すると、解像度に依存しないベクトル形式での描画が可...
Photoshop

Photoshopでグラデーションを簡単につける方法【初心者向け】

Photoshopでデザインを作るテクニックの1つに「グラデーション」があります。これを覚えることでデザインのレベルも上がるでしょう。   ...
Photoshop

あわせてよく読まれている記事

Photoshopペンツール使い方の基本【初心者向け】

Photoshop初心者向けに「ペンツールの使い方」を解説する記事です。 ペンツールを使用してパスを形成すると、解像度に依存しないベクトル形式での描画が可能になります。パスは何も描かれていない状態から作成する以外に、画像内のオブジェクトに沿って作ることも可能です。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)   田島メンター！！「ペンツール」って線を引く機能ですよね。「ブラシツール」とは何か違うんですか～？   「ペンツール」は「ベクトル形式(ベクター形式)」の線を作成するんだ。「ブラシツール」だと「ラスタ形式」になるね。     ベクトル形式だとどんな違いがあるんでしょう？   大きな特徴として「描いたあとで変形・修正ができる」「拡大しても画質が劣化しない」などがあるよ。操作方法が少し独特なので、ひとつずつ実践してみよう。   ペンツールでパスを作成する 左のペンツールのアイコンを右クリックし、一番上の「ペンツール」を選択します。 実際に使ってみましょう。   直線を描画する カンバス内でクリックするとアンカーポイントが追加されていきます。 ポイントとポイントを繋ぐことで直線が作成されます。   曲線を描画する アンカーポイントとハンドルを使用することでベジェ曲線を引くことが可能です。 始点と終点が同じ位置にあるものをクローズドパスと言い、下のように始点と終点が別の位置にあるものをオープンパスと言います。     作成したパスから描画・塗りつぶしなどをおこなう 線が引けたら塗りつぶしも行ってみましょう。   線での描画・塗りつぶし・選択範囲作成 パスを作成した状態で右クリックするとメニューが表示されます。 ここではパスに沿って指定の色で描画したり、パスの範囲を塗りつぶしたり、選択範囲を作成したりすることができます。   カスタムシェイプを定義する また、ここで「カスタムシェイプを定義」を選択すると描画したパスをカスタムシェイプとして登録することができます。 一度登録したシェイプはいつでも「カスタムシェイプツール」メニューから使用可能です。     ベクトル形式の画像データを作成したり、それを素材にしたりもできるんですね。他にはどんな使い方があるんですか？     ペンツールは画像の切り抜きや加工にも利用することができるんだ。次の例を見てみようか。   [PR] Webデザインで挫折しない学習方法を動画で公開中フリーフォームペンツールとマグネットで写真からパスを作成 最後に、フリーフォームペンツールを使用した便利なパスの作成方法です。 ペンツールのアイコンを右クリックし「フリーフォームペンツール」を選択します。   次に、上のオプションの「マグネット」にチェックを入れます。   写真内で選択したい部分の輪郭の一部をクリックし、そのままポインタを動かしてみましょう。途中でアンカーポイントを作成するためにクリックなどをする必要はありません。 このように画像に対応して自動でパスが作成されます。   写真内のあるオブジェクトを切り抜いたり、その形に添ってベクトルデータの描画を作成したい時に使えます。   今回の記事は以上です。 ペンツールを使った線の描き方をさらに学びたい場合は、Photoshopを使ってベジェ曲線を描く方法も合わせてご覧ください。   フリーフォームペンツールは「ブラシツール」のような感覚で使用できるので、細かい調整を行いたいところで使ってみるといいかもしれないね。     こんなきれいに切り取れるんですね。     画像内のコントラストがはっきりしていなくて、自動選択ツールなどで対象物を切り取れないときはペンツールを使うことも考えてみよう。     はい！ありがとうございます！   [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopでトーンカーブを使って色調補正する方法【初心者向け】

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。 トーンカーブを使用すると、画像の色や明るさを細かく調整することができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)     今回は色調補正の機能のひとつ「トーンカーブ」を使ってみよう。     田島メンター！！トーンカーブは何をするんですか～？     明るさの補正やコントラスト、色合いなどカラーに関する調整をまとめて行うことができるんだ。少し複雑だけれど、慣れると色々な表現ができるので是非挑戦してみよう。     はい！やってみまーす！   事前準備 今回はサンプルとしてこの画像を使用します。     トーンカーブを使う メニューの「イメージ」から「色調補正」→「トーンカーブ」を選択します。   「トーンカーブ」のダイアログが開きます。 グラフの中に対角線上の直線があり、この線を変形させることによって調整していきます。また「横軸」にあたる部分は「補正前の値」、「縦軸」は「補正後の値」となります。 下の画面に2つの点を付けてみました。横軸上の点は、それが今画面全体の中でどれくらい明るい部分かを表しています。     [PR] Webデザインで挫折しない学習方法を動画で公開中トーンカーブによる編集例 実際に線を動かして画像を補正してみましょう。 トーンカーブで補正をする際、いくつかのパターンの形を覚えておくとすぐに特定の状態へと調整することができます。 例えば曲線を上に持っていき、このような形にすると画面全体が明るくなります。   逆に曲線を下に向けると画像全体が暗くなります。 トーンカーブダイアログの右下「プレビュー」の項目にチェックが入っていると、画面に状態が反映されるため調整しやすくなります。   曲線を動かす際に使用する制御点は、線上をクリックすることにより追加できます。 追加した制御点はCtrlを押しながらクリックするか(Windowsの場合)、グラフの外へドラッグすることで削除することが可能です。   制御点を利用し、このような形のS字にすると暗い部分はより暗くなり、明るい部分はより明るくなります。そのため、メリハリのあるはっきりした画像になります。   トーンカーブの線を左右反対にすると、画像の色が反転されます。     基本的な使い方はこんな感じかな。     トーンカーブを触っただけなのに、ずいぶん雰囲気が変わりましたね。     曲線の操作方法には他にもいくつか便利なものがあるので、そっちも見てみよう。   「自動補正」ボタンを押すと自動的に制御点が追加されたり、曲線が変更されたりします。   ペンの形をした「描画してトーンカーブを変更」のアイコンをクリックすると、グラフ上に直接線を描画してトーンカーブの値を変えることが可能です。   線を描画した後に再び左の「ポイントを編集してトーンカーブを変更」アイコンをクリックすると、描画した形を反映したまま制御点によって編集し直すことができます。 今回の記事は以上です。     あとから微調整するためにも、この辺りの編集方法はしっかり押さえておくといいと思うよ。     制御点はいくつでも追加できるんですね。でも色々触ってたら何か色合いが変な画像になっちゃいました……     慣れないうちは今回やったメリハリをつけるS字など、いくつか決まった形とその効果を覚えておくのがいいかもしれないね。     分かりました。ありがとうございます！   さらにPhotoshopを使いこなしたい場合は、Photoshopで写真の背景をぼかす方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 別ページに飛んだり、ページ内にジャンプするなどサイト作成にいざという時に役立つでしょう。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   目次 他ページにジャンプする方法 同一ページの特定の場所にジャンプする方法 実際に書いてみよう   他のページにジャンプする方法 他のページに飛ぶにはLinkを貼る必要があります。 Linkの貼り方は以下の通りです。 <a href="#">ここをクリックすると飛びます。</a> 上記のような記述で他ページへのジャンプが可能です。 「#」の部分に飛ぶ先のページを記述します。そのようにすることでジャンプを実現できます。     aタグ(アンカータグ)によって、別のページに移動できるんですね～。     そうだよ。自分のサイトの違うページや外部のサイトへ移動できるんだよ。また、そのページの特定の位置にも移動できるんだ。     同じページの中でも移動できるんですか？     出来るよ。では、実際に見てみよう！   [PR] Webデザインで挫折しない学習方法を動画で公開中同一ページの特定の箇所にジャンプする方法 同一ページにジャンプする先を「アンカー」と言います。 アンカーの貼り方ですが、以下のようにします。 <a href="#link">ここをクリックすると飛びます</a> <a name="link">ジャンプ先です。</a> 上記の書き方でページ内ジャンプが可能です。 アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。     hrefは飛び先のURLですよね？#(シャープ)がついていてlinkって名前が書いてあるだけですね。     ほとんど全てのタグにname属性をつけることが出来るんだ。そのnameにつけた値を指しているんだよ。     同じページ内で移動しなきゃいけないなんてどんな時ですか？     内容が長いと、ページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。   実際に書いてみよう 実際に書いてみてWebブラウザーでみてください。 今回は異なるページへのリンクがあるので、HTMLは2つ作成します。 HTML -sample.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>別pageジャンプ</h1> <p> <a href="sample2.html">sample2へ</a> </p> <h1>page内ジャンプ</h1> <p>
HTML

Photoshopで鉛筆風のイラストを描く方法【初心者向け】

Photoshopで鉛筆風のイラストを描く方法を初心者向けに解説した記事です。 Photoshopでは、「選択範囲」機能と「ペンツール」を使用することで鉛筆風の効果をつけることができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。     田島メンター！！Photoshopを使って鉛筆で描いたような雰囲気のイラストを入れたいんですが、どうしたらいいんですか～？     Photoshopの「ブラシツール」にはデフォルトで鉛筆っぽい表現をするブラシがあるので、それを使うのがいいかもしれないね。     できれば簡単に、それっぽくしたいんですが……     そんなときは写真や画像から選択範囲を作成するという手もあるよ。実際にやってみようか。   Photoshopで鉛筆風のイラストを描く 今回は例としてこの画像を使用します。 背景に白で塗りつぶした「レイヤー1」があり、その上に鉛筆風に加工したいオブジェクトがある「レイヤー2」があります。レイヤー2では、加工する対象の部分以外は透過の状態（何も描かれていない状態）になっています。   まず、鉛筆風に加工するオブジェクトのあるレイヤーを選択しましょう。   左のメニューの選択範囲ツールアイコンを右クリックし、「自動選択ツール」を選びます。   上のオプションで「隣接」のチェックを外してから、背景の適当なところでクリックしてください。   お菓子のシルエット以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   これで加工したい部分が選択されました。 対象によっては「自動選択ツール」などを使用してもOKです。 ※文字レイヤーの場合はレイヤーを右クリックして「作業用パスを作成」→パスのタブに移動し「作業用パス」で右クリックし「選択範囲を作成」から範囲を選択することができます   鉛筆で加工するためのレイヤーを1つ新規に追加します。ここでは「レイヤー3」としています。 次に、シルエットのあるレイヤー2を非表示にしてください。   図のように選択範囲だけが表示された状態になりました。     これで下準備は完了だよ。     鉛筆ブラシでの描画を適用させる範囲を、先に作ってしまうんですね！     用意ができたら、ブラシツールから「鉛筆」を使って描きこんでいこう。   先ほど作成した新規レイヤーを選択した状態で、左のメニューから「ブラシツール」を選択してください。   ブラシの種類の中から「鉛筆（木炭）」を選択し、不透明度やブラシの直径などを調整します。   選択範囲の中を塗っていきます。途中で色などを変えても大丈夫です。 あまり塗りつぶしすぎないほうが自然な仕上がりになります。(塗りきれていない部分には下レイヤーの状態が反映されます)   塗り終わったら「選択範囲」から「選択を解除」をクリックすれば完成です。   やり直したい部分がある場合は「選択範囲」→「再選択」を選ぶと、続きを塗ることができます。 今回の記事は以上です。     先ほど作った選択範囲の中だけに「ブラシツール」による描画が適用されるんだ。     範囲の中をブラシで塗っただけなのに、不思議と手描きの雰囲気が出ますね。面白いです。     鉛筆ツールを使う時はあまりしっかり全部を塗りつぶさず、適度に間を開けるのがそれっぽくなるコツだね。     鉛筆以外にも、色々な画材風ツールでやってみると面白そうですね。ありがとうございます！   さらにPhotoshopを使いこなしたい場合は、Photoshopで木目を描く方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

HTMLでアンカータグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLのアンカータグについて解説します。 そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。   本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   アンカータグと属性 Web上では、クリックすれば簡単に、自分の得たい情報にアクセスすることができます。今回はリンクの張り方について学んでみましょう。 リンクを張るには、アンカー<a>タグを使います。   ・アンカータグ anchor <a>〜</a> Webページにリンクを張り、そのページとリンク先のページを繋ぎます。 ・href属性  Hypertext Reference リンクの飛び先がどこであるのかを伝えます。 ・id属性 要素にID名をつけて、特定部分を識別します。   <a>タグのanchorとは「錨」また「しっかり固定する」という意味です。錨をおろして船がその場に留まることができるように、<a>タグはHTML上においてリンクの出発点と到達点を結ぶ役割を持ちます。 属性は、要素に細かい情報を付け加えます。ここでは<a>タグにhref属性を組み合わせることでリンクを張ることができます。また、id属性を組み合わせることで、文書内の別の場所に移動することも可能です。     aタグで色んなサイトにリンクを張ることが出来るんですね♪     そうだね。自分のサイト内の別のページへもリンクを張れるよ。     id属性って特定部分を指定するって何ですか？     ページが長い時に、クリックで特定の箇所に素早く移動させることが出来るんだよ。今から説明するね。   アンカータグの使い方 基礎がわかったら、実際に使ってみましょう。 タグに属性をつけ加えるときには半角スペースを使います。 <a (半角スペース)href=”好きなサイトのURL”>サイトの名前</a>   実際のURLで書いてみます。 <a href=”http://techacademy.jp/”>テックアカデミー</a> ブラウザで表示させるとこのようになりました。   ここで、ページのリンクをクリックしてみましょう。 href属性で指定したURLにアクセスできましたね。   また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。 今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。 先ほどのhref属性を「#index」に変えます。このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。   ブラウザで表示させるとこのようなります。 「テックアカデミー」をクリックすると、id属性で指定したリンク先（index）へ飛びました。   このように、href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書のことをハイパーテキストといいます。 HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書（ハイパーテキスト）をつくる言語です。Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点が、HTMLの大きな特徴といえます。 この、次から次へと移動しながら得たい情報を自由に得られるハイパーリンクの機能により、インターネットはまたたく間に世界中に広がっていきました。あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。 <a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。ぜひ覚えておきましょう。   今回はHTMLでアンカータグを使う方法をご紹介しました。 さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。     techacademy.jpにリンクを張ることが出来ました！でも、今見ていたタブ？ページが上書きされちゃった。     新しいタブ、新しいウィンドウで表示する場合はtarget属性に_blankを指定してあげるんだ。     今度は、新しいタブに表示されました♪     自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。     [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。
HTML

意外と簡単？Photoshopで画像を切り抜く方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 Photoshopでは写真を切り抜いて加工することができるので、これが使えるようになると便利です。この記事を見ながらぜひ試してみてください。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)     田島メンター！！画像同士を加工するので切り抜きをしたいのですが、なかなかうまくいかなくて……     切り抜きの方法は、対象の形や周りとの色の関係などによって色々と使う機能も違ってくるよ。切り抜きたい画像の内容を一度確認してみよう。     具体的にはどういうところを見ればいいんですか～？     そうだね、まずは一番簡単な自動選択ツールが使えるケースについて考えてみよう。   目次 自動選択ツールを使った切り抜き ペンツールを使った切り抜き 「境界線を調整」機能を使った切り抜き   自動選択ツールを使った切り抜き ある程度コントラストがはっきりしているものは自動選択ツールを使用するとすぐに切り抜きを行うことができます。   画像が背景レイヤーの場合はレイヤーを右クリックし、「背景からレイヤーへ」を選択します。   次に左メニューから以下のアイコンを右クリックし、「自動選択ツール」を選択します。   画面内の、切り抜きたい部分以外の箇所でクリックします。(切り抜く対象の方が単色で選びやすい場合はそちらをクリックし、上メニューの「選択範囲」から「選択範囲を反転」を選びます。)   このとき「許容値」の値が大きいほど自動選択される範囲が広くなり、小さいほど狭くなります。   選択範囲が作成されたら上メニューの「編集」から「消去」を選択します。   切り抜く対象以外の部分が透過の状態になりました。 [PR] Webデザインで挫折しない学習方法を動画で公開中ペンツールを使った切り抜き 周囲とのコントラストがはっきりしていない場合や自由な形の切り抜きを行うときは、ペンツールを使用した方法が有効です。   先ほどと同様に画像が背景レイヤーの場合はレイヤーを右クリックし、「背景からレイヤーへ」を選択します。   以下のアイコンを右クリックし、「ペンツール」を選択します。   以下のメニューから「パス」を選択します。   切り抜きの対象に沿ってクリックし、アンカーポイントを追加していきます。このとき、対象の少し内側を選択していくときれいに切り抜くことができます。   対象をパスで囲みました。   次に、右下のレイヤーが表示されているメニューから「パス」のタブを選択します。（「パス」のタブが表示されていない場合は、上メニューの「ウィンドウ」から「パス」を選択します）   下の「パスを選択範囲として読み込む」アイコンをクリックします。   対象に沿って選択範囲が作成されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   上メニューの「編集」から「消去」を選択します。   切り抜く対象以外の部分が透過の状態になりました。     自動選択ツールがうまくいかない場合は、パスを使うんですね。     対象のちょっとだけ内側をなぞるようにすると、合成後の画像で余白が目立たなくなるよ。     人物とか、複雑な輪郭のものだとこのやり方は大変そうですね……     そういうときは「境界線を調整」を使おう。この機能ではかなり細かい部分まできれいに切り取れるようになるんだ。   「境界線を調整」機能を使った切り抜き PhotoShop CS5から追加された「境界線を調整」という機能を使うことで、比較的簡単にPhotoshopで写真の人物だけを切り抜くことが可能です。   ツールパネルの選択ツールアイコンを右クリックし、「クイック選択ツール」を選びます。   選択したい部分を内側からドラッグすると自動で選択範囲が作成されます。 はみ出した部分はAltを押しながらドラッグすることで解除できます。   下の画像のように選択したいものが離れて複数ある場合は、Shiftを押しながらドラッグすることで同時選択することが可能です。   また、選択範囲の追加と削除は、上のメニューからツールアイコンをクリックすることで切り替えることもできます。   サンプルの画像で切り取る部分を選択した状態です。 ここから髪の毛の部分も切り抜きますが、詳しくは、Photoshopで髪の毛を綺麗に切り抜く方法をご覧ください。   下のメニューより「境界線を調整」をクリックします。   「表示モード」で「白黒」にします。 ここで見ると、髪の毛やまつ毛などの細かい部分が選択されていないのがわかります。   次に、同じように「表示モード」から「レイヤー上」をダブルクリックします。   「スマート半径」を選択し、大きさを調整します。   髪の毛に沿ってドラッグします。（髪の毛以外の部分がドラッグしたあと、見えなくなりますが問題ありません）   まつ毛の部分も同様にドラッグします。   もう一度「表示モード」の「白黒」で見てみると、先ほどと違って細かい部分が追加されていることがわかります。   「出力先」から「新規ドキュメント」を選びOKを押します。   人物の部分だけ切り抜きされ、背景がと透明の画像が新規に作成されます。まわりの白と灰色の模様は透過（透明）の状態（なにも描かれていない状態）です。   レイヤーを新規追加します。 ここでは「背景レイヤー」という名前にしています。   レイヤーの順番を入れ替えます。（背景レイヤーが下になるようにします）   「背景レイヤー」をツールパネルの「塗りつぶしツール」で塗りつぶしてみると、髪の毛などの細かい部分も切り取られているのが分かります。   あとは背景レイヤーを変更することで自由に編集が可能です。   いかがでしたか？ ぜひバナー作成などにチャレンジしてみてください。     「境界線を調整」を使ったやり方は以上だよ。     髪の毛までキレイに切り取れちゃいました！     自動選択だけでできるものならこの機能は必要ないときもあるかもしれないし、逆に人物などをパスや自動選択でやろうとすると大変になる。画像の状態によってツールを使い分けよう。     対象をよく見て方法を選ぶのが大事ですね。ありがとうございました！   Photoshopで文字を加工する方法の記事も公開しているので、初心者の方はあわせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

WEEKLY RANKING

TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopを使ってベジェ曲線を描く方法【初心者向け】