TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopで画像を角丸にする方法【初心者向け】
Photoshop

Photoshopで画像を角丸にする方法【初心者向け】

Photoshopで画像を【角丸】にする方法を初心者向けに解説した記事です。「長方形選択ツール」を使った方法で角を丸くしていきます。画像を15枚使って順番に紹介しているので、実践的に学ぶことができます。

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

Photoshopは、選択範囲の機能を使って、写真の四隅を角丸に加工することが可能です。

今回は初心者向けにその方法を解説します。

 

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

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

 

目次

今回は下記の2つの方法でご紹介します。

 

大石ゆかり

田島メンター！！画像の四隅を丸い角にしたいのですが、何か方法はありますか～？

田島悠介

角丸は、選択範囲を変形させることで簡単に作成できるよ。

大石ゆかり

選択範囲ってあとから変形したりできるんですか？

田島悠介

拡大縮小の他にも、色々な編集機能があるんだ。実際にやってみよう。

 

選択範囲を使用した方法

今回はサンプルとしてこの画像を使用します。

ps_kado_1

 

まず、角丸にする対象の画像が背景レイヤーの場合は通常のレイヤーに変換する必要があります。レイヤーパレット内で編集するレイヤーを右クリックし「背景からレイヤーへ」を選択します。

ps_kado_2

 

レイヤー名を入力し、「OK」を押します。ここでは「レイヤー0」としています。
(カラー・描画モード・不透明度などは変更する必要はありません)

ps_kado_3

 

先ほど設定した名前の通常レイヤーに変換されます。
この作業をするのは「背景レイヤー」のままだと画像の一部を切り抜いたときに透過の処理ができないためです。角丸に切り取った後のバックを白色にする場合は背景レイヤーのままでOKです。

ps_kado_4

 

左のツールアイコンの選択範囲ツールを右クリックし、「長方形選択ツール」を選びます。

ps_kado_5

 

全てを選択、あるいは角丸の形で切り抜きたい部分を選択します。

今回は以下の部分を選択しています。上下左右の縁の幅を揃えたい場合はグリッドを表示させると便利です。

ps_kado_6

 

上のメニューの「選択範囲」から「選択範囲を変更」→「滑らかに」を選びます。

ps_kado_7

 

「半径」の数値を入力します。ここの数字が大きいほど角が丸くなり、小さいほど普通の直角に近くなります。

ps_kado_8

 

入力後「OK」を押すと、下のように選択範囲の形が変更されます。四隅が角丸の形になっていることが確認できます。

ps_kado_9

 

田島悠介

選択範囲を見るとどんな形になってるかな？

大石ゆかり

ちゃんと角が丸くなってますね！

田島悠介

ここまできたらあとはこの形に沿って切り抜くだけだね。次の手順に移ってみよう。

 

「選択範囲」から「選択範囲を反転」をクリックします。これで枠内以外の縁の部分が選択されることになります。

ps_kado_10

 

そのまま「編集」→「消去」を選択します。

ps_kado_11

 

このように四隅が角丸になった状態で、最初に選択した部分が切り抜かれます。

ps_kado_12

 

あとは「選択範囲」から「選択を解除」をクリックして完成です。

ps_kado_13

 

角丸で切り抜かれた部分以外の場所は透過の状態(何も描かれていない状態)になります。

ps_kado_14

 

透過の部分は下にレイヤーを新規作成し、塗りつぶしや画像を入れるとそれが反映されます。

ps_kado_15

 

田島悠介

「半径」の数値によって形が変わるのを覚えておこう。大きければ大きいほど丸い形になるんだ。

大石ゆかり

形の関係上、どうしても透過の部分ができてしまいますね。

田島悠介

角丸の外を残したい場合は、選択範囲から切り抜きではなく塗りつぶしを使うこともできるからね。

大石ゆかり

なるほど、ありがとうございます！

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

クリッピングマスクを使用した方法

続いて、クリッピングマスクを使って写真を角丸にする方法です。

今回はサンプルとしてこの画像を使用します。

選択範囲から写真を角丸にした時と同じく角丸にする対象の画像が背景レイヤーの場合は通常のレイヤーに変換する必要がありますので、レイヤーパレット内で編集するレイヤーを右クリックし「背景からレイヤーへ」を選択します。

 

レイヤー名を入力し、「OK」を押します。ここでは「レイヤー0」としています。
(カラー・描画モード・不透明度などは変更する必要はありません)

 

すると、画像レイヤーの名前が「レイヤー0」に変換されて通常レイヤーになります。

 

次に、画面左のツールパレットから「角丸長方形ツール」を選択します。

 

「角丸長方形ツール」を選択した状態で、写真の上で切り抜きたいサイズにドラッグし角丸長方形を作ります。ドラッグすると属性ツールが開きますので、角丸のサイズを4辺ともに「40px」に調整します。

 

次に、クリッピングマスクを作成するために角丸長方形のレイヤーを写真レイヤーの下に移動します。

 

そして写真レイヤーの上で右クリックで開くメニューから「クリッピングマスクを作成」を選びます。

 

すると、写真が先ほど作成した角丸長方形の形に切り抜かれます。

 

背景は透過になっているので写真の後ろに塗りつぶしレイヤーを配置したりして、自由に加工することができます。

 

今回の記事は以上です。

 

田島悠介

選択範囲を使用した方法とクリッピングマスクを使用した方法、どちらの方法も使えるようになっておくといいよ。

大石ゆかり

どちらの方法で作業してもいいんですか〜？

田島悠介

色々なやり方があるから、自分に合うやり方を見つけていくのがいいと思うよ。

大石ゆかり

なるほど、ありがとうございます！

 

もっとPhotoshopを使いこなしたい場合は、Photoshopで画像を左右反転にする方法も合わせてご覧ください。

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

記事を検索

関連するキーワード

関連する記事

意外と便利！Photoshopで顔写真にモザイクをかける方法

Webサイトに載せる写真などで、写っている人を認識させないなためにモザイクをかけることはないでしょうか？ Photoshopでは「フィルター」機能を使うこ...
Photoshop

Photoshopで画像に影をつける2つの方法【初心者向け】

Photoshopでは、オブジェや人物、文字などの画像に影をつけることができます。 今回は初心者向けに2つの作り方をご紹介します。   ...
Photoshop

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

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 Photoshopでは写真を切り抜いて加工することができるので、これが使えるように...
Photoshop

Photoshopで画像のノイズを除去する方法【初心者向け】

デジカメなどで写真を撮影した際、ノイズと呼ばれる小さな粒が画像に生じることがあります。Photoshopでは、このノイズをプレビューを見ながら調整しつつ軽減する...
Photoshop

月額980円で使える！Photoshop CCのインストール方法

Photoshopの最新版として、Photoshop CC（Creative Cloud）があります。以前は非常に高価なツールとして有名でしたが、CCになってか...
Photoshop

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

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

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

Photoshopで画像を左右反転にする方法【初心者向け】

Photoshopの変形機能を使って画像を左右反転することができます。画像全体を左右反転する他に、選択した部分だけを左右反転、特定のレイヤーだけを左右反転することも可能ですので合わせて紹介します。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   大石ゆかり 田島メンター！！画像の左右を逆にしたいのですが、何かいい方法はないですか～？ 田島悠介 それでは今回は左右反転の操作を練習してみよう。画像全体を反転・画像内の一部分を反転・特定のレイヤーを反転の3つの方法を試してみるよ。 大石ゆかり 画像の一部分を反転することもできるんですか？ 田島悠介 全体を反転するときと部分やレイヤーを反転するときはそれぞれ少し操作が違うけど、どれも簡単にできるよ。実際にやってみようか。   目次 今回は3つの方法をご紹介します。 画像全体を左右反転する 画像の一部を左右反転する 特定のレイヤーだけを左右反転する     画像全体を左右反転する まず、キャンバス全体を左右反転する方法です。 こちらの画像を使います。   上のメニューの「イメージ」から「画像の回転」→「カンバスを左右に反転」を選択してください。   画像が左右反転されます。この作業は「背景レイヤー」のままでも可能です。 画像全体の左右反転はこれだけです。     [PR] Webデザインで挫折しない学習方法を動画で公開中画像の一部を左右反転する 次に、画像の一部を左右反転する方法です。 一番左の親ペンギンだけを右に向かせてみたいと思います。   左のメニューから選択範囲のアイコンを選びます。   左右反転したいところだけを選択します。   選択範囲を作成した状態で、上メニューの「編集」をクリックします。   「変形」→「水平方向に反転」を選択します。   選択していた部分だけが、位置はそのままに反転されました。 この方法も「背景レイヤー」のまますることができます。   田島悠介 一部分だけを反転させる場合はこんな感じだよ。 大石ゆかり 「左右反転」じゃなくて「水平方向に反転」と書かれているんですね。 田島悠介 効果としては同じようになるね。ここではやっていないけれど、「垂直方向に反転」は「上下反転」と一緒だと考えるといいよ。   特定のレイヤーだけを左右反転する 複数のレイヤーに分かれている場合、選択したレイヤーだけを左右反転することも可能です。   このファイルでは背景画像のレイヤー2の上に、人形の周りが透過処理（何も描かれていない状態）のレイヤー1があるという構成になっています。 背景であるレイヤー2の向きは変えずに、このレイヤー1の人形の部分だけを左右反転してみたいと思います。   反転させたいレイヤーを選択していることを確認して、上メニューの「編集」をクリックします。   「変形」から「水平方向に反転」を選択します。   これで背景画像はそのままに、人形のレイヤーだけが左右反転されました。 （※特定のレイヤーを反転する場合、「背景レイヤー」になっているものは左右反転できません。レイヤーを右クリックして「背景からレイヤーへ」を選択する必要があります。） うまくできましたか？   田島悠介 レイヤーだけの反転も、複数の画像を合成する場合に使うことがあるかもしれないね。 大石ゆかり やっぱり元に戻したいなーと思ったときはどうしたらいいですか～？ 田島悠介 そんな時は同じ手順をもう一度やるといいよ。画像全体の場合は「イメージ」→「画像の回転」、一部やレイヤーの場合は対象を選択してから「編集」→「変形」と覚えておこう。 大石ゆかり なるほど！分かりました！   画像の加工をさらにしたい場合は、Photoshopで写真の色を置き換える方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで文字をクレヨン風に加工する方法【初心者向け】

Photoshopでは文字を簡単に加工することができます。そのうち今回は、選択範囲作成機能とブラシツールを使用して、画像や文字をクレヨン風に加工する方法をご紹介します。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   大石ゆかり 田島メンター！！画像内に文字を入れたいんですが、ただ文字を付けるだけじゃなくてクレヨンとかで描いたような感じにしたいんです。 田島悠介 色々方法があるけれど、今回は選択範囲とブラシツールを使ってみよう。 大石ゆかり 文字から選択範囲が作れるんですか～？ 田島悠介 簡単な手順で、文字の形そのままの範囲を作成できるよ。まずはそこからやってみよう。   事前準備 まず、テキストツールを使用して文字を入力します。このファイルでは、白で塗りつぶしたレイヤーの上にテキストのレイヤーを作成しています。   選択範囲を作成する クレヨン風に加工する場所を、選択範囲で指定します。   自動選択を使う場合 テキストを入力したレイヤーを右クリックし、「テキストをラスタライズ」を選択します。   次に左のツールから選択範囲アイコンを右クリックし、「自動選択ツール」を選びます。   上のオプション内の「隣接」にチェックが入っている場合は外します。   ここでキャンバス上の、文字以外の適当な場所でクリックします。   文字以外の全ての部分が選択されました。   「選択範囲」から「選択範囲を反転」を選びます。   これで、文字の部分だけが選択された状態になりました。   文字レイヤーの上に加工用のレイヤーを新規に作成し、それを選択した状態にします。先ほど文字を入力し、ラスタライズしたレイヤーは非表示にします。   このような状態になります。   作業用パスを使う場合 テキストを入力したレイヤー(この方法ではラスタライズしません)を右クリックし、「作業用パスを作成」を選択します。   「パス」のタブを選択し、「作業用パス」レイヤーを右クリックして「選択範囲を作成」を選びます。 さらに「レイヤー」タブをクリックするとレイヤーの画面に戻ります。その後は自動選択を使った時と同様に、文字のレイヤーを非表示にして新規レイヤーを作成してください。 （この方法の場合、後からテキストを編集して選択範囲を作成し直すことができます）   田島悠介 作業用パスを使うとテキストをラスタライズする必要がない上にあとから編集できるので、こっちの方が便利かもしれないね。 大石ゆかり 文字の部分だけ、いい感じに選択できました！ 田島悠介 それではブラシツールを使って実際に塗りつぶしていってみよう。   [PR] Webデザインで挫折しない学習方法を動画で公開中選択範囲内をクレヨン風に加工 作成された範囲内で作業していきます。左のメニューから「ブラシツール」を選択します。   ブラシの種類から「チョーク」を選択します。   文字の形に作成された選択範囲の中をドラッグして塗っていきます。あまり塗りつぶしすぎないようにすると、クレヨン風に仕上がります。 塗りつぶしが終了したら「選択範囲」→「選択を解除」をクリックして完成です。 なお、先ほど白一色にしていた下のレイヤーを写真にした場合はこの画像のようになります。このように、完全に塗りつぶされていない透明の部分には背景の状態が適用されています。   また、画像からでも同様の手順で選択範囲を作成し、クレヨン風に加工することも可能です。   今回の記事は以上です。 ぜひ自分でも試してみてください。   田島悠介 ブラシツールを使うときは、あまり全部塗りつぶしきってしまわない方が雰囲気が出ていいと思うよ。 大石ゆかり 文字だけでなく、図形などにも応用できていいですね。 田島悠介 シェイプや文字とブラシツールを組み合わせるだけでも、こんな風に手描きのイラスト風画像を簡単に作ることができるので色々試してみよう。 大石ゆかり 分かりました。ありがとうございます！   さらにPhotoshopを使いこなしたい場合は、Photoshopで写真をモノクロにする方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

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

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

初心者でも簡単！Photoshopで画像を合成する方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「画像を合成（結合）する方法」です。この方法を覚えると、画像の編集がよりおもしろくなります。Photoshopでは、複数の写真を簡単な手順で合成することができますので、試してみましょう。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。   田島悠介 今回は、画像合成の基本を練習してみよう。 大石ゆかり 田島メンター！！最初は何をしたらいいんでしょうか～？ 田島悠介 まずは合成する画像を確認しよう。極端に大きさが違ったりする場合はある程度揃えないといけないからね。 大石ゆかり なるほど、分かりました！次はどうしましょう？ 田島悠介 用意ができたらさっそく画像の切り取りをしてみようか。最初は選択範囲の作成だよ。   事前準備 まず、切り取りたい部分がある画像と、背景に使いたい画像の2つを用意します。 画像を選ぶときは、各画像の明るさ・大きさなどがある程度似ているものを揃えると編集がしやすくなります。 今回はこの2つの写真を使って基本的な合成をしてみます。     切り取る画像の加工 それでは画像加工を始めてみましょう。 最初に、切り取りたい方の画像を開きます。   選択ツールのアイコンを右クリックし、「クイック選択ツール」を選びます。 シンプルな図形など、対象によっては「自動選択ツール」でも可能ですが、基本的にはクイック選択ツールを使います。   切り取りたい部分に沿ってドラッグし、選択します。 花などの細かい部分は「境界線を調整」から「エッジの検出」内の「スマート半径」にチェックを入れ、対象の部分をドラッグすることで、より正確に選択範囲を作成することができます。   「編集」にある「コピー」を選びます。（もちろんショートカットキーを使ってもOKです）   田島悠介 画像の切り取りはできたかな？ 大石ゆかり 今コピーしたものを次の画像内に貼り付けるんですね。 田島悠介 Photoshop内では複数のファイルを開いて同時に作業できるからね。もうひとつの画像を開いてみよう。   [PR] Webデザインで挫折しない学習方法を動画で公開中背景にする画像へ移動 続いて、コピーした画像を背景の画像に移動させてみましょう。 切り取る画像をそのままにした状態で、次に背景にする画像を新規で開きます。   ここでレイヤーを一つ追加します。 このように貼り付ける用のレイヤーを作成すると、後の編集がとても楽になります。3つ以上の画像を合成するときにも、各画像ごとにレイヤーを分けておいた方が安心です。 たくさんのレイヤーを作成するときは、どんなパーツかがわかるように名前を付けておくと良いでしょう。   追加したレイヤーを選択した状態で「編集」にある「ペースト」を選びます。（ショートカットキーも使えます）   また、この時「特殊ペースト」から「同じ位置にペースト」を選ぶと、元の画像であった位置と同じところに貼り付けることができます。   これが2つの画像を合成した状態です。   「移動ツール」を使うと、貼り付けたものを自由に動かすことができます。 また、前述のようにレイヤーを分けておけば、後でいつでもこのツールで動かすことが可能です。   「編集」になる「変形」を使うことで大きさを変えたり、回転することも可能です。 合成する二つの画像のサイズが違う時などに便利です。これもレイヤーを分けておけばいつでも作業できます。   うまくできましたか？ ぜひ自分が持っている画像でも試してみてください。   田島悠介 透過の部分は下のレイヤーの情報が表示されるので、手前に見せたい画像ほど上のレイヤーに配置するんだ。 大石ゆかり それぞれが別レイヤーだから、加工も別々にできるってことですね！ 田島悠介 切り取る方の画像は、選択範囲内に余白がないように気をつけておくとより自然な合成になるよ。場合によっては「選択範囲」→「選択範囲を変更」→「縮小」なども使ってみよう。 大石ゆかり なるほど、ありがとうございます！   Photoshopで画像を切り抜く方法をまとめた記事もあるので、ぜひ一緒にご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】

Photoshopの使い方を初心者向けに解説した記事です。 画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと簡単に、綺麗に透明（透過）の処理を行うことができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   田島悠介 今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。 大石ゆかり 田島メンター！！透過っていうのは何ですか～？ 田島悠介 レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。 大石ゆかり なるほど、透明な部分ってことですね！   目次 今回の記事では下記の3つの画像を透明（透過）にしていきます。 人物写真の背景を透明にする 背景が一色の画像を透明にする 手描きのイラストの背景を透明にする（線画抽出する）   人物写真の背景を透明にする まずは人物写真を使って、基本的な透過の方法を解説します。 今回はこちらの画像を使用していきます。   まず、画像のレイヤーが「背景」の場合は、通常のレイヤーに変換する必要があります。 レイヤーを右クリックし、「背景からレイヤーへ」を選択します。   左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。   人物の形に沿ってドラッグしていきます。 この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成することができます。   だいたい全体を選択した状態です。髪などの細かい部分が選択できていないので調整していきます。   上メニューから「境界線を調整」を選択し、「表示モード」を「白黒」にします。   「エッジの検出」内の「スマート半径」を選択し、半径の長さを調整します。   髪の修正したい所を塗りつぶすようにドラッグします。   細かい部分が選択された状態になります。   「境界線を調整」ウィンドウを閉じます。これで背景以外の部分が選択された状態になりました。   画像の選択が完了したら、上のメニューの「選択範囲」→「選択範囲を反転」をクリックします。   今度は逆に、人物以外の背景の部分が全て選択された状態になりました。   メニューの「編集」から「消去」を選択します。   先ほど選択されていた部分が消されて「透過」の状態になりました。   下にレイヤーを作成し、それを緑で塗りつぶした状態です。 透過の部分には下のレイヤーの状態が反映されます。 基本的な透過の方法は以上です。   田島悠介 選択範囲を作成して、それ以外の部分を「消去」する方法だよ。消去された部分は透過の状態になるんだ。 大石ゆかり この白とグレーの格子になっているのが透過なんですね。 田島悠介 そうだね。「消去」以外では消しゴムツールで消された部分なんかも透過になるよ。なので背景が一色だったりした場合はもっと簡単な方法があるんだ。 大石ゆかり へー！どんなのですか？   [PR] Webデザインで挫折しない学習方法を動画で公開中背景が一色の画像を透明にする 記号や文字列などのはっきりした画像で、背景が一色の場合はもっと簡単です。   今回はこの画像を例にします。   左のメニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。   上の設定項目の「隣接」にチェックが入っていることを確認します。   背景にしたい部分の中の適当なところをクリックします。   すると、クリックした部分と同じ色の所がその場で透過状態に切り替わります。   また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。   先ほどとは違って、中の「f」の文字内まで透過になっているのがわかります。   下に青色で塗りつぶしたレイヤーがある場合の違いです。特に文字列の背景を透過にしたい時は、「隣接」のチェックを外しておくと便利です。   手描きのイラストの背景を透明にする（線画抽出する） スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。 ここではチャンネルを使用した方法と、クイックマスクを使用した方法のふたつを解説します。   線画を抽出する前の共通の手順です。 スキャンした画像をPhotoshopで開きます。   まず最初に、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。   次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。   「明るさ」の部分を右に移動して画像を明るくすることで細かい汚れを消すことができます。   画像が背景レイヤーになっている場合は、右クリックして「背景からレイヤーへ」を選択します。   チャンネルを使用した方法 レイヤーの一覧が表示されているメニューから「チャンネル」タブを選択します。(「チャンネル」タブが表示されていない場合は上メニューの「ウィンドウ」から「チャンネル」を選択します)   以下のアイコン「チャンネルを選択範囲として読み込む」をクリックします。   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   「レイヤー」タブに戻り、新規レイヤーを作成して元のレイヤー(下のレイヤー)を非表示にします。   線画の色として使用したい色を選びます。今回は黒としています。(カラーのメニューが表示されていない場合は「ウィンドウ」から「カラー」を選択します)   上メニュー「編集」から「塗りつぶし」を選択します。   線画以外の部分が透過の状態になり、線画抽出が完了しました。   クイックマスクモードを使用した方法 線画を抽出する画像を開き、上メニュー「選択範囲」から「すべてを選択」をクリックします。   上メニュー「編集」から「コピー」を選択します。   レイヤーメニューから新規レイヤーを作成し、そのレイヤーを選択した状態にします。元のレイヤー(下のレイヤー)は非表示にします。   左メニューから「クイックマスクモードで編集」をクリックします。   上メニュー「編集」から「ペースト」を選択します。   画面ではこのようになります。   左メニューから先ほどと同じアイコンをクリックします。(今度は「画像描画モードで編集」となっています)   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   先ほどと同じように線画として使用したい色を選択し、上メニュー「編集」から「塗りつぶし」を行います。今回は暗めの赤色にしています。     線画以外の部分が透過の状態になり、線画抽出が完了しました。   線画の色は好きな色に設定することができます。スキャンした際にグレースケールなどで読み込んでいた場合は「イメージ」→「モード」「RGBカラー」などに変更することでカラーでの抽出が可能になります。   いかがでしたか？   田島悠介 最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。 大石ゆかり クイックマスクモードというのは、こういうこともできるんですね。 田島悠介 透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。 大石ゆかり そうですね。ありがとうございます！   背景が透明にできたら、Photoshopで画像の合成にもチャレンジしてみてください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

今さら聞けない！Photoshopで文字を加工する方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「文字を加工する方法」です。この記事を見ながらぜひ使ってみてください。 PhotoShopでは様々な機能を利用してテキスト入力からロゴなどの作成が可能です。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。   大石ゆかり 田島メンター！！入力したテキストにフィルターなどの効果を入れたいんですが、どうしたらいいんですか～？ 田島悠介 テキストレイヤーはそのままではフィルター効果を入れることができないのでラスタライズする必要があるね。でも、レイヤースタイルや作業用パスを使えばテキストの情報を保持したまま加工ができるよ。 大石ゆかり レイヤースタイルと作業用パスですか？どこから選べばいいんでしょう。 田島悠介 まずはレイヤースタイルからやってみようか。これが一番簡単な方法になると思うよ。   目次 本記事では3つの項目に分けてご紹介します。 文字の入力と調整 レイヤースタイルを利用する方法 作業用パスと選択範囲を利用する方法     文字の入力と調整 まずは簡単な文字の入力からしてみます。 Photoshopで文字を入力します。 ツールバーのテキストツールアイコンを右クリックします。今回は「横書き文字ツール」を使用します。   テキストを入力します。   フォントの種類、大きさなどは上のメニューから調整できます。   メニューの「編集」から「自由変形」を選択し、大きさを調整します。   また、このとき文字は回転することもできます。 文字の入力と調整はここまでです。     [PR] Webデザインで挫折しない学習方法を動画で公開中レイヤースタイルを利用する方法 次に、「レイヤースタイル」という機能を使うことによって、少ない手順ですぐに文字の加工ができます。 レイヤーウィンドウ下より「レイヤースタイルを追加」アイコンをクリックします。   「レイヤー効果」を選択します。   「スタイル」内のチェックボックスから利用したい効果を選びます。（複数選択可能）   「OK」を押すと適用されます。 これでレイヤースタイルが使えました。   田島悠介 レイヤースタイルを使った方法だよ。 大石ゆかり こんなメニューがあったんですね。すぐできるし使いやすいです！ 田島悠介 次は作業用パスから選択範囲を作成して、その中に効果を入れてみよう。 大石ゆかり はい！やってみます！   作業用パスと選択範囲を利用する方法 最後に、文字の部分を選択範囲として抽出し、自由に加工する方法です。 テキストを入力したレイヤーを右クリックして「作業用パスを作成」を選択します。   このように表示されます。   次に、レイヤーウィンドウで「パス」のタブをクリックします。   「作業用パス」を右クリックして「選択範囲を作成」を選び、OKを押します。   文字の部分が選択されます。   「レイヤー」タブに戻り、新規レイヤーを追加してテキストのレイヤーを非表示にします。 さらにここからは、ペンツールを使う方法と画像を使う方法に分けて紹介します。   1.ペンツールを使う方法 ツールボックスより「ブラシツール」を選択します。   ブラシサイズや種類などを選択します。 今回は「スポンジブラシの投影」を選び、不透明度を70%としています。   選択範囲内をドラッグして塗っていきます。（※あまり塗りつぶしてしまわないようにします）   スタンプで押したような、少しかすれた文字になります。     2.画像を使う方法 テクスチャ用の画像を別ファイルで開き、「すべて選択」してから「コピー」します。   文字レイヤーの上にテクスチャ画像用のレイヤーを追加し、先ほどコピーした画像をペーストします。（背景画像が一時隠れますが問題ありません）   先ほどと同様に、作業用パスから選択範囲を作成します。   「選択範囲を反転」を選択します。文字以外の部分が選択された形になります。   メニューの「編集」から「消去」を選ぶと、文字の部分にテクスチャ画像が反映されます。 これで完了です。   田島悠介 パスと選択範囲を使う方法はこんな感じだね。 大石ゆかり レイヤースタイルより少しだけ複雑ですね。 田島悠介 そうだね。その代わり範囲内の加工は自分の好きな画像を使ったり、ブラシツールで描画できたりするので自由度は高くなるよ。仕上がりのイメージに合わせて使い分けてみよう。 大石ゆかり 分かりました。ありがとうございます！   かなり基礎的な内容ですが、いかがでしたでしょうか？ Photoshopで画像を切り抜く方法の記事も公開しているので、初心者の方はぜひご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

プログラミング講師
募集中

詳しくはこちら

WEEKLY RANKING

TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopで画像を角丸にする方法【初心者向け】